【鸿蒙】HarMonyOS的UI组件学习一_鸿蒙background_element

打开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组件学习二之拨号界面