color_cyan_element
<?xml version="1.0" encoding="utf-8" ?><shape xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:shape=“rectangle”>
多设备预览(deviceType设置多个设备时)
“deviceType”: [
“tablet”,“phone”
],
3.1 垂直排列
效果图
代码文件
布局文件
<?xml version="1.0" encoding="utf-8"?><DirectionalLayout
xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:width=“match_parent”
ohos:height=“match_content”
ohos:orientation=“vertical”>
<Button
ohos:width=“33vp”
ohos:height=“20vp”
ohos:bottom_margin=“3vp”
ohos:left_margin=“13vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:text=“Button 1”/>
<Button
ohos:width=“33vp”
ohos:height=“20vp”
ohos:bottom_margin=“3vp”
ohos:left_margin=“13vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:text=“Button 2”/>
<Button
ohos:width=“33vp”
ohos:height=“20vp”
ohos:bottom_margin=“3vp”
ohos:left_margin=“13vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:text=“Button 3”/>
color_cyan_element.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:shape=“rectangle”>
<solid
ohos:color=“#00FFFD”/>
3.2 水平排列
效果图
代码
布局文件
<?xml version="1.0" encoding="utf-8"?><DirectionalLayout
xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:width=“match_parent”
ohos:height=“match_content”
ohos:orientation=“horizontal”>
<Button
ohos:width=“33vp”
ohos:height=“20vp”
ohos:left_margin=“13vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:text=“Button 1”/>
<Button
ohos:width=“33vp”
ohos:height=“20vp”
ohos:left_margin=“13vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:text=“Button 2”/>
<Button
ohos:width=“33vp”
ohos:height=“20vp”
ohos:left_margin=“13vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:text=“Button 3”/>
color_cyan_element.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:shape=“rectangle”>
<solid
ohos:color=“#00FFFD”/>
4.1 对齐方式属性表
| 参数 | 作用 | 可搭配排列方式 |
| :-: | :-: | :-: |
| left | 左对齐 | 垂直排列 |
| top | 顶部对齐 | 水平排列 |
| right | 右对齐 | 垂直排列 |
| bottom | 底部对齐 | 水平排列 |
| horizontal_center | 水平方向居中 | 垂直排列 |
| vertical_center | 垂直方向居中 | 水平排列 |
| center | 垂直与水平方向都居中 | 水平/垂直排列 |
4.2 实例
效果图
布局文件示例代码
<?xml version="1.0" encoding="utf-8"?><DirectionalLayout
xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:width=“match_parent”
ohos:height=“60vp”>
<Button
ohos:width=“50vp”
ohos:height=“20vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:layout_alignment=“left”
ohos:text=“Button 1”/>
<Button
ohos:width=“50vp”
ohos:height=“20vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:layout_alignment=“horizontal_center”
ohos:text=“Button 2”/>
<Button
ohos:width=“50vp”
ohos:height=“20vp”
ohos:background_element=“$graphic:color_cyan_element”
ohos:layout_alignment=“right”
ohos:text=“Button 3”/>
color_cyan_element.xml:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos=“http://schemas.huawei.com/res/ohos”
ohos:shape=“rectangle”>
<solid
ohos:color=“#00FFFD”/>
5.1 说明
-
权重(weight)就是按比例来分配组件占用父组件的大小
-
父布局可分配宽度=父布局宽度-所有子组件width之和;
-
组件宽度=组件weight/所有组件weight之和*父布局可分配宽度;
5.2 实例
学习分享
①「Android面试真题解析大全」PDF完整高清版+②「Android面试知识体系」学习思维导图压缩包
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
-
父布局可分配宽度=父布局宽度-所有子组件width之和;
-
组件宽度=组件weight/所有组件weight之和*父布局可分配宽度;
5.2 实例
学习分享
①「Android面试真题解析大全」PDF完整高清版+②「Android面试知识体系」学习思维导图压缩包
[外链图片转存中…(img-bhT38YVJ-1715435828160)]
[外链图片转存中…(img-pvdcWsAI-1715435828161)]
[外链图片转存中…(img-7lb0dqBU-1715435828161)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!