鸿蒙OS利用JAVA编写的布局实践练习

鸿蒙OS利用JAVA编写的布局实践练习

目录

JAVA UI框架

利用JAVA代码实现一个简单的布局

利用xml实现上述布局

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_PARENT);

// 将布局设置到当前布局方式里

myLayout.setLayoutConfig(config);

// 用于设置颜色信息，这里的ShapeElement类里有一些方法还是很好用的

ShapeElement element = new ShapeElement();

element.setRgbColor(new RgbColor(255, 255, 255));

// 将背景颜色添加到布局里

myLayout.setBackground(element);

// 创建一个文本控件

Text text = new Text(this);

// 同上，匹配父布局

text.setLayoutConfig(config);

// 设置要显示的文本内容

text.setText("Hello World");

// 设置文字颜色

text.setTextColor(new Color(0xFF000000));

// 设置文字尺寸

text.setTextSize(50);

// 设置对齐方式为居中

text.setTextAlignment(TextAlignment.CENTER);

// 将文本控件添加到布局里，这一个千万别忘，不然看不到控件

myLayout.addComponent(text);

super.setUIContent(myLayout);

}

@Override

public void onActive() {

super.onActive();

}

@Override

public void onForeground(Intent intent) {

super.onForeground(intent);

}

}

??在源码的地方我都写了注释，应该很容易看懂，其实现的功能就是显示一个白底黑字的Hello World的文本：

??然后我们来修改一下上面的代码，做一个单击按钮计数的一个UI。首先把onStart()里中间的内容全部清空，只留下父类的那两行代码，然后为了代码的可读性，在外面去写页面布局，代码如图。

@Override

public void onStart(Intent intent) {

super.onStart(intent);

ComponentContainer container = getContainer();

super.setUIContent(myLayout);

}

??那么就去写这个getContainer()函数了，很简单，就实现了两个控件的显示和监听功能，代码的注释都在上面了。

private ComponentContainer getContainer(){

// 创建一个DirectionalLayout 布局，我的想法就是一列进行排布

DirectionalLayout directionalLayout = new DirectionalLayout(this);

// 设置布局宽度匹配父布局

directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);

// 设置布局高度匹配父布局

directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);

// 设置布局方向为纵向，也就是一列

directionalLayout.setOrientation(Component.VERTICAL);

// 设置内边距为30px

directionalLayout.setPadding(30, 30, 30, 30);

// 创建一个文本控件

Text text = new Text(this);

// 设置文本控件的初始文本值，这个需要在外面声明一下count = 0进行初始显示

text.setText("Count:" + count);

// 设置文本大小为50px

text.setTextSize(50);

// 对text布局进行配置，整体宽度和高度与内容匹配

DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(

LayoutConfig.MATCH_CONTENT,

LayoutConfig.MATCH_CONTENT

);

// 设置对齐方式为水平居中

layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;

// 将其应用到text布局里

text.setLayoutConfig(layoutConfig);

// 将text控件添加到布局中

directionalLayout.addComponent(text);

// 创建一个按钮控件

Button btn = new Button(this);

// 设置button的文本内容

btn.setText("Click me");

// 设置文本的大小

btn.setTextSize(50);

// 设置文本的颜色

btn.setTextColor(Color.WHITE);

// 设置内边距为10px

btn.setPadding(10, 10, 10, 10);

// 设置外边距，这里需要用layoutConfig来设置

layoutConfig.setMargins(0, 50, 0, 0);

// 将配置信息应用到button上

btn.setLayoutConfig(layoutConfig);

// 设置颜色和圆角，修饰按钮

ShapeElement element = new ShapeElement();

element.setRgbColor(new RgbColor(0, 255, 0));

// 将圆角半径设置为20px

element.setCornerRadius(20);

// 将其应用到button上

btn.setBackground(element);

// 监听按钮的事件

btn.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

// 如果监听到了，数自增

count++;

// 更新文本内容

text.setText("Count:" + count);

}

});

// 将按钮添加到布局里

directionalLayout.addComponent(btn);

// 返回布局

return directionalLayout;

}

其结果为：

点击四次后的界面：

利用xml实现上述布局

??在src目录下有资源目录，我们需要在resources目录里的base目录下新建一个layout文件夹用于存放布局的xml文件，如图：

??打开xml目录进行布局编写就可以了，我直接附上代码：

ohos:width="match_parent"

ohos:height="match_parent"

ohos:orientation="vertical">

ohos:id="$+id:text"

ohos:width="match_content"

ohos:height="match_content"

ohos:padding="30"

ohos:text="Count:0"

