华为鸿蒙HarmonyOS–通过XML编写一个页面

效果图:

此图像的alt属性为空;文件名为image-18.png

具体步骤:

[$]

      在“Project” 窗口,打开“entry > src > main > resources > base” ,右键点击“base” 文件夹,选
择“New > Directory” ,命名为“layout”

右键点击“layout” 文件夹,选择“New > Layont Resource File” ,命名为“main_layout” ,然后点击Finish

这时候就会在“layout” 文件夹下可以看到新增了“main_layout.xml” 文件

打开“main_layout.xml” 文件,添加一个文本和一个按钮,示例代码如下:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:orientation="vertical">

    <!--
     ohos:width="match_content" 表示组件的宽度为内容的宽度
     ohos:height="match_content" 表示组件的高度为内容的高度
     ohos:text="蹦下嘎啦嘎" 表示Text文本组件所显示的内容
     ohos:text_size="19fp" 表示文字的大小
     ohos:layout_alignment="center" 表示布局的对其方式为水平垂直居中
    -->
    <Text
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="蹦下嘎啦嘎"
            ohos:text_size="19fp"
            ohos:layout_alignment="center"
            ></Text>

    <!--
     ohos:id="$+id:button" 表示该组件的唯一id,主要用于后续通过代码的方式来操作该组件
     ohos:top_margin="20vp" 表示该组件距离顶部的位置
    -->
    <Button
            ohos:id="$+id:button"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="跳转"
            ohos:text_size="20fp"
            ohos:top_margin="20vp"
            ohos:layout_alignment="center"
            ></Button>

</DirectionalLayout>

然后打开 MainAbilitySlice.java 文件,将UI的内容改为

super.setUIContent(ResourceTable.Layout_main_layout);

全部MainAbilitySlice.java文件如下:

package com.example.helloword.slice;

import com.example.helloword.ResourceTable;
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 {


    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        // 加载XML布局
        super.setUIContent(ResourceTable.Layout_main_layout);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

然后运行该项目,效果图如下:

[/$]

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注