Android ConstraintLayout

简介: Android ConstraintLayout

Android ConstraintLayout详解

AndroidStudio2.2开始,就推出了一个牛逼的布局,ConstraintLayout,此布局像是一个升级版的RelativeLayout,但是功能比RelativeLayout强大许多,号称一层

布局就可以搞定复杂页面。在AS2.2下还可以用拖拽控件的方式就行布局(设计师的福音),不过本篇不讲解拖拽控件的相关用法,主要讲解一些相关属性含义。


开始!

相对位置

这个相对位置的设置有点类似RelativeLayout的layout_toLeftOf、alignParentLeft等这些属性。

下面是本人对此属性的总结:

layout_constraint[本源位置]_[目标位置]="[目标ID]"

ConstraintLayout一共支持相对位置的属性在此:

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=”@+id/id_first”,表示当前View的左边界与id_first的View的做边界对齐。其实这个属性翻译成中文就是:当前view的左边对齐与引用view的左边。

例子:

<Button android:id="@+id/buttonA".../>

<Button android:id="@+id/buttonB"...app:layout_constraintLeft_toRightOf="@+id/buttonA"/>

效果如下:

1686635017300.png

网络异常,图片无法展示
|

当然,这些属性也支持设置为对齐父布局的左右前后。

<Button android:id="@+id/buttonB"...

app:layout_constraintLeft_toLeftOf="parent"/>

这样,buttonB就依附在父布局的左边。类似Realitelayout的alignParentLeft。

margin属性

这个属性没啥好说的,跟其他布局的margin属性差不多。支持的属性如下:

android:layout_marginStart

android:layout_marginEnd

android:layout_marginLeft

android:layout_marginTop

android:layout_marginRight

android:layout_marginBottom


1686635034285.png

注意:如上图,假如A紧贴父布局的左侧,B距离A 100dp,A设置为gone后,则B距离父布局的左侧100dp。

goneMargin属性

这个布局比较有意思,还是拿上面的那副图做示例,假设我们现在有这样一个需求:假设A设置为gone,后,B需要距离父布局的左侧200dp,怎么办?这时候,goneMargin属性就派上用场啦,只要设置B的layout_goneMarginLeft=200dp即可。这样,A不为gone的时候,B距离A 100dp,A为gone时,B距离父布局左侧200dp。

一共支持的属性如下:

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

Centering positioning and bias ,设置居中或者按比例偏移。

bias属性

bias支持的属性如下:

layout_constraintHorizontal_bias

layout_constraintVertical_bias

假设我们要设置一个控件居中怎么办?很简单,利用上面介绍过的属性就可以办到。

<Button android:id="@+id/button"...

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent”/>

ConstraintLayout本身支持minHeight、minWidht属性,没啥好说的。

注意ConstraintLayout不支持match_parent属性,要用0dp代替,在加上设置特性的约束属性,即可实现match_parent的效果。

Ratio属性

Ratio设置宽高比。

属性如下:app:layout_constraintDimensionRatio=””

当前控件宽或高其一确定的话,可以使用ration属性,根据确定的宽或高确定另外高或宽的大小。

<Button android:layout_width="wrap_content"

android:layout_height="0dp"

app:layout_constraintDimensionRatio="1:2"/>

当前Button的width已经确定,height根据设置的比例=2×width

layout_constraintDimensionRatio接受的值是两个float类型的比例,代表的含义是width:height。

Chains 链状结构。

看图如下:

1686635058443.png

Chain Style

要想chain style生效,必须设置当前链方向的边为wrap_content,比如上面的水平链,宽设为wrap_content。还有就是控件要相互引用,比如A的右边依赖B的左

边,B的左边依赖A的右边,都是设置。

chain style设置在第一个控件上

1686635073203.png

即设置在head上。

属性有两个:

layout_constraintHorizontal_chainStyle

layout_constraintVertical_chainStyle

支持的值有三个:

CHAIN_SPREAD:均匀分布控件。

