Android:随笔—— ConstraintLayout 实战经验

这篇文章呢我们谈一谈,约束布局常用的一些需求和坑

一、如果我想让一个控件在父布局里左右填充怎么办(上下填充,上下左右都填充同理)
  1. match_parent 方式
<View
        android:id="@+id/a"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light" />
  1. 相对布局的方式(android:layout_width="0dp" 是关键)
<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

ConstraintLayout 没有 match_parent 所以推荐使用第二种方式,虽然看效果是没啥事,但是官方的坑我表示不踩

Android:随笔—— ConstraintLayout 实战经验
image.png
二、替代百分比布局

有时候想把控件按照比例填充父布局,Android 屏幕适配这么复杂,好像不容易实现
这时候约束布局有两个属性 layout_constraintWidth_percent layout_constraintHeight_percent
这岂不是把一直不温不火的百分比布局给革命了

<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_percent="0.3" />
Android:随笔—— ConstraintLayout 实战经验
image.png

我只放这么一段代码大家应该就知道怎么用了,我也就不多了说了。

默认是居中的如果想调整位置请结合 app:layout_constraintHorizontal_bias="0.3" 食用

三、控件宽度一定,我想左右居中显示怎么办(上下居中同理)
<View
        android:id="@+id/a"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

与左右填充相似,只不过宽度固定了而已,两条绳子拉着一个控件居中

Android:随笔—— ConstraintLayout 实战经验
image.png
四、控件宽度一定,左右按百分比显示怎么办,我就是不想居中(上下同理)
<View
        android:id="@+id/a"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

app:layout_constraintHorizontal_bias="0.3" 一个属性就搞定了

Android:随笔—— ConstraintLayout 实战经验
image.png

上下使用 app:layout_constraintVertical_bias 来实现

五、我想两个控件左右平分空间,对没错就是抢 LinearLayout 的饭碗(上下居中同理)
<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/b" />

<View
        android:id="@+id/b"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toRightOf="@+id/a"
        app:layout_constraintRight_toRightOf="parent" />
Android:随笔—— ConstraintLayout 实战经验
image.png

因为有个约束链的存在所以这个稍微有点复杂,先来一张约束示意图看一下,约束链下边在讲

Android:随笔—— ConstraintLayout 实战经验
image.png
六、我想两个控件左右按比例平分空间,平分多没有意思啊(上下同理)
<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/b" />

<View
        android:id="@+id/b"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/a"
        app:layout_constraintRight_toRightOf="parent" />

上面的例子是 1:2 看写法是不是和 LinearLayout 的权重写法简直一毛一样

上下权重设置 app:layout_constraintVertical_weight="" 一定记得 android:layout_width="0dp" 是 0dp

Android:随笔—— ConstraintLayout 实战经验
image.png

坑点

  1. 宽高在需要自动控制长度的时候一定是设置为 0dp,不然没什么效果,甚至达不到预期,我也推荐约束布局中只是用 0dp 、wrap_content 、固定的值。切记 match_parent 是没啥卵用,虽然看着有效果,但是我也不敢碰,说多了都是泪。

  2. 切记只有约束过的边设置 margin 才能看出效果,注意我说的是能看出,虽然设置了 margin 也是有意义的但是看不出来

  3. 平时我们摞控件的时候一定记得处理右边和底部的约束,好多人控件显示不全就是这个问题

上一篇:Activit流程部署、删除


下一篇:listview 点击条目 自动置顶或者自动置底部