android:layout 冒号,ConstraintLayout：1.1.3的使用

最新推荐文章于 2024-03-28 19:23:06 发布

无量山居士

最新推荐文章于 2024-03-28 19:23:06 发布

阅读量266

点赞数

文章标签： android:layout 冒号

ConstraintLayout最新的版本是1.1.3，这是一个很优秀的布局，几乎可以实现用一级布局，就能实现复杂的页面。

接下来我们深入浅出的来学习一下这个牛逼轰轰的控件吧。

常用布局

这边的布局有点类似RelativeLayout，但ConstraintLayout本身就比RelativeLayout强大。

//两个控件的左边对齐

layout_constraintLeft_toLeftOf

//当前控件的左边与目标控件的右边对齐，即当前控件在目标控件的右边

layout_constraintLeft_toRightOf

//当前控件的右边与目标控件的左边对齐，即当前控件在目标控件的左边

layout_constraintRight_toLeftOf

//两个控件的右边对齐

layout_constraintRight_toRightOf

//两个控件的上面对齐

layout_constraintTop_toTopOf

//当前控件的顶部与目标控件的底部对齐，即当前控件在目标控件的下面

layout_constraintTop_toBottomOf

//当前控件的底部与目标控件的顶部对齐，即当前控件在目标控件的上面

layout_constraintBottom_toTopOf

//两个控件的下面对齐

layout_constraintBottom_toBottomOf

//baseline对齐，常用于和EditText 对齐

layout_constraintBaseline_toBaselineOf

一个简单的例子

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

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

android:id="@+id/constraintLayout"

android:layout_height="wrap_content"

android:layout_width="match_parent"

android:padding="10dp">

android:id="@+id/tv_common_layout_label"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="常用布局"

android:textStyle="bold"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

android:id="@+id/btn_e"

android:layout_height="wrap_content"

android:layout_marginTop="50dp"

android:layout_width="wrap_content"

android:text="E"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/tv_common_layout_label"/>

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="A"

app:layout_constraintBottom_toTopOf="@id/btn_e"

app:layout_constraintRight_toLeftOf="@id/btn_e"/>

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="B"

app:layout_constraintBottom_toTopOf="@id/btn_e"

app:layout_constraintLeft_toRightOf="@id/btn_e"/>

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="C"

app:layout_constraintRight_toLeftOf="@id/btn_e"

app:layout_constraintTop_toBottomOf="@id/btn_e"/>

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="D"

app:layout_constraintLeft_toRightOf="@id/btn_e"

app:layout_constraintTop_toBottomOf="@id/btn_e"/>

31a454abc4b0

常用布局

Chain(链)

顾名思义，就是把几个控件链在一起，以达到可以控制布局的效果，这个效果也是很常用的。

常用属性：

layout_constraintHorizontal_chainStyle

layout_constraintVertical_chainStyle

上述两个属性只能在链的第一个控件上使用，在之后的控件使用无效。

这两个属性的值有三个：spread_inside，spread，packed

看一下官方提供的说明图：

31a454abc4b0

chain.png

Packed Chain with Bias是packed属性加layout_constraintHorizontal_bias属性

Weighted Chain的用法与之前LinearLayout中的weight比较类似，就不细说了。

举个栗子：

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

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

android:id="@+id/constraintLayout"

android:layout_height="match_parent"

android:layout_width="match_parent">

android:id="@+id/tv_chain_style_label"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="Chain"

android:textStyle="bold"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

android:id="@+id/rg_chain_group"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:layout_marginTop="10dp"

android:layout_width="wrap_content"

android:orientation="horizontal"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/tv_chain_style_label">

android:checked="true"

android:id="@+id/rb_spread_inside"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="spread_inside"/>

android:id="@+id/rb_spread"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="spread"/>

android:id="@+id/rb_pack"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="pack"/>

android:id="@+id/btn_fgh_toggle"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="FGH批量隐藏"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/rg_chain_group"/>

android:id="@+id/group_btns"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

app:constraint_referenced_ids="btn_f,btn_g,btn_h"/>

android:id="@+id/btn_f"

android:layout_height="wrap_content"

android:layout_width="0dp"

android:text="F"

app:layout_constraintHorizontal_chainStyle="spread_inside"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toLeftOf="@+id/btn_g"

app:layout_constraintTop_toBottomOf="@id/btn_fgh_toggle"/>

