ConstraintLayout的一些使用翻译

2018-12-31  本文已影响9人  粉色小猫与蓝色小妖

可以使用的各种约束：

注意：约束中不能循环依赖

1.Relative positioning

相对位置是在ConstraintLayout创建Layout基本模块之一。这些约束允许你放置一个相对于另一个的控件。你可以约束一个控件在水平和垂直方向。

基本概念是约束控件的一边对于另外一个控件的另一边。
举例：
把Button B放到位于 Button A的右边：


1.png

布局可以这么写：

<Button android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    android:minHeight="50dp"
    />
<Button
    android:id="@+id/buttonB"
    app:layout_constraintLeft_toRightOf="@id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    android:minHeight="50dp"
     />

这告诉系统我们想要把Button B的左边约束到Button A的右边。这样的位置约束意味着系统将有两边使用相同的位置。这个不是很明白？？？？

2.png

下面是可用约束的清单：

They all take a reference id to another widget, or the parent(这将指向父控件，比如ConstraintLayout)
示例：

<Button
    android:id="@+id/buttonB"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    android:minHeight="50dp"
     />

2.Margins

3.png

如果设置了margins,它们会应用到对应的约束，将margin强转成target和source side之前的space。可用于这种效果的的layout maigin 属性有：

注意：margin只能为正或者0.

<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    android:minHeight="50dp"
    />
<Button
    android:id="@+id/buttonB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    app:layout_constraintLeft_toRightOf="@id/buttonA"
    android:layout_marginStart="50dp"
    android:minHeight="50dp"
     />
</>

设置 ButtonB 距离 buttonA 50dp

和GONE 控件相关联的Margins
如果约束目标控件的Visibility是 View.GONE，你可以使用下面的属性：

<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    android:visibility="gone"
    android:minHeight="50dp"
    />
<Button
    android:id="@+id/buttonB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    app:layout_constraintLeft_toRightOf="@id/buttonA"
    app:layout_goneMarginStart="50dp"
    android:minHeight="50dp"
     />
</>

在buttonA 的Visibility设置为GONE的时候，layout_goneMarginStart会其作用，其他时候不起作用。

3.Centering positioning

ConstraintLayout 有用的一方面是它如何处理"不可能"的约束。例如：

<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:minHeight="50dp"
    />
</>

这两个约束不能同时满足，除非ConstraintLayout 的尺寸和Button一样。
这个例子的实际效果是居中处理了。

4.png

在这个例子中，约束行为相反使控件边距平等的拆分，所以最后控件在父容器的中央。

Bias偏向
默认处理相反的约束是让控件居中，但可以调整控件位置偏向一边使用bias属性：

<android.support.constraint.ConstraintLayout ...>
<Button android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintHorizontal_bias="0.3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:minHeight="50dp"
    />
</>

4.Circular positioning

你可以约束在一个角度和距离一个控件的中心相对于另一个控件的中心。这样你就可以摆放控件在一个圆上。可以用到的属性如下：

6.png 
<android.support.constraint.ConstraintLayout ...>
    <Button android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:minHeight="50dp"
        />
    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintCircle="@id/buttonA"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp"
        android:minHeight="50dp"
        />
</>

5.Visibility behavior

ConstraintLayout 可以将处理控件将它标志为View.GONE.
GONE 的控件不会被展示也不是layout的一部分。控件的尺寸不会被修改如果被标志为GONE.
但根据layout计算，GONE控件仍然是ConstraintLayout 的一部分，有一个重要的区别：

7.png

这样的行为允许创建你需要临时将控制标志为GONE的layout，而并不会打乱布局。处理简单的layout 动画会有用。

注意：margin用的是控件B定义的margin即使关联到控件A（图7所示）。在某些情况这可能不是你想要的margin(例如：控件A距离容器有100dp的margin，B距离A有16dp，当A为GONE时，B离容器有16dp)。因此，你可以用另一个margin，GONE_Margin。前面有讲过。

6.Dimensions constraints（尺寸约束）

ConstraintLayout最小尺寸
你可以给ConstraintLayout 定义最小和最大尺寸：

当ConstraintLayout 的尺寸设置成WRAP_CONTENT，最小和最大尺寸将会被用到。

控件尺寸约束
控件的尺寸可以用android:layout_width 和android:layout_height不同的三种方式定义：

8.png

（a：wrap_content， b：0dp，c：0dp）
前两个控件和其他布局工作原理相似。最后一个会重新给控件分配尺寸。如果设置了margin,margin会被计算进去。

重要：在ConstraintLayout中，子控件不建议设置成MATCH_PARENT。类似的行为可以用MATCH_CONSTRAINT ，相应的 left/right or top/bottom 约束设置成"parent"

WRAP_CONTENT : enforcing constraints
在版本1.1之前，如果设置成WRAP_CONTENT 约束不会限制最后结果的尺寸。在一些情况你可能想要使用WRAP_CONTENT ，但强制约束可限制最终的尺寸。这些情况，你可以使用下面的属性

MATCH_CONSTRAINT dimensions(Added in 1.1)
当控件被设置成MATCH_CONSTRAINT ，默认会使用所有可用的空间。下面的几种修改是有用的：

Min and Max
The value indicated for min and max can be either a dimension in Dp, or "wrap", which will use the same value as what WRAP_CONTENT would do.

Percent dimension
为了使用Percent,你需要做如下设置：

    <Button android:id="@+id/buttonA"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:minHeight="50dp"
        />

7.Ratio

你可以用比例来定义尺寸。
你至少需要将一个尺寸约束成0dp(MATCH_CONSTRAINT)，并设置layout_constraintDimensionRatio ，举例：

    <Button
        android:id="@+id/buttonB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:minHeight="50dp"
        android:text="B"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintCircle="@id/buttonA"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp"
        />

这个例子会将宽度设置成高度一样。
比例也可以这样表示：

    <Button android:id="@+id/buttonA"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="A"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

会根据16:9的比例设置Button的高度，Button的宽度会根据父控件来匹配约束。（Button的高度是是控件给的最大高度，宽度是高度的9/16）

8.Chains

Chains 在单一轴向上提供类似集团行为。其他轴向可以单独约束。
Creating a chain创建链
一组控件如果它们通过双方向连接关联在一起可以作为一个链来处理（图9示例最短的链，有两个控件）

9.png

Chain heads
Chains 被链中的第一个元素的属性空中。(the "head" of the chain):

10.png

head是水平方向的最左边的一个元素，是垂直方向的最顶部的一个元素。

Margins in chains
如果设置了margins,它们会被纳入计算。在 spread chains这种情况，margins 会在分别的空间被减去。

Chain Style
当在Chain(链)中的第一个元素设置layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle，chain 的行为会根据具体的Style作出改变。(默认是CHAIN_SPREAD)

11.png

CHAIN_SPREAD布局示例：

    <Button android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintRight_toLeftOf="@id/buttonB"
        app:layout_constraintLeft_toLeftOf="parent"
        />

    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/buttonA"
        app:layout_constraintRight_toRightOf="parent"
        android:text="B"/>

9.Virtual Helper objects

...

10.Optimizer (in 1.1)优化器

在1.1的版本我们提供了优化器。你可以在ConstraintLayout 元素使用app:layout_optimizationLevel来决定你使用哪个优化器。

示例：app:layout_optimizationLevel="direct|barrier|chain"

上一篇 下一篇

猜你喜欢

热点阅读