Android 约束布局 ConstraintLayout学习

一、居中

<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">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="hello"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

app:layout_constraintBottom_toBottomOf="@id/layout_a"  底部与控件layout_a的底部对齐

app:layout_constraintEnd_toEndOf="parent"                          右侧父布局的右侧对齐

app:layout_constraintStart_toStartOf="parent"                      左侧

app:layout_constraintTop_toTopOf="parent"                          顶部




二、横向左侧占比，纵向顶部占比

<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">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="hello"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.25"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintVertical_bias="0.25" />

</android.support.constraint.ConstraintLayout>

app:layout_constraintHorizontal_bias="0.25"    横向占比  控件距左侧距离加上控件距右侧距离，进行4等分，左侧占一份

app:layout_constraintVertical_bias="0.25"        纵向占比  控件距顶部距离加上控件距底部距离，进行4等分，顶部占一份


三、辅助线Guideline

<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.Guideline

        android:id="@+id/guide_line"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        app:layout_constraintGuide_percent="0.5" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginBottom="40dp"

        android:text="hellohellohellohellohello"

        app:layout_constraintBottom_toTopOf="@id/guide_line"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>


四、chainStyle

<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">

    <TextView

        android:id="@+id/tv_a"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="a"

        app:layout_constraintHorizontal_chainStyle="packed"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toStartOf="@+id/tv_b" />

    <TextView

        android:id="@+id/tv_b"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="b"

        app:layout_constraintStart_toEndOf="@id/tv_a"

        app:layout_constraintEnd_toStartOf="@+id/tv_c" />

    <TextView

        android:id="@+id/tv_c"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="c"

        app:layout_constraintStart_toEndOf="@id/tv_b"

        app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>


如果不设置chainStyle默认展示样式就是Spread Chain

五、constraintDimensionRatio 宽高比

<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">

    <ImageView

        android:layout_width="123dp"

        android:layout_height="0dp"

        android:src="@color/pb_blue"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintDimensionRatio="5:3"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>


六、constraintBaseline_toBaselineOf  中线对齐

<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">

    <TextView

        android:id="@+id/baseline_1"

        android:layout_width="wrap_content"

        android:layout_height="50dp"

        app:layout_constraintVertical_bias="0.3"

        app:layout_constraintHorizontal_bias="0.2"

        android:background="@color/pb_blue"

        android:gravity="center"

        android:text="baseline1"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

    <TextView

        android:id="@+id/baseline_2"

        android:layout_width="0dp"

        android:layout_height="100dp"

        android:layout_marginLeft="20dp"

        android:background="@color/pb_blue"

        app:layout_constraintDimensionRatio="1:1"

        android:gravity="center"

        android:text="baseline2"

        app:layout_constraintBaseline_toBaselineOf="@id/baseline_1"

        app:layout_constraintStart_toEndOf="@id/baseline_1" />

</android.support.constraint.ConstraintLayout>


七、android.support.constraint.Group 把相关控件放到一个组里统一控制隐藏或显示

<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">

    <ImageView

        android:id="@+id/profile_image"

        android:layout_width="123dp"

        android:layout_height="0dp"

        android:src="@color/pb_blue"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintDimensionRatio="5:3"

        app:layout_constraintTop_toTopOf="parent" />

    <TextView

        android:id="@+id/profile_name"

        android:layout_width="123dp"

        android:layout_height="0dp"

        android:text="hello"

        app:layout_constraintDimensionRatio="5:3"

        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Group

        android:id="@+id/profile"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:visibility="gone"

        app:constraint_referenced_ids="profile_name,profile_image" />

</android.support.constraint.ConstraintLayout>


八、layout_constrainWidth_percent layout_constrainHeight_percent

这两个属性的作用就是指定当前控件的宽度或高度是父控件的百分之多少。可设置的值在 0 - 1 之间，1 就是 100%。

<ImageView

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintWidth_percent="0.8"

        app:layout_constraintDimensionRatio="5:3"

        android:src="@color/pb_blue"

        app:layout_constraintTop_toTopOf="parent" />


九、android.support.constraint.Placeholder

Placeholder（占位符）是一个虚拟对象，作用和它的名字一样，就是占位。

当放置好 Placeholder 后，可以通过 setContentId() 方法将占位符变为有效的视图。如果视图已经存在于屏幕上，那么视图将会从原有位置消失。

除此之外，还可以通过 setEmptyVisibility() 方法设置当视图不存在时占位符的可见性。

下面的例子演示了占位符的使用，当点击顶部头像时，顶部头像会消失并在占位符处显示：

<?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"

    android:padding="16dp"

    tools:context="com.github.airsaid.constraintlayoutdemo.MainActivity">

    <ImageView

        android:id="@+id/avatar"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@mipmap/ic_avatar"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Placeholder

        android:id="@+id/placeholder"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

avatar.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                TransitionManager.beginDelayedTransition(constraintLayout);

                placeholder.setContentId(view.getId());

            }

        });

十、android.support.constraint.Barrier

当我们在布局时，有时候就会遇到布局会随着数据的多少而改变大小的情况。以下图为例：


以前的做法是把A，B外包一个Layout，然后C设置在Layout的右侧

通过上图就可以发现，当在 A、B 控件的大小都不确定的情况下，C 以谁作为约束对象都不对。如果以 A 作为约束对象，那么当 B 的宽度过宽时就会被遮挡，同理以 B 作为约束也是如此。

那么此时，Barrier（屏障）就派上用场了。这是个非常好用的东东，和 GuideLine 一样，它是一个虚拟的 View，对界面是不可见的。目的就是辅助布局。

对 Barrier 可以使用的属性有：

barrierDirection：设置 Barrier  所创建的位置。可设置的有：bottom、end、left、right、start、top。

constraint_referenced_ids：设置 Barrier 引用的控件。可设置多个，设置的方式是：id, id。（无需加 @id/）

barrierAllowsGoneWidgets：默认为 true，即当 Barrier 引用的控件被 GONE 掉时，则 Barrier 默认的创建行为是在已 GONE 掉控件的已解析位置上进行创建。如果设置为 false，则不会将 GONE 掉的控件考虑在内。

说再多不如看代码，还是以上图为例，来看看 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"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:padding="16dp">

    <TextView

        android:id="@+id/title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Title"

        android:textSize="16sp"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

    <TextView

        android:id="@+id/desc"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="10dp"

        android:text="This is a descriptive text."

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@id/title" />

<android.support.constraint.Barrier

        android:id="@+id/barrier"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:barrierDirection="end"

        app:constraint_referenced_ids="title, desc" />

    <TextView

        android:id="@+id/content"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginLeft="10dp"

        android:text="This is a piece of content that is very long and long very long and long ..."

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toEndOf="@id/barrier"

        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>


©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容