ConstraintLayout 技术分享

ConstraintLayout 技术分享

Add ConstraintLayout to your project

Add the library as a dependency in the same build.gradle file:

repositories {

  maven {

    url ‘https://maven.google.com’

  }

}

dependencies {

  compile ‘com.android.support.constraint:constraint-layout:1.0.2’

}

Convert a layout

Constraints

Constraints帮助你保持widgets对齐。你可以使用箭头来决定各widgets的对齐规则。例如（图示 A），从button2左侧控键设置一个constraint到button1的右侧控键意味着：button2会放置于button1右侧56dp处

图示A

控键类型

图示B

调整尺寸控键

类似于其他设计/绘图应用，该控键允许你调整widget尺寸

侧约束控键

该控键让你指定widget的位置。例如，你可以使用widget的左侧控键到其他widget的右侧控键相隔24dp。

基线约束控键

该控键帮助你对齐任意两个widget的文字部分，与widget的大小无关。例如你有两个不同尺寸的widget但是你想要他们的文字部分对齐。

使用constraintlayout

<?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"    android:layout_width="match_parent"    android:layout_height="match_parent"></android.support.constraint.ConstraintLayout>

添加imageview

添加一个ImageView到layout。在编辑器内，找到ImageView拖到layout内。

一旦选中ImageView，你可以点击并按住调整尺寸控键来调整图片大小。

添加TextView

找到TextView并拖到layout内。

这是会看到一些警告，因为在ImageView以及TextView内没有contentDescription属性。在右侧，Inspector面板可以改变已选择widget的各种属性。

手动创建Constraints

创建一个约束，你需要在widget的某个控键上点击并按住，然后拖到两一个widget的约束控键内。一旦显示绿色，你就可以松手了最终约束就会被创建。


假设我们想要TextView置于ImageView下方。我们可以在TextView的顶部控键与ImageView的底部控键创建一个约束，如图：



移除约束：移除某个约束只需点击指定约束的控键；移除全部约束需要点击如下按钮：



下一步，创建ImageView跟容器顶部的约束



最后，创建ImageView左右两侧的约束



创建基线约束 - 连接widget的基线控键到另一个的基线

Inspector

Inspector在UI编辑器的右侧。附带有已选择widget的各种相关属性，而且还显示了该视图是如何对齐与约束的。

控制widget内部尺寸

Inspector内部的线让你可以控制widget内部尺寸。

项目中应用

目前项目中正在尝试使用ConstraintLayout
酒店详情页底部酒店描述、政策、附近相似酒店已经替换成约束布局。
原布局如下

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@color/color_ffffff"    android:orientation="vertical">    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginLeft="15dp"        android:layout_marginRight="15dp"        android:layout_marginTop="10dp"        android:fontFamily="sans-serif-medium"        android:text="@string/key.hotel.policy"        android:textColor="@color/color_333333"        android:textSize="@dimen/text_size_15" />    <LinearLayout        android:id="@+id/ll_policy_content"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:orientation="vertical"        android:paddingLeft="15dp"        android:paddingRight="15dp">        <LinearLayout            android:id="@+id/view_hotel_detail_policies_check_in_out_container"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@drawable/hotel_r_4_solid_cfd7de"            android:paddingBottom="7dp"            android:paddingLeft="5dp"            android:paddingRight="5dp"            android:paddingTop="7dp">            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:id="@+id/view_hotel_detail_policies_check_in_from"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1"                android:ellipsize="end"                android:gravity="center"                android:maxLines="1"                android:textColor="@color/color_333333"                android:textSize="@dimen/text_size_12"                tools:text="入住时间：15:00后" />            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:id="@+id/view_hotel_detail_policies_check_out_until"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_marginLeft="5dp"                android:layout_weight="1"                android:ellipsize="end"                android:gravity="center"                android:maxLines="1"                android:textColor="@color/color_333333"                android:textSize="@dimen/text_size_12"                tools:text="退房时间：11:00前" />        </LinearLayout>        <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView            android:id="@+id/view_hotel_detail_policies_check_in_out_mark"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="3dp"            android:lineSpacingExtra="5dp"            android:textColor="@color/color_666666"            android:textSize="@dimen/text_size_12"            tools:text="酒店早餐为自助早餐或套式早餐，可选中式餐点。" />        <LinearLayout            android:id="@+id/view_hotel_policies_children_and_extra_beds_container"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="12dp"            android:orientation="vertical">            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:fontFamily="sans-serif-medium"                android:text="@string/key.hotel.children.and.extra.beds"                android:textColor="@color/color_333333"                android:textSize="@dimen/text_size_12" />            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:id="@+id/view_hotel_policies_children_and_extra_beds_text"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="3dp"                android:lineSpacingExtra="5dp"                android:textColor="@color/color_666666"                android:textSize="@dimen/text_size_12"                tools:text="Hotel deposit abd prepayment Hotel deposit abd prepayment Hotel deposit abd prepayment" />            <LinearLayout                android:id="@+id/view_hotel_policies_children_table_container"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:orientation="vertical" />        </LinearLayout>        <LinearLayout            android:id="@+id/view_hotel_policies_dining_container"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="12dp"            android:orientation="vertical">            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:fontFamily="sans-serif-medium"                android:text="@string/key.hotel.dining"                android:textColor="@color/color_333333"                android:textSize="@dimen/text_size_12" />            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:id="@+id/view_hotel_policies_dining_text"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="3dp"                android:lineSpacingExtra="5dp"                android:textColor="@color/color_666666"                android:textSize="@dimen/text_size_12"                tools:text="Hotel deposit abd prepayment Hotel deposit abd prepayment Hotel deposit abd prepayment" />        </LinearLayout>        <LinearLayout            android:id="@+id/view_hotel_policies_notice_container"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="12dp"            android:orientation="vertical">            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:fontFamily="sans-serif-medium"                android:text="@string/key.hotel.notice.title"                android:textColor="@color/color_333333"                android:textSize="@dimen/text_size_12" />            <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView                android:id="@+id/view_hotel_policies_notice"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginTop="3dp"                android:ellipsize="end"                android:lineSpacingExtra="5dp"                android:maxLines="4"                android:textColor="@color/color_666666"                android:textSize="@dimen/text_size_12"                tools:text="重要通知内容" />        </LinearLayout>        <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="end"            android:layout_marginBottom="3dp"            android:text="@string/key.ibu.more"            android:textColor="@color/color_0288d1"            android:textSize="@dimen/text_size_12" />    </LinearLayout></LinearLayout>

