Android使用ConstraintLayout布局设置TextView基线对齐

前几天做Android的时候碰到以前的开发人员挖的坑 Android使用ConstraintLayout布局设置TextView基线对齐_第1张图片
这个页面是需要在一个主页上循环显示并填充数据展示的,当然,默认的这些看不出来问题,我们加点量
很明显,字数一多就显示不出来了,原因呢,就是因为这个高度是给死的,来,调成wrap_content(自适应)再试一下
Android使用ConstraintLayout布局设置TextView基线对齐_第3张图片
看到了吗,这下一个不漏的显示出来了,但是整体布局已经大变样了,这就是LinerLayout的缺点了,于是乎,在加的各种Android群里请教了一下大佬,给我推荐了传说中的"ConstraintLayout"布局,之前在学校学JAVASE的时候接触过什么网格布局相对布局线性布局所以做起来还蛮轻松的,不过这个约束布局是google2016年发布的,我学JAVA布局正是15年刚好错过了,说正题了!

这个约束布局网上说是为了提高绘制页面效率而开发的新式布局
具体大家去百度吧,看看怎么解决咱们这个TextView的基线(H5中有基线,我就暂时这么叫吧)问题!
Android使用ConstraintLayout布局设置TextView基线对齐_第4张图片
外观是不是感觉没啥变化,起码整体布局不是稀里哗啦填充父页面了,然后,加字段!!!

看见没,字全部显示出来了,但是却飞起来了,和左边的顶部没对齐,原因就是因为这句:
app:layout_constraintTop_toTopOf="parent"
说一下这个是什么意思,约束布局是以"参照物"来进行位置摆放得,
第一个constraintTop表示当前的哪个位置,toTopOf标识参照物的位置,迷糊不要紧,待会会详细讲,
合起来的意思就是,医院标签的top要和parent(所在页面)的top对齐,然后呢,字数一多这个医院标签就居中了,
怎么解决呢,
Android使用ConstraintLayout布局设置TextView基线对齐_第6张图片
让医院和左边标签的顶部对齐就行了,是不是不再挤了,再加点试试,

很神奇,随意加都不会在发生问题了,感觉这个布局对于这些动态显示数据的页面特别使用,不会造成把页面高度写死数据显示不全的尴尬了

然后一分钟来了解一下这个布局怎么放标签:

…
Button1 :app:layout_constraintBottom_toTopOf="@id/iv_head"
我们把这个属性拆开来看， constraintBottom 指的本身的底部，即 Button1 的顶部， toTopOf 是指 ImageView 的顶部，那么这句话的意思就是
Aligns the bottom of the desired view to the top of another.（官方原文）
翻译一下就是 Button1 的底部要和 ImageView 的顶部对齐
Button1 app:layout_constraintRight_toLeftOf="@id/iv_head"
根据上面的规则我们就知道 Button1 的右边要和 ImageView 的左边对齐。
其实很简单就是说两个 View 的某个方位要对齐
没了，就这么简单，其它属性可以举一反三，它比 RelativeLayout 控制起来更加得以就手。

layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
If desired, attributes supporting start and end are also available in place of left and right alignment.
到此，你已经掌握了一大半的 ConstraintLayout 知识点
…

好了,上面这段不是我总结的,刚开始在网上搜,结果各种文字加图的PPT解释的人一头雾水,这篇讲得真的很好,链接页:
https://www.cnblogs.com/qqhfeng/p/7366560.html

代码:

<?xml version="1.0" encoding="utf-8"?>

没有多层的嵌套,感觉这才是约束布局的强大之处,控件顺序无所谓,只要调好参考物的位置就行了,看网上测试据说性能可以提升46%,提升一半啊!
ok,写BUG去了!

2019.4.23补充,
目前经历来看,用此布局设计控件比较多的比较复杂的页面,需要提前构思好各个控件之间的关联关系,因为后期如果在中间新加控件的话,势必会影响到之前的控件关联关系,这一点个人感觉也算是约束布局的一个缺点吧,牵一发而动全身!

更多相关文章

随机推荐