Barrier (屏障; 障碍; 栅栏; 分界线)

简介

Barrier一个辅助类,不会绘制到屏幕上,也不会展现给用户。它通过属性constraint_referenced_ids将一些View包裹在一起形成一个屏障,然后通过属性barrierDirection向左上右下四个方向给某个View提供约束条件,或者叫做屏障方向。使用这些约束条件(屏障方向)的View可以防止屏障内的View覆盖自己,当屏障内的某个View要覆盖自己的时候,屏障会自动移动,避免自己被覆盖。

使用的场景:当多语言展示的时候,比如需要根据文本长度设置其他对应控件的位置,有可能因为不同语言的切换导致长度不定,此时约束可能会导致布局错误。

以下根据不同的direction来简单做以讲解(在实际操作中发现,如果确定了barrier的direction,那么和barrier绑定的控件就不要设置他们的direction方向的约束,设置其他方面约束即可。比如说barrier的direction设置为left/start,那么barrier中绑定的控件就不要设置start/left约束了,这样才会达到barrier随着不同布局动态变化并且起到屏障的作用,即屏障内的是整体一块布局,屏障外的就是相对于屏障的部分,很清晰,否则会有布局问题)

Start (绑定控件最靠左边的控件位置为屏障起点,动态改变最左侧控件位置会引发整体屏障的区域变动)

5777390-4cf52422e58d5597.png
5777390-4f1517744d551f48.png

XML文件实现

5777390-f75e41d6e1344470.png
5777390-41db619ffd2648d2.png

Activity实现

5777390-8ba4cb556b162eef.png

End (绑定控件最靠右边的控件位置为屏障起点,动态改变最右侧控件位置会引发整体屏障的区域变动)

5777390-640a19eda7bd459e.png


5777390-bc358f9a542045f2.png

XML文件

5777390-92e7c140af05ead8.png
5777390-927b4fa9fb709ece.png

Activity实现

5777390-a5ca9def1c4346c5.png

TOP (绑定控件最靠顶部的控件位置为屏障起点,动态改变最顶部控件位置会引发整体屏障的区域变动)

5777390-af0c894c15ed8816.png
5777390-a01aacd1c582cb6e.png

XML文件

5777390-e3caed4d9397b0b9.png
5777390-a5bbfbab29287c49.png

Activity实现

5777390-b120c42f3fa3223f.png

BOTTOM (绑定控件最靠底部的控件位置为屏障起点,动态改变最底部控件位置会引发整体屏障的区域变动)

5777390-32c13da63886de0b.png
5777390-b3e91a4525c1b731.png

XML文件

5777390-80c7db2a81cfd3b3.png
5777390-95b2dbc05c07034b.png

Activity实现

5777390-21d1bb885b547e0f.png
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值