ConstraintLayout使用

ConstraintLayout

名称

layout_constraint[自己位置]_[目标位置]="[目标ID]"

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
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
visible为gone，不显示
layout_constraintHorizontal_bias
layout_constraintVertical_bias       //水平和垂直所占比例
layout_constraintCircle : 引用另一个控件的id
layout_constraintCircleRadius : 距离另外一个控件中心的距离
layout_constraintCircleAngle : 应该在哪个角度(从0到360度)
orientation

例

<Button android:id="@+id/buttonA" ... />
<Button android:id="@+id/buttonB" ...
  app:layout_constraintCircle="@+id/buttonA"
  app:layout_constraintCircleRadius="100dp"
  app:layout_constraintCircleAngle="45" />

常见位置和形状

设置图片在文字上方，当文字和图片非0间距时不适用

<TextView
    android:gravity="center" //文字居中
    android:drawableTop="@drawable/mine_ic_identification_record" //放置图片
    />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jYnSIHjJ-1690219656144)(/Users/apus/Library/Application Support/typora-user-images/image-20230222152404996.png)]

在下面

app:layout_constraintTop_toBottomOf="@+id/head"

内边距

    android:paddingStart="37dp" //内边距离左边
    android:paddingEnd="16dp"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ETXTSfn-1690219656149)(/Users/apus/Library/Application Support/typora-user-images/image-20230221214747114.png)]

外边距

有app:layout_constraintStart_toStarttOf="parent"
android:layout_marginStart="12dp"才会生效，外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0o7GAV2B-1690219656149)(/Users/apus/Library/Application Support/typora-user-images/image-20230221214935957.png)]

左右

 app:layout_constraintEnd_toEndOf="parent"  //在最左右两边要用endtoend，其余用margin

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8kdRW2h-1690219656150)(/Users/apus/Library/Application Support/typora-user-images/image-20230221215248176.png)]

最下和居中

android:layout_marginBottom="17dp" //最下面的
app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintBottom_toBottomOf="parent" 
app:layout_constraintTop_toTopOf="parent"  //上下居中

app:layout_constraintStart_toStartOf="parent" 左右居中
app:layout_constraintEnd_toEndOf="parent"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SOeYhnfr-1690219656151)(/Users/apus/Library/Application Support/typora-user-images/image-20230222122447988.png)]

偏向

layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移

 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mtGrOUSk-1690219656151)(/Users/apus/Library/Application Support/typora-user-images/image-20230224120457144.png)]

设置圆角

drawable里Shape.xml，左右圆角

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#fff" />
    <corners
        android:topLeftRadius="28dp"
        android:topRightRadius="28dp" />
</shape>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DK0ibox2-1690219656152)(/Users/apus/Library/Application Support/typora-user-images/image-20230222101640541.png)]

设置线性渐变

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="18"
        android:endColor="#FBFEFA"
        android:startColor="#BAF466"
        android:type="linear" />
</shape>

设置不透明度

color前两位是透明度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#1AFFFFFF" />
    <corners android:radius="4dp" />
</shape>

透明度查询

https://blog.csdn.net/qq_26413249/article/details/52162376

圆形定位

• layout_constraintCircle: 引用另一个小部件 ID
• layout_constraintCircleRadius：到另一个小部件中心的距离
• layout_constraintCircleAngle：小部件应该处于哪个角度（以度为单位，从 0 到 360

app:layout_constraintCircle="@+id/TextView1"
app:layout_constraintCircleAngle="120"（角度）
app:layout_constraintCircleRadius="150dp"（距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ChH0Aax1-1690219656153)(/Users/apus/Library/Application Support/typora-user-images/image-20230224120849865.png)]

百分比

• 尺寸应设置为MATCH_CONSTRAINT(0dp)
• 默认值应设置为百分比app:layout_constraintWidth_default="percent" 或app:layout_constraintHeight_default="percent"
• 然后将layout_constraintWidth_percent orlayout_constraintHeight_percent属性设置为 0 到 1 之间的值

比率

会将按钮的高度设置为与其宽度相同

<Button android:layout_width="wrap_content"
                   android:layout_height="0dp"
                   app:layout_constraintDimensionRatio="1:1" />

Baseline两个TextView的高度不一致，但是又希望他们文本对齐

 app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>

占据剩余空间

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_height="0dp"    //设置占据剩余空间

在上面

app:layout_constraintBottom_toTopOf="@+id/mine_first_line"   //在mine_first_line的上面             

两个的居中用LinearLayout

    <LinearLayout
        android:id="@+id/wp_layout_all"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.4">  //偏上

        <LinearLayout
            android:id="@+id/wp_layout_first_line"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="18dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/wp_img_home_decibel_measurement"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/wp_ic_home_decibel_measurement" />

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9KVhNh8-1690219656153)(/Users/apus/Library/Application Support/typora-user-images/image-20230224112856111.png)]

文字居中

android:gravity="center"

goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值

效果如下，TextView2在TextView1的右边，且没有边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-isMg58gp-1690219656154)(/Users/apus/Library/Application Support/typora-user-images/image-20230224122559907.png)]