ConstraintLayout使用大全

API28文档中的ConstraintLayout相关介绍

1.为什么要使用ConstraintLayout

在多层LinearLayout嵌套(超过三层)之后,视图的渲染与解析会拖累应用的性能,以往我们会选择使用RelativeLayout,但是如果视图层复杂的话RelativeLayout里面还需要嵌套其他视图,对视图的位置控制起来很麻烦,也不容易进行屏幕适配。所以我们使用ConstraintLayout。因为ConstraintLayout使用起来比RelativeLayout更灵活,性能也更加的出色。还有一点就是ConstraintLayout可以按照比例约束控件位置和尺寸,能够更好地适配屏幕大小不同的机型。

2.如何使用之添加依赖

如果你的AndroidStudio在3.0以上,那么是自带这个布局的直接就可以使用,如果是在 2.3–3.0,那么你需要先添加依赖

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

3.具体使用

3.1约束布局相对定位的常用属性:

  • layout_constraintLeft_toLeftOf:我的左边和谁的左边对齐
  • layout_constraintLeft_toRightOf:我的左边在谁的右边
  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBaseline_toBaselineOf
  • layout_constraintStart_toEndOf
  • layout_constraintStart_toStartOf
  • layout_constraintEnd_toStartOf
  • layout_constraintEnd_toEndOf
    buttonB控件的左边约束在id为buttonA的控件的右边
<Button 
    android:id="@+id/buttonA"
     ... />
<Button
    android:id="@+id/buttonB" 
    ...
    app:layout_constraintLeft_toRightOf="@+id/buttonA" />

先说一下基本的方法的含义,拿上图来说,buttonB控件的左边约束在id为buttonA的控件的右边(相当于RelativeLayout中的android:layout_toRightOf),其他的也都类似,就不做过多的赘述。

重点我们来关注一下layout_constraintBaseline_toBaselineOf这个方法,baseline是基线,那么如图所示,两个控件的高度不一致,但是又希望他们文本对齐,这个时候就可以使用layout_constraintBaseline_toBaselineOf

基线

3.2 Margin:边距

  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom

在这里,特别需要注意的就是要想在约束布局中使用margin就必须先约束该控件在约束布局中的位置。

<android.support.constraint.ConstraintLayout
android:layout_width=“match_parent”
android:layout_height=“match_parent”>

    <Button
        android:id="@+id/ButtonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

这段代码中,下面的两句代码必须有,不然的话,margin不会生效。

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

当位置约束目标的可见性为View.GONE时,请看下面的一种情况:假设ButtonB的左边约束在ButtonA的右边,并给ButtonB设一个app:layout_goneMarginLeft=“10dp”

<?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="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide BtnA"
        app:layout_constraintLeft_toRightOf="@+id/buttonA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_goneMarginLeft="30dp" />
</android.support.constraint.ConstraintLayout>

在这里插入图片描述

不加VIEW.GONE属性时,layout_goneMarginLeft属性并不会生效,图中效果并没有30的边距。

如果给ButtonA加上visiblity属性为gone时:

在这里插入图片描述

就会是这样效果,只有给buttonA设置visibility为gone时,layout_goneMarginLeft属性才会生效。

3.3 Centering positioning and bias居中定位和偏移

AS3.0之后我们新建空项目activity_main.xml中“HelloWorld”所在位置就是居中的,他的写法是:

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"

如果想要水平居中,那么只需要约束左右为parent的左右,同理垂直居中就是约束上下为parent的上下即可。

此时我们回想一下上面提到的margin边距的用法,他的前提是需要有一个相对定位先约束他的位置,而垂直/水平居中已经约束了它的定位,那么我们可以直接使用margin,那么整体的效果就是出去margin外边距的距离之后剩下的距离内在进行水平/垂直居中。 如下图所示:

在这里插入图片描述

代码如下:

   <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="120dp"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

除了这种偏移外,ConstraintLayout还提供了另外一种偏移(bias)的属性:

水平偏移:layout_constraintHorizontal_bias

垂直偏移:layout_constraintVertical_bias

其实,bias和权重、占位很相似,bias的值在0-1之间,假如你取0.3,那么你的控件就在整个水平/垂直距离上3/10的位置,例如:

在这里插入图片描述

代码如下:

<Button
    android:id="@+id/buttonA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

