安卓 ConstraintLayout 布局详解

╰半夏微凉° 2023-10-06 22:18 41阅读 0赞

**ConstraintLayout 布局详解**

### 简介 ###

约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。

优点

在开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计算功耗也就越多，ConstraintLayout使用起来比RelativeLayout更灵活，可以按照比例约束控件位置和尺寸。

使用方法

添加依赖 implementation 'com.android.support.constraint:constraint-layout:1.1.3'

### 属性解释 ###

1、`app:layout_constraintLeft_toLeftOf="@+id/tv1"`  
表示此控件的左边框与某个控件的左边框对齐

![20200708120637961.png][]

2、`app:layout_constraintLeft_toRightOf="@+id/tv1"`  
表示此控件的左边框与某个控件的右边框对齐或者在其右边

![20200708120835513.png][]

3、`app:layout_constraintRight_toLeftOf="@+id/tv1"`  
表示此控件的右边框与某个控件的左边框对齐或在其左边

![20200708120937169.png][]

4、`app:layout_constraintRight_toRightOf="@+id/tv1"`  
表示此控件的右边框与某个控件的右边框对齐

![20200708121030525.png][]

5、`app:layout_constraintTop_toTopOf="@+id/tv1"`  
表示此控件的顶部边框与某个控件的顶部边框水平对齐

![20200708142859633.png][]

6、`layout_constraintTop_toBottomOf="@+id/tv1"`  
表示此控件的顶部边框与某个控件的底部边框水平对齐或在其下边

![20200708143032359.png][]

7、`app:layout_constraintBottom_toTopOf="@+id/tv1"`  
表示此控件的底部边框与某个控件的顶部边框水平对齐或其上边

![20200708143201730.png][]

8、`app:layout_constraintBottom_toBottomOf="@+id/tv1"`  
表示此控件的底部边框与某个控件的底部边框水平对齐

![20200708143230604.png][]

9、`app:layout_constraintBaseline_toBaselineOf="@+id/tv1"`  
表示此控件与某个控件水平对齐

![20200708143449759.png][]

10、tools:layout\_editor\_absoluteX="148dp"  
表示此控件在布局中X轴的绝对坐标点。  
11、tools:layout\_editor\_absoluteY="178dp"  
表示此控件在布局中Y轴的绝对坐标点  
15、layout\_constraintStart\_toEndOf  
表示此控件的左边界在某个控件右边界的右边，及表示此控件在某个控件的右边。与 layout\_constraintLeft\_toRightOf 效果相同。  
16、layout\_constraintStart\_toStartOf  
表示此控件的左边界与某个控件的左边界在同一垂直线上。与 layout\_constraintLeft\_toLeftOf 效果相同。  
17、layout\_constraintEnd\_toStartOf \`\`  
表示此控件的右边界与某个控件的左边界在同一垂直线上。与 layout\_constraintRight\_toLeftOf 效果相同。  
18、layout\_constraintEnd\_toEndOf  
表示此控件的右边界与某个控件的右边界对齐。与 layout\_constraintRight\_toRightOf 效果相同。  
19、layout\_constraintHorizontal\_bias  
表示此控件在布局中的水平方向上的偏移百分百  
20、layout\_constraintVertical\_bias  
表示此控件在布局中的的垂直方向上的偏移百分百。  
21、app:layout\_constraintCircle="@id/tv1"  
表示此控件相对于指定控件  
22、app:layout\_constraintCircleRadius="150dp"  
表示此控件和指定控件中心的距离  
23、app:layout\_constraintCircleAngle="120"  
表示此控件和指定控件中心连线与Y轴的角度（0-360°）

![20200708152102720.png][]

**Guideline**

Guideline，是一个辅助控件，可见性为GONE，主要作用是充当一个锚点。

高度0dp，宽度与父容器等宽  
android:orientation="vertical"  
宽度0dp，高度与父容器等高  
android:orientation="horizontal"

24、`app:layout_constraintGuide_begin="100dp"`  
表示距离父容器顶部的距离  
25、`app:layout_constraintGuide_end="100dp"`  
表示距离父容器底部的距离

![20200708145904220.png][]

26、`app:layout_constraintGuide_percent=”0.3”"`  
表示在距离布局上方30%的位置

![20200708150413444.png][]

**1. 使用dp为单位进行UI元素的设计，可以更好的适应不同屏幕密度的设备；**

*  **sp、dp相同点：**
    
    1.  都是官方推荐的UI设计单位；
    2.  都会受到屏幕密度的变化的影响；
    3.  都是为了更好的展示UI在不同设备上的效果而推出的UI设计单位。
 *  **sp、dp不同点：**
    
    1.  dp只会受到屏幕密度变化的影响；
    2.  sp在受屏幕密度变化的基础上，还会受到用户设置的影响。

通常情况下，建议使用sp作为字体大小的单位，但如果**需要避免界面受到用户个人设置的影响时，可以使用dp来代替**。

**疑问：**

layout\_constraintLeft\_toLeftOf 和 layout\_constraintStart\_toStartOf 效果是一样的，这有什么意义呢？

使用start和end来表示左和右是为了考虑别的国家的习惯，有的国家开始方向是右，所以使用start和end可以兼容这种情况。[为了 Android 中的RTL Layout 兼容][Android _RTL Layout]。

原文链接：https://blog.csdn.net/st526403649/article/details/107199149/

[20200708120637961.png]: https://img-blog.csdnimg.cn/20200708120637961.png
[20200708120835513.png]: https://img-blog.csdnimg.cn/20200708120835513.png
[20200708120937169.png]: https://img-blog.csdnimg.cn/20200708120937169.png
[20200708121030525.png]: https://img-blog.csdnimg.cn/20200708121030525.png
[20200708142859633.png]: https://img-blog.csdnimg.cn/20200708142859633.png
[20200708143032359.png]: https://img-blog.csdnimg.cn/20200708143032359.png
[20200708143201730.png]: https://img-blog.csdnimg.cn/20200708143201730.png
[20200708143230604.png]: https://img-blog.csdnimg.cn/20200708143230604.png
[20200708143449759.png]: https://img-blog.csdnimg.cn/20200708143449759.png
[20200708152102720.png]: https://img-blog.csdnimg.cn/20200708152102720.png
[20200708145904220.png]: https://img-blog.csdnimg.cn/20200708145904220.png
[20200708150413444.png]: https://img-blog.csdnimg.cn/20200708150413444.png
[Android _RTL Layout]: https://blog.csdn.net/wxx614817/article/details/50586388