鸿蒙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中,变量的类型是自动推断的。 在下面,我们创建两个变量并将