Android-ConstraintLayout约束布局使用

Android-ConstraintLayout约束布局使用,第1张

这里分别以:app:layout_constraintLeft_toLeftOf和app:layout_constraintRight_toLeftOf举例:

定义两个控件

这里的id为where的TextView就使用了app:layout_constraintLeft_toLeftOf相对于另一个TextView,这个时候id为where的TextView的显示的位置,其实是左边贴在了id为right_top的TextView的左边上。如下图:

这个时候如果将id为where的相对于id为right_top的修改成app:layout_constraintRight_toLeftOf,如下所示:

那么此时显示的样式,就是id为where的TextView相对于id为right_top的TextView的右边显示。如下图:

这个属性,是让A和B两个控件的基准线在同一个水平位置上,比如两个TextView,大小不同,字体的大小也不同,那么想要让这样两个不同大小不同字体大小的文本内容显示在同一个基线,则可以使用该属性。app:layout_constraintBaseline_toBaselineOf

在约束布局中,margin控制需要存在约束关系的才会生效,比如控件A某条边相对于控件B的某条边存在约束关系,则控件A与B之间的margin才会生效。

这里使用了两种margin属性,一种就是app:layout_goneMarginEnd,这个只在right_top被gone的时候生效;一种就是android:layout_marginEnd,任何时候都生效。

但是这里的margin需要生效,只有id为where的TextView被id为right_top的TextView所约束,那么id为where的TextView的margin相对于id为right_top的TextView的才生效。而id为right_top的TextView并没有被id为where的TextView约束,所以id为right_top的TextView的margin_start其实看不到生效。这里其实可以认为right_top的margin_start生效了,只不过是相对于parent的左边,但是因为right_top在parent的右上角,所以看不到这个margin效果

这两个属性单独使用并不能生效,水平方向的必须要给控件的左右两边都添加约束才会生效,垂直方向的必须要给控件的上下两边都添加约束才可以生效。

比如这个例子,Button的左边被TextView的右边约束,Button的右边被parent约束,这样Button的左右两边都有约束,那么给Button添加水平方向的bias属性就可以生效,即根据Button的左边约束偏移一定的比例,这里就是相对于TextView的右边位置偏移40%。

bias的偏移,是根据控件的水平或者垂直方向的剩余位置的百分比来偏移。

如果是在ConstraintLayout中居中,则:

如果是在两个控件的中间,则可以:

设置宽高百分比,首先设置app:layout_constraintHeight_default="percent"采用百分比形式,其次使用app:layout_constraintHeight_percent="0.3"设置一个0-1的百分比值,最后控件的宽高需要设置为 0dp ,只有宽高是设置为 0dp 的,百分比才生效。

在约束布局中,给控件的左右两边或者上下两边添加约束之后,给控件的宽高设置为0dp的时候,可以占满两个约束控件中间所有剩余空间。

比如这个布局,我们需要EditText在TextView的右边,如果不给EditText设置0dp的宽度,而是设置了match_parent的话,则会占满屏幕宽度,没办法实现EditText在TextView的右边

在ConstraintLayout中给控件设置min的宽度和高度,必须是要控件的layout_width或者layout_height为wrap_content或者0dp时。给控件设置max的宽度或者高度的时候,必须是要控件的layout_width或者layout_height为0dp时。

不过在设置max的时候需要注意一点,如果单纯只是设置了0dp,如果没给控件添加对应的左右约束或者上下约束,比如没有设置左右约束,那么layout_constraintWidth_max设置的再大也不会超过整个控件的wrap_content的长度。

这里的绿色区域的控件,宽度显示的明显没有达到550dp,但是也不会继续变长了。

如果是设置了左右约束,那么最大宽度的限制也就是左右两个约束中间的剩余空间宽度

同时给Guide设置layout_constraintGuide_percent和layout_constraintGuide_begin的时候,layout_constraintGuide_begin并不会生效。

layout_constraintGuide_begin是给Guide设置相对于开始位置的偏移,layout_constraintGuide_end是给Guide设置相对于结束位置的偏移。

layout_constraintGuide_percent是设置Guide设置相对于起始位置的偏移百分比。

Guide的作用就是为了给控件的提供一个约束参考线,控件可以依靠这个线条约束。

app:constraint_referenced_ids这里是添加约束的控件的id,app:barrierDirection是添加约束的位置,可以有end、start、left、right、top、bottom

添加不同的值,就可以让Barrier线条在约束的控件的对应位置上,比如end,就是让Barrier线条在username1和password1这两个控件的右边结束位置

这两个都是线条,都是辅助约束的,但是这两个有一点区别,就是当控件比如出现切换手机语言,而造成控件上的文本显示长度出现变化的时候,Guideline并不会随着控件的长度变化而变化,这样就会造成约束不灵活,而Barrier可以根据控件的宽高变化,灵活移动位置。

所以控件宽高是随着内容动态变化的,建议使用Barrier,如果控件的内容是不变的,可以使用Guideline。

ConstraintLayout (约束布局) 继承于ViewGroup 允许开发者以灵活的方式定位和调整小部件的大小

ConstraintLayout 可让开发者使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局。它与 RelativeLayout 相似,其中所有的视图均根据同级视图与父布局之间的关系进行布局,但其灵活性要高于 RelativeLayout ,并且更易于与 Android Studio 的布局编辑器配合使用。我理解为ConstraintLayout是一个更加灵活且减少嵌套的 RelativeLayout 的布局

ConstraintLayout作为支持库提供,开发者可以在从 API 级别 9 (Gingerbread) 开始的 Android 系统上使用。

