ConstraintLayout约束布局

ConstraintLayout的基本属性：

layout_constraintLeft_toLeftOf                  ----当前控件左边与目标控件左边对齐

layout_constraintLeft_toRightOf                ----以此类推

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

# 即文本的TextValue基线对齐

layout_constraintBaseline_toBaselineOf

比如给定的ID是图片,则该控件(高度)跟图片的顶部对齐,如果是TextView之类的文本,则该控件(高度)跟文本内容的字对齐

设置百分比大小:

app:layout_constraintWidth_percent="0.5"                    --设置宽度为百分比大小50%,在1.1.0以上版本才有

app:layout_constraintHeight_percent="0.5"                   --设置高度为百分比大小50%,在1.1.0以上版本才有

引入为:

compile 'com.android.support.constraint:constraint-layout:1.1.1'

新版本:

implementation 'com.android.support.constraint:constraint-layout:1.1.1'

如果引入编译错误,可能要翻墙(非网页翻墙,而是要从本地网络环境就得访问google),或者可以参考升级AndroidStudio.

注意事项:

引用百分比大小,需要设置对应宽高约束规则

这里如果设置以后报错,是因为AndroidStudio中内置了布局的检查机制,认为每一个控件都应该通过android:layout_width和android:layout_height属性指定宽高才是合法的。不过这个错误提示并不影响程序运行,可以选择忽视,或者把宽高用0dp代替,然后再用百分比设置宽高

约束规则:

在控件有自己设置的宽度，例如宽度为50dp固定值(warp_content也为有固定值)，这个约束有点像橡皮筋一样会拉这个控件，但是并不会改变控件的尺寸,假设让它左边与父布局左边对齐,右边又与父布局右边对齐,这个时候它先会对齐左边,又接着去对齐右边,发现都无法对齐,就会进行居中显示

当宽度为0dp时(代表对宽度无要求,但是要达到设计者要求)它先会对齐左边,再对齐右边,发现都无法对齐,将自动填充到指定大小,以来达到设计者要求(左边跟父布局左边对齐,右边对齐不了,将一直填充大小直到对齐为止,可达到match_parent效果)

注意事项:

在ConstraintLayout中使用MATCH_PARENT这个值，可能会导致约束失效，建议通过MATCH_CONSTRAINT(0dp)配合约束实现类似的效果。

百分比间距:

介绍一下这两个类似间距,但却比间距更好用的值:

layout_constraintHorizontal_bias                        //横向间距,宽度需要左右都对齐父布局,否则会无效

layout_constraintVertical_bias                            //纵向间距,高度需要上下都对齐父布局,否则会无效

app:layout_constraintHorizontal_bias="0.9"     代表左边间距是90%,右边间距为10%

app:layout_constraintVertical_bias="0.9"         代表竖着的间距是90%,底部间距为10%

如果百分比控件设置宽度为100%,这个时候间距也会失效

举例:

百分比宽度为1(100%),百分比间距为0.1(10%)

这个时候并不会有间距,除非把百分比宽度设置为0.9,预留出百分比间距的空间

这样百分比间距就会生效了,正确设置:

百分比宽度为0.9(90%),百分比间距为1(100%即为预留出的10%)

链条样式:

# 与left,right类似(设置链条样式,控件之间要用这样的方式连接,否则会不生效)

layout_constraintStart_toEndOf           ----同left_toRightOf

layout_constraintStart_toStartOf          ----同left_toLeftOf

layout_constraintEnd_toStartOf           ----同right_toLeftOf

layout_constraintEnd_toEndOf            ----同right_toRightOf

layout_constraintHorizontal_chainStyle     ----横向连接显示样式

layout_constraintVertical_chainStyle         ----纵向连接显示样式

把需要连接的控件连接好之后

在链的第一个元素上设置属性 layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle

样式为:

packed:

链接的控件被打包,连接在一起(测试横向为居中)图例:

spread:

按平衡的间距比例,扩展开来居中显示,图例:

spread_inside:

左右根据父布局链接点显示,中间居中,图例:

上述链接样式(横向为例),宽度不能设置为0dp,否则会自动拉伸三个等同大小(宽度)直到满屏幕,这个时候可以使用权重,更改各自的大小,当宽度不为0dp时(固定值)设置权重会无效

设置间距:

# margin为外间距

android:layout_marginStart

android:layout_marginEnd

android:layout_marginLeft

android:layout_marginTop

android:layout_marginRight

android:layout_marginBottom

 

同为间距,另一个属性设置为了Gone，则以下设置的间距会生效

layout_goneMarginStart 
layout_goneMarginEnd 
layout_goneMarginLeft 
layout_goneMarginTop 
layout_goneMarginRight 
layout_goneMarginBottom

几个注意事项：
* app:layout_goneMarginRight要配合android:layout_marginRight一起使用。
* 如果只设置了app:layout_goneMarginRight没有设置android:layout_marginRight，则无效。（alpha版本的bug，1.0.1版本已经修复）
* 在约束的布局gone时，控件自身的marginXXX会被goneMarginXXX替换掉，原本button4宽度是100，button5的marginRight是10， 加起来是110，如果想让button4隐藏之后，button5仍然纹丝不动，则需要设置goneMarginRight为10+100 = 110. 

权重解释:

假设权重为1和1和2,那么分别显示为四分之一,四分之一,四分之二(填满整个屏占比,横向或纵向)

设置横向显示权重:

app:layout_constraintHorizontal_weight="1"

设置纵向显示权重:

app:layout_constraintVertical_weight="1"

(相同线性下,有未设置权重的,未设置权重在占用固定比例后,权重根据剩余比例去占用剩余空间)

# 控件屏占比的比例

app:layout_constraintDimensionRatio

例如:

16:9

(测试这个的时候,宽和高不能全写为固定值(最多写其中一个),或者全用0dp代替,用0dp代替,得用约束来拉扯宽高达到显示,才能调整比例)

首先把16:9分别设置为1:1,会发现屏幕占比高度放大很多(可以理解为总大小的16,这一刻被放成1,填充满了),然后填写成16(意寓为分成16份)这个时候是16:1,会发现比较窄,再把1写成9(1*9),就是16:9的比例

Guideline

该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。所以暂时不做解释

注意事项:

约束布局中用include引入时,不重新指定include的宽高，include的约束将会失效

本文章参考了博文:

https://www.jianshu.com/p/16e95b6b5e38