如果你想要居中,那么设置为0.5即可。

3.4 Circular positioning (Added in 1.1)角度定位

角度定位指的是可以用一个角度Angle和一个距离Radius来约束两个空间的中心位置。
Radius

<?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="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hide BtnA"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintCircle="@+id/buttonA"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="200dp" />
</android.support.constraint.ConstraintLayout>

在这里插入图片描述

3.5 Dimensions constraints尺寸约束

3.5.1 尺寸限制

在ConstraintLayout中提供了对控件尺寸的约束的属性,可以用来限制该控件的最大最小宽度,但是只有在“wrap_content”模式下才会生效:代码如下

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxWidth="200dp"
        android:maxHeight="200dp"
        android:minWidth="0dp"
        android:minHeight="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
      

3.5.2 0dp(MATCH_CONSTRAINT)

当控件的宽高属性其中一个设置为0dp时,作用也会根据设置的类型的不同而产生不同的作用

设置属性
上图中,我们可以看可以设置的属性有三个

  • app:layout_constraintWidth_default=“spread|percent|wrap”
  • app:layout_constraintHeight_default=“spread|percent|wrap”

我们来具体看下这三个属性的作用

  1. spread(默认属性可以不写) 占用所有符合约束的空间:有多大我占多大
    在这里插入图片描述
 <TextView
        android:layout_width="0dp"
        android:layout_height="80dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginHorizontal="50dp"
        android:layout_marginTop="50dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="spread" />
  1. percent(百分比模式):按照父布局的百分比来设置
    percent方式
<TextView
        android:layout_width="0dp"
        android:layout_height="80dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="50dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3"/>

这里有一些需要稍稍注意的地方,属性设置为percent方式时,default属性可以省略,因为百分比模式必须设置所占父控件的百分比宽/高,还有就是百分比模式设置宽/高的percent属性后,对应的宽/高方向上的margin都会失效,其实也很好理解,你都使用百分比模式来控制了控件本身占父控件的空间比例了,那margin设置的也就毫无意义,而且百分比模式对屏幕的适配方面表现得也更加出色。

  1. wrap(适配内容大小但是不能超过约束限制)
    wrap
 <TextView
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_marginHorizontal="50dp"
        android:layout_marginTop="50dp"
        android:gravity="center_vertical"
        android:text="QQQQQ0000000000000009990000000000000000"
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
        //用wrap方式解决
    <TextView
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginHorizontal="50dp"
        android:layout_marginTop="150dp"
        android:gravity="center_vertical"
        android:text="QQQQQ00000000000000099900000000000000"
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap"/>
	//用constrainedWidth强制约束来解决
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_marginHorizontal="50dp"
        android:layout_marginTop="250dp"
        app:layout_constrainedWidth="true"
        android:gravity="center_vertical"
        android:text="QQQQQ0000000000000009990000000000000000"
        android:textSize="24sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

在普通控件属性中,我们可以很明显的看到,当控件中的内容过长时,所设置的水平方向上的margin就无效了(高度方向上同理),解决这种情况,官方给出了两种解决方式,一种就是用我们上面提到的wrap,上图中的第二个textview就是用这种方式,第二种就是我们将宽度方向上的强制约束设置为true,也就是上图中第三个textview的解决方式

3.5.3 比例宽高

api:
app:layout_constraintDimensionRatio=“5:1”
这个属性的值有两种设置方式:
1.宽高比例(宽度:高度)
2.浮点值(宽高的比率,也就是第一种两者相比的结果…大同小异)

在这里插入图片描述

<TextView
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginTop="50dp"
        android:gravity="center_vertical"
        android:text="QQQQQ000000000000000999000000000"
        android:textSize="24sp"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

注意:这个使用方式必须得有一个约束维度设置为0dp
该方向上的margin无效

3.6 Chains(链式)

API:
layout_constraintHorizontal_chainStyle:水平方向上的链
layout_constraintVertical_chainStyle:垂直方向上的链
使用场景:在水平方向上或者垂直方向上排列多个控件,类似一条链。
模式的值:
spread:默认值,均分剩余控空间
packed:所有控件紧挨着并居中
spread_inside两侧控件紧挨两边,剩余的控件均分剩余空间
chains支持权重

  1. spread
    chain