CHAIN_SPREAD_INSIDE,同上,但是边上的控件不均匀分布。

CHAIN_PACKED:控件紧挨在一起。还可以通过bias属性设置偏移量。

根据字面意思这三个属性好理解,效果如下:

1686635092303.png

Weight属性:

app:layout_constraintHorizontal_weight

app:layout_constraintVertical_weight

跟线性布局的weight差不多,layout_constraintHorizontal_weight需要设置width=0dp,控件的大小根据设置的weight比例进行设置。

Guideline

Guideline是一条隐形的线,这条线可作为准线,根据此准线设置其他控件的位置。

<android.support.constraint.ConstraintLayout

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.constraint.Guideline

android:id="@+id/guideline"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_begin="100dp" />

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="16dp"

android:text="Button"

app:layout_constraintLeft_toLeftOf="@id/guideline"

app:layout_constraintTop_toTopOf="parent" />

上面代码:guideline控件是一条隐形垂直的线,距离左边距100dp,Button由于设置了left_toLeft,所以也距离左边距100dp。

GuideLine支持的属性:

layout_constraintGuide_begin:距离left或top的大小

layout_constraintGuide_end:距离right或bottom的大小

layout_constraintGuide_percent:float类型。距离left或top的大小的比例。

layout_constraintGuide_percent=”0.5” android:orientation=”vertical” ,那么guideline距离左侧的距离为父布局宽度的一半。

相关文章
|
3月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
55 1
|
3月前
|
XML 数据可视化 API
Android经典实战之约束布局ConstraintLayout的实用技巧和经验
ConstraintLayout是Android中一款强大的布局管理器,它通过视图间的约束轻松创建复杂灵活的界面。相较于传统布局,它提供更高灵活性与性能。基本用法涉及XML定义约束,如视图与父布局对齐。此外,它支持百分比尺寸、偏移量控制等高级功能,并配有ConstraintSet和编辑器辅助设计。合理运用可显著提高布局效率及性能。
232 0
|
6月前
|
数据可视化 Android开发 容器
Android UI设计: 请解释LinearLayout、RelativeLayout和ConstraintLayout的区别。
Android UI设计: 请解释LinearLayout、RelativeLayout和ConstraintLayout的区别。
221 5
|
Android开发
Android ConstraintLayout按比例缩放View
Android ConstraintLayout按比例缩放View 关键点有两个,第一,使用Android ConstraintLayout的layout_constraintDimensionRatio属性,设置宽高比缩放比例,宽:高。
2795 0
|
Android开发
Android开发 - 掌握ConstraintLayout(七)辅助线(Guideline)
了解过UI设计的同学都知道,在设计的时候,我们经常在界面上拖进一些辅助线来帮我们对齐UI元素,或者方便我们统一的页边距。 在ConstraintLayout的编辑器中,同样也支持这样的功能,我们可以创建一些横向的或者纵向的Guideline,在布局界面的时候可以充分利用这些辅助线,对齐我们的View,避免重复写一些marginXXX。
1592 0
|
Android开发
Android开发 - 掌握ConstraintLayout(六)链条(Chains)
本文我们介绍链条(Chains),使用它可以将多个View连接起来,互相约束。 可以创建横向的链条,也可以创建纵向的链条,我们以横向的链条举例: 我们先创建三个按钮: 我们选中三个按钮后在上面点右键创建链条: 创建后我们发现这三个View平均分布地排列了: 最简单的使用是平均分布,当然也可以不平均分布,具体看约束的具体设置,比如将第一个Button的marginEnd设置成10后链条会自动地分布每个View的位置。
2429 0
|
Android开发
Android开发 - 掌握ConstraintLayout(五)偏差(Bias)
比如实现这样一个场景: "在屏幕宽度的1/4的地方放置一个View" 使用传统布局时,实现按照屏幕的宽度(高度),或者相对两个View之间距离的一个比例来进行布局,就显得非常麻烦,但是当使用ConstraintLayout时,就可以很简单地实现这样的需求。
1280 0