Android-ConstraintLayout(约束布局)-D

Dimensions constraints尺寸约束这个东东就是尺寸显示相关问题。熟悉线性布局、相对布局的对应以前的布局方式比较熟悉，什么内容包裹，match_parent、靠右、靠左、靠上、靠下、内容居中、布局居中，还有线性布局水平没有靠右等属性。 基本上了解和注意以上就差不多够用了。之前我也对比过，用以前的布局方式，如果是复杂的布局确实会嵌套会相对多，而且略显复杂的样子。

前几篇基本都是相对位置的布局，在加上之前说的Barrier基本的项目差不多可以搞定了。不过有时候还是不够，总会出现一些看似奇怪的问题。我们先说下尺寸布局这块，然后分析一些会出问题的案例。

Dimensions constraints有以下几种（英文看着还是难 Dimensions constraints）:

1. Minimum dimensions on ConstraintLayout

**2. **Widgets dimension constraints

3. WRAP_CONTENT : enforcing constraints (Added in 1.1**)

4. MATCH_CONSTRAINT dimensions (Added in 1.1**)

**5. **Min and Max

**6. **Percent dimension

7. Ratio

@1. Minimum dimensions on ConstraintLayout

You can define minimum and maximum sizes for the ConstraintLayout itself:

• android:minWidth set the minimum width for the layout
• android:minHeight set the minimum height for the layout
• android:maxWidth set the maximum width for the layout
• android:maxHeight set the maximum height for the layout

Those minimum and maximum dimensions will be used byConstraintLayoutwhen its dimensions are set toWRAP_CONTENT.

hl: 你可以对你的约束布局设置大小限制（就是最小/大 、高度/宽度），这种是用在你的尺寸设置为**wrap_content **的时候有效 - 你去尝试下就知道了，如果设置为match_parent，会发现一些奇怪的问题，所以不要乱用哟。

look:

    <?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="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    android:maxHeight="200dp"
    android:maxWidth="200dp"
    android:minHeight="100dp"
    android:minWidth="100dp">

    <TextView
        android:id="@+id/sb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="sb ppxia"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

image

@2. Widgets dimension constraints

The dimension of the widgets can be specified by setting the android:layout_widthandandroid:layout_height attributes in 3 different ways:

• Using a specific dimension (either a literal value such as 123dp or a Dimensionreference)
• Using WRAP_CONTENT, which will ask the widget to compute its own size
• Using 0dp, which is the equivalent of "MATCH_CONSTRAINT"

image

Fig. 8 - Dimension Constraints

The first two works in a similar fashion as other layouts. The last one will resize the widget in such a way as matching the constraints that are set (see Fig. 8, (a) is wrap_content, (b) is 0dp). If margins are set, they will be taken in account in the computation (Fig. 8, (c) with 0dp).

Important: MATCH_PARENT is not recommended for widgets contained in a ConstraintLayout. Similar behavior can be defined by using MATCH_CONSTRAINT with the corresponding left/right or top/bottom constraints being set to "parent".

hl: 有三种方式设置控件约束布局的宽高：

1.直接设置尺寸dp

2.利用wrap_content内容包裹 - 这个大家用的多了，不解释

3. 利用match_constraint（就是match_parent属性）设置宽/高为0dp，然后利用适应约束布局 - 其实就是利用left/right or top/bottom来实现match_constraint替代match_parent。

look: 我们来看看实际的例子（至于是宽度、还是高度、还是都设置为0dp的方式，随意你了）

     <?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:background="@color/colorAccent">

    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="fuck full"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

image

@2. WRAP_CONTENT : enforcing constraints (Added in 1.1)

If a dimension is set to WRAP_CONTENT, in versions before 1.1 they will be treated as a literal dimension -- meaning, constraints will not limit the resulting dimension. While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT, yet keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attribute:

• app:layout_constrainedWidth=”true|false”
• app:layout_constrainedHeight=”true|false

