文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

鸿蒙HarmonyOS Java UI之DirectionalLayout布局

2024-12-03 17:29

关注

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/

在之前的章节中我使用的是Java 代码构建UI界面,从本节开始,将使用XML构建UI界面。

使用XML构建UI(默认你已经会在项目中创建XML布局文件)界面相对Java代码构建的好处是:结构清晰,代码简洁。

DirectionalLayout(单一方向排列布局)是Java UI的一种重要的组件布局,用于将一组组件按照水平或垂直方向排布,能够方便地对齐布局内的组件。与Android中的线性布局相似。可以通过设置orientation属性来控制组件的排列方式,默认为垂直排列。

  1. "1.0" encoding="utf-8"?> 
  2. "http://schemas.huawei.com/res/ohos" 
  3.                    ohos:width="match_parent" 
  4.                    ohos:height="match_parent" 
  5.                    ohos:background_element="#FFCCCCCC" 
  6.                    ohos:orientation="vertical"
  7.     
  8.         ohos:id="$+id:txtOne" 
  9.         ohos:width="match_content" 
  10.         ohos:height="match_content" 
  11.         ohos:padding="20vp" 
  12.         ohos:margin="20vp" 
  13.         ohos:text_size="30vp" 
  14.         ohos:text_color="#FFFFFFFF" 
  15.         ohos:background_element="#FFFF00FF" 
  16.         ohos:text="我是第一个"/> 
  17.  
  18.     
  19.         ohos:id="$+id:txtTwo" 
  20.         ohos:width="match_content" 
  21.         ohos:height="match_content" 
  22.         ohos:padding="20vp" 
  23.         ohos:margin="20vp" 
  24.         ohos:text_size="30vp" 
  25.         ohos:text_color="#FFFFFFFF" 
  26.         ohos:background_element="#FFFF00FF" 
  27.         ohos:text="我是第二个"/> 
  28.  
  29.     
  30.         ohos:id="$+id:txtThird" 
  31.         ohos:width="match_content" 
  32.         ohos:height="match_content" 
  33.         ohos:padding="20vp" 
  34.         ohos:margin="20vp" 
  35.         ohos:text_size="30vp" 
  36.         ohos:text_color="#FFFFFFFF" 
  37.         ohos:background_element="#FFFF00FF" 
  38.         ohos:text="我是第三个"/> 
  39.  
  40.  

 

将上面代码中的ohos:orientation="vertical"换成ohos:orientation="horizontal" 然后运行查看效果如下所示。

DirectionalLayout布局中的组件不会自动换行,会按照设定的方向依次排列,若超出布局本身大小,超出布局大小的部分将不会显示。我们将上面示例代码中的Text组件宽度设定为400vp,然后运行效果如下所示,我们可以看到,第三个Text组件显示了一部分。

DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式,当对齐方式与排列方式一致时,对齐方式不会生效,如布局为水平方法排列,则其下组件左对齐、右对齐将不会生效。因为布局中可以嵌套布局来丰富UI样式,我们可以使用这个方式来演示一下对齐样式。

  1. "1.0" encoding="utf-8"?> 
  2. "http://schemas.huawei.com/res/ohos" 
  3.                    ohos:width="match_parent" 
  4.                    ohos:height="match_parent" 
  5.                    ohos:orientation="vertical"
  6.     
  7.             ohos:width="match_parent" 
  8.             ohos:height="0vp" 
  9.             ohos:weight="2" 
  10.             ohos:margin="10vp" 
  11.             ohos:background_element="#FFDDDDDD" 
  12.             ohos:orientation="vertical"
  13.         
  14.                 ohos:width="match_content" 
  15.                 ohos:height="match_content" 
  16.                 ohos:padding="10vp" 
  17.                 ohos:margin="10vp" 
  18.                 ohos:text_size="20vp" 
  19.                 ohos:text_color="#FFFFFFFF" 
  20.                 ohos:layout_alignment="left" 
  21.                 ohos:background_element="#FFFF00FF" 
  22.                 ohos:text="左对齐"/> 
  23.  
  24.         
  25.                 ohos:width="match_content" 
  26.                 ohos:height="match_content" 
  27.                 ohos:padding="10vp" 
  28.                 ohos:margin="10vp" 
  29.                 ohos:text_size="20vp" 
  30.                 ohos:text_color="#FFFFFFFF" 
  31.                 ohos:layout_alignment="horizontal_center" 
  32.                 ohos:background_element="#FFFF00FF" 
  33.                 ohos:text="水平方向居中"/> 
  34.  
  35.         
  36.                 ohos:width="match_content" 
  37.                 ohos:height="match_content" 
  38.                 ohos:padding="10vp" 
  39.                 ohos:margin="10vp" 
  40.                 ohos:text_size="20vp" 
  41.                 ohos:text_color="#FFFFFFFF" 
  42.                 ohos:layout_alignment="right" 
  43.                 ohos:background_element="#FFFF00FF" 
  44.                 ohos:text="右对齐"/> 
  45.         
  46.                 ohos:width="match_content" 
  47.                 ohos:height="match_content" 
  48.                 ohos:padding="10vp" 
  49.                 ohos:margin="10vp" 
  50.                 ohos:text_size="20vp" 
  51.                 ohos:text_color="#FFFFFFFF" 
  52.                 ohos:layout_alignment="center" 
  53.                 ohos:background_element="#FFFF00FF" 
  54.                 ohos:text="垂直与水平方向都居中"/> 
  55.      
  56.     
  57.             ohos:width="match_parent" 
  58.             ohos:height="0vp" 
  59.             ohos:margin="10vp" 
  60.             ohos:weight="1" 
  61.             ohos:background_element="#FFCCCCCC" 
  62.             ohos:orientation="horizontal"
  63.         
  64.                 ohos:width="match_content" 
  65.                 ohos:height="match_content" 
  66.                 ohos:padding="10vp" 
  67.                 ohos:margin="10vp" 
  68.                 ohos:text_size="20vp" 
  69.                 ohos:text_color="#FFFFFFFF" 
  70.                 ohos:layout_alignment="top" 
  71.                 ohos:background_element="#FFFF00FF" 
  72.                 ohos:text="顶部对齐"/> 
  73.  
  74.         
  75.                 ohos:width="match_content" 
  76.                 ohos:height="match_content" 
  77.                 ohos:padding="10vp" 
  78.                 ohos:margin="10vp" 
  79.                 ohos:text_size="20vp" 
  80.                 ohos:text_color="#FFFFFFFF" 
  81.                 ohos:layout_alignment="vertical_center" 
  82.                 ohos:background_element="#FFFF00FF" 
  83.                 ohos:text="垂直方向居中"/> 
  84.  
  85.         
  86.                 ohos:width="match_content" 
  87.                 ohos:height="match_content" 
  88.                 ohos:padding="10vp" 
  89.                 ohos:margin="10vp" 
  90.                 ohos:text_size="20vp" 
  91.                 ohos:text_color="#FFFFFFFF" 
  92.                 ohos:layout_alignment="bottom" 
  93.                 ohos:background_element="#FFFF00FF" 
  94.                 ohos:text="底部对齐"/> 
  95.         
  96.                 ohos:width="match_content" 
  97.                 ohos:height="match_content" 
  98.                 ohos:padding="10vp" 
  99.                 ohos:margin="10vp" 
  100.                 ohos:text_size="20vp" 
  101.                 ohos:text_color="#FFFFFFFF" 
  102.                 ohos:layout_alignment="center" 
  103.                 ohos:background_element="#FFFF00FF" 
  104.                 ohos:text="垂直与水平方向都居中"/> 
  105.      
  106.  

 

在上面代码中我们看到两个DirectionalLayout子布局中有ohos:weight="1"属性,这个属性就是设置组件在布局中的权重,按照比例来分配组件占用父组件的大小。

DirectionalLayout布局需要掌握的知识点也就这么多,接下来再说说题外话。

设置UI显示界面问题

我们使用XML方式构建UI,在AbilitySlice中设置界面入口的时候,一般会报错,找不到布局文件。官方推荐使用Build -> Build App(s)/Hap(s) > Build Debug Hap(s)重新编译一次即可。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/

 

来源:鸿蒙社区内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