ConstraintLayout

作者: 小米Metre | 来源:发表于2019-06-04 19:50 被阅读0次

1.android布局-ConstraintLayout-约束布
我们能用ConstraintLayout 做些什么？
ConstraintLayout 约束布局
Layout文档整理
ConstraintLayout教程
ConstraintLayout-[Android_YangKe
MotionLayout
Constraintlayout便查手册
自定义ConstraintLayout控件不显示问题：
Android MotionLayout动画：续写Constra

布局的时候，我们大多数是使用LinearLayout和RelativeLayout，当时当布局比较复杂的时候，布局之间的嵌套就会很多，而且布局嵌套过多也会导致性能问题。

为了减少布局嵌套，Google提够了ConstraintLayout（约束布局），这个布局支持LinearLayout和RelativeLayout所有能实现的界面布局。

一、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="match_parent"
    tools:context=".MainActivity">

    <Button
         android:id="@+id/btn_first"
         android:layout_width="wrap_content"
         app:layout_constraintLeft_toLeftOf="parent"
         android:text="first"
         app:layout_constraintRight_toLeftOf="@id/btn_second"
         android:layout_height="wrap_content" />

      <Button
          android:id="@+id/btn_second"
          android:text="second"
          app:layout_constraintLeft_toRightOf="@id/btn_first"
          app:layout_constraintRight_toLeftOf="@id/btn_third"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

      <Button
          android:id="@+id/btn_third"
          android:layout_width="wrap_content"
          app:layout_constraintLeft_toRightOf="@id/btn_second"
          android:layout_height="wrap_content"
          app:layout_constraintRight_toRightOf="parent"
          android:text="third"/>
</android.support.constraint.ConstraintLayout>

二、ConstraintLayout 权重weight 使用

weight

<?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=".MainActivity">
 <Button
        android:id="@+id/btn_first"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn_second" />

    <Button
        android:id="@+id/btn_second"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@id/btn_first"
        app:layout_constraintRight_toLeftOf="@id/btn_third" />

    <Button
        android:id="@+id/btn_third"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1.5"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@id/btn_second"
        app:layout_constraintRight_toRightOf="parent" />
 
</android.support.constraint.ConstraintLayout>

三、ConstraintLayout 使用 chainStyle="spread_inside"

chainStyle="spread_inside"

<?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=".MainActivity">

<Button
        android:id="@+id/btn_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn_second" />

    <Button
        android:id="@+id/btn_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@id/btn_first"
        app:layout_constraintRight_toLeftOf="@id/btn_third" />

    <Button
        android:id="@+id/btn_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@id/btn_second"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

四、ConstraintLayout 使用 chainStyle="packed"

chainStyle="packed"

<?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=".MainActivity">
<Button
        android:id="@+id/btn_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn_second" />

    <Button
        android:id="@+id/btn_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@id/btn_first"
        app:layout_constraintRight_toLeftOf="@id/btn_third" />

    <Button
        android:id="@+id/btn_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@id/btn_second"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

五、ConstraintLayout 使用 bias

constraintHorizontal_bias="0.3"

<?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=".MainActivity">
<Button
        android:id="@+id/btn_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn_second" />

    <Button
        android:id="@+id/btn_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@id/btn_first"
        app:layout_constraintRight_toLeftOf="@id/btn_third" />

    <Button
        android:id="@+id/btn_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@id/btn_second"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

六、ConstraintLayout 使用 Circle

Circle

<?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=".MainActivity">
<TextView
        android:id="@+id/btn_first"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="first"
        android:background="@android:color/darker_gray"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <TextView
        android:id="@+id/btn_second"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:background="@android:color/holo_green_dark"
        android:text="second"
        app:layout_constraintCircle="@id/btn_first"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="135"/>

</android.support.constraint.ConstraintLayout>

七、ConstraintLayout 使用参考线Guideline

Guideline

<?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=".MainActivity">

<!-- 竖参考线：离左边距150dp的线 -->
    <android.support.constraint.Guideline
        android:id="@+id/vertical_guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="150dp" />

    <!-- 在参考线左边的View-->
    <TextView
        android:layout_width="wrap_content"
        android:background="@android:color/darker_gray"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="on the left of guide line"
        app:layout_constraintRight_toRightOf="@id/vertical_guide_line"
        />

    <!-- 在参考线右边的View-->
    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:layout_marginTop="20dp"
        android:text="on the right of guide line"
        app:layout_constraintLeft_toLeftOf="@+id/vertical_guide_line"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

七、ConstraintLayout 使用 Group

   <!-- group 通过设置关联id来控制它们的显隐  -->
    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="btn1,btn2" />

当然你设置group为visible或invisible或gone 操作时，对于的btn1与btn2也不被作用。

八、ConstraintLayout 使用 Barrier

Barrier与GuideLine一样，也是不可见的，不同的是：它是约束控件的。

Barrier

<?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=".MainActivity">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="tv1固定宽度哈哈哈哈哈哈哈哈哈"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="tv2宽度不固定啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了"
        android:textColor="@android:color/white"
        app:layout_constraintTop_toBottomOf="@+id/tv1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv1,tv2" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="啦啦啦啦啦啦拉拉哈哈哈哈哈哦哦哦哦哦哦呦呦呦"
        android:textColor="@android:color/white"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

1.android布局-ConstraintLayout-约束布
ConstraintLayout 是什么？ ConstraintLayout ConstraintLayout 怎...
我们能用ConstraintLayout 做些什么？
ConstraintLayout，约束布局 A ConstraintLayout is a ViewGroup w...
ConstraintLayout 约束布局
Android ConstraintLayout 约束布局Use ConstraintLayout to desi...
Layout文档整理
ConstraintLayout 【ConstraintLayout】 Android新特性介绍，Constrai...
ConstraintLayout教程
一.ConstraintLayout简介 ConstraintLayout是Android Studio 2.2中...
ConstraintLayout-[Android_YangKe
ConstraintLayout介绍 ConstraintLayout构建自适应界面 ConstraintLayo...
MotionLayout
MotionLayout 是ConstraintLayout的子类，可以替换任何ConstraintLayout；...
Constraintlayout便查手册
Constraintlayout便查手册摘取自ConstraintLayout Relative positio...
自定义ConstraintLayout控件不显示问题：
自定义：androidx.constraintlayout.widget.ConstraintLayout，类型的...
Android MotionLayout动画：续写Constra
MotionLayout作为ConstraintLayout子类，在ConstraintLayout 2.0库被引...