android:id="@+id/btn_g"

android:layout_height="wrap_content"

android:layout_width="0dp"

android:text="G"

app:layout_constraintLeft_toRightOf="@id/btn_f"

app:layout_constraintRight_toLeftOf="@+id/btn_h"

app:layout_constraintTop_toTopOf="@id/btn_f"/>

android:id="@+id/btn_h"

android:layout_height="wrap_content"

android:layout_width="0dp"

android:text="H"

app:layout_constraintLeft_toRightOf="@id/btn_g"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="@id/btn_g"/>

class ChainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.act_chain_style)

rg_chain_group.setOnCheckedChangeListener { _, checkedId ->

constraintLayout.getViewWidget(btn_f).horizontalChainStyle = when (checkedId) {

R.id.rb_spread_inside -> ConstraintLayout.LayoutParams.CHAIN_SPREAD_INSIDE

R.id.rb_spread -> ConstraintLayout.LayoutParams.CHAIN_SPREAD

R.id.rb_pack -> ConstraintLayout.LayoutParams.CHAIN_PACKED

else -> ConstraintLayout.LayoutParams.CHAIN_PACKED

}

constraintLayout.requestLayout()

}

btn_fgh_toggle.setOnClickListener {

if (group_btns.visibility == View.VISIBLE) {

group_btns.visibility = View.GONE

btn_fgh_toggle.text = "fgh批量显示"

} else {

group_btns.visibility = View.VISIBLE

btn_fgh_toggle.text = "fgh批量隐藏"

}

这里还穿插了一个Group的用法

Group

顾名思义就是把几个View分成一组，可以统一对其显隐藏进行控制，好处就是终于不用再写一堆的布局显隐藏，也不会容易出错啦。

因为比较简单，所以也不细说了。

Barrier，屏障，障碍

这是一个控件，可以使用constraint_referenced_ids来引用多个控件，从而可以得到这组控件的最左边/最顶部/最右边/最底部了。

终于我们做某些要填写信息的布局时，可以不用TableLayout，也可以不用去计算哪个标签长度最长，估算出一个不太靠谱的长度。

常用的属性：

//指定方向，不可以设置多个方向，如果需要多个方向，则需要设置多个Barrier

barrierDirection

//关联id

constraint_referenced_ids

举个栗子：

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

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

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

android:layout_height="match_parent"

android:layout_width="match_parent"

android:padding="10dp"

tools:context=".MainActivity">

android:id="@+id/barrier"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

app:barrierDirection="end"

app:constraint_referenced_ids="tv_age_label,tv_name_label"/>

android:id="@+id/tv_name_label"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:padding="10dp"

android:text="姓名："

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

android:hint="请输入姓名"

android:id="@+id/edt_name"

android:layout_height="wrap_content"

android:layout_width="0dp"

app:layout_constrainedWidth="true"

app:layout_constraintBaseline_toBaselineOf="@id/tv_name_label"

app:layout_constraintLeft_toRightOf="@+id/barrier"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="@id/tv_name_label"/>

android:id="@+id/tv_age_label"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:layout_width="wrap_content"

android:padding="10dp"

android:text="出生时间："

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintTop_toBottomOf="@id/edt_name"/>

android:hint="请输入出生日期"

android:layout_height="wrap_content"

android:layout_width="0dp"

app:layout_constraintBaseline_toBaselineOf="@id/tv_age_label"

app:layout_constraintLeft_toRightOf="@+id/barrier"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="@id/tv_age_label"/>

31a454abc4b0

Barrier.png

圆形定位

这个就有点吊了，控件A可以在控件B周围的任何位置。

常用的场景一般就是设置小红点了，未读数之类的。

使用属性有三个

//圆形定位的目标控件，在这个属性设置目标的id

layout_constraintCircle

//圆形定位的角度

layout_constraintCircleAngle

//圆形定位的半径

layout_constraintCircleRadius

来看一张官网的图：

31a454abc4b0

image.png

需要注意的是，0°的位置是在目标控件的顶部。

来看一个时钟表盘的布局吧

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

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

android:layout_height="match_parent" android:layout_width="match_parent">

android:id="@+id/tv_circle_label"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:layout_width="wrap_content"

android:text="Circle定位"

android:textStyle="bold"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"/>

android:id="@+id/btn_0"

android:layout_height="wrap_content"

android:layout_marginTop="120dp"

android:layout_width="wrap_content"

android:text="0"

android:textColor="@android:color/black"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/tv_circle_label"/>

android:id="@+id/btn_1"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="1"

android:textColor="@android:color/black"

app:layout_constraintCircle="@id/btn_0"

app:layout_constraintCircleAngle="30"

app:layout_constraintCircleRadius="80dp"/>

android:id="@+id/btn_2"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="2"

android:textColor="@android:color/black"

app:layout_constraintCircle="@id/btn_0"

app:layout_constraintCircleAngle="60"

app:layout_constraintCircleRadius="80dp"/>

android:id="@+id/btn_3"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="3"

android:textColor="@android:color/black"

app:layout_constraintCircle="@id/btn_0"

app:layout_constraintCircleAngle="90"

app:layout_constraintCircleRadius="80dp"/>

...

31a454abc4b0

圆形定位

强制约束

这个属性是用于当约束布局中的一个控件，由于其内容很长，导致该控件的宽度或者高度超出了范围，导致布局上的错乱，针对这个问题，ConstraintLayout很友善的提供了layout_constrainedWidth这个属性，当设置为true时，会强制控件的宽高会在一个范围内，false则不强制。

我们来看个栗子：

31a454abc4b0

layout_constrainedWidth为false

31a454abc4b0

layout_constrainedWidth为true

代码：

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

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

android:layout_height="match_parent" android:layout_width="match_parent">

android:checked="true"

android:id="@+id/cb_force_constraint"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:layout_width="wrap_content"

android:text="enforcing constraints"

android:textStyle="bold"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"/>

android:id="@+id/btn_add_text"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="add"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toLeftOf="@+id/btn_reduce_text"

app:layout_constraintTop_toBottomOf="@id/cb_force_constraint"/>

android:id="@+id/btn_reduce_text"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="reduce"

app:layout_constraintBaseline_toBaselineOf="@id/btn_add_text"

app:layout_constraintLeft_toRightOf="@id/btn_add_text"

app:layout_constraintRight_toRightOf="parent"/>

android:id="@+id/btn_m"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="M"

app:layout_constraintTop_toBottomOf="@id/btn_add_text"/>

android:id="@+id/btn_content"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

app:layout_constrainedWidth="true"

android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

app:layout_constraintLeft_toRightOf="@id/btn_m"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/btn_m"/>

Percent和Ratio

百分比布局也是UI设计师非常喜欢使用的，android支持包中原先有提供了一系列的百分比控件

31a454abc4b0

image.png

宽高比布局android中就没有了，一般都是我们先固定宽或者高，再计算出另一个边

但是有了ContraintLayout，就可以通通不要了，原因很简单，俺们的ContraintLayout超棒的~

我们可以直接通过以下这个属性来直接进行百分比控制：

layout_constraintDimensionRatio

这个属性要怎么玩呢，其实也不复杂：

假如是固定宽度，要控制高度，可以用"H,16:9"。

假如是固定高度，要控制宽度，可以用"W,16:9"

冒号左边的是代表宽度，冒号右边的是代表高度。

依旧来举个栗子：

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

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

android:id="@+id/constraintLayout"

android:layout_height="match_parent" android:layout_width="match_parent">

android:id="@+id/tv_title"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:text="百分比布局"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"/>

android:id="@+id/btn_ratio_1"

android:layout_height="0dp"

android:layout_width="0dp"

android:text="Ratio_1"

app:layout_constraintDimensionRatio="H,16:9"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/tv_title"

app:layout_constraintWidth_percent="0.6"/>

android:id="@+id/btn_ratio_2"

android:layout_height="100dp"

android:layout_width="0dp"

android:text="Ratio_2"

app:layout_constraintDimensionRatio="W,16:9"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toBottomOf="@id/btn_ratio_1"/>

31a454abc4b0

image.png

无量山居士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android:layout 冒号,ConstraintLayout：1.1.3的使用

ConstraintLayout最新的版本是1.1.3，这是一个很优秀的布局，几乎可以实现用一级布局，就能实现复杂的页面。接下来我们深入浅出的来学习一下这个牛逼轰轰的控件吧。常用布局这边的布局有点类似RelativeLayout，但ConstraintLayout本身就比RelativeLayout强大。//两个控件的左边对齐layout_constraintLeft_toLeftOf//当前控件...
复制链接

扫一扫