鸿蒙HarMonyOS的UI组件学习一
Posted 笔触狂放
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鸿蒙HarMonyOS的UI组件学习一相关的知识，希望对你有一定的参考价值。
打开DevEco studio，选择java语言新建项目
打开Layout布局文件夹，编辑布局文件
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#ffffff">
<Image
ohos:id="$+id:image"
ohos:height="80fp"
ohos:width="80fp"
ohos:scale_mode="stretch"
ohos:image_src="$media:hw"
ohos:center_in_parent="true"/>
<Text
ohos:id="$+id:text"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="$string:mainability_HelloWorld"
ohos:text_color="#ff0000"
ohos:below="$id:image"
ohos:text_size="32fp"
ohos:center_in_parent="true"/>
<Button
ohos:id="$+id:button"
ohos:width="match_content"
ohos:height="match_content"
ohos:text="Next"
ohos:text_size="19fp"
ohos:text_color="#FFFFFF"
ohos:top_padding="8vp"
ohos:bottom_padding="8vp"
ohos:right_padding="70vp"
ohos:left_padding="70vp"
ohos:center_in_parent="true"
ohos:below="$id:text"
ohos:margin="10vp"
ohos:background_element="$graphic:background_button"
/>
</DependentLayout>更改按钮的样式，将按钮的形状改为矩形，设置圆角以及背景颜色
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<corners
ohos:radius="10"
/>
<solid
ohos:color="#ff0000"/>
</shape>界面效果为：
在MainAbilitySilce.java类中获得Button控件的对象，添加点击事件，完成页面跳转。
package com.example.hm_phone_java.slice;
import com.example.hm_phone_java.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
//根据按钮的id将布局中的控件获得出来
Button btn= (Button) this.findComponentById(ResourceTable.Id_button);
//给按钮添加点击事件，使用匿名内部类方式跳转页面
btn.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
//跳转页面
present(new ThreeAbilitySlice(),new Intent());
}
});
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
通过触发“next”按钮的点击时间跳转至ThreeAbilitySlice.java界面，在ThreeAbilitySlice界面上加载布局文件，ThreeAbilitySlice界面的布局代码如下:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<!--DirectionalLayout:线性布局
DependentLayout：相对布局
PositionLayout:绝对布局
TableLayout：表格布局-->
<DirectionalLayout
ohos:height="1170px"
ohos:width="match_parent"
ohos:alignment="center"
ohos:background_element="#ffff00"
ohos:orientation="vertical">
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_button"
ohos:bottom_padding="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:text="$string:btnName"
ohos:text_color="#FFFFFF"
ohos:text_size="60px"
ohos:top_padding="10px"/>
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_button1"
ohos:bottom_padding="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:text="$string:btnName"
ohos:text_color="#FFFFFF"
ohos:text_size="80px"
ohos:top_margin="10px"
ohos:top_padding="10px"/>
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_button2"
ohos:bottom_padding="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:text="$string:btnName"
ohos:text_color="#FFFFFF"
ohos:text_size="100px"
ohos:top_margin="10px"
ohos:top_padding="10px"/>
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_button3"
ohos:bottom_padding="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:text="$string:btnName"
ohos:text_color="#FFFFFF"
ohos:text_size="120px"
ohos:top_margin="10px"
ohos:top_padding="10px"/>
</DirectionalLayout>
<DependentLayout
ohos:height="1170px"
ohos:width="match_parent"
ohos:background_element="#00ffff">
<Button
ohos:id="$+id:btn1"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_button"
ohos:bottom_padding="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:text="$string:btnName"
ohos:center_in_parent="true"
ohos:text_color="#FFFFFF"
ohos:text_size="60px"
ohos:top_padding="10px"/>
<Button
ohos:id="$+id:btn2"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="$string:btnName"
ohos:above="$id:btn1"
ohos:align_left="$id:btn1"
ohos:bottom_margin="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:top_padding="10px"
ohos:bottom_padding="10px"
ohos:text_color="#FFFFFF"
ohos:text_size="60px"
ohos:background_element="$graphic:background_button4"/>
<Button
ohos:id="$+id:btn3"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="$string:btnName"
ohos:left_of="$id:btn1"
ohos:align_top="$id:btn1"
ohos:right_margin="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:top_padding="10px"
ohos:bottom_padding="10px"
ohos:text_color="#FFFFFF"
ohos:text_size="60px"
ohos:background_element="$graphic:background_button1"/>
<Button
ohos:id="$+id:btn4"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="$string:btnName"
ohos:below="$id:btn1"
ohos:align_left="$id:btn1"
ohos:top_margin="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:top_padding="10px"
ohos:bottom_padding="10px"
ohos:text_color="#FFFFFF"
ohos:text_size="60px"
ohos:background_element="$graphic:background_button2"/>
<Button
ohos:id="$+id:btn5"
ohos:height="match_content"
ohos:width="match_content"
ohos:text="$string:btnName"
ohos:right_of="$id:btn1"
ohos:align_top="$id:btn1"
ohos:left_margin="10px"
ohos:left_padding="50px"
ohos:right_padding="50px"
ohos:top_padding="10px"
ohos:bottom_padding="10px"
ohos:text_color="#FFFFFF"
ohos:text_size="60px"
ohos:background_element="$graphic:background_button3"/>
</DependentLayout>
</DirectionalLayout>界面效果如下:
该界面整体使用DirectionalLayout线性布局，方向为垂直摆放，里面分为两部分，上部分使用DirectionalLayout线性布局，内部组件进行居中对齐显示，下半部分使用DependentLayout相对布局摆放控件，使按钮根据中心按钮的相对位置进行摆放。
package com.example.hm_phone_java.slice;
import com.example.hm_phone_java.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.element.ShapeElement;
public class ThreeAbilitySlice extends AbilitySlice {
private final RgbColor[] colors={
new RgbColor(255,0,0),
new RgbColor(0,255,0),
new RgbColor(0,0,255),
new RgbColor(255,255,0),
new RgbColor(255,0,255),
};
private int num=0;
@Override
protected void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_three);
Button btn1= (Button) this.findComponentById(ResourceTable.Id_btn1);
btn1.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
ShapeElement se=new ShapeElement();
se.setRgbColor(colors[++num%colors.length]);
btn1.setBackground(se);
}
});
}
}
在java代码中对下半部分的中心的按钮获得对象，并实现该按钮的点击事件，每点击该按钮一次，使它的背景颜色发生改变，进行循环的改变五种颜色。
点击Tool开启华为模拟器，在华为开发者网站上完成实名登录，
同意允许协议
接下来你会看到这个页面，说明可以使用华为模拟器运行了
同时，DevEco Studio上会显示模拟器选择界面，
开启华为P40模拟器，将项目运行即可。
以上是关于鸿蒙HarMonyOS的UI组件学习一的主要内容，如果未能解决你的问题，请参考以下文章
HarmonyOS鸿蒙学习笔记Navigator组件实现页面路由跳转