google 新推出的布局, 既然是新的，肯定比老古董 RelativateLayout 和 LinearLayout 要强大的多， 老古董能搞定的它都能搞定，而且在性能上有提升。
这玩意儿解决的问题：
- 布局嵌套过多的问题， ConstraintLayout ** 通过设置控件与控件、控件与parent之间的约束 ** 搞定老古董需要多层嵌套才能解决的布局
- ** 可以直接设置控件的宽高比 【这个功能我真的是等到花都谢了，不过ConstraintLayout终于实现了这个功能，欣慰。。。】
- 让android 界面布局更适合拖拽， 不过我还是习惯、喜欢手写
1. 常用的属性 （只介绍用来设置约束的属性）介绍
- layout_constraintLeft_toLeftOf , layout_constraintStart_toStartOf : 我的左边在谁（@id/view_id or parent）的左边
- layout_constraintLeft_toRightOf ，layout_constraintStart_toEndOf : 我的左边和谁（@id/view_id or parent）的右边对其
- layout_constraintRight_toLeftOf ， layout_constraintEnd_toStartOf : 我的右边在谁（@id/view_id or parent）的左边
- layout_constraintRight_toRightOf ，layout_constraintEnd_toEndOf : 我的右边在谁（@id/view_id or parent）的右边
- layout_constraintTop_toTopOf : 我的上边和谁（@id/view_id or parent）的上边对齐
- layout_constraintTop_toBottomOf : 我的上边在谁（@id/view_id or parent）的下边
- layout_constraintBottom_toTopOf : 我的下边在谁（@id/view_id or parent）的上边
- layout_constraintBottom_toBottomOf : 我的下边和谁（@id/view_id or parent）的下边对齐
layout_constraintBaseline_toBaselineOf : view 的baseline对齐， 如下图
constraint_baseline.png
2. 一个非常常见的list-item 布局 ， 如果用老古董来写，单层结构不嵌套而且高度自适应，估计有点难度， 但是用ConstraintLayout 就非常简单
constraint_list_item.png
代码：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#cc88dd"
android:padding="10dp"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image_left_icon"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/andorid_icon"
app:layout_constraintEnd_toStartOf="@+id/tv_info"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/tv_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:maxLines="3"
android:text="明有奇巧人曰王叔远，能以径寸之木，为宫室、器皿、人物，以至鸟兽、木石，罔不因势象形，各具情态。尝贻余核舟一，盖大苏泛赤壁云。
舟首尾长约八分有奇，高可二黍许。中轩敞者为舱，箬篷覆之。旁开小窗，左右各四，共八扇。启窗而观，雕栏相望焉。闭之，则右刻“山高月小，水落石出”，左刻“清风徐来，水波不兴”，石青糁之。"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image_left_icon"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/tv_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="2018-08-23"
app:layout_constraintBottom_toBottomOf="@id/image_left_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/image_left_icon"/>
</android.support.constraint.ConstraintLayout>
2. 控件可以设置宽高比, 如下图直接设置banner的宽高比为 16：9 (下图布局也只有一层，代码见图下)
app:layout_constraintDimensionRatio="16:9" 一句搞定View的宽高比，再也不用 获取屏幕的宽再手动计算设置了
ConstraintLayout.png
代码实现 ：
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#093a5f"
android:padding="10dp"
android:text="这是一个16：9的宽高比，再也不用通过代码来设置了，直接在xml中通过ConstraintLayout搞定"
android:textColor="#ff6611"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:background="#ff0000"
android:text="item-1"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/view3"
app:layout_constraintTop_toBottomOf="@id/view1"/>
<Button
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:background="#00ff00"
android:text="item-2"
android:textColor="#ffffff"
app:layout_constraintLeft_toRightOf="@id/view2"
app:layout_constraintRight_toLeftOf="@id/view4"
app:layout_constraintTop_toBottomOf="@id/view1"/>
<Button
android:id="@+id/view4"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginTop="10dp"
android:background="#0000ff"
android:text="item-3"
android:textColor="#ffffff"
app:layout_constraintLeft_toRightOf="@id/view3"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/view1"/>
<Button
android:id="@+id/view5"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="#0000ff"
android:text="item-4"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/view6"
app:layout_constraintTop_toBottomOf="@id/view2"/>
<Button
android:id="@+id/view6"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="#ff0000"
android:text="item-5"
android:textColor="#ffffff"
app:layout_constraintLeft_toRightOf="@id/view5"
app:layout_constraintRight_toLeftOf="@id/view7"
app:layout_constraintTop_toBottomOf="@id/view3"/>
<Button
android:id="@+id/view7"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="#00ff00"
android:text="item-6"
android:textColor="#ffffff"
app:layout_constraintLeft_toRightOf="@id/view6"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/view4"/>
<!--底部4个主菜单-->
<Button
android:id="@+id/tab1"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="首页"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tab2"/>
<Button
android:id="@+id/tab2"
android:layout_width="92dp"
android:layout_height="60dp"
android:text="商城"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tab3"
app:layout_constraintStart_toEndOf="@+id/tab1"/>
<Button
android:id="@+id/tab3"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="小视频"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tab4"
app:layout_constraintStart_toEndOf="@+id/tab2"/>
<Button
android:id="@+id/tab4"
android:layout_width="0dp"
android:layout_height="60dp"
android:text="我"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/tab3"/>
</android.support.constraint.ConstraintLayout>
以上全是自己参考学习手动码代码得出， 如有错误请指出！不胜感激！
网友评论