constrain用法_ConstrainLayout相关用法

自从constraintlayout出来后，我就很少使用其他的布局了，主要原因除了它的layout和渲染效率提升以外，它太灵活了，极其少的情景下实现不了需求。

基本用法

以下图为例

8D2DBDCA-4901-424E-B2EF-8A7176F1A3F6.png

整个布局只有一个层级。

相关约束(上/下/左/右)

app:layout_constraintLeft_toLeftOf="xx"

app:layout_constraintTop_toTopOf="xx"

app:layout_constraintTop_toBottomOf="xx"

app:layout_constraintBottom_toTopOf="@+id/xx"

app:layout_constraintRight_toRightOf="xx"

app:layout_constraintBaseline_toBaselineOf="xx"

guildeline的用法

ui设计一般以375 x 750dp为设计屏幕尺寸。但是android屏幕众多，不能以dp为单位进行布局实现，这时候以guideline实现某些布局可能更适合。

下面是它的一种典型用法

android:id="@+id/gd_two"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:orientation="vertical"

app:layout_constraintGuide_percent="0.5" />

控件A和控件B居中对齐

6D75BE2D-D5FB-4270-B7D9-F19835B566E9.png

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/tv_a"

android:layout_width="60dp"

android:layout_height="40dp"

android:gravity="center"

android:background="@color/orange_ff9300"

android:text="控件A"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

/>

android:id="@+id/tv_b"

android:layout_width="60dp"

android:layout_height="80dp"

android:layout_marginLeft="16dp"

android:background="@color/orange_ff9300"

android:gravity="center"

android:text="控件B"

app:layout_constraintBottom_toTopOf="@+id/tv_a"

app:layout_constraintLeft_toRightOf="@+id/tv_a"

app:layout_constraintTop_toBottomOf="@+id/tv_a" />

Baseline

59F15527-122F-4BE4-BCF0-B3A9D560EA5F.png

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/tv_a"

android:layout_width="60dp"

android:layout_height="40dp"

android:gravity="center"

android:background="@color/orange_ff9300"

android:text="控件A"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

/>

android:id="@+id/tv_b"

android:layout_width="60dp"

android:layout_height="80dp"

android:layout_marginLeft="16dp"

android:background="@color/orange_ff9300"

android:gravity="center"

android:text="控件B"

app:layout_constraintBaseline_toBaselineOf="@+id/tv_a"

app:layout_constraintLeft_toRightOf="@+id/tv_a" />

layout_goneMarginBottom

这个属性要俩个图对比才明显，如下图

4B097EB4-96B6-44EE-8F64-585F4C9BD9D9.png

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/gray_999999"

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/tv_a"

android:layout_width="60dp"

android:layout_height="40dp"

android:gravity="center"

android:background="@color/orange_ff9300"

android:text="控件A"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintBottom_toTopOf="@+id/tv_b"

app:layout_goneMarginBottom="32dp"

/>

android:id="@+id/tv_b"

android:layout_width="60dp"

android:layout_height="80dp"

android:layout_marginBottom="@dimen/dp8"

android:background="@color/blue_17a1e6_80"

android:gravity="center"

android:text="控件B"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toBottomOf="@+id/tv_a" />

控件B加上属性android:visibility="gone"后，效果如下

1C3D612D-C482-4601-AB3D-07095A181A55.png

(未完待续)