ConstraintLayout(二)示例篇

2022-06-12  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读