ohos:text_size="50"

ohos:layout_alignment="horizontal_center"

/>

ohos:id="$+id:btn"

ohos:width="match_content"

ohos:height="match_content"

ohos:padding="20"

ohos:top_margin="20"

ohos:text="Click me"

ohos:text_color="#fff"

ohos:layout_alignment="horizontal_center"

/>

??这里的ohos:是前缀，就是每个属性的爹，这样认为应该不算错吧。然后设置的话应该都能很容易看懂，就没写注释了。总的来看，这里布局比上面的代码要简单很多，而且也容易看清楚和调试。然后对于点击事件什么的就需要在MainAbilitySlice.java文件里设置了：

@Override

public void onStart(Intent intent) {

super.onStart(intent);

// 方式一实现布局

// ComponentContainer container = getContainer();

// 方式二实现布局

super.setUIContent(ResourceTable.Layout_main_layout);

// Text设置

Text text = (Text) findComponentById(ResourceTable.Id_text);

// Button设置

Button btn = (Button) findComponentById(ResourceTable.Id_btn);

// 以下代码参考前面案例的注释即可

ShapeElement element = new ShapeElement();

element.setRgbColor(new RgbColor(0, 255, 0));

element.setCornerRadius(20);

btn.setBackground(element);

btn.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

count++;

text.setText("Count:" + count);

}

});

}

??需要注意的是，这里需要通过findComponentById()函数来找到对应xml文件里的空间，是通过Id来确认的。但是由于编译器不是很完善，因此写完xml文件后需要先编译一下，才能在这里出现关于id的提示信息，而且需要在findComponentById()函数前面加上控件类型转换：

然后就可以运行到同样的结果了。

鸿蒙OS利用JAVA编写的布局实践练习相关教程

JAVA 基础知识点复习(十七)线程同步关键字Synchronized

JAVA 基础知识点复习(十七)线程同步关键字Synchronized 大纲 线程安全 线程同步 wait和sleep的区别 生产者消费者案例 synchronized 虚假唤醒 生产者消费者案例 Lock 局部变量 中的基本数据类型(8种)永远是线程安全的。 局部变量 中的对象类型只要不会被其他

工作5年的Java程序员告诉你，为什么要阅读底层源码

工作5年的Java程序员告诉你，为什么要阅读底层源码 最近一位5年开发经验的群友与我聊天。 他说：最近慢慢的尝试去看spring的源码，学习spring，以前都只是会用就行了，但是越是到后面，发现只懂怎么用还不够，在面试的时候经常被问到一些开源框架的源码问题，

硬币问题(JAVA)

硬币问题(JAVA) 解法如下: package day03;import java.util.Arrays;public class 硬币问题 { public static void main(String[] args) { int[] money = {1,5,10,50,100,500}; int[] coins = {3,2,1,3,0,2}; int AllMoney = 620; int minCoin = getMinCoin(mon

JavaScript 10分钟入门

JavaScript 10分钟入门 简介 JavaScript是一门面向对象的动态语言，他一般用来处理以下任务： 1、修饰网页 生成HTML和CSS 生成动态HTML内容 生成一些特效 2、提供用户交互接口 生成用户交互组件 验证用户输入 自动填充表单 3、能够读取本地或者远程数据的前端

java.util.concurrent.LinkedBlockingQueue多线程执行队列任务

java.util.concurrent.LinkedBlockingQueue多线程执行队列任务 实现效果： 代码实现： /* * @author 在下令狐 * @date 2020/10/27 */public class User { private String name; private int age; public String getName() { return name; } public void setNa

Java面试题——Dubbo

目录 (视频教程推荐：java课程) 1.Dubbo 面试题 2.Dubbo 面试题答案解析 1、为什么要用 Dubbo？ 2、Dubbo 的整体架构设计有哪些分层? 3、默认使用的是什么通信框架，还有别的选择吗? 4、服务调用是阻塞的吗？ 5、一般使用什么注册中心？还有别的选择吗？ 6

java实现自定义类加载器

各类加载器虽然以父子相称，但是没有继承关系 (视频教程推荐：java课程) 点入ClassLoader的源码查看样例： * blockquotepre * class NetworkClassLoader extends ClassLoader { * String host; * int port; * * public Class findClass(String name) { * b

Web Software Development课程: JavaScript笔记

Web Software Development课程: JavaScript笔记 基本语法 变量有两种定义方式。使用定义变量会let引入一个块范围变量，其值可以更改。使用定义常量(即，其值无法更改的变量)const。在JavaScript中，变量的类型是自动推断的。 在下面，我们创建两个变量并将