<TextView
        android:id="@+id/textview_1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV1"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/textview_2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV2"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/textview_3"
        app:layout_constraintStart_toEndOf="@id/textview_1"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV3"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textview_2"
        app:layout_constraintTop_toTopOf="parent" />

2.packed

app:layout_constraintHorizontal_chainStyle="spread"
**改为**
app:layout_constraintHorizontal_chainStyle="packed"

packed
3.spread_inside

app:layout_constraintHorizontal_chainStyle="spread"
**改为**
app:layout_constraintHorizontal_chainStyle=".spread_inside"

spread_inside

权重配置及使用
API:
layout_constraintHorizontal_weight
layout_constraintVertical_weight

chains的权重配置

<TextView
        android:id="@+id/textview_1"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV1"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/textview_2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_2"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV2"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/textview3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/textview_1"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV3"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/textview4"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/textview_2"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV3"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toEndOf="@id/textview3"
        app:layout_constraintTop_toTopOf="parent" />

4.辅助类

4.1 GuideLine:参考线

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

使用场景:辅助定位,它并不会真正显示在布局中,也可以用来做一些百分比分割之类的需求,有着很好的屏幕适配效果,Guideline有水平和垂直方向之分,位置可以使用针对父控件的百分比或者针对父控件位置的具体距离
优势:在复杂的布局文件中,不会因为某个控件的移动而影响其他控件的位置

在这里插入图片描述

//父控件百分比位置使用方式

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

    <TextView
        android:id="@+id/textviewA"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="textviewA"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/Guideline" />

在这里插入图片描述

//父控件距离具体指位置使用方式

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

    <TextView
        android:id="@+id/textviewA"
        android:layout_width="120dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="textviewA"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/Guideline" />

4.2 Barrier:屏障

Barrier也不会实际出现在布局中,它的作用形成一个屏障、障碍,起到一个隔离的作用。
使用场景:布局可以根据本地化而更改的情况,典型的例子就是翻译文本的长度不同。
app:barrierDirection=“top|bottom|left|right|start|end” : 用于控制Barrier相对于给定的View的位置
app:constraint_referenced_ids=“id,id”:
取值是要依赖的控件的id,Barrier将会使用ids中最大的一个的宽/高作为自己的位置

 <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="@string/warehouse"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="@string/hospital"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="textView2,textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="@string/lorem_ipsum"
        app:layout_constraintStart_toEndOf="@+id/barrier7"
        app:layout_constraintTop_toTopOf="parent" />

这样的效果就是,不管textView2,textView1中哪一个长度长,textview3都会适配到他两最长的那一个的右边

在这里插入图片描述

4.3 Group:组

解决传统的为了集体显示或隐藏的LinearLayout嵌套再嵌套问题
API:
app:constraint_referenced_ids=“id,id” 加入组的控件id
在这里插入图片描述

 <TextView
        android:id="@+id/textview_1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV1"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/textview_2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV2"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/textview_3"
        app:layout_constraintStart_toEndOf="@id/textview_1"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview_3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV3"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textview_2"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="textview_1,textview_2,textview_3" />

4.4 Placeholder:占位符

API:
app:content=""
setContent()
使用场景:占位,通常用到动画中,平移进去所占的位置中

//当我们设置app:content="@+id/textview"或者调用setContent()时,
//控件textview就会被移动到Placeholder中,当然在布局中使用 
//app:content=""显然就失去了它的作用。
<TextView
        android:id="@+id/textview"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TV"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
        
<androidx.constraintlayout.widget.Placeholder
        android:layout_width="100dp"
        android:layout_height="60dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

4.5 Flow:流式布局

Ps: 啊,好想吐槽一句,我前几天刚写了个流式布局FlowLayout,然后今天,发现ConstraiLayout已经支持了QwQ,那就一起看看他有多好用吧!

在这里插入图片描述

如果你想做得更加美观,那么修改内部控件的背景图就可以,可以自定义各种背景,用shape等方法

<TextView
        android:id="@+id/textViewA"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TVA"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textviewB"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TVB"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textviewC"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TVC"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textviewD"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TVD"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textviewE"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/design_default_color_secondary"
        android:gravity="center"
        android:text="TVE"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="textViewA,textviewB,textviewC,textviewD,textviewE"
        app:layout_constraintTop_toTopOf="parent" />
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值