美文网首页
ConstraintLayout(二)示例篇

ConstraintLayout(二)示例篇

作者: 栈鱼科技 | 来源:发表于2022-06-12 17:43 被阅读0次

    单一控件

    居中

    上下左右全部居中,通过基础篇介绍的位置属性实现

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    居上

    对Bottom不做约束即可实现居上的效果

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    居下

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    居左

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    居右

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    左上

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    右下

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    水平任意位置

    app:layout_constraintHorizontal_bias可以指定水平方向任意位置

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_bias="0.3" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    垂直任意位置

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintVertical_bias="0.7" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    任意位置

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_bias="0.8"

            app:layout_constraintVertical_bias="0.4" />

    </android.support.constraint.ConstraintLayout>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    双控件

    相对于单个子View来说,多个子View的布局才能凸显ConstraintLayout的优势

    垂直等分

    通过位置属性增加约束后,默认就是等分剩余空间

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toTopOf="@id/button2" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toBottomOf="@id/button1"

            app:layout_constraintBottom_toBottomOf="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

    水平等分

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    偏移(Space)

    在等分基础上实现一定的偏移。一个做法是通过插入Space,配合app:layout_constraintHorizontal_weight实现

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <Space

            android:id="@+id/space1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button1"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="1" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toEndOf="@id/space1"

            app:layout_constraintEnd_toStartOf="@id/space2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread"

            app:layout_constraintHorizontal_weight="2"/>

        <Space

            android:id="@+id/space2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="1" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/space2"

            app:layout_constraintEnd_toStartOf="@id/space3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="2" />

        <Space

            android:id="@+id/space3"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="2" />

    </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

    59

    60

    偏移(bias)

    第二种实现偏移的方式是使用bias

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_bias="0.4" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_bias="0.9" />

    </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

    紧贴一端

    先使用spread两端对齐父容器,然后通过bias对一个View进行偏移

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread"

            app:layout_constraintHorizontal_bias="0.3" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    内部紧贴

    使用app:layout_constraintHorizontal_chainStyle="packed"

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    偏移

    内部紧贴的基础上,可以使用bias进行偏移

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed"

            app:layout_constraintHorizontal_bias="0.3" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    垂直方向偏移

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed"

            app:layout_constraintVertical_bias="0.4"/>

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintVertical_bias="0.7"/>

    </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

    内部间隔

    内部贴近的基础上,通过layout_margin增加间隔

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed"

            app:layout_constraintHorizontal_bias="0.3" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            android:layout_marginStart="15dp"/>

    </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

    平分空间

    两个子View平分父容器控件。

    同时指定android:layout_width="0dp" 以及 app:layout_constraintHorizontal_chainStyle="spread"

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    调整比例

    使用app:layout_constraintHorizontal_weight改变比例

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread"

            app:layout_constraintHorizontal_weight="3" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="2" />

    </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

    紧贴两端

    使用app:layout_constraintHorizontal_chainStyle="spread_inside"是两个子View紧贴两端

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread_inside" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    调整比例

    增加space,width指定0并指定app:layout_constraintHorizontal_weight

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/space1"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread"

            app:layout_constraintHorizontal_weight="3"/>

        <Space

            android:id="@+id/space1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="2" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/space1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="1" />

    </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

    两端对齐

    控件的两端对齐,减少一端的约束可以实现单端对齐

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="140dp"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="70dp"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintBottom_toBottomOf="@id/button1" />

    </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

    中心对齐边缘

    一个控件的中心对齐另一个控件边缘

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="140dp"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="70dp"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toBottomOf="@id/button1"

            app:layout_constraintBottom_toBottomOf="@id/button1" />

    </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

    文字对齐

    使用TextView的时候,通过app:layout_constraintBaseline_toBaselineOf对内部文字进行各种对齐

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="140dp"

            android:text="1"

            android:gravity="bottom|center"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="70dp"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintBaseline_toBaselineOf="@id/button1"/>

    </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

    三控件

    水平等分

    与双控件的水平等分一样

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    偏移

    与双控件相同,略。

    内部贴近

    与双控件一样app:layout_constraintHorizontal_chainStyle="packed"

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    偏移

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed"

            app:layout_constraintHorizontal_bias="0.3" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    内部间隔(1)

    1、2贴近,3通过layout_margin进行间隔

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="3"

            android:layout_marginEnd="15dp"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    内部间隔(2)

    通过layout_margin三个控件互相间隔

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="packed"

            app:layout_constraintHorizontal_bias="0.3" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            android:layout_marginStart="10dp"/>

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            android:layout_marginStart="15dp"/>

    </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

    平分空间

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    调整比例

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread"

            app:layout_constraintHorizontal_weight="1" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="2" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="4" />

    </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

    紧贴两端

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread_inside" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="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

    调整比例

    与双控件一样, 使用Space调整

    <?xml version="1.0" encoding="utf-8"?>

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintEnd_toStartOf="@id/space1"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_chainStyle="spread"

            app:layout_constraintHorizontal_weight="4" />

        <Space

            android:id="@+id/space1"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintStart_toEndOf="@id/button1"

            app:layout_constraintEnd_toStartOf="@id/button2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="1" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toEndOf="@id/space1"

            app:layout_constraintEnd_toStartOf="@id/space2"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="4" />

        <Space

            android:id="@+id/space2"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintStart_toEndOf="@id/button2"

            app:layout_constraintEnd_toStartOf="@id/button3"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="3" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toEndOf="@id/space2"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintHorizontal_weight="4" />

    </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

    59

    60

    61

    更多控件

    条目

    多个控件左对齐并且通过padding增加垂直间隔

    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:padding="20dp"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button1"

            android:layout_width="200dp"

            android:layout_height="wrap_content"

            android:text="1"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent" />

        <android.support.design.button.MaterialButton

            android:id="@+id/button2"

            android:layout_width="70dp"

            android:layout_height="wrap_content"

            android:text="2"

            app:layout_constraintStart_toStartOf="parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button3"

            android:layout_width="170dp"

            android:layout_height="wrap_content"

            android:text="3"

            app:layout_constraintStart_toStartOf="parent"

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

        <android.support.design.button.MaterialButton

            android:id="@+id/button4"

            android:layout_width="140dp"

            android:layout_height="wrap_content"

            android:text="4"

            app:layout_constraintStart_toStartOf="parent"

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

    </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

    复杂列表

    <?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"

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

        android:layout_width="match_parent"

        android:layout_height="72dp"

        android:paddingEnd="16dp"

        android:paddingRight="16dp">

        <ImageView

            android:id="@+id/icon"

            android:layout_width="72dp"

            android:layout_height="72dp"

            app:layout_constraintLeft_toLeftOf="parent" />

        <TextView

            android:id="@+id/title"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintBottom_toTopOf="@+id/text"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toEndOf="@id/icon"

            app:layout_constraintTop_toTopOf="parent"

            app:layout_constraintVertical_chainStyle="packed"

            tools:text="Title" />

        <TextView

            android:id="@+id/text"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            app:layout_constraintBottom_toBottomOf="parent"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toEndOf="@id/icon"

            app:layout_constraintTop_toBottomOf="@id/title"

            tools:text="text" />

    </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

    ————————————————

    版权声明:本文为CSDN博主「fundroid_方卓」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

    原文链接:https://blog.csdn.net/vitaviva/article/details/106736575

    相关文章

      网友评论

          本文标题:ConstraintLayout(二)示例篇

          本文链接:https://www.haomeiwen.com/subject/wkzgmrtx.html