不正经

这个屌丝很懒，什么也没留下！

热门标签

ConstraintLayout的使用介绍_constraintlayout 基准线

作者：不正经 | 2024-03-12 20:09:28

踩

constraintlayout 基准线

ConstraintLayout的使用介绍

ConstraintLayout的介绍和依赖

在2016年的Google的I/O大会上，出来一个新的布局ConstraintLayout(约束性布局)。在Android Studio2.2版本后自动依赖使用ConstraintLayout布局。

ConstraintLayout的依赖

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0'
}1
2
3

ConstraintLayout约束布局的含义

根据布局中的其他元素或视图，确定View在屏幕中的位置，受到三类约束，即其他视图，父容器(parent)，基准线(Guideline)。

ConstraintLayout的优势

ConstraintLayout的相比RelativeLayout和LineatLayout具有更强的特性，可以减少布局之间的嵌套。

ConstraintLayout的相对位置的设置

相对位置属性

相对位置属性：layout_constraint[自身控件位置]_[目标控件位置]="[目标控件ID]"，如果id是父布局的id，可以使用parent。如：

layout_constraintLeft_toLeftOf=”@id/…”：控件自身的左边和目标控件的左边对齐。
layout_constraintLeft_toRightOf=”@id/…”：控件自身的左边和目标控件的右边对齐。
layout_constraintRight_toRightOf=”@id/…”：控件自身的右边和目标控件的右边对齐。
layout_constraintRight_toLeftOf=”@id/…”：控件自身的右边和目标控件的左边对齐。
app:layout_constraintStart_toStartOf=”@id/…”：和上面意思差不多，就不解释了
app:layout_constraintStart_toEndOf=”@id/…”：
app:layout_constraintEnd_toEndOf=”@id/…”：
app:layout_constraintEnd_toStartOf=”@id/…”：
layout_constraintTop_toTopOf=”@id/…”：控件自身的上边和目标控件的上边对齐。
layout_constraintTop_toBottomOf=”@id/…”：控件自身的上边和目标控件的下边对齐。
layout_constraintBottom_toBottomOf=”@id/…”：控件自身的下边和目标控件的下边对齐。
layout_constraintBottom_toTopOf=”@id/…”：控件自身的下边和目标控件的上边对齐。

eg:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="Button2"
        app:layout_constraintBottom_toTopOf="@id/btn" />

</android.support.constraint.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果图：

app:layout_constraintBaseline_toBaselineOf=”@id/btn”：文字的底部线对齐

eg:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="Button2"
        app:layout_constraintBaseline_toBaselineOf="@id/btn" />

</android.support.constraint.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果图：

goneMargin属性

goneMargin属性是指目标控件GONE掉之后，自身控件可以设置个margin值。不过margin的方向需要和控件的相对位置的方向保持一致（下面的实例会说）。

layout_goneMarginLeft=”xxdp”：当目标控件GONE时，自身控件距离左边的边距xxdp（当约束的方向左右方向时有效）。
layout_goneMarginStart=”xxdp”：
layout_goneMarginRight=”xxdp”：
layout_goneMarginEnd=”xxdp”：
layout_goneMarginTop=”xxdp”：
layout_goneMarginBottom=”xxdp”：

eg:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="Button2"
        app:layout_constraintBottom_toTopOf="@id/btn"
        app:layout_goneMarginBottom="200dp" />

</android.support.constraint.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

效果图：

bias属性

bias属性是指在对齐父容器后，设置水平与竖直的比例。

app:layout_constraintHorizontal_bias=”0.2”：设置相对父控件距离的长度的为父控件的宽度0.2倍的位置
layout_constraintVertical_bias=”0.2”:设置相对父控件距离的长度的为父控件的长度0.2倍的位置

eg:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.2" />
</android.support.constraint.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果图：

ConstraintLayout设置高宽比例

layout_constraintDimensionRatio=”2:1”：通过该属性可以设置View的高宽比。这样可以很好的做手机屏幕的适配了。

eg:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--指定高度，宽度随着宽高比自适应 -->
    <!--app:layout_constraintDimensionRatio="16:9"  W: 默认，表示宽高比-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:src="@color/colorPrimary"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintLeft_toLeftOf="parent" />

    <!--指定高度，宽度随着宽高比自适应 -->
    <!--app:layout_constraintDimensionRatio="H,16:9"  H: 表示高宽比-->
    <ImageView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:src="@color/colorAccent"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintRight_toRightOf="parent" />


    <!--指定宽度，按照宽度来计算高宽比   默认是宽高比 -->
    <ImageView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:src="@color/colorPrimary"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintTop_toBottomOf="@id/image" />

    <!--指定宽度，按照宽度来计算高宽比  W, 表示高宽比 -->
    <ImageView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        android:src="@color/colorPrimary"
        app:layout_constraintDimensionRatio="W,16:9"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/image" />

    <!--android:layout_width="0dp"  0dp表示充满父控件或说是充满其余空间-->
    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="@id/parent"
        app:layout_constraintDimensionRatio="2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

效果图：

ConstraintLayout设置基准线（Guideline）

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

Guideline是一个View(android.support.constraint.Guideline)，基准线的通过android:orientation设置方向。通过基准线来约束其他的view。

layout_constraintGuide_begin=”xxdp”：基准线开始方向xxdp
layout_constraintGuide_end=”xxdp”：基准线结束方向xxdp
layout_constraintGuide_percent=”0.3”：基准线开始方向距离的父控件大小的百分比。

eg:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/guideline1"
        app:layout_constraintTop_toTopOf="@id/guideline2" />

</android.support.constraint.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果图：

ConstraintLayout设置链状结构（Chain Style）

Chain Style是使多个控件像链条一样显示，这个更能可以类似LinearLayout的weight属性。

要想chain style生效，控件要相互引用，比如A的右边依赖B的左边，B的左边依赖A的右边，都是设置。如:水平方向的Chain Style.

Chain Style的分为水平和竖直方向，每种都有3中模式：

layout_constraintHorizontal_chainStyle=”spread”：均匀分布（包括边上控件左右的边距）
layout_constraintHorizontal_chainStyle=”spread_inside”：均匀分布，但是边上的控件不均匀分布（边上控件没有边距）
layout_constraintHorizontal_chainStyle=”packed”：控件紧挨在一起。还可以通过bias属性设置偏移量。
layout_constraintHorizontal_weight=”“：跟线性布局的weight差不多，width需要设置0dp，控件的大小根据设置的weight比例进行设置。
layout_constraintVertical_chainStyle=”“:和上面一样，有三种模式spread，spread_inside，packed。
layout_constraintVertical_weight=”“：

如图：

eg：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn2" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        app:layout_constraintLeft_toRightOf="@id/btn1"
        app:layout_constraintRight_toLeftOf="@id/btn3" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button3"
        app:layout_constraintLeft_toRightOf="@id/btn2"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

效果图：

ConstraintLayout控件的其他属性

layout_constraintWidth_min=”“：最小宽度
layout_constraintWidth_max=”“：最大宽度
layout_constraintHeight_min=”“：最小高度
layout_constraintHeight_max=”“：最大高度

下面几个属性是 UI 编辑器所使用的，用了辅助拖拽布局的，在实际使用过程中，可以不用关心这些属性。

layout_optimizationLevel
layout_editor_absoluteX
layout_editor_absoluteY
layout_constraintBaseline_creator：
layout_constraintTop_creator：
layout_constraintRight_creator：
layout_constraintLeft_creator：
layout_constraintBottom_creator：

文章参考：

Android ConstraintLayout详解

ConstraintLayout 终极秘籍

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/225618