HarmonyOS-Java 二、创建布局文件

在这 介绍两种添加布局的方式

1. xml 中创建
2. java 代码中创建

首先介绍第一种

在 包名下 右键 New --> Ability -->Empty Page Ability(java) 创建一个Ability
DevEco-Studio 会自动帮我们创建一个页面 和 xml 文件

81625501319_.pic_hd.jpg

91625501475_.pic.jpg

下面图片简单说明一下

101625501781_.pic_hd.jpg

我现在 可以在 ability_first.xml 文件中编辑我们的页面了
系统生成的文件里中 会自带一个 Text 组件 简单介绍一下

DirectionalLayout 介绍

Text 是在页面中显示文本的组件
id 属性 : ohos:id="$+id:text_helloworld"

宽度 : ohos:width=“match_content”
高度 : ohos:height=“match_content”
match_content 是内容的大小
match_parent 是父控件的大小
组件位置属性 : ohos:layout_alignment=“horizontal_center” 标识组件水平居中 ;
背景设置属性 : ohos:background_element="$graphic:background_ability_main" , 可以设置一个颜色值 ;
文本设置 : ohos:text=“你好，世界” , 设置组件显示的文本为 你好，世界 ;
文本文字大小设置 : ohos:text_size=“40vp” vp用于 文字大小
文本颜色设置 : ohos:text_color="#FF0000" , 红色 ;
vp 文字使用 px 像素值 fp 组件使用
xml 中使用暂时 简单介绍这么多 后续遇到其他在介绍

111625502901_.pic.jpg

第一种 在Java 代码中 创建 Text

使用上边的方法在创建一个 SecondAbility
在 SecondAbilitySlice 文件中 我们先删除 xml 布局

super.setUIContent(ResourceTable.Layout_ability_second);//先删掉用代码创建一个

上代码 看注释 DependentLayout

  @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        //声明一个布局
        DependentLayout myLayout = new DependentLayout(this);
        //给布局添加一个 宽高
        myLayout.setHeight(MATCH_PARENT);
        myLayout.setWidth(MATCH_PARENT);
        //设置背景
        ShapeElement shapeElement = new ShapeElement();
        shapeElement.setRgbColor(new RgbColor(255,255,255));
        myLayout.setBackground(shapeElement);

        //创建个 文本组件
        Text text = new Text(this);
        text.setText("这是我用代码创建的页面");
        text.setTextColor(Color.BLACK); // 字体颜色
        text.setTextSize(20, Text.TextSizeType.FP);  // 字体大小 单位

        //布局设置
        DependentLayout.LayoutConfig layoutConfig = new DependentLayout.LayoutConfig(MATCH_CONTENT, MATCH_CONTENT);
        layoutConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
        text.setLayoutConfig(layoutConfig);
        //添加到布局
        myLayout.addComponent(text);
        //布局在屏幕中展示出来
        super.setUIContent(myLayout);
    }

展示结果

141625504331_.pic.jpg

上一篇: HarmonyOS-Java 一、创建应用
下一篇: HarmonyOS-Java 三、config.json详解