ConstraintLayout的一些使用翻译

可以使用的各种约束:

  • 1.Relative positioning
  • 2.Margins
  • 3.Centering positioning
  • 4.Circular positionning
  • 5.Visibility behavior
  • 6.Dimension constraints
  • 7.Chains
  • 9.Virtual Helpers objects
  • 9.Optimizer

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

1.Relative positioning

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

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


1.png

布局可以这么写:

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

2.png

下面是可用约束的清单:

  • layout_constraintLeft_toLeftOf
  • layout_constraintLeft_toRightOf
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBaseline_toBaselineOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf

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

2.Margins

3.png

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

  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom

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


设置 ButtonB 距离 buttonA 50dp

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

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

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

3.Centering positioning

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


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

4.png

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

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

  • layout_constraintHorizontal_bias
  • layout_constraintVertical_bias


    5.png

    举例:
    下面会让左边是30%的偏向而不是默认的50%。因此左边会更短,从而控件会偏向左边。


4.Circular positioning

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

  • layout_constraintCircle : references another widget id
  • layout_constraintCircleRadius : the distance to the other widget center
  • layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)
6.png

    

5.Visibility behavior

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

  • 对于layout,它们的尺寸将被认为是0(基本上,它们会被处理成一个点)
  • 如果它们有其他控件的约束,它们会被慎重处理,但任何margin都会被处理成0.
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 定义最小和最大尺寸:

  • 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

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

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

  • 使用具体尺寸(例如123dp)
  • 使用WRAP_CONTENT,这样控件会计算自己的尺寸
  • 使用0dp,这等同于 "MATCH_CONSTRAINT"
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 ,但强制约束可限制最终的尺寸。这些情况,你可以使用下面的属性

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

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

  • layout_constraintWidth_min and layout_constraintHeight_min : 设置最小尺寸
  • layout_constraintWidth_max and layout_constraintHeight_max :设置最大尺寸
  • layout_constraintWidth_percent and layout_constraintHeight_percent:设置控件占父控件的百分比

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,你需要做如下设置:

  • 尺寸设置成MATCH_CONSTRAINT (0dp)
  • 默认设置成percent:app:layout_constraintWidth_default="percent" or app:layout_constraintHeight_default="percent"
  • layout_constraintWidth_percent or layout_constraintHeight_percent 的值0到1
    

7.Ratio

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

    

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

  • float 值,表示宽高的比例
  • "width:height"这样的比例表现形式
    你也可以同时将宽高设置成 MATCH_CONSTRAINT (0dp)。这种情况,系统设置最大的尺寸满足所有约束并保持特定的比例。为了约束某个尺寸基于另一个尺寸的大小,你可以先添加W," or H,来约宽高。举例:如果一个尺寸被两个目标约束(如宽是0dp,并且居中),你可以通过在比例前添加 W标明哪一个尺寸被约束(约束宽)或者H(约束高),用逗号分开。举例:
    

会根据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)

  • CHAIN_SPREAD -元素会被分散(默认Style)
  • Weighted chain -在CHAIN_SPREAD 模式中,如果一些控件被设置成MATCH_CONSTRAINT,它们会平分可用的空间。
  • CHAIN_SPREAD_INSIDE-同样,但两端的元素不会被分散(spread out)。
  • CHAIN_PACKED-chain中的元素会被集中放在一起。水平或者垂直方向的chid的bias属性会影响放置的位置。
11.png

CHAIN_SPREAD布局示例:

    

9.Virtual Helper objects

...

10.Optimizer (in 1.1)优化器

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

  • none:不适用任何一个优化器
  • standard :默认优化器。只有优化direct and barrier 约束
  • direct :optimize direct constraints
  • barrier :optimize barrier constraints
  • chain :optimize chain constraints (experimental)
  • dimensions :optimize dimensions measures (experimental), reducing the number of measures of match constraints elements

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

你可能感兴趣的:(ConstraintLayout的一些使用翻译)