今天想看点干货？Constraintlayout等你好久啦！

小布丁！！

已于 2024-05-28 16:27:27 修改

阅读量677

点赞数 25

文章标签： android-studio

于 2024-05-28 15:54:18 首次发布

本文链接：https://blog.csdn.net/weixin_54042669/article/details/139268693

版权

大家好，我是小布丁。

从今天开始要开一个新坑啦，我会系统地把我学到的Android基础知识分享出来，我也想过这样是否有必要，毕竟分享的都是一些很基础的内容，但是很多人也和我一样正处于Android小白阶段，我能理解的东西小白应该也很好理解，所以这个专栏还是有意义的。文章哪里有问题还希望大家能够多多留言，共同进步！

什么是ConstraintLayout?

从 Android Studio 2.3起，创建的layout文件就已经是默认ConstraintLayout了，这是 Android 支持库中提供的一种新型、灵活且高效的布局。ConstraintLayout采用方向约束的方式对控件进行定位，水平和垂直方向都至少有一个约束才能确定控件的位置。

基本方向约束

实现一个控件的顶部和界面顶部对齐，左部和界面左部对齐：


<TextView
  android:layout_width="100dp" //设定文本框的宽
  android:layout_height="60dp" //设定文本框的高
  android:background="@drawable/tv_bg" //设定文本框背景
  android:gravity="center" //文字在文本框中居中显示
  android:text="A" //文本内容
  //重点在下面两行
  app:layout_constraintLeft_toLeftOf="parent" //文本框和父容器的左侧对齐
  app:layout_constraintTop_toTopOf="parent" //文本框和父容器的顶部对齐
/>

约束属性

app:layout_constraintTop_toTopOf=""           控件的顶部和谁的顶部对齐
app:layout_constraintBottom_toBottomOf=""     控件的底部和谁的底部对齐
app:layout_constraintLeft_toLeftOf=""         控件的左边和谁的左边对齐
app:layout_constraintRight_toRightOf=""       控件的右边和谁的右边对齐
app:layout_constraintStart_toStartOf=""       控件的开始位置和谁的开始位置对齐
app:layout_constraintEnd_toEndOf=""           控件的结束位置和谁的结束位置对齐
app:layout_constraintTop_toBottomOf=""        控件的顶部位置在谁的底部位置
app:layout_constraintStart_toEndOf=""         控件的开始位置在谁的结束为止

角度约束

实现一个控件在另一个控件的某个角度的位置。

app:layout_constraintCircle=""         //目标控件id
app:layout_constraintCircleAngle=""    //对于目标的角度(0-360)
app:layout_constraintCircleRadius=""   //到目标中心的距离

实现代码：

app:layout_constraintCircle="@id/pic1"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="50dp"

百分比偏移

实现百分比偏移的前提：

必须设置水平方向的两个约束（Left和Right），才能使用水平方向偏移属性app:layout_constraintHorizontal_bias=""（取值范围是0-1的小数）。必须设置垂直方向的两个约束（Top和Bottom）,才能使用垂直方向偏移属性 app:layout_constraintVertical_bias="" (取值范围是0-1的小数)。

示例：


app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
//水平方向从左到右偏移的比例
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
//垂直方向从上到下偏移的比例
app:layout_constraintVertical_bias="0.1"

控件内边距、外边距

//外边距android:layout_margin="0dp"android:layout_marginLeft="0dp"android:layout_marginRight="0dp"android:layout_marginTop="0dp"android:layout_marginBottom="0dp"
//内边距android:layout_padding="0dp"android:layout_paddingLeft="0dp"android:layout_paddingRight="0dp"android:layout_paddingTop="0dp"android:layout_paddingBottom="0dp"

控件尺寸

在constraintlayout中有尺寸限制的属性，可以限制控件的最大最小尺寸，但是必须把控件对应的长/宽设为wrap_content。

android:minWidth=""   //设置view的最小宽度android:minHeight=""  //设置view的最小高度android:maxWidth=""   //设置view的最大宽度android:maxHeight=""  //设置view的最大高度

链(Chains)

一组通过双向连接链接在一起的小部件被视为一个链条。链条的行为由设置在链条第一个控件（即“链头”）上的属性控制：对于水平链条，链头是最左边的控件；对于垂直链条，链头是最上面的控件。