使用ConstraintLayout后的布局

<?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="wrap_content"    android:background="@color/color_ffffff"    android:orientation="vertical">    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/hotel_policy"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="10dp"        android:fontFamily="sans-serif-medium"        android:text="@string/key.hotel.policy"        android:textColor="@color/color_333333"        android:textSize="@dimen/text_size_15"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent" />    <LinearLayout        android:id="@+id/view_hotel_detail_policies_check_in_out_container"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="10dp"        android:background="@drawable/hotel_r_4_solid_cfd7de"        android:paddingBottom="7dp"        android:paddingLeft="5dp"        android:paddingRight="5dp"        android:paddingTop="7dp"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/hotel_policy">        <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView            android:id="@+id/view_hotel_detail_policies_check_in_from"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:ellipsize="end"            android:gravity="center"            android:maxLines="1"            android:textColor="@color/color_333333"            android:textSize="@dimen/text_size_12"            tools:text="入住时间：15:00后" />        <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView            android:id="@+id/view_hotel_detail_policies_check_out_until"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:layout_weight="1"            android:ellipsize="end"            android:gravity="center"            android:maxLines="1"            android:textColor="@color/color_333333"            android:textSize="@dimen/text_size_12"            tools:text="退房时间：11:00前" />    </LinearLayout>    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_detail_policies_check_in_out_mark"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="3dp"        android:lineSpacingExtra="5dp"        android:textColor="@color/color_666666"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_detail_policies_check_in_out_container"        tools:text="酒店早餐为自助早餐或套式早餐，可选中式餐点。" />    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_extra_beds_title"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="12dp"        android:fontFamily="sans-serif-medium"        android:text="@string/key.hotel.children.and.extra.beds"        android:textColor="@color/color_333333"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_detail_policies_check_in_out_mark" />    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_policies_children_and_extra_beds_text"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="3dp"        android:lineSpacingExtra="5dp"        android:textColor="@color/color_666666"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_extra_beds_title"        tools:text="Hotel deposit abd prepayment Hotel deposit abd prepayment Hotel deposit abd prepayment" />    <LinearLayout        android:id="@+id/view_hotel_policies_children_table_container"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:orientation="vertical"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_policies_children_and_extra_beds_text" />    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_policies_dining_title"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="12dp"        android:fontFamily="sans-serif-medium"        android:text="@string/key.hotel.dining"        android:textColor="@color/color_333333"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_policies_children_and_extra_beds_text" />    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_policies_dining_text"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="3dp"        android:lineSpacingExtra="5dp"        android:textColor="@color/color_666666"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_policies_dining_title"        tools:text="Hotel deposit abd prepayment Hotel deposit abd prepayment Hotel deposit abd prepayment" />    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_policies_notice_title"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="12dp"        android:fontFamily="sans-serif-medium"        android:text="@string/key.hotel.notice.title"        android:textColor="@color/color_333333"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_policies_dining_text" />    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_policies_notice"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginEnd="15dp"        android:layout_marginStart="15dp"        android:layout_marginTop="3dp"        android:ellipsize="end"        android:lineSpacingExtra="5dp"        android:maxLines="4"        android:textColor="@color/color_666666"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_policies_notice_title"        tools:text="重要通知内容" />    <com.ctrip.ibu.framework.common.i18n.widget.I18nTextView        android:id="@+id/view_hotel_policies_more"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="end"        android:layout_marginEnd="15dp"        android:layout_marginRight="15dp"        android:paddingBottom="3dp"        android:text="@string/key.ibu.more"        android:textColor="@color/color_0288d1"        android:textSize="@dimen/text_size_12"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintTop_toBottomOf="@+id/view_hotel_policies_notice"        app:layout_goneMarginBottom="3dp" /></android.support.constraint.ConstraintLayout>

使用约束布局后嵌套层级大量减少，布局性能有所提示

但是约束布局本身还是有很多弱点，诸如使用困难，不适合在动态改变的界面中使用等，目前在项目中还只是尝试。