文章目录
零、本讲学习目标
- 掌握Java UI的总体架构及常用布局组件的使用
- 了解JS UI的总体架构及基本使用方法；
- 了解进行用户界面设计的注意事项。
一、Java UI开发
（一）Java UI概述
1、用户界面是如何构建的？
- 应用的Ability在屏幕上将显示一个用户界面，该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由组件和布局构成。
组件是绘制在屏幕上的一个对象，用户能与之交互。布局是一个用于容纳其他组件和布局对象的容器。
2、组件树
（1）Component：组件
提供内容显示，是界面中所有组件的基类，开发者可以给Component设置事件处理回调来创建一个可交互的组件。组件一般直接继承Component或它的子类，如Text、Image等。
（2）ComponentContainer：布局容器
作为容器容纳Component或ComponentContainer对象，并对它们进行布局。
（3）LayoutConfig - 布局配置
每种布局都根据自身特点提供LayoutConfig供子Component设定布局属性和参数，通过指定布局属性可以对子Component在布局中的显示效果进行约束。布局把Component和ComponentContainer以树状的层级结构进行组织，这样的一个布局就称为组件树。
3、使用 XML 创建布局
4、使用 Java 创建布局
- 利用Java代码创建布局
public class ExampleAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
…
// 声明布局
DirectionalLayout directionalLayout = new DirectionalLayout(getContext());
// 设置布局大小
directionalLayout.setWidth(…);
// 设置布局属性
directionalLayout.setOrientation(…);
// 添加一个Button
Button button = new Button(getContext());
// 为组件添加对应布局的布局属性
DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(…);
button.setLayoutConfig(layoutConfig);
…
// 在组件中增加对点击事件的检测
button.setClickedListener(…);
directionalLayout.addComponent(button);
// 将布局作为根布局添加到视图树中
super.setUIContent(directionalLayout);
}
}
- 预览界面效果