ConstraintLayout简单使用

一:位置约束

基本方向约束
  1. 常用的控件属性:

<!-- 基本方向约束 -->
<!-- 我的什么位置在谁的什么位置 -->
	app:layout_constraintTop_toTopOf   			我的顶部和谁的顶部对齐 
	app:layout_constraintTop_toBottomOf			我的顶部和谁的底部对齐
	app:layout_constraintBottom_toTopOf=""		我的底部和谁的顶部对齐
    app:layout_constraintBottom_toBottomOf=""	我的底部和谁的底部对齐
    app:layout_constraintLeft_toLeftOf=""		我的左边和谁的左边对齐
    app:layout_constraintLeft_toRightOf=""		我的左边和谁的右边对齐
    app:layout_constraintRight_toLeftOf=""		我的右边和谁的左边对齐
    app:layout_constraintRight_toRightOf=""		我的右边和谁的右边对齐    	 	

通过约束布局实现此布局,约束布局是通过对控件上下左右四个方向添加约束条件实现的对于控件的位置的确定,我们可以理解为其方向上的约束是给其添加了一个力,通过力的束缚使其位置确定
在这里插入图片描述
XML源码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="#A4AE44"
        android:gravity="center"
        android:text="目标控件 "
        android:textColor="#2311C1"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"		
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:background="#C13B11"
        android:gravity="center"
        android:textSize="32sp"
        android:textColor="#171616"
        android:layout_marginEnd="15dp"
        android:minWidth="120dp"
        app:layout_constraintBottom_toBottomOf="@+id/text"
        app:layout_constraintTop_toTopOf="@+id/text"
        app:layout_constraintRight_toLeftOf="@+id/text"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:gravity="center"
        android:background="#FFEB3B"
        android:textSize="50sp"
        android:minWidth="50sp"
        app:layout_constraintTop_toBottomOf="@+id/text"
        app:layout_constraintBottom_toBottomOf="@+id/text"
        app:layout_constraintLeft_toLeftOf="@+id/text"
        app:layout_constraintRight_toRightOf="@+id/text"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:gravity="center"
        android:background="#FFEB3B"
        android:textSize="50sp"
        android:minWidth="50sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/text"
        app:layout_constraintRight_toRightOf="@+id/text"
        app:layout_constraintLeft_toRightOf="@+id/text"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

属性:

android:layout_width=“wrap_content” //宽为内容适配
android:layout_height=“0dp” //高为0dp,此属性为match_contraint,表示通过约束条件来控制其的高
app:layout_constraintDimensionRatio=“1:1” //设置当前控件的布局比率,即长宽比

此设置的最终结果是让当前控件成为一个正方形,且其边长由输入的宽度决定

基线对齐

通过基准线对齐我们可以实现两个不同大小的文本控件的对齐,如:
在这里插入图片描述
我们不难发现20和$对齐着,
控件属性为:

app:layout_constraintBaseline_toBaselineOf=“” //表示当前控件与提供约束控件的文本内容的文本下准线对齐,此约束相当于提供了一个垂直方向上的约束,我们还需一个水平约束
app:layout_constraintStart_toEndOf=“” //添加水平约束

上演示布局的代码为:

<TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#9EDDE4"
        android:text="20"
        android:textSize="50sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:gravity="center"
        android:background="#9EDDE4"
        android:text=""
        android:textSize="20sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/text3"
        app:layout_constraintStart_toEndOf="@+id/text3" />

通过此约束,我们让两个不同的大小文案的文案对齐

角度约束

有些时候我们需要一个控件在某个控件的某个角度的位置,那么通过其他的布局其实是不太好实现的,如实现如下布局:
在这里插入图片描述
此布局 斜上 控件在 基准控件的斜右上45°位置,此布局使用之前的布局来实现或很困难,但ConstraintLayout为我们提供了角度位置相关的属性:

app:layout_constraintCircle="" 目标控件id
app:layout_constraintCircleAngle="" 对于目标的角度(0-360),此处0°为提供约束控件的正上方,按顺时针方向递增
app:layout_constraintCircleRadius="" 到目标中心的距离

