从零开始看鸿蒙布局文件

最新推荐文章于 2024-08-11 21:37:56 发布

舒小羽

最新推荐文章于 2024-08-11 21:37:56 发布

阅读量1.2k

点赞数 2

分类专栏： # HUAWEI DevEco Studio 文章标签： app

本文链接：https://blog.csdn.net/qq_43680027/article/details/114982866

版权

HUAWEI DevEco Studio 专栏收录该内容

14 篇文章 9 订阅

订阅专栏

下面是DS的一个最普通的布局
在这里插入图片描述

<?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">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:app_name"
        ohos:text_color="$color:white"
        ohos:text_size="50"
        />

</DirectionalLayout>

很多人第一眼看见就会觉得，这个是什么鬼东西啊，怎么跟AS的很不一样啊！！一个都看不懂是怎么回事啊~不要急，慢慢的一行行来看！
首先，DirectionalLayout是定向布局，创建xml的时候默认的是DirectionalLayout布局，当然还有其他的布局。
DS布局类组件如下：
DirectionalLayout（定向布局，可以理解为AS的线性布局）
DependentLayout（依赖布局，可以理解为AS的相对布局）
PositionLayout（位置布局）
TableLayout（表格布局）
AdaptiveBoxLayout（自适应盒式布局）
StackLayout（堆叠布局）
在这里插入图片描述
那ohos是啥呢？其实，可以把它理解为AS布局文件中的android。
那接下来的这些就是DirectionalLayout布局的长、宽、方向了，都跟AS是一样的。

	ohos:height="match_parent"= 
    ohos:width="match_parent"
    ohos:orientation="vertical"

值得注意的是
在DS中，match_parent表示和父组件一样的长度（长度充满父容器），也就是AS里的match_parent。
但是，在DS中，match_content表示和自身内容一样的长度（长度包裹内容），可以当作AS里的wrap_content。
接下来，可以看见Text，Text用于文本的展示。
DS显示类组件如下：
Text（用于文本显示）、Image（用于图像显示）、Clock、TickTimer、ProgressBar
DS还有交互类的组件：
TextField（文本输入框）、Button（按钮，提供了点击响应功能）、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider（提供了进度选择功能等）、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider
然后，会发现DS里Text内的id属性、background_element属性、text属性和text_color属性的值跟AS的不太一样，都带有== $ 这个符号，其实，可以把 $ 当作AS的** @ **， : ==可以看成AS的** / **。
在这里插入图片描述
在AS中，表示创建该控件的id是使用
android:id="@+id/名称"

android:id="@+id/text_helloworld"

在DS中，表示创建该控件的id则使用
ohos:id="$+id:名称"

ohos:id="$+id:text_helloworld"

这样就明白了吧~
接下来这句话是

ohos:background_element="$graphic:background_ability_main"

表示，background_element控件背景的值是引用graphic文件夹下的background_ability_main.xml
在这里插入图片描述

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">

    <solid
        ohos:color="#FFBB86FC"/>
</shape>

这是绘制了一个==#FFBB86FC颜色的rectangle==矩形背景
回到ability_main.xml

ohos:layout_alignment="horizontal_center"

这是表示该控件设置在相对于父控件水平居中的位置

ohos:text_color="$color:white"

这是表示，字体颜色引用了color.json的white
在这里插入图片描述

ohos:text_size="50"

这句话表示字体大小为50，单位为px，px可省略
也可以写50fp，但fp不可省略
值得注意的是，50与50fp所表示的大小并不一样！！！
在DS中，fp（font-size pixels）表示字体像素（在表示文字大小时使用），vp（virtual pixels）表示虚拟像素（在表示尺寸大小时使用），可以把fp当成AS的sp，vp当成AS的dp，px当然都是一样的了
值得一提的是，可以发现color和size前都带有text，这表示，text_color与text_size都是Text组件独有的属性
在这里插入图片描述
好啦，就差不多把xml布局文件学会啦
最后，来做一个DS布局文件和AS布局文件的总的对比吧

附：鸿蒙中那些简单的控件请参考本人的鸿蒙基础控件、鸿蒙进阶控件文章
本文完整项目代码可以去本人的资源中下载~