相信在面对一些复杂的UI页面,咱们都是使用 RelativeLayout , LinearLayout 层层嵌套实现的.虽然能实现效果.但是层层嵌套层层解析加载View 无疑会耗费加载时间,耗费手机性能.这是时候ConstraintLayout(约束布局),就应运而生了,它出现的目的就是减少嵌套,优化层层嵌套状况带来的弊端

要在 ConstraintLayout 中定义某个视图的位置, 您必须为该视图添加至少一个水平约束条件和一个垂直约束条件 。每个约束条件均表示与其他视图、父布局或隐形引导线之间连接或对齐方式。每个约束条件均定义了视图在竖轴或者横轴上的位置;因此每个视图在每个轴上都必须至少有一个约束条件,但通常情况下会需要更多约束条件。

当您将视图拖放到布局编辑器中时,即使没有任何约束条件,它也会停留在您放置的位置。不过,这只是为了便于修改;当您在设备上运行布局时,如果视图没有任何约束条件,则会在位置 [0,0](左上角)处进行绘制。

在图 1 中,布局在编辑器中看起来很完美,但视图 C 上却没有垂直约束条件。在设备上绘制此布局时,虽然视图 C 与视图 A 的左右边缘水平对齐,但由于没有垂直约束条件,它会显示在屏幕顶部

请注意,约束中不能有循环依赖。

相对定位是在 ConstraintLayout 中创建布局的基本构建块之一。这些约束允许您相对于另一个小部件定位给定的小部件。您可以在水平和垂直轴上约束一个小部件:

如下图,这告诉系统我们希望按钮 B 的左侧被约束到按钮 A 的右侧。这样的位置约束意味着系统将尝试让两侧共享相同的位置。

这是可用约束的列表:

app:layout_constraintLeft(自身)_toLeftOf(相对于的控件)="相对的控件ID"

1.2 layout_constraintBaseline_toBaselineOf 基线对齐

如果设置了侧边距,它们将应用于相应的约束(如果存在)(图 ),将边距强制为目标端和源端之间的空间。通常的布局边距属性可用于此效果

2.1属性:

请注意,边距只能为正数或等于零,并且取Dimension.

2.2. 约束目标View.GONE的时候 的边距

3.1 居中定位,就是把定位控件的左边对应目标的左边 右边对应目标的右边,上边对应目标的上边

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

如上图,Button的左边位于父布局的左边,右边位于父布局的右边就做到了水平居中的效果

3.2 偏移 : 有时候居中展示还需要做出偏移效果

可以以一定角度和距离约束一个小部件中心相对于另一个小部件中心。这允许您将一个小部件定位在一个圆圈上

ConstraintLayout对标记为 的小部件进行了特定处理View.GONE。

GONE像往常一样,小部件不会被显示并且不是布局本身的一部分(即,如果标记为 ,它们的实际尺寸不会改变GONE)。

但就布局计算而言,GONE小部件仍然是其中的一部分,但有一个重要区别:

注意:

使用的边距将是 B 在连接到 A 时定义的边距(参见图 7 示例)。在某些情况下,这可能不是您想要的边距(例如,A 到其容器的一侧有 100dp 的边距,B 到 A 的边距只有 16dp,将 A 标记为已消失,B 到容器的边距为 16dp)。出于这个原因,您可以指定在连接到被标记为已消失的小部件时使用的备用边距值(请参阅 上面有关已消失的边距属性的部分 )

1.1 您可以为自身定义最小和最大尺寸ConstraintLayout

1.2 控件尺寸约束

android:layout_width可以通过 3 种不同方式设置和 android:layout_height属性 来指定控件的尺寸:

重要提示:

MATCH_PARENT不建议用于ConstraintLayout. 可以通过MATCH_CONSTRAINT将相应的左/右或上/下约束设置为来定义类似的行为"parent"。

WRAP_CONTENT (添加在 1 . 1中):强制约束

如果维度设置为WRAP_CONTENT,则在 1.1 之前的版本中,它们将被视为文字维度——也就是说,约束不会限制结果维度。虽然通常这已经足够(并且更快),但在某些情况下,您可能希望使用WRAP_CONTENT,但继续强制执行约束以限制结果维度。在这种情况下,您可以添加相应的属性之一:

MATCH_CONSTRAINT维度(添加在 1 . 1中)

当维度设置为MATCH_CONSTRAINT时,默认行为是让结果大小占用所有可用空间。有几个额外的修饰符可用:

layout_constraintWidth_min和layout_constraintHeight_min: 将设置此维度的最小尺寸

layout_constraintWidth_max和layout_constraintHeight_max: 将设置此维度的最大尺寸

layout_constraintWidth_percent和layout_constraintHeight_percent: 将此维度的大小设置为父维度的百分比

比率: 宽高比

您还可以将小部件的一个维度定义为另一个维度的比率。为此,您需要将至少一个约束维度设置为0dp(即MATCH_CONSTRAINT),并将属性设置layout_constraintDimensionRatio为给定的比率。例如:

除此之外,在设置宽高比的值的时候,还可以在前面加W或H,分别指定宽度或高度限制。 例如:

app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3

app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

...

Guildline的主要属性:

Constraint 约束布局为了解决嵌套布局的弊端,更快的加载页面而出现,但是约束布局需要整体架构页面要有明确的构建页面的思维,故而学习以及思维模式要有的.所以个人感觉是简单页面还是用相对布局,线性布局就够了,对于复杂布局约束布局是你优化页面加载的不二之选.

*写作不容易,且赞且珍惜!!!*

约束布局是一种安卓布局方式,需要提供垂直和水平两个方向的约束,约束布局的好处是可以在一个层次上展示更加复杂的界面,从而提高性能,但是会降低布局的可读性。总之约束布局是谷歌推荐的布局方式,用好约束布局能大大提高开发效率


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/11664680.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存