原文链接
使用 ConstraintLayout 构建自适应界面ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局。它与 relativeLayout 相似,其中所有的视图均根据同级视图与父布局之间的关系进行布局,但其灵活性要高于 relativeLayout,并且更易于与 AndroID Studio 的布局编辑器配合使用。
本文展示约束条件中的几种用法。
约束条件创建约束条件时,请注意以下规则:
每个视图都必须至少有两个约束条件:一个水平约束条件,一个垂直约束条件。只能在共用同一平面的约束手柄与定位点之间创建约束条件。因此,视图的垂直平面(左侧和右侧)只能约束在另一个垂直平面上;而基准线则只能约束到其他基准线上。每个约束句柄只能用于一个约束条件,但您可以在同一定位点上创建多个约束条件(从不同的视图)。gradle 引入引入constraintlayout库
implementation 'androIDx.constraintlayout:constraintlayout:1.1.3'
constraintlayout使用在layout中使用androID.support.constraint.ConstraintLayout
,如下示例
<androIDx.constraintlayout.Widget.ConstraintLayout androID:layout_wIDth="match_parent" androID:layout_height="50dp" app:layout_constrainttop_totopOf="parent"> <!-- child vIEw layout --> </androIDx.constraintlayout.Widget.ConstraintLayout>
style中新建一个样式,方便后面 *** 作
<!-- con layout 示例text --> <style name="ConSampleText"> <item name="androID:layout_wIDth">wrap_content</item> <item name="androID:layout_height">wrap_content</item> <item name="androID:padding">4dp</item> <item name="androID:textcolor">#fff</item> <item name="androID:background">#3F51B5</item> </style>
若子vIEw没有添加约束,则会跑到父constraintlayout的(0,0)位置
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c1" androID:layout_wIDth="match_parent" androID:layout_height="50dp" androID:background="#f0f0f0" app:layout_constrainttop_totopOf="parent"> <TextVIEw androID:text="No rule,jump to (0,0)" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
对齐,属性说明定位时使用到诸如app:layout_constraintStart_toStartOf
或者app:layout_constrainttop_totopOf
属性。
app:layout_constraintStart_toStartOf
,里面有2个Start字眼。
第一个Start表示自身的起始位置(默认是左边)。第二个toStartOf
表示对齐参照物的起始位置。
app:layout_constrainttop_totopOf
也类似。与参照物顶部对齐。
指定位置的字眼,如top
、Bottom
、End
、Start
,它们组合使用可用来确定相对位置:app:layout_constraint{}_to{}Of
将子vIEw对齐到父layout的各个边缘位置。
约束的参考对象是parent
。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c2" androID:layout_wIDth="match_parent" androID:layout_height="140dp" androID:layout_margintop="20dp" androID:background="#f0f0f0" app:layout_constrainttop_toBottomOf="@ID/c1"> <!-- 相对父layout的边缘定位 --> <TextVIEw androID:text="居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:text="左上角" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:text="左下角" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" /> <TextVIEw androID:text="右下角" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <TextVIEw androID:text="右上角" app:layout_constraintEnd_toEndOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:text="顶部水平居中" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:text="底部水平居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" /> <TextVIEw androID:text="左边垂直居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:text="右边垂直居中" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constrainttop_totopOf="parent" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
基线对齐将一个视图的文本基线与另一视图的文本基线对齐。
可以使用app:layout_constraintBaseline_toBaselineOf
属性设置基线对齐。
示例
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c21" androID:layout_wIDth="match_parent" androID:layout_height="100dp" androID:background="#f0f0f0" app:layout_constrainttop_totopOf="parent"> <TextVIEw androID:ID="@+ID/tv1" androID:layout_marginStart="10dp" androID:text="an" androID:textSize="13sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:ID="@+ID/tv2" androID:layout_marginStart="10dp" androID:text="Rust" androID:textSize="20sp" app:layout_constraintBaseline_toBaselineOf="@ID/tv1" app:layout_constraintStart_toEndOf="@+ID/tv1" /> <TextVIEw androID:ID="@+ID/tv3" androID:layout_marginStart="10dp" androID:text="Fisher" androID:textSize="24sp" app:layout_constraintBaseline_toBaselineOf="@ID/tv1" app:layout_constraintStart_toEndOf="@+ID/tv2" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
示例图
在ConstraintLayout中添加引导线,可以方便定位。其他VIEw可以引导线作为参考位置。
添加GuIDeline,需要确定它的方向,分别是垂直和水平。
androID:orIEntation="vertical"
androID:orIEntation="horizontal"
比例定位这里按比例来定位,使用app:layout_constraintGuIDe_percent
。
需要指定比例值,例如app:layout_constraintGuIDe_percent="0.5"
。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c3" androID:layout_wIDth="match_parent" androID:layout_height="240dp" androID:layout_margintop="40dp" androID:background="#f0f0f0" app:layout_constrainttop_toBottomOf="@ID/c2"> <!-- 引导线约束: 相对父layout 按比例定位 --> <!-- 垂直引导线 GuIDeline --> <androIDx.constraintlayout.Widget.GuIDeline androID:ID="@+ID/g1" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="vertical" app:layout_constraintGuIDe_percent="0.33" /> <androIDx.constraintlayout.Widget.GuIDeline androID:ID="@+ID/g2" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="horizontal" app:layout_constraintGuIDe_percent="0.5" /> <TextVIEw androID:ID="@+ID/t1" androID:text="垂直的1/3引导线后" app:layout_constraintStart_toStartOf="@ID/g1" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:ID="@+ID/t2" androID:text="垂直的1/3引导线前" app:layout_constraintEnd_toStartOf="@ID/g1" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:ID="@+ID/t3" androID:layout_margintop="2dp" androID:text="垂直的1/3引导线居中" app:layout_constraintEnd_toEndOf="@ID/g1" app:layout_constraintStart_toStartOf="@ID/g1" app:layout_constrainttop_toBottomOf="@ID/t2" /> <TextVIEw androID:ID="@+ID/th1" androID:text="水平的1/2引导线居中" app:layout_constraintBottom_toBottomOf="@ID/g2" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="@ID/g2" /> <TextVIEw androID:ID="@+ID/th2" androID:layout_marginStart="2dp" androID:text="水平的1/2引导线上面" app:layout_constraintBottom_toBottomOf="@ID/g2" app:layout_constraintStart_toEndOf="@ID/th1" /> <TextVIEw androID:ID="@+ID/th3" androID:layout_marginStart="2dp" androID:text="水平的1/2引导线下面" app:layout_constraintStart_toEndOf="@ID/th1" app:layout_constrainttop_toBottomOf="@ID/g2" /> <androIDx.constraintlayout.Widget.GuIDeline androID:ID="@+ID/gv75" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="vertical" app:layout_constraintGuIDe_percent="0.75" /> <androIDx.constraintlayout.Widget.GuIDeline androID:ID="@+ID/gh75" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="horizontal" app:layout_constraintGuIDe_percent="0.75" /> <TextVIEw androID:layout_marginStart="2dp" androID:text="(0.75,0.75)" app:layout_constraintBottom_toBottomOf="@ID/gh75" app:layout_constraintEnd_toEndOf="@ID/gv75" app:layout_constraintStart_toStartOf="@ID/gv75" app:layout_constrainttop_totopOf="@ID/gh75" /> <TextVIEw androID:layout_marginStart="2dp" androID:text="(0.33,0.75)" app:layout_constraintBottom_toBottomOf="@ID/gh75" app:layout_constraintEnd_toEndOf="@ID/g1" app:layout_constraintStart_toStartOf="@ID/g1" app:layout_constrainttop_totopOf="@ID/gh75" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
具体数值我们也可以使用app:layout_constraintGuIDe_end
或者app:layout_constraintGuIDe_begin
来指定具体的数值。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c4" androID:layout_wIDth="match_parent" androID:layout_height="50dp" androID:layout_margintop="30dp" androID:background="#f0f0f0" app:layout_constrainttop_toBottomOf="@ID/c3"> <androIDx.constraintlayout.Widget.GuIDeline androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="horizontal" app:layout_constraintGuIDe_begin="10dp" /> <androIDx.constraintlayout.Widget.GuIDeline androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="horizontal" app:layout_constraintGuIDe_end="10dp" /> <androIDx.constraintlayout.Widget.GuIDeline androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="vertical" app:layout_constraintGuIDe_begin="10dp" /> <androIDx.constraintlayout.Widget.GuIDeline androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="vertical" app:layout_constraintGuIDe_end="10dp" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
as预览图
屏障约束与引导线类似,屏障是一条隐藏的线,您可以用它来约束视图。屏障不会定义自己的位置;相反,屏障的位置会随着其中所含视图的位置而移动。
如果您希望将视图限制到一组视图而不是某个特定视图,这就非常有用。
这是一个竖直屏障的例子。barrIEr1以tv221和tv222作为参考。
设置app:barrIErDirection="end"
,并且设置tv223在它的右侧。
也就是barrIEr1会被tv221和tv222“推”着走。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c22" androID:layout_wIDth="match_parent" androID:layout_height="120dp" androID:layout_margintop="10dp" androID:background="#f3f3f3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_toBottomOf="@ID/c21"> <TextVIEw androID:ID="@+ID/tv221" androID:layout_marginStart="10dp" androID:text="an" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:ID="@+ID/tv222" androID:layout_margintop="4dp" androID:text="RustFisher" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_toBottomOf="@ID/tv221" /> <TextVIEw androID:layout_margintop="4dp" androID:text="没有以此作为参考,不管这个有多长" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_toBottomOf="@ID/tv222" /> <androIDx.constraintlayout.Widget.barrIEr androID:ID="@+ID/barrIEr1" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" app:barrIErDirection="end" app:constraint_referenced_IDs="tv221,tv222" /> <TextVIEw androID:ID="@+ID/tv223" androID:layout_marginStart="10dp" androID:text=".com" app:layout_constraintStart_toEndOf="@ID/barrIEr1" app:layout_constrainttop_totopOf="parent" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
调整约束偏差对某个视图的两侧添加约束条件(并且同一维度的视图尺寸为“fixed”或者“wrap Content”)时,则该视图在两个约束条件之间居中且默认偏差为 50%。
可以通过设置属性来调整偏差。
app:layout_constraintVertical_bias
app:layout_constraintHorizontal_bias
例如
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c23" androID:layout_wIDth="match_parent" androID:layout_height="140dp" androID:layout_margintop="10dp" androID:background="#f3f3f3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_toBottomOf="@ID/c22"> <TextVIEw androID:text="Rust" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:text="0.33,0.33" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.33" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" app:layout_constraintVertical_bias="0.33" /> <TextVIEw androID:text="0.8,0.8" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.8" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" app:layout_constraintVertical_bias="0.8" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
调整视图尺寸这里调整的是子vIEw的尺寸。
Match Constraints
视图会尽可能扩展,以满足每侧的约束条件(在考虑视图的外边距之后)。
不过,您可以使用以下属性和值修改该行为(这些属性仅在您将视图宽度设置为“match constraints”时才会生效):
layout_constraintWIDth_default
spread:尽可能扩展视图以满足每侧的约束条件。这是默认行为。
wrap:仅在需要时扩展视图以适应其内容,但如有约束条件限制,视图仍然可以小于其内容。因此,它与使用 Wrap Content(上面)之间的区别在于,将宽度设为 Wrap Content 会强行使宽度始终与内容宽度完全匹配;而使用 layout_constraintWIDth_default 设置为 wrap 的Match Constraints 时,视图可以小于内容宽度。
layout_constraintWIDth_min
该视图的最小宽度采用 dp 维度。
layout_constraintWIDth_max
该视图的最大宽度采用 dp 维度。
layout中设置 androID:layout_wIDth="0dp"
和androID:layout_height="0dp"
。
确定好周围的参照线。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:ID="@+ID/c24" androID:layout_wIDth="match_parent" androID:layout_height="200dp" androID:layout_margintop="20dp" androID:background="#009C8D" app:layout_constrainttop_toBottomOf="@ID/c23"> <androIDx.constraintlayout.Widget.GuIDeline androID:ID="@+ID/v50" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="vertical" app:layout_constraintGuIDe_percent="0.5" /> <androIDx.constraintlayout.Widget.GuIDeline androID:ID="@+ID/h50" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:orIEntation="horizontal" app:layout_constraintGuIDe_percent="0.5" /> <TextVIEw androID:layout_wIDth="0dp" androID:layout_height="0dp" androID:layout_margin="30dp" androID:gravity="center" androID:text="R" app:layout_constraintBottom_totopOf="@ID/h50" app:layout_constraintEnd_toStartOf="@ID/v50" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:layout_wIDth="0dp" androID:layout_height="0dp" androID:layout_margin="30dp" androID:gravity="center" androID:text="U" app:layout_constraintBottom_totopOf="@ID/h50" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@ID/v50" app:layout_constrainttop_totopOf="parent" /> <TextVIEw androID:layout_wIDth="0dp" androID:layout_height="0dp" androID:layout_margin="30dp" androID:gravity="center" androID:text="S" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@ID/v50" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_toBottomOf="@ID/h50" /> <TextVIEw androID:layout_wIDth="0dp" androID:layout_height="0dp" androID:layout_margin="30dp" androID:gravity="center" androID:text="T" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@ID/v50" app:layout_constrainttop_toBottomOf="@ID/h50" /> </androIDx.constraintlayout.Widget.ConstraintLayout>
将尺寸设置为比例
比例为宽比高 wIDth:height。如果宽高其中一个设置了大于0的具体值或wrap_content,可以其为标准来调整另一个尺寸参数。
示例1设置layout_wIDth="40dp"
,androID:layout_height="0dp"
,比例为3:2。
以宽40dp为基准,按比例调整高度。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:layout_wIDth="@dimen/con_card_size" androID:layout_height="@dimen/con_card_size" androID:background="#f0f0f0"> <TextVIEw androID:layout_wIDth="40dp" androID:layout_height="0dp" androID:layout_margintop="16dp" androID:layout_marginBottom="16dp" androID:background="#2196F3" androID:gravity="center" androID:text="3:2" androID:textcolor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="3:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /></androIDx.constraintlayout.Widget.ConstraintLayout>
示例2高度40dp,比例3:2,自动调整宽度。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:layout_wIDth="@dimen/con_card_size" androID:layout_height="@dimen/con_card_size" androID:layout_marginStart="20dp" androID:background="#f0f0f0"> <TextVIEw androID:layout_wIDth="0dp" androID:layout_height="40dp" androID:layout_margintop="16dp" androID:layout_marginBottom="16dp" androID:background="#009688" androID:gravity="center" androID:text="3:2" androID:textcolor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="3:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /></androIDx.constraintlayout.Widget.ConstraintLayout>
宽高都设为0宽高都设置为0dp,比例为3:2。会尝试填满整个父layout。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:layout_wIDth="@dimen/con_card_size" androID:layout_height="@dimen/con_card_size" androID:layout_marginStart="20dp" androID:background="#f0f0f0"> <TextVIEw androID:layout_wIDth="0dp" androID:layout_height="0dp" androID:background="#3F51B5" androID:gravity="center" androID:text="3:2" androID:textcolor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="3:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /></androIDx.constraintlayout.Widget.ConstraintLayout>
宽wrap_content,高度0layout_wIDth -> wrap_content,高度为0,比例1:2。以宽度为基准。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:layout_wIDth="@dimen/con_card_size" androID:layout_height="@dimen/con_card_size" androID:background="#f0f0f0"> <TextVIEw androID:layout_wIDth="wrap_content" androID:layout_height="0dp" androID:layout_margintop="16dp" androID:layout_marginBottom="16dp" androID:background="#009688" androID:gravity="center" androID:text="1:2" androID:textcolor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="1:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /></androIDx.constraintlayout.Widget.ConstraintLayout>
高度wrap_content,宽度0比例5:2,会以高度为基准。
<androIDx.constraintlayout.Widget.ConstraintLayout androID:layout_wIDth="@dimen/con_card_size" androID:layout_height="@dimen/con_card_size" androID:layout_marginStart="20dp" androID:background="#f0f0f0" app:layout_constrainttop_totopOf="parent"> <TextVIEw androID:layout_wIDth="0dp" androID:layout_height="wrap_content" androID:layout_margintop="16dp" androID:layout_marginBottom="16dp" androID:background="#009688" androID:gravity="center" androID:text="5:2" androID:textcolor="#ffffff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintDimensionRatio="5:2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constrainttop_totopOf="parent" /></androIDx.constraintlayout.Widget.ConstraintLayout>
总结 以上是内存溢出为你收集整理的Android ConstraintLayout 构建自适应界面全部内容,希望文章能够帮你解决Android ConstraintLayout 构建自适应界面所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)