hl: 意思就是说如果设置了wrap_content的话，1.1以后的版本意味着如果生成的尺寸过大，将会导致约束失效（从翻译来看说的是约束不会限制生成的尺寸，反过来理解就是签名的意思），如果你仍然要保持约束性，则可以增加app:layout_constrainedWidth属性来保持这个约束 - 感觉好难理解，就理解了下。

look: 父布局宽度定死先， 然后sbsb目前内容比较短的情况

image

然后sbsb目前内容比较长的情况

image

看下一开始的代码:

   <?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="80dp"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent">

    <TextView
        android:id="@+id/sb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="sb ppxia"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:text="sbsbsbsbsb"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/sb1"
        app:layout_constraintTop_toBottomOf="@id/sb1" />

</android.support.constraint.ConstraintLayout>

如果想保持这个约束肿么办？app:layout_constrainedWidth就派上用场了

   <?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="80dp"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent">

    <TextView
        android:id="@+id/sb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="sb ppxia"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:text="sbsbsbsbsb"
        app:layout_constrainedWidth="true"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/sb1"
        app:layout_constraintTop_toBottomOf="@id/sb1" />

</android.support.constraint.ConstraintLayout>

image

其实还蛮有用的样子。垂直关系的同样处理就可以了。

增加: 基于上面的布局，我们改造下看下不设置靠右属性的后果

<?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="wrap_content"
    android:background="@color/colorAccent">

    <TextView
        android:id="@+id/sb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="sb ppxia"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:text="sb ppxibsssssssssbsbsbsbsbsbsbssbsbsbsbsbsbsbsbsb"
        app:layout_constrainedWidth="true"
        app:layout_constraintTop_toBottomOf="@id/sb1"
        app:layout_constraintLeft_toRightOf="@id/sb1" />

</android.support.constraint.ConstraintLayout>

image

解决: app:layout_constraintRight_toRightOf="parent"

但是那样有个问题？就是内容少的时候，是居中的不是靠左？？？

image

继续解决: app:layout_constraintHorizontal_bias="0.0"

 <?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="wrap_content"
    android:background="@color/colorAccent">

    <TextView
        android:id="@+id/sb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:text="sb ppxia"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:text="sb ppxibs"
        app:layout_constrainedWidth="true"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toRightOf="@id/sb1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/sb1" />
</android.support.constraint.ConstraintLayout>

image

@3 MATCH_CONSTRAINT dimensions (Added in 1.1) 可以略过其实就是一个大小限制问题，目前来看用的不多。

@4 Percent dimension

To use percent, you need to set the following:

• The dimension should be set to MATCH_CONSTRAINT (0dp)
• The default should be set to percent app:layout_constraintWidth_default="percent" or app:layout_constraintHeight_default="percent"
  (Note: this is necessary in 1.1-beta1 and 1.1-beta2, but will not be needed in following versions if the percent attribute is defined)
• Then set the layout_constraintWidth_percent or layout_constraintHeight_percentattributes to a value between 0 and 1

@hl: 满足一下条件可用：

1.布局需要设置为match_constraint，且宽/高设置为0dp；

2.然后默认的宽度约束为percent

3.然后就可以设置百分比了0-1

<?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="wrap_content"
    android:background="@color/colorAccent">

    <Button
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.2"
        android:id="@+id/sbBtn01"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

image

@5 Ratio

这个比较简单了，官方也略带说了下。主要就是控件本身 一个宽高比例...

比如你要设置高度和宽度一样，那你就把高度设置为0dp，然后app:layout_constraintDimensionRatio="1:1"即可。 同理，宽度设置和高度一样也是这样做。

不过在ui给资源的今天，或者说很少有正方形控件的今天，基本上不怎么用。当然不排除哪天需要用。

算是琢磨了一天！！！这个基本差不多了。再配合之前的一些知识，市面上的布局应该妥妥的没问题了。尽量用约束替换以前的布局，嵌套上能少很多，尤其是复杂布局。

Next，继续Chains、Virtual Helper objects, 争取明天短暂的结束这个部分。 目前新项目已经全部用约束布局做了。 如果有问题的可以私聊我，交流交流....