链式样式当在链的第一个控件上设置属性layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle时，链的行为将根据指定的样式改变（默认是CHAIN_SPREAD）。

CHAIN_SPREAD：控件将被均匀分布（默认样式）。

CHAIN_SPREAD_INSIDE：类似于CHAIN_SPREAD，但链的端点不会被分散开来。

CHAIN_PACKED：链中的控件将被紧密打包在一起。然后，子控件的水平或垂直偏移属性将影响打包控件的定位。

权重链

可以使用layout_constraintHorizontal_weight和layout_constraintVertical_weight进行设置链控件的权重。

<TextView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_primary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/B"
        //指定A的权重
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed" />
<TextView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_primary_dark"
        app:layout_constraintLeft_toRightOf="@id/A"
        app:layout_constraintRight_toLeftOf="@id/C"
        //指定B的权重
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toTopOf="parent" />
<TextView
        android:id="@+id/C"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_secondary"
        app:layout_constraintLeft_toRightOf="@id/B"
        app:layout_constraintRight_toRightOf="parent"
        //指定C的权重
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintTop_toTopOf="parent" />

Guideline（参考线）

实用工具类，代表ConstraintLayout中的Guideline辅助对象。辅助对象在设备上不显示（它们被标记为View.GONE），仅用于布局目的。它们只在ConstraintLayout内部工作。

android:orientation="horizontal|vertical"  辅助线的对齐方式app:layout_constraintGuide_percent="0-1"   距离父级宽度或高度的百分比(小数形式)app:layout_constraintGuide_begin=""        距离父级起始位置的距离(左侧或顶部)app:layout_constraintGuide_end=""          距离父级结束位置的距离(右侧或底部)

设计一个GuideLine，控件在GuideLine下方。


<androidx.constraintlayout.widget.Guideline
        android:id="@+id/Guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        android:id="@+id/A"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/Guideline" />

barrier

用一个示例来理解barrier:

有两个控件text1和text2，这两个控件纵向排列，长度不同，text3在这两个控件的右侧。如果设计text3的app:layout_constraintLeft_toRightOf text1或text2也可以，但是当不确定text1和text2谁的长度更长的时候就会出现问题。使用barrier可以处理这种情况，barrier的位置在text1和text2中最宽的控件的右侧，再让text3在barrier的右侧，问题解决。

<TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
        <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text2222222222222"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />
        <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        //barrier在给定几个控件的后面
        app:barrierDirection="end"
        //取值是要给定的控件的id，barrier将会使用ids中最大的一个的宽/高作为自己的位置
        app:constraint_referenced_ids="textView2,textView1" />
        <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="text3"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="parent" />

Group(组)

Group的作用就是可以对一组控件同时隐藏或显示。

<TextView
        android:id="@+id/A"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_primary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
<TextView
        android:id="@+id/B"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_primary_dark"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/A"
        />
<androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        //A B这两个控件都由Group控制，当android:visibility="gone"时，这两个控件都不显示
        android:visibility="visible"        
        app:constraint_referenced_ids="A,B" />

Placeholder

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置。


<TextView
        android:id="@+id/textview"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/design_default_color_primary_variant"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.Placeholder
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

当我们设置app:content="@+id/A"或者调用setContent()时，控件A就会被移动到Placeholder中。

参考：《第一行代码》

官网

https://www.jianshu.com/p/17ec9bd6ca8a

END

最后再自我介绍一下，我是小布丁，在一家互联网中厂做程序员，有一个公众号：码农小家园，会分享自己的生活和热爱，还有和互联网相关的趣事，欢迎大家来玩哦～

小布丁！！

关注

25
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
今天想看点干货？Constraintlayout等你好久啦！

有两个控件text1和text2，这两个控件纵向排列，长度不同，text3在这两个控件的右侧。使用barrier可以处理这种情况，barrier的位置在text1和text2中最宽的控件的右侧，再让text3在barrier的右侧，问题解决。从今天开始要开一个新坑啦，我会系统地把我学到的Android基础知识分享出来，我也想过这样是否有必要，毕竟分享的都是一些很基础的内容，但是很多人也和我一样正处于Android小白阶段，我能理解的东西小白应该也很好理解，所以这个专栏还是有意义的。
复制链接

扫一扫