上面三个属性只是确定了当前控件与提供约束的控件的位置关系,但并无约束条件,所以除如上属性外我们仍需为其添加位置约束

我们只需为当前控件添加竖和横的约束,将其约束至提供约束的控件上即可

上演示布局的代码为:

<TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#9EDDE4"
        android:text="基准"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="76dp"
        android:layout_marginBottom="4dp"
        android:background="#FFEB3B"
        android:text="斜上"
        android:textSize="30sp"
        app:layout_constraintBottom_toTopOf="@+id/text4"
        app:layout_constraintCircle="@id/text4"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="80dp"
        app:layout_constraintStart_toStartOf="@+id/text4" />
百分比偏移

有的时候我们需要让控件在当前约束的水平方向或垂直方向的百分之多少的位置,可以使用如下属性:
使用前提是使用那个方向的偏移就需要这个方向上的完整约束,百分比的起始方向为上和左。

app:layout_constraintHorizontal_bias="" 水平偏移 取值范围是0-1的小数
app:layout_constraintVertical_bias="" 垂直偏移 取值范围是0-1的小数

如实现如下布局:

在这里插入图片描述

百分比偏移控件的上约束为parent,下约束为parent,左约束为 A 控件的左边界,右布局的约束为右parent,然后通过上面两属性控制上下偏移量都为0.2,即偏移20%。
代码为:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="百分比偏移"
        android:background="#C1B811"
        app:layout_constraintLeft_toLeftOf="@id/textView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias=".2"
        app:layout_constraintVertical_bias=".2"
        />

二:辅助控件

辅助线(guideline)

Guideline是一条参考线,可以帮助开发者进行辅助定位,并且实际上它并不会真正显示在布局中,像是数学几何中的辅助线一样,使用起来十分方便,出场率很高,Guideline也可以用来做一些百分比分割之类的需求,有着很好的屏幕适配效果,Guideline有水平和垂直方向之分,位置可以使用针对父级的百分比或者针对父级位置的距离
定义属性有:

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

通过辅助线实现如下布局:
在这里插入图片描述
理解,辅助线相当于除了父布局,控件外为我们提供其他能提供给更准确位置信息和提供李四与父布局边界的约束条件。
代码为:

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

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#D34949"
        android:gravity="center"
        android:text="占一边"
        android:textSize="50dp"
        app:layout_constraintBottom_toBottomOf="@+id/guidLine2"
        app:layout_constraintLeft_toLeftOf="@+id/guidLine1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
屏障(Barier)

这个Barrier和Guideline一样,也不会实际出现在布局中,它的作用如同其名,形成一个屏障、障碍,使用也非常多。如我们想要一个控件一直保持在某一控件的那一边,此时我们就可以使用屏障,屏障可以起到将两个控件间隔开的作用,何时会应用这个呢?
当我们创建布局时,有时会遇到布局可以根据本地化而更改的情况。当一个控件的依赖对象为一条辅助线时,辅助线前一个控件,后一个控件,前一控件宽度并未超过辅助线,此时则没有什么影响,当如若此时更改前一控件的内容,使其宽度发生改变,但此时辅助线位置并不会改变,所以有时出现前移控件向后覆盖后一控件的情况,此时我们就可以在两者之间添加一个barier控件,通过此辅助控件可以使控件被间隔起来,让后一控件随前一控件移动。

在这里插入图片描述
在这里插入图片描述
如上:后控件位置并不恒定,它会随前移控件的宽度变化
代码如下:

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登录     "
        android:textSize="50sp"
        android:id="@+id/text"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <androidx.constraintlayout.widget.Barrier
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/barrier"
        app:barrierDirection="end"
        app:constraint_referenced_ids="text"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ahhhh"
        android:textSize="32sp"
        android:textColor="#EEBD1F1F"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"/>

三:控件内边距、外边距、GONE Margin

ConstraintLayout的内边距和外边距的使用方式其实是和其他布局一致的

