Android Design - ConstraintLayou

2018-07-11 本文已影响28人 ChenME

之前都是使用 RelativeLayout（后面简称RL）和 LinearLayout（后面简称LL）进行页面布局，再复杂难搞的 UI 也能搞定（此处不讨论那些需要自定义的UI）。但是都知道一个问题，那就是 UI 越复杂，需要嵌套的层级越多，这样带来结果就是在渲染页面时，会消耗大量的资源，严重的时候甚至会出现丢帧现象，所以卡顿就出现了。ConstraintLayout（后面简称CL）出现之后，就可以大量减少 UI 层级嵌套，处理的好，可以做到0嵌套。

先上图，整个文档都围绕这个图片来展开：

ConstraintLayout.jpeg

引入依赖（以下两种方式，视 Gradle 版本自己选择）：

compile  'com.android.support.constraint:constraint-layout:1.1.2'
// 老版本 Gradle，用上面的；新版本选用下面的
implementation 'com.android.support.constraint:constraint-layout:1.1.2'

在做具体需求之前，需要先说明一下，在 CL 布局中 match_parent这个值用 0dp来替代，后面例子会用到，不再做解释；
需求来了，做一个 Banner，Banner的宽度填满屏幕宽度，高度为宽度的4/1，在之前我们都是在 Java 代码中动态去获取屏幕宽度，然后将计算出来的高度值动态设置给 Banner。但是在 CL 布局中不必那么麻烦，只需一句代码就搞定。

Banner.jpeg

先看完整代码：

<TextView
    android:id="@+id/tv_banner"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#765"
    android:gravity="center"
    android:text="I'am a Banner"
    app:layout_constraintDimensionRatio="H,4:1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

首先我们通过约束条件

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

让Banner在宽度上填充了屏幕宽度，然后通过设置 app:layout_constraintDimensionRatio="H,4:1" 将高度设置为宽度的4/1 ，同样的还有

app:layout_constraintDimensionRatio="4:1" <!-- 效果和例子中一样，可看做是它的简写 -->
app:layout_constraintDimensionRatio="W,4:1" <!-- 设置高宽比为 4:1 -->

上面提到的约束条件还有

app:layout_constraintLeft_toLeftOf
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintTop_toTopOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintBaseline_toBaselineOf

接下来，btn2 在 btn1 的右侧，并且 btn2 在右侧剩余空间的中间：

btn1 2.jpeg

先看完整代码：

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn1"
    android:textAllCaps="false" />

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn2"
    android:textAllCaps="false"
    app:layout_constraintLeft_toRightOf="@+id/btn1"
    app:layout_constraintRight_toRightOf="parent" />

重点看 btn2 中的

app:layout_constraintLeft_toRightOf="@+id/btn1"
app:layout_constraintRight_toRightOf="parent"

这两个约束条件就像两个弹力相同的橡皮筋，同时对 btn2 作用，而btn2 的宽度为内容包裹，所以 btn2 被居中放置了；
那么我们如果设置了 btn2 的宽度会怎样呢？这里存在两种情况，如果设置的宽度小于右侧剩余的宽度，那效果和上面的一样；如果大于会怎么呢？那就出现了 btn3 和 btn4 的情况了。

btn3 4.jpeg

btn4 设置了宽度，并且这个宽度大于 btn3 右侧的宽度，所以 btn3 就被覆盖了一部分，同时 btn4 右侧一部分也超出了屏幕。看代码：

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn3"
    android:textAllCaps="false"/>

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn4"
    android:layout_width="350dp"
    android:layout_height="wrap_content"
    android:text="btn4"
    android:textAllCaps="false"
    app:layout_constraintLeft_toRightOf="@+id/btn3"
    app:layout_constraintRight_toRightOf="parent" />

那么如果想让 btn4 将剩余的空间占满呢？

btn5 6.jpeg

那就是 btn5 和 btn6 的关系了，看代码：

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="btn5"
    android:textAllCaps="false" />

<android.support.v7.widget.AppCompatButton
    android:id="@+id/btn6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="btn6"
    android:textAllCaps="false"
    app:layout_constraintLeft_toRightOf="@+id/btn5"
    app:layout_constraintRight_toRightOf="parent" />

不难看出，就是讲 btn6 的宽度设置为了 0dp，所以它就占据了剩余的空间。
那如果想要均分呢？

tab1 2 3.jpeg

接着看 tab1 tab2 tab3 的关系，源码：

<TextView
    android:id="@+id/tv_tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab2" />

<TextView
    android:id="@+id/tv_tab2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#A67"
    android:gravity="center"
    android:text="Tab2"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab1"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab3"/>

<TextView
    android:id="@+id/tv_tab3"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#767"
    android:gravity="center"
    android:text="Tab3"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab2"
    app:layout_constraintRight_toRightOf="parent" />

首先设置这3个 tab 的宽度为 0dp ，然后分别设置它们之间相互的约束

<!-- tab1 -->
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/tv_tab2"

<!-- tab2 -->
app:layout_constraintLeft_toRightOf="@+id/tv_tab1"
app:layout_constraintRight_toLeftOf="@+id/tv_tab3"

<!-- tab3 -->
app:layout_constraintLeft_toRightOf="@+id/tv_tab2"
app:layout_constraintRight_toRightOf="parent"

要是按比例分配又该怎么做呢？

tab4 5 6.jpeg

