ConstraintLayout 从 0「入门」 到 1 「放弃」

1. Dimensions constraints 「尺寸约束」

1.1 Minimum dimensions on ConstraintLayout
可以使用 android:minWidth 与 android:minHeight 。
当 ConstraintLayout 的尺寸被设置为 WRAP_CONTENT 时，这两个属性会起作用。

1.2 Widgets dimension constraints
与其他布局的区别是没有「MATCH_PARENT」,可以使用 「0dp」代替。

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

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="32dp"
            android:background="@color/c_FAB256"
            android:text="MinSuFragment"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </android.support.constraint.ConstraintLayout>

image.png

1.3 Ratio
利用「layout_constraintDimensionRatio」这个属性可以根据比例去设置view 的宽或者高。

第一种用法：

    <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">
      <!--
        解释下这个布局
        首先是高度 在 layout_constraintBottom_toBottomOf
         layout_constraintTop_toTopOf  layout_height="0dp"
         三个属性值的设置下，高度是根布局的高度；
         然后，设置宽度是 wrap_content ；
         最后，设置属性 layout_constraintDimensionRatio="1:1"  ，
         则，此 View 的高度就是 View 的宽度值。即，根据宽度去改变高度。
        -->
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@color/c_FAB256"
            app:layout_constraintDimensionRatio="1:1"
            android:text="MinSuFragment" />
    </android.support.constraint.ConstraintLayout>

image.png

第二种用法：

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

        <!--
            解释下这个的使用：
            当 view 的宽高均设置为如下属性，
            再添加属性 layout_constraintDimensionRatio="H,2:1"
            则表示，高度调整为屏幕宽度的二分之一「比例始终都是 宽：高 」
        -->

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintDimensionRatio="H,2:1"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@color/c_FAB256"
            android:text="MinSuFragment" />
    </android.support.constraint.ConstraintLayout>

image.png

把上面的 app:layout_constraintDimensionRatio="W,1:2" 后，则表示动态改变宽度，依然是 宽:高 = 1:2 。

image.png

待继续 .......