|
|
|
|
公众号矩阵

鸿蒙智慧屏之PositionLayout常见使用方法演示

PositionLayout意为确切位置布局,我们也可以称为绝对布局,该布局指定了子组件在其中的具体位置(x/y坐标)。由于需要指定子组件的x/y精确坐标,其布局的灵活性较差,在没有绝对定位的情况下相比其他类型的布局更加难以维护,因此不建议使用。

作者:佚名来源:鸿蒙社区|2020-11-20 14:27

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

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

https://harmonyos.51cto.com/#zz

PositionLayout简介

PositionLayout意为确切位置布局,我们也可以称为绝对布局,该布局指定了子组件在其中的具体位置(x/y坐标)。由于需要指定子组件的x/y精确坐标,其布局的灵活性较差,在没有绝对定位的情况下相比其他类型的布局更加难以维护,因此不建议使用。

常用属性及示例

PositionLayout是以setContentPosition(float x, float y)方法来设置子组件的具体位置,x为组件左上角距离父组件左边距的距离,y为组件左上角距离父组件上边距的距离。我们在XML中定义好布局和组件,先不设置其具体位置。

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <PositionLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent"
  6.     <Text 
  7.         ohos:id="$+id:txtOne" 
  8.         ohos:height="match_content" 
  9.         ohos:width="match_content" 
  10.         ohos:text="Text One" 
  11.         ohos:padding="20vp" 
  12.         ohos:background_element="$graphic:background_text_global"/> 
  13.  
  14.     <Text 
  15.         ohos:id="$+id:txtTwo" 
  16.         ohos:height="match_content" 
  17.         ohos:width="match_content" 
  18.         ohos:text="Text Two" 
  19.         ohos:padding="20vp" 
  20.         ohos:background_element="$graphic:background_text_global"/> 
  21.  
  22.     <Text 
  23.         ohos:id="$+id:txtThree" 
  24.         ohos:height="match_content" 
  25.         ohos:width="match_content" 
  26.         ohos:text="Text Three" 
  27.         ohos:padding="20vp" 
  28.         ohos:background_element="$graphic:background_text_global"/> 
  29. </PositionLayout> 

从XML定义来看,我们是使用了三个Text显示组件,运行后模拟器界面应该也是三个组件,但实际效果呢?我们发现三个组件重叠在一起,第三个显示在最上边。若你想看看其他两个组件,你可以把他们的宽高设置成不一样的值,第一个组件的宽高最大,第二个相对第一个组件小点,第三个组件相对第二个小点,然后给他们不同的背景色,这样你就可以看出三个组件重叠在一起的效果。

接下来我们给三个组件不同的位置(x/y值)。在XML中如何设置还未看明白,目前只能先在Java代码中做控制。

  1. super.setUIContent(ResourceTable.Layout_position_layout); 
  2.     Text text_one = (Text) findComponentById(ResourceTable.Id_txtOne); 
  3.     Text text_two = (Text) findComponentById(ResourceTable.Id_txtTwo); 
  4.     Text text_three = (Text) findComponentById(ResourceTable.Id_txtThree); 
  5.  
  6.     text_one.setContentPosition(100, 100); 
  7.     text_two.setContentPosition(200, 200); 
  8.     text_three.setContentPosition(300, 300); 

 

PositionLayout布局可以控制组件的具体位置,这种布局我们一般在什么情况下使用呢?比如我们登陆页面使用的是一张图片,在这个图片上我们定义好了用户名、密码的输入框,我们就可以使用这种布局来把两个组件显示在特定的位置,一般不建议使用这种布局,局限性太强,适配性太差。

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

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

https://harmonyos.51cto.com/#zz

【编辑推荐】

  1. 微软技术专家认为短信验证方式并不安全
  2. 云计算十年:大国博弈和互联网巨头生死战
  3. 程序员考研该不该继续选择计算机专业
  4. JavaScript 代码加不加分号有什么区别
  5. 明天中午一点! Google 开发者大会预约全攻略
【责任编辑:jianghua TEL:(010)68476606】 

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

29人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

193人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

119人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微