tab4 : tab5 : tab6 的宽度之比为 2:1:1，这就要用到 app:layout_constraintHorizontal_weight 属性了，看源码：

<TextView
    android:id="@+id/tv_tab4"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:layout_marginTop="10dp"
    android:background="#FFEBEE"
    android:gravity="center"
    android:text="Tab4"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab5" />

<TextView
    android:id="@+id/tv_tab5"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#FFCDD2"
    android:gravity="center"
    android:text="Tab5"
    app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab4"
    app:layout_constraintRight_toLeftOf="@+id/tv_tab6" />

<TextView
    android:id="@+id/tv_tab6"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#EF9A9A"
    android:gravity="center"
    android:text="Tab6"
    app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/tv_tab5"
    app:layout_constraintRight_toRightOf="parent" />

在8中平分的代码基础上，添加

<!-- tab4 -->
app:layout_constraintHorizontal_weight="2"

<!-- tab5 -->
app:layout_constraintHorizontal_weight="1"

<!-- tab6 -->
app:layout_constraintHorizontal_weight="1"

如果设置了宽度，又会怎样呢？

设置了宽度，那么它们就会出现 tab10 tab11 tab12 的情况，即每个 tab 之间的空间一样大小，同时第一个和最后一个距离父组件的空间也一样大小。

如果去掉与父控件之间的空间呢？

tab7 8 9.jpeg

这需要用到另一个新的属性 app:layout_constraintHorizontal_chainStyle ，它有三个取值，分别是

spread_inside
spread
packed

分别对应 tab7 tab8 tab9、tab10 tab11 tab12、tab13 tab14 tab15 的情况，也可以看出，这个属性的默认值就是 spread

tab10 11 12.jpeg

tab13 14 15.jpeg

直到这里，貌似 RL 和 LL 能够实现的布局，CL 都已经完成了，但是还有一个属性也要讲一下

app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias

这两个属相分别设置子控件距离父控件右侧和底部距离的百分比，当都为 0 时，子组件在父组件的左上角；当都为 1 时，则在右下角。
使用时注意加入下面四行代码：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_banner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#765"
        android:gravity="center"
        android:text="I'am a Banner"
        app:layout_constraintDimensionRatio="H,4:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/tv_banner" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn2"
        android:textAllCaps="false"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_banner" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn3"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn4"
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:text="btn4"
        android:textAllCaps="false"
        app:layout_constraintLeft_toRightOf="@+id/btn3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn1" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn5"
        android:textAllCaps="false"
        app:layout_constraintTop_toBottomOf="@+id/btn3" />

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/btn6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="btn6"
        android:textAllCaps="false"
        app:layout_constraintLeft_toRightOf="@+id/btn5"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn3" />


    <TextView
        android:id="@+id/tv_tab1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#f67"
        android:gravity="center"
        android:text="Tab1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab2"
        app:layout_constraintTop_toBottomOf="@+id/btn5" />

    <TextView
        android:id="@+id/tv_tab2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#A67"
        android:gravity="center"
        android:text="Tab2"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab1"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab3"
        app:layout_constraintTop_toBottomOf="@+id/btn5" />

    <TextView
        android:id="@+id/tv_tab3"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#767"
        android:gravity="center"
        android:text="Tab3"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn5" />

    <TextView
        android:id="@+id/tv_tab4"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#FFEBEE"
        android:gravity="center"
        android:text="Tab4"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab5"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab1" />

    <TextView
        android:id="@+id/tv_tab5"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#FFCDD2"
        android:gravity="center"
        android:text="Tab5"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab4"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab6" />

    <TextView
        android:id="@+id/tv_tab6"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#EF9A9A"
        android:gravity="center"
        android:text="Tab6"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab5"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_tab7"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#01579B"
        android:gravity="center"
        android:text="Tab7"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab8"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab4" />

    <TextView
        android:id="@+id/tv_tab8"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#29B6F6"
        android:gravity="center"
        android:text="Tab8"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab7"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab7"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab9" />

    <TextView
        android:id="@+id/tv_tab9"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#B3E5FC"
        android:gravity="center"
        android:text="Tab9"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab7"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab8"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_tab10"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#FFCCBC"
        android:gravity="center"
        android:text="Tab10"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab11"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab7" />

    <TextView
        android:id="@+id/tv_tab11"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#FF7043"
        android:gravity="center"
        android:text="Tab11"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab10"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab10"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab12" />

    <TextView
        android:id="@+id/tv_tab12"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#BF360C"
        android:gravity="center"
        android:text="Tab12"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab10"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab11"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/tv_tab13"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="#006064"
        android:gravity="center"
        android:text="Tab13"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab14"
        app:layout_constraintTop_toBottomOf="@+id/tv_tab10" />

    <TextView
        android:id="@+id/tv_tab14"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#26C6DA"
        android:gravity="center"
        android:text="Tab14"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab13"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab13"
        app:layout_constraintRight_toLeftOf="@+id/tv_tab15" />

    <TextView
        android:id="@+id/tv_tab15"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="#B2EBF2"
        android:gravity="center"
        android:text="Tab15"
        app:layout_constraintBottom_toBottomOf="@+id/tv_tab13"
        app:layout_constraintLeft_toRightOf="@+id/tv_tab14"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="#ff639b"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.95"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.95" />
</android.support.constraint.ConstraintLayout>

Android Design - ConstraintLayou

猜你喜欢

热点阅读