JAVA UI框架
应用的Ability在屏幕上将显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容。应用中所有的用户界面元素都是由Component和ComponentContainer对象构成。Component是绘制在屏幕上的一个对象,用户能与之交互。ComponentContainer是一个用于容纳其他Component和ComponentContainer对象的容器。
Java UI框架提供了一部分Component和ComponentContainer的具体子类,即创建用户界面(UI)的各类组件,包括一些常用的组件(比如:文本、按钮、图片、列表等)和常用的布局(比如:DirectionalLayout和DependentLayout)。用户可通过组件进行交互操作,并获得响应。所有的UI操作都应该在主线程进行设置。
如上图所示,JAVA UI组件结构主要包含Component和ComponentContainer。
- Component:提供内容显示,是界面中所有组件的基类,开发者可以给Component设置事件处理回调来创建一个可交互的组件。Java
UI框架提供了一些常用的界面元素,也可称之为组件,组件一般直接继承Component或它的子类,如Text、Image等。 - ComponentContainer:作为容器容纳Component或ComponentContainer对象,并对它们进行布局。Java UI框架提供了一些标准布局功能的容器,它们继承自ComponentContainer,一般以“Layout”结尾,如DirectionalLayout、DependentLayout等。
每种布局都根据自身特点提供LayoutConfig供子Component设定布局属性和参数,通过指定布局属性可以对子Component在布局中的显示效果进行约束。例如:“width”、“height”是最基本的布局属性,它们指定了组件的大小。
利用JAVA代码实现一个简单的布局
首先打开DevEco Studio创建一个新项目,这里采用wearable的java空模版,填写好项目名进入项目。.
先观察项目的文件树,其中entry是程序的入口,我们进入src目录,打开main文件夹下的Java文件夹,因为此处我们是利用Java代码去实现一个UI界面,因此只要在这里面进行代码编写。
可以看到Java的目录下存在着两个.java文件和一个slice文件夹,它们都是由程序自动创建的,其中MainAbility.java是页面信息,其中一般包含的是AbilitySlice的进入设置,也就是设置路由(setMainRoute(MainAbilitySlice.class.getName()))。clickAdd.java是跟项目名同名的一个文件,我的理解是初始化。因此我们主要的代码编写是在MainAbilitySlice.java,这是页面信息的布局文件。先看看MainAbilitySlice.java里的源码:
package com.example.csdndemo.slice;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.DirectionalLayout.LayoutConfig;
import ohos.agp.components.Text;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;
public class MainAbilitySlice extends AbilitySlice {
// 声明一个布局,布局方式是按照水平或者垂直方向排布,能够方便地对齐布局内的组件
// 也就是一行或者一列进行布局的布局方式
private DirectionalLayout myLayout = new DirectionalLayout(this);
@Override
public void onStart(Intent intent) {
// 父类的onStart()方法
super.onStart(intent);
// 布局大小匹配父类,也就是与主窗口大小匹配
LayoutConfig config = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_