ConstraintLayout
一个可以实现比RelativeLayout
更复杂并且更加方便可视化操作的控件。
要求:Android 2.3 ,Android studio 2.3
功能特性
Relative positioning
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
举个例子layout_constraintLeft_toLeftOf
意思就是控件的左边在指定控件的左边。
Margins
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
Dimensions constraints
三种方式:
使用确定的dp,如48dp。
WRAP_CONTENT, 根据控件自身大小计算得出。
0dp, 意思是
MATCH_CONSTRAINT
除去间距的大小,MATCH_PARENT
在ConstraintLayout
是不支持的。
Bias
bias 默认50%,也就是居中。也可调整如下:左边30%。
<Button
android:id="@+id/button_A"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent"
android:text="A"
app:layout_constraintHorizontal_bias="0.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
可用属性:
layout_constraintHorizontal_bias
layout_constraintVertical_bias
Visibility behavior
设置控件不可见之后的margin,如设置A不可见后。
<Button
android:id="@+id/button_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="A" />
<Button
android:id="@+id/button_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_goneMarginLeft="20dp"
android:text="B"
app:layout_constraintLeft_toRightOf="@+id/button_A"
tools:layout_editor_absoluteY="0dp"
android:layout_marginLeft="20dp" />
可用属性如下:
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
因为控件之间存在相对关系,如果你设置了layout_goneMarginRight
那么在你右边的控件不可见时goneMargin就会生效。
Ratio
ratio指width:height,并且至少要指定一个0dp
才生效。
<Button android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
这个控件宽高是一样的。
如果宽高都设置的是0dp,需要设置约束哪一个,通过设置W,H可修改约束,如H,n1:n2,则约束高,宽则是 match the constraints to parent,W,n1:n2则约束宽。
<Button android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
Chains
-
CHAIN_SPREAD
Weighted 是
CHAIN_SPREAD
中的特殊模式,如果有控件设置了MATCH_CONSTRAINT
(0dp)则会平分空余空间。如果想要改变占比,可以使用layout_constraintHorizontal_weight
或者layout_constraintVertical_weight
调整。 CHAIN_SPREAD_INSIDE
CHAIN_PACKED
只需要设置head的layout_constraintHorizontal_chainStyle
或者 layout_constraintVertical_chainStyle
水平最左边,垂直最顶部的为head。
默认CHAIN_SPREAD
<Button
android:id="@+id/button_a"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button_b"
tools:layout_editor_absoluteY="0dp" />
<Button
android:id="@+id/button_b"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/button_a"
app:layout_constraintRight_toLeftOf="@+id/button_c"
tools:layout_editor_absoluteY="0dp" />
<Button
android:id="@+id/button_c"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="C"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/button_b"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="0dp" />
设置了0dp 对应的*weight
才能生效。
重点
设置了控件之间的相互约束是前提,否则ConstraintLayout
属性是无效的,
Virtual Helpers objects
ConstraintLayout
是能实现复杂布局的控件,同时也是UI可方便操作的,所以还提供了GuideLine
,只在Layout Edit 中可见的一种辅助控件。
<android.support.constraint.Guideline
android:layout_width="0dp"
android:layout_height="0dp"
android:id="@+id/guideline3"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
Automatically create constraints
如果你不想手动给每一个View设定约束,可以拖动每个View到期望的位置,然后点击Infer Constraints
自动生成约束。
UI操作
ConstraintLayout 与其他控件对比
待完成......