ConstraintLayout

yufumatou

已于 2022-03-31 17:13:16 修改

阅读量343

点赞数

分类专栏： Android 文章标签：控件 android

于 2021-07-15 20:01:31 首次发布

本文链接：https://blog.csdn.net/yufumatou/article/details/118760873

版权

Android 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

一、强制约束

app:layout_constrainedWidth=”true|false” //默认false
app:layout_constrainedHeight=”true|false” //默认false

例：控件B在控件A右边和父右边之间居中显示

当B内容过多，则超出A右边限制

设置app:layout_constrainedWidth="true"，则可以在之间显示

补充：另外可以通过该属性可以轻松满足此需求(控件A、B横向顺序链表排列，B始终单行显示全部，A包裹内容显示，当A内容过多时换行显示)

当A内容少时

当A内容多时

<?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">
    <TextView
        android:id="@+id/tv_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tv_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        android:text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
        app:layout_constrainedWidth="true"
        android:background="#ff0000"/>
    <TextView
        android:id="@+id/tv_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tv_a"
        android:text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"
        android:background="#00ff00"/>
</android.support.constraint.ConstraintLayout>

二、百分比约束

相对父控件的百分比，而非相对可用空间的百分比

layout_constraintWidth_percent
layout_constraintHeight_percent

三、dialog中使用问题

dialog中根布局为ConstraintLayout，且宽为match_parent，但其中所有直属子控件的宽度无match_parent，子控件通过宽度为0且左和根布局左对齐且右和根布局右对齐，结果是根布局为wrap_content效果，无法实现弹框尽可能大。

需求：

（1）弹框在不超过自定义最大宽度（如250dp）应尽可能的宽

（2）“第一个按钮”到左边框距离：“第一个按钮”宽度：“第一个按钮”到“第二个按钮”距离：“第二个按钮”宽度：“第二个按钮”到右边框距离：= 0.12:0.35:0.06:0.35:0.012

（3）备注信息和“第一个按钮”左对齐且右侧不超过“第二个按钮”右侧

方案：

（1）根布局通过ConstraintLayout可通过app:layout_constraintWidth_max对子控件设置最大值，但需要注意上面的问题，这里我们通过添加控件（让其宽度为match_parent）解决

（2）为了实现需求2、3需要再嵌套一层ConstraintLayout。直接通过一层无法实现需求3（需求2实现方式：通过链式定义左占位控件[宽度为0，layout_constraintHorizontal_weight=0.12]、“第一个按钮”[宽度为0，layout_constraintHorizontal_weight=0.35]、中间占位控件[宽度为0，layout_constraintHorizontal_weight=0.06]、“第二个按钮”[宽度为0，layout_constraintHorizontal_weight=0.35]、右占位控件[宽度为0，layout_constraintHorizontal_weight=0.12]）

（3）如下是具体实现代码，其中外层绿色背景纯属方便看清布局大小，实际使用无需此背景即可从视觉上认为白色为弹框大小。其中按钮高度最小值要用minHeight，而layout_constraintHeight_min无效

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#00FF00">
    <View
        android:id="@+id/v_match_parent"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintWidth_max="250dp"
        android:background="#FFFFFF"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="0dp"
            android:layout_height="40dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="提示"
            android:textSize="15sp"/>

        <View
            android:id="@+id/v_line"
            android:layout_width="0dp"
            android:layout_height="1dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_title"
            android:background="#999999"/>
        <TextView
            android:id="@+id/tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constrainedWidth="true"
            app:layout_constraintTop_toBottomOf="@+id/v_line"
            android:layout_marginTop="20dp"
            android:text="这里是内容描述信息"
            android:textSize="14sp"/>
        <Button
            android:id="@+id/bt_left"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintHeight_default="wrap"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/view_occupy"
            app:layout_constraintTop_toBottomOf="@+id/tv_content"
            app:layout_constraintWidth_percent="0.35"
            android:minHeight="35dp"
            android:layout_marginTop="20dp"
            app:layout_constraintHorizontal_chainStyle="packed"
            android:gravity="center"
            android:background="#DDDDDD"
            android:text="第一个按钮"
            android:textSize="12sp"/>
        <View
            android:id="@+id/view_occupy"
            android:layout_width="0dp"
            android:layout_height="1dp"
            app:layout_constraintWidth_percent="0.06"
            app:layout_constraintStart_toEndOf="@+id/bt_left"
            app:layout_constraintTop_toTopOf="@+id/bt_left"
            app:layout_constraintEnd_toStartOf="@+id/bt_right"/>
        <Button
            android:id="@+id/bt_right"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@+id/view_occupy"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/bt_left"
            app:layout_constraintWidth_percent="0.35"
            android:minHeight="35dp"
            android:gravity="center"
            android:background="#DDDDDD"
            android:text="第二个按钮"
            android:textSize="12sp"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="@+id/bt_left"
            app:layout_constraintEnd_toEndOf="@+id/bt_right"
            app:layout_constraintTop_toBottomOf="@+id/bt_left"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="20dp"
            android:text="注：这里是备注信息"
            android:textColor="#ff0000"
            android:textSize="10sp"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

yufumatou

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ConstraintLayout

一、强制约束app:layout_constrainedWidth=”true|false” //默认falseapp:layout_constrainedHeight=”true|false” //默认false例：控件B在控件A右边和父右边之间居中显示当B内容过多，则超出A右边限制设置app:layout_constrainedWidth="true"，则可以在之间显示补充：另外可以通过该属性可以轻松满足此需求(控件A、B横向顺序链表排列，B始终单行显示全部，A包裹内.
复制链接

扫一扫