Android ConstraintLayout的易懂教程

1. 简介

ConstraintLayout是Google提供的一种ViewGrop,由于它不用像LinearLayout那样嵌套的方式实现复杂的Layout，使得ConstraintLayout更加易写易读，还能让App的性能有所提升(由于少了层级嵌套，因此绘制时的性能损耗也会减小)。

ConstraintLayout如其名字，它是经过设置显示限制来决定View的显示位置。

2. 使用方法

2.1 引入外部库和设置ViewGroup

正常状况下，新建一个工程时会自动加入ConstraintLayout的库，若是没有则须要手动加入。

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
复制代码

接下来须要把layout文件中的根ViewGroup设置成ConstraintLayout。

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent">
    ......
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

2.2 设置基本的限制条件

介绍一下决定View位置的几种ConstraintLayout的限制条件。

• app:layout_constraintTop_toTopOf //该View的上部与指定的View上部位置一致
• app:layout_constraintTop_toBottomOf //该View的上部与指定的View下部位置一致
• app:layout_constraintBottom_toBottomOf
• app:layout_constraintBottom_toTopOf
• app:layout_constraintStart_toStartOf
• app:layout_constraintStart_toEndOf
• app:layout_constraintEnd_toEndOf
• app:layout_constraintEnd_toStartOf

须要注意的是除了设置View的ID，还能够设置parent。parent是指显示界面。 还有好比同时设置左右限制，则View会居中，就像两端被绳子拉紧居中似的。

若是想要左侧或者右侧倾斜，则须要加入权重。

app:layout_constraintHorizontal_bias="0.2"
复制代码

还有若是要设置View的margin须要用下面的方法。

• android:layout_marginTop
• android:layout_marginButtom
• android:layout_marginStart
• android:layout_marginEnd

举一个例子,你们应该很快就会理解了。

<TextView android:id="@+id/textView10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="50dp" android:text="TextView10" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.2" app:layout_constraintStart_toStartOf="parent" />
复制代码

2.3 Barrier

有时候咱们会有根据多个View中最右端的位置，决定另外一个View的位置。若是使用ConstraintLayout的Barrier就容易实现。

首先增长一个Barrier,而且设置以下的设置。

2.3.1 Barrier的方向

须要决定要把Barrier放置在相对于View的哪一个位置。根据上述需求:

app:barrierDirection="end"
复制代码

除了end,还有start,top,bottom。

2.3.2 引用的ID

还须要设置对限制起做用的引用ID。若是咱们是须要根据两个TextView中最右端的位置，来决定另外一View的位置时，能够写成以下的代码。

app:constraint_referenced_ids="textView1,textView2"
复制代码

2.3.3 例

<androidx.constraintlayout.widget.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="textView1,textView2" />
复制代码

2.4 GuideLine

若是在一个View中有不少组件须要设置同样的margin的时候可使用GuideLine，使其日后的总体修改更容易，代码更加简洁。

GuideLine正如它的名字，它是一个参考线，但它是隐形的。GuideLine自己是不会显示在View中的，它只是做为参考线，统一各个View的margin。

2.4.1 设置参考线的方向

咱们须要设置参考线是纵向仍是横向的。以下代码。

android:orientation="vertical"
复制代码

vertical是纵向，horizontal是横向。

2.4.2 设置参考线的位置

经过使用基本限制条件来设置参考线的位置。但这里有一个特别值得注意的一点是，margin的设置是不能用普通的限制条件，须要用其专门的margin限制条件。

margin的限制条件:

• app:layout_constraintGuide_end
• app:layout_constraintGuide_start
• app:layout_constraintGuide_top
• app:layout_constraintGuide_bottom

下面的代码的意思是，把参考线设置在离界面右端的30dp的位置。

app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_end="30dp"
复制代码

2.4.3 设置其余View的位置限制条件

剩下的就是把View的位置限制条件设置成GuideLine便可。

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World1!" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toEndOf="@id/guideline1" />
复制代码

2.4.4 总体代码

<androidx.constraintlayout.widget.Guideline android:id="@+id/guideline1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintStart_toStartOf="parent" app:layout_constraintGuide_begin="30dp" />
         
         <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World1!" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toEndOf="@id/guideline1" />
复制代码

2.4.5 截图

2.5 ChainStyle

根据上面的叙述，对View设置左右的限制时，该View会居中显示。可是若是两个View想要贴在一块儿显示，就须要用到ChainStyle。

ChainStyle一共有三种类型。

• spread_inside
• spread
• packed

固然根据方向分为纵向和横向的ChainStyle。

• layout_constraintHorizontal_chainStyle
• layout_constraintVertical_chainStyle

使用ChainStyle时有一个注意点是，须要对View的两侧都要设置限制，若是缺乏限制条件，ChainStyle就不会起做用。

2.5.1 spread_inside

spread_inside是两边View贴近边缘，中间居中。

2.5.2 spread

spread是全部View居中。

2.5.3 packed

packed是全部的View都贴在一块儿。

2.5.4 例

<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="150dp" android:text="TextView1" app:layout_constraintEnd_toStartOf="@id/textView2" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="150dp" android:text="TextView2" app:layout_constraintEnd_toStartOf="@id/textView3" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toEndOf="@id/textView1" app:layout_constraintTop_toTopOf="parent" />

        <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="150dp" android:text="TextView3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toEndOf="@id/textView2" app:layout_constraintTop_toTopOf="parent" />
复制代码

3. 其余

除了上述内容，还有不少关于ConstraintLayout的其余内容，由于篇幅有限就再也不介绍了。

GitHub： github.com/HyejeanMOON…

4. 其余教程

Google的MergeAdapter的使用
Paging在Android中的应用
Android WorkManager的使用 android中的Transition动画的使用