【Android】ConstraintLayout实践

布局的优化一般都是考虑如何减少布局嵌套，ConstraintLayout是解决减少布局嵌套的有效方案。

引入方式

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

普通的布局转换方式：

相对位置：

layout_constraintLeft_toLeftOflayout_constraintLeft_toRightOflayout_constraintRight_toLeftOflayout_constraintRight_toRightOflayout_constraintTop_toTopOflayout_constraintTop_toBottomOflayout_constraintBottom_toTopOflayout_constraintBottom_toBottomOflayout_constraintBaseline_toBaselineOflayout_constraintStart_toEndOflayout_constraintStart_toStartOflayout_constraintEnd_toStartOflayout_constraintEnd_toEndOflayout_constraintHorizontal_weight 权重app:layout_constraintDimensionRatio="16:6" 该属性指的是宽高比，所以16：6就可以完成我们的需求。layout_constraintHorizontal_chainStylelayout_constraintHorizontal_biaslayout_constraintVertical_biaslayout_constraintGuide_beginlayout_constraintGuide_endlayout_constraintGuide_percent

constraintXXX：指定当前控件需要设置约束的属性部分。如constraintLeft表示对当前控件的左边进行约束设置。

toXXXOf：其指定的内容是作为当前控件设置约束需要依赖的控件或父容器（可以理解为设置约束的参照物）。并通过XXX指定被依赖对象用于参考的属性。如toLeftOf="parent" ：表示当前控件相对于父容器的左边进行约束设置。

布局示意：

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout    android:id="@+id/linearLayout"    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"    android:background="#11ff0000"    tools:context="com.naton.materialdemo.ConstraintActivity">    <TextView        android:id="@+id/banner"        android:layout_width="0dp"        android:layout_height="0dp"        android:background="#765"        android:gravity="center"        android:text="Banner"        app:layout_constraintDimensionRatio="H,16:6"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"/>    <TextView        android:layout_width="60dp"        android:layout_height="60dp"        android:background="#612"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent"        app:layout_constraintVertical_bias="0.25"/>    <TextView        android:id="@+id/tv1"        android:layout_width="140dp"        android:layout_height="86dp"        android:layout_marginLeft="12dp"        android:layout_marginTop="60dp"        android:background="#fd3"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintTop_toBottomOf="@id/banner"        />    <TextView        android:id="@+id/tv2"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_marginLeft="8dp"        android:layout_marginRight="12dp"        android:text="文字文字文字文字文字文字文字文文字文字文字文字文字文字"        android:textColor="#000000"        android:textSize="16dp"        app:layout_constraintLeft_toRightOf="@id/tv1"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="@id/tv1"/>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="8dp"        android:layout_marginTop="12dp"        android:text="5分钟前"        android:textColor="#333"        android:textSize="12dp"        app:layout_constraintBottom_toBottomOf="@id/tv1"        app:layout_constraintLeft_toRightOf="@id/tv1"/>    <TextView        android:id="@+id/tab1"        android:layout_width="0dp"        android:layout_height="30dp"        android:background="#f67"        android:gravity="center"        android:text="Tab1"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toLeftOf="@+id/tab2"/>    <TextView        android:id="@+id/tab2"        android:layout_width="0dp"        android:layout_height="30dp"        android:background="#A67"        android:gravity="center"        android:text="Tab2"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toRightOf="@id/tab1"        app:layout_constraintRight_toLeftOf="@+id/tab3"/>    <TextView        android:id="@+id/tab3"        android:layout_width="0dp"        android:layout_height="30dp"        android:background="#767"        android:gravity="center"        android:text="Tab3"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintHorizontal_chainStyle="spread"        app:layout_constraintLeft_toRightOf="@id/tab2"        app:layout_constraintRight_toRightOf="parent"/>    <android.support.constraint.Guideline        android:id="@+id/guideline"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="vertical"        app:layout_constraintGuide_begin="192dp"/></android.support.constraint.ConstraintLayout>

效果图：

参考文章：

http://blog.csdn.net/lmj623565791/article/details/78011599

http://blog.csdn.net/guolin_blog/article/details/53122387

https://juejin.im/post/5a1d9ba66fb9a044fb07819e

知行办公，专业移动办公平台 https://zx.naton.cn/

原创团队

【总监】十二春秋之，[e-mail]；

【Master】zelo，[e-mail]；【运营】运维艄公，[e-mail]；

【产品设计】流浪猫，[e-mail]；【体验设计】兜兜，[e-mail]；

【iOS】淘码小工，[e-mail]；iMcG33K，[e-mail]；

【Android】人猿居士，[e-mail]；思路的顿悟，[e-mail]；

【java】首席工程师MR_W，[e-mail]；【测试】土镜问道，[e-mail]；

【数据】fox009521，[e-mail]；【安全】保密，你懂的。