//外边距,控件与外面的边距
android:layout_margin=“0dp”
android:layout_marginStart=“0dp”
android:layout_marginLeft=“0dp”
android:layout_marginTop=“0dp”
android:layout_marginEnd=“0dp”
android:layout_marginRight=“0dp”
android:layout_marginBottom=“0dp”
//内边距,控件内容与控件外围的边距
android:padding=“0dp”
android:paddingStart=“0dp”
android:paddingLeft=“0dp”
android:paddingTop=“0dp”
android:paddingEnd=“0dp”
android:paddingRight=“0dp”
android:paddingBottom=“0dp”

GONE Margin:当依赖的目标view隐藏时会生效的属性,例如B被A依赖约束,当B隐藏时B会缩成一个点,自身的margin效果失效,A设置的GONE Margin就会生效,属性如下:
此属性用于当当前控件依赖于前一控件,由于前移控件页占据位置空间,所以在其存在时当前控件相当于前面有一个它的空间,若此时它隐藏,它将缩为一个点,此时它的空间大小将消失,所以依赖它的控件将前移一个隐藏控件的位置,所以为了让前一控件隐藏后它仍保持在原位置,我们需要在前控件隐藏后让其偏移一个控件的大小

// GONE Margin
app:layout_goneMarginBottom=“0dp”
app:layout_goneMarginEnd=“0dp”
app:layout_goneMarginLeft=“0dp”
app:layout_goneMarginRight=“0dp”
app:layout_goneMarginStart=“0dp”
app:layout_goneMarginTop=“0dp”

假如我们有如下布局:
在这里插入图片描述
后控件依赖前控件,间距为10dp,假如此时前空间被隐藏,即

android:visibility=“gone”

则会出现如下情景:
在这里插入图片描述
我们发现后面的控件前移了

android:visibility=“invisible”

不会产生上面影响,因为此时控件只是不可见,控件所占的空间位置仍在,那么我们如何在前空间被隐藏时让当前控件的位置不变呢,只需让其在前控件隐藏时偏移前控件的空间大小即可,
由于前控件的宽为100dp,所以后空间添加如下属性:

app:layout_goneMarginLeft=“60dp”

经测验为了使其保持原位置不变需要自己调控偏移距离,因为原约束点的位置也随控件缩为点而发生位置变化。偏移量为(前控件与边界的间距+自身长度)/ 2。
效果展示:
在这里插入图片描述
代码如下:

<TextView
        android:id="@+id/text5"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:background="#C1B811"
        android:text="被依赖"
        android:visibility="gone"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="#60DA9B"
        android:text="依赖者"
        android:textSize="20sp"
        app:layout_goneMarginLeft="60dp"
        app:layout_constraintBottom_toBottomOf="@id/text5"
        app:layout_constraintLeft_toRightOf="@id/text5" />

四:控件尺寸

尺寸限制

在ConstraintLayout中提供了一些尺寸限制的属性,可以用来限制最大、最小宽高度,这些属性只有在给出的宽度或高度为wrap_content时才会生效,比如想给宽度设置最小或最大值,那宽度就必须设置为wrap_content

android:minWidth="" 设置view的最小宽度
android:minHeight="" 设置view的最小高度
android:maxWidth="" 设置view的最大宽度
android:maxHeight="" 设置view的最大高度

0dp(MATCH_CONSTRAINT)

设置view的大小除了传统的wrap_content、指定尺寸、match_parent外,ConstraintLayout还可以设置为0dp(MATCH_CONSTRAINT),并且0dp的作用会根据设置的类型而产生不同的作用进行设置类型的属性是

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

spread(默认):占用所有的符合约束的空间
percent:按照父布局的百分比设置

app:layout_constraintWidth_percent=“0.5” 设置在父布局中的占比

wrap:匹配内容大小但不超过约束限制,与wrap_content的区别是,warp_content会超出约束限制

比例宽高

ConstraintLayout中可以对宽高设置比例,前提是至少有一个约束维度设置为0dp,这样比例才会生效,
属性名称:

app:layout_constraintDimensionRatio="" 宽高比例

如:
在这里插入图片描述
目标控件就为一个正方形,其代码为:

<TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="#A4AE44"
        android:gravity="center"
        android:text="目标控件 "
        android:textColor="#2311C1"
        android:textSize="32sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

五:其他

链(Chains)

Chains(链)也是一个非常好用的特性,它是将许多个控件在水平或者垂直方向,形成一条链,用于平衡这些控件的位置,那么如何形成一条链呢?形成一条链要求链中的控件在水平或者垂直方向,首尾互相约束,这样就可以形成一条链,水平方向互相约束形成的就是一条水平链,反之则是垂直链。
在这里插入图片描述
效果展示,此处A,B,C三者够成一个链式结构,即ABC之间两两约束,此时将ABC的宽度设置为0dp,让其根据约束的不同产生不同的效果,由于AC的两边的约束为parent,所以此时产生的效果为ABC平分宽度。代码如下:

<TextView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#3F51B5"
        android:gravity="center"
        android:text="A"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/B" />

    <TextView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#3F51B5"
        android:gravity="center"
        android:text="B"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/A"
        app:layout_constraintRight_toLeftOf="@+id/C" />

    <TextView
        android:id="@+id/C"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#3F51B5"
        android:gravity="center"
        android:text="C"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/B"
        app:layout_constraintRight_toRightOf="parent" />

此时我们若为ABC设置不同的宽度,则会产生如下效果:
在这里插入图片描述
此时将三控件的宽度都设置为70dp,我们发现它们被居中了。
更改代码为:
android:layout_width=“70dp”
A、B、C,三个控件在水平方向上首尾互相约束,这样就形成了一条水平链,他们默认的模式是spread,均分剩余空间,我们可以使用layout_constraintHorizontal_chainStyle和layout_constraintVertical_chainStyle分别对水平和垂直链设置模式,模式可选的值有:spread、packed、spread_inside

  1. spread(默认):均分剩余空间
    解释:假如我们有三个控件,那么这三个控件组成的链两两之间加上两边一共会有四处空余,则假设屏幕宽500dp,控件宽100dp,那么此时两两控件之间和控件与屏幕之间的间隔就为50dp。
  2. spread_inside:两侧的控件贴紧两边,剩余空间被平分
  3. packed:所有紧贴居中

Chains(链)还支持weight(权重)的配置,使用

layout_constraintHorizontal_weight
layout_constraintVertical_weight

进行设置链元素的权重。
在这里插入图片描述
如我们实现如上效果图,让ABC以2:2:6此权重分配水平空间。
代码如下:

<TextView
        android:id="@+id/A"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#3F51B5"
        android:gravity="center"
        android:text="A"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/B" />

    <TextView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#3F51B5"
        android:gravity="center"
        android:text="B"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/A"
        app:layout_constraintRight_toLeftOf="@+id/C" />

    <TextView
        android:id="@+id/C"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#3F51B5"
        android:gravity="center"
        android:text="C"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="6"
        app:layout_constraintLeft_toRightOf="@id/B"
        app:layout_constraintRight_toRightOf="parent" />
组(Group)

工作当中常常会有很多个控件同时隐藏或者显示的场景,传统做法要么是进行嵌套,对父布局进行隐藏或显示,要么就是一个一个设置,这显然都不是很好的办法,ConstraintLayout中的Group就是来解决这个问题的。Group的作用就是可以对一组控件同时隐藏或显示,没有其他的作用,它的属性如下:

app:constraint_referenced_ids=“id,id” 加入组的控件id

我们将上面的ABC三个控件进行隐藏,所以我们可以将其添加进一个Group,
然后让此Group不可见,用于让上面ABC控件不可见。
代码如下:

<androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="A,B,C"/>
层布局(Layer)

Layer继承自ConstraintHelper,是一个约束助手,常用来增加背景,或者共同动画,图层 (Layer) 在布局期间会调整大小,其大小会根据其引用的所有视图进行调整,代码的先后顺序也会决定着它的位置,如果代码在所有引用view的最后面,那么它就会在所有view的最上面,反之则是最下面,在最上面的时候如果添加背景,就会把引用的view覆盖掉,下面展示
在这里插入图片描述
我们实现如上布局,我们为上图的安卓图片和约束于图片的Android文本添加了一个浅绿色的背景实现代码如下:

<androidx.constraintlayout.helper.widget.Layer
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#D5F4B6"
        android:padding="10dp"
        app:constraint_referenced_ids="android,imageview" />

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:src="@drawable/ic_baseline_android_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/android"
        app:layout_constraintTop_toBottomOf="@id/imageview"
        app:layout_constraintLeft_toLeftOf="@id/imageview"
        app:layout_constraintRight_toRightOf="@id/imageview"
        android:text="Android"
        android:textColor="#323030"
        android:textSize="30sp"/>

它只是为布局内的一些控件添加背景,并不影响控件的位置,所以应该详见控件的位置约束好,然后添加此背景布局,实现对控件添加背景的功能。
在这里插入图片描述
若将此布局放置在需要添加控件的后面,那么此布局将覆盖控件。此布局的长宽对对布局并无影响,后期此布局会根据所选择的控件进行自适应。

ImageFilterButton & ImageFilterView

ImageFilterButton和ImageFilterView是两个控件,他们之间的关系就和ImageButton与ImageView是一样的,所以这里就只拿ImageFilterView来做讲解。从名字上来看,它们的定位是和过滤有关系的,它们的大致作用有两部分,一是可以用来做圆角图片,二是可以叠加图片资源进行混合过滤,下面一一展示:

  • 圆角图片
    ImageFilterButton和ImageFilterView可以使用两个属性来设置图片资源的圆角,属性为:

app:round=“25dp” 根据数值的大小会使图片在方形和圆形之间按比例过度
app:roundPercent=".2" 可以设置具体圆角的大小

效果展示:
在这里插入图片描述
代码如下:

<androidx.constraintlayout.utils.widget.ImageFilterView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/p_5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias=".2"
        app:roundPercent=".2"		两者选一个
        app:round="25dp"/>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用ConstraintLayout创建类似表格的视图可以通过设置水平和垂直的约束来实现。下面是一个示例代码,展示了如何使用ConstraintLayout创建一个简单的表格视图: ```xml <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 表头 --> <TextView android:id="@+id/header1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Header 1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toStartOf="@+id/header2" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/header2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Header 2" app:layout_constraintStart_toEndOf="@+id/header1" app:layout_constraintEnd_toStartOf="@+id/header3" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/header3" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Header 3" app:layout_constraintStart_toEndOf="@+id/header2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <!-- 第一行数据 --> <TextView android:id="@+id/data1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Data 1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toStartOf="@+id/data2" app:layout_constraintTop_toBottomOf="@+id/header1" /> <TextView android:id="@+id/data2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Data 2" app:layout_constraintStart_toEndOf="@+id/data1" app:layout_constraintEnd_toStartOf="@+id/data3" app:layout_constraintTop_toBottomOf="@+id/header2" /> <TextView android:id="@+id/data3" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Data 3" app:layout_constraintStart_toEndOf="@+id/data2" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@+id/header3" /> <!-- 其他行数据 --> <!-- 根据需要添加更多的TextView,设置对应的约束 --> </androidx.constraintlayout.widget.ConstraintLayout> ``` 在这个例子,我们使用TextView来表示表头和数据。通过设置不同的约束关系,我们可以将它们放置在正确的位置。注意,在每个视图,我们使用了`app:layout_constraintStart_toStartOf`、`app:layout_constraintEnd_toEndOf`、`app:layout_constraintTop_toTopOf`、`app:layout_constraintTop_toBottomOf`等属性来指定约束关系。 你可以根据需要添加更多的TextView,并设置相应的约束来创建更复杂的表格视图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值