概述
ConstraintLayout是Android Studio 2.2的一个功能,翻译过来就是协调者布局,通过控件之间的相互约束来控制布局,跟RelativeLayout很像,但是功能更加强大。
基本使用
在AS3.0以后,项目已经会自动添加它的依赖了。并且新建xml布局的时候,根布局也默认是ConstraintLayout,可见google对其的推荐力度之大。
如果你的AS还没有升级到3.0.你可以通过手动添加依赖.
implementation 'com.android.support.constraint:constraint-layout:1.1.0'
依赖完成之后我们新建一个布局。
- 标记1:
表示是设计页面还是传统编码页面,如果是你AS3.0以后。新建布局之后一打开就是这个界面。我开始不会用ConstraintLayout时一度觉得AS增加我工作量。 - 标记2:
常用控件的位置,要用那个控件就把他拖动白色区就是了, - 标记3:当我们选中某一个控件时,就会在右侧出现Properties视图(标记5).
- 标记4:白色趋于就是预览图,深蓝色区域是可是清晰看到我们的约束规则。可以通过这4个圆点给控件添加约束。(后文细说)
- 标记5:用来设置自动添加约束等等。(后面细说)
- 标记6:在这里我们就可以设置当前控件的所有属性,如文本内容、颜色、点击事件等等。(后文细说)
标记4-添加约束
可以通过鼠标控制图中4个圆点了添加约束。
相对于父布局添加约束(很想Relativelayout吧)
添加完成后button的代码变成这样
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
很明显,就是添加对父布局4个方向的依赖,结果是居中的。操作完成之后我发现右上角有个黄色警告。你的布局不规范等等,这里就会有waring或者error。
相对同级控件添加约束
当然 可以添加就可以删除
清空该控件所有约束
基线约束
基线约束的作用就是将视图的文本基线与另一个视图的文本基线对齐:
标记5
这个磁铁样的标志是自动添加约束,。默认是关闭的。
右边的dp表示默认添加的约束带的margin值(说实话我觉得不对,我这没效果)
这个是在上面标记删除约束的时候讲过了。
区别于磁铁的是,前者是先开启,拖过去自动添加,这个是先没开启,拖过去再点击。效果图就不贴了。
标记6
这里可以设置margin、宽高、内容背景等等常用属性,其他属性不多说,这里我们讲一下宽高。它多出来一个属性
Match Constraints
,这是constraintLayout特有的,类似于Mach Parent,但肯定更加牛逼,我们看看中心图
重要的是中心的
>>>
,这个代表了当前控件的宽高计算方式。点击是可以切换的,一共有三种:
-
[
下面来几个例子,演示下约束匹配的效果,比如说,要让一个 Button
宽度填充满,仅需要将宽度设置为 0dp
即可:
android:layout_width="0dp"
效果:
设置宽高比例
当宽高至少有一项设置为 0dp 时(也就是 Match Constraints),那么我们就可以为该视图设置宽高比例。设置的属性是:
app:layout_constraintDimensionRatio="3:1"
参数是一个浮点值:“宽度:高度”,在该例子中,表示的宽高比是 3:1,也就是高度是宽度的三分之一。
查错
最后附上一个,刚接触的时候很对属性规则什么的毕竟不熟悉,这里AS已经帮我们做好了的检查,如果你的布局不够规范,会有警告报错滴,如下图。黄色警告标志(错误会变成红色感叹号)
点开看一下
所以我们在运行看效果之前不妨先看看警告,不至于跑起来之后发现效果不一样,节省点时间。
其实还有很多东西没解释,后面大家用到了在研究吧。。。我也没用到。。。
推荐and参考:
https://blog.csdn.net/airsaid/article/details/79052011
https://blog.csdn.net/guolin_blog/article/details/53122387
ps:我很多图都是盗的他们的,,,用的录屏王工具录了下,很大,传不上来,减少分辨率又很模糊。