ConstraintLayout
约束布局由 2016 年 Google I/O 推出。扁平式的布局方式,无任何嵌套,减少布局的层级,优化渲染性能。从支持力度而言,将成为主流布局样式,完全代替其他布局。
布局示例:
<?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:layout_height="match_parent"
tools:context=".activity.MainActivity">
<!--
强制布局,强制限定控件的宽高
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintLeft_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constrainedWidth
-->
<android.support.constraint.ConstraintLayout
android:id="@+id/top_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="10dp"
android:id="@+id/left_tv"
android:textSize="10sp"
android:padding="10dp"
android:text="一重山,两重山。山远天高烟水寒,相思枫叶丹"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/left_tv"
app:layout_constrainedWidth="true"
android:layout_marginTop="10dp"
android:id="@+id/right_tv"
android:textSize="10sp"
android:padding="10dp"
android:text="菊花开,菊花残。塞雁高飞人未还,一帘风月闲"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<!--圆形定位
layout_constraintCircle 定位圆心的锚控件(即视图中的OK)
layout_constraintCircleRadius 定位圆的半径,圆形控件的中心点为半径的起始位置
layout_constraintCircleAngle 定位圆心控件与环绕控件中心的夹角,角度从12点钟方向顺时针计算
-->
<android.support.constraint.ConstraintLayout
android:id="@+id/circle_cl"
android:background="@android:color/background_light"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@+id/top_cl"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="match_parent"
android:layout_height="120dp">
<TextView
android:text="OK"
android:textSize="20sp"
android:padding="10dp"
android:background="@drawable/circle_border"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:textColor="@color/colorAccent"
android:id="@+id/center_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="频道+"
android:textSize="10sp"
android:padding="5dp"
app:layout_constraintCircle="@id/center_tv"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="60"
android:background="@drawable/rect_round_border"
android:textColor="@color/colorAccent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="频道-"
android:textSize="10sp"
android:padding="5dp"
app:layout_constraintCircle="@id/center_tv"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="120"
android:background="@drawable/rect_round_border"
android:textColor="@color/colorAccent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="音量-"
android:textSize="10sp"
android:padding="5dp"
app:layout_constraintCircle="@id/center_tv"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="240"
android:background="@drawable/rect_round_border"
android:textColor="@color/colorAccent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="音量+"
android:textSize="10sp"
android:padding="5dp"
app:layout_constraintCircle="@id/center_tv"
app:layout_constraintCircleRadius="50dp"
app:layout_constraintCircleAngle="300"
android:background="@drawable/rect_round_border"
android:textColor="@color/colorAccent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<!--百分比布局
layout_constraintWidth_percent 设置控件相对于父控件的宽度比例
layout_constraintHeight_percent 设置控件相对于父控件的高度比例
layout_constraintDimensionRatio 设置控件自身的宽高比例
-->
<android.support.constraint.ConstraintLayout
android:id="@+id/percent_cl"
android:background="@color/colorPrimaryDark"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@+id/circle_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/percent_top_tv"
android:gravity="center"
android:padding="5dp"
android:text="textview为父控件一半的宽度,宽高比例为10:3"
android:background="@color/colorAccent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintWidth_percent="0.5"
app:layout_constraintDimensionRatio="H,10:3"
android:layout_width="0dp"
android:layout_height="0dp" />
</android.support.constraint.ConstraintLayout>
<!--Group控制多个控件的显示隐藏, app:constraint_referenced_ids-->
<android.support.constraint.Group
android:id="@+id/group_cl"
app:layout_constraintTop_toBottomOf="@+id/percent_cl"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</android.support.constraint.Group>
<android.support.constraint.ConstraintLayout
android:layout_marginTop="10dp"
android:id="@+id/gone_margin_cl"
app:layout_constraintTop_toBottomOf="@+id/group_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Gone"
android:id="@+id/gone_tv"
android:gravity="center"
android:background="@color/colorAccent"
android:padding="10dp"
android:layout_width="60dp"
android:layout_height="wrap_content" />
<TextView
android:text="Visible"
android:gravity="center"
android:background="@color/colorPrimary"
app:layout_constraintLeft_toRightOf="@+id/gone_tv"
android:padding="10dp"
android:layout_width="80dp"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<!--当约束目标的可见性为View.GONE时,还可以通过以下属性设置不同的边距值-->
<android.support.constraint.ConstraintLayout
android:layout_marginTop="10dp"
android:id="@+id/gone1_margin_cl"
app:layout_constraintTop_toBottomOf="@+id/gone_margin_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="Gone"
android:id="@+id/gone1_tv"
android:gravity="center"
android:visibility="gone"
android:background="@color/colorAccent"
android:padding="10dp"
android:layout_width="60dp"
android:layout_height="wrap_content" />
<TextView
android:text="Visible"
android:gravity="center"
android:background="@color/colorPrimary"
app:layout_constraintLeft_toRightOf="@+id/gone1_tv"
app:layout_goneMarginLeft="20dp"
android:padding="10dp"
android:layout_width="80dp"
android:layout_height="wrap_content" />
</android.support.constraint.ConstraintLayout>
<!--Barrier在约束布局中,可以使用属性constraint_referenced_ids属性来引用多个带约束
的组件, 从而将它们看作一个整体-->
<android.support.constraint.ConstraintLayout
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@+id/gone1_margin_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="姓名:"
android:padding="5dp"
android:id="@+id/name_tv"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/name_tv"
android:text="联系地址:"
android:padding="5dp"
android:id="@+id/address_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:hint="请输入姓名"
android:padding="5dp"
app:layout_constraintStart_toEndOf="@+id/barr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:hint="请输入联系地址"
android:padding="5dp"
app:layout_constraintStart_toEndOf="@+id/barr"
app:layout_constraintTop_toBottomOf="@+id/name_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.constraint.Barrier
android:id="@+id/barr"
app:barrierDirection="right"
app:constraint_referenced_ids="name_tv,address_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
布局效果: