约束布局的使用(二)

本文深入探讨了ConstraintLayout中app:layout_constraintWidth_max、app:layout_constrainedWidth、app:layout_constraintDimensionRatio及Guideline的高级应用技巧。通过具体实例,详细解析了这些属性如何影响视图的尺寸和布局,帮助开发者更好地掌握复杂界面的设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要介绍app:layout_constraintWidth_max、app:layout_constrainedWidth、app:layout_constraintDimensionRatio和Guideline的使用

一、app:layout_constraintWidth_max、app:layout_constrainedWidth、app:layout_constraintDimensionRatio的使用

<?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">

    <!--
            app:layout_constrainedWidth="true",此属性默认为false
            android:layout_width,值为“wrap_content”与“0dp”时,约束才能生效
            app:layout_constraintWidth_max="100dp",此属性必须与两个属性同时使用
    -->

    <TextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="100dp"
        tools:text="壮士一去不复还" />

    <TextView
        android:id="@+id/tv_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:textSize="20sp"
        app:layout_constrainedWidth="false"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_first"
        app:layout_constraintWidth_max="100dp"
        tools:text="风萧萧兮易水寒" />

    <!--
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintDimensionRatio="1:2",此时代表宽高比=1:2
            这种情况是本来是宽随高走的,但是经过测试发现是高随宽走,宽的最大值是跟屏幕宽相匹配,高是宽的两倍。
            很费解。
    -->
    <TextView
        android:id="@+id/tv_third"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_second"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />

    <!--
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:2"
            这种情况是高随宽走,宽包裹内容,宽的最大值是跟屏幕宽相匹配。
            高是宽的两倍
    -->
    <TextView
        android:id="@+id/tv_forth"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="#00fafa"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_third"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />


</androidx.constraintlayout.widget.ConstraintLayout>

二、app:layout_constraintDimensionRatio的使用

<?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">


    <!--
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,2:1"
        高将按照2:1的比例展示(实质是高是宽的1/2),但是宽将会按照所给约束进行
    -->
    <TextView
        android:id="@+id/tv_fifth"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff4b4d"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />

</androidx.constraintlayout.widget.ConstraintLayout>
<?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">

    <!--
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,2:1"
        宽将按照2:1的比例展示(实质是宽是宽的1/2),但是宽将会按照所给约束进行展示
    -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="W,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒"
       />
</androidx.constraintlayout.widget.ConstraintLayout>
<?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">


    <!--
        android:layout_width="100dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,2:1"
        宽将会按照100dp展示,高是宽的1/2
    -->
    <TextView
        android:id="@+id/tv_fifth"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#ff4b4d"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />


    <!--
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintDimensionRatio="H,2:1"
        宽将会按照自己的约束展示,高是给定的100dp
    -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />
</androidx.constraintlayout.widget.ConstraintLayout>
<?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">

    <!--
        android:layout_width="100dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,2:1"
        宽将按照100dp展示,但是高将会是宽的2倍
    -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#00ff00"
        android:textSize="20sp"
        app:layout_constraintDimensionRatio="W,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />

    <!--
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintDimensionRatio="W,2:1"
        高将按照100dp展示,但是宽将会是高的2倍
    -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="#ff0000"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="W,2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="percent"
        tools:text="风萧萧兮易水寒" />
</androidx.constraintlayout.widget.ConstraintLayout>

三、Guideline的使用

<?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">

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

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

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@id/guideline1" />

</androidx.constraintlayout.widget.ConstraintLayout>
### ConstraintLayout 使用指南 #### 一、基本概念 ConstraintLayout 是一种强大的布局管理器,旨在简化和优化复杂界面的设计。这种布局方式允许开发者通过设置视图之间的约束条件来精确定义其位置和尺寸,而无需依赖于多层次的嵌套布局[^2]。 #### 、主要特性 - **无嵌套层次**:减少了不必要的父级容器数量,提高了应用性能。 - **灵活定位**:支持基于百分比宽度/高度以及相对于其他组件或屏幕边缘的距离设定。 - **链表机制**:可以创建水平或垂直方向上的链条,使多个子项能够均匀分布空间。 - **比例调整**:提供按比例分配剩余可用空间的功能。 ```xml <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- Example TextView --> <TextView android:id="@+id/textView" android:text="Hello World!" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout> ``` #### 三、常见问题及解决方案 ##### 1. 子控件无法显示 当遇到这种情况时,通常是因为忘记给定必要的约束属性(`app:layout_constraint..._to...`)。每个子元素至少需要两个维度上有效的约束才能被正确渲染出来[^3]。 ##### 2. 控件重叠现象严重 这可能是由于设置了相互冲突的约束所引起的。检查并修正这些不合理的关联规则;另外也可以尝试利用 `Barrier` 或者 `Guideline` 来更好地组织页面结构。 ##### 3. 动态更新UI困难重重 对于动态加载的数据列表或者其他频繁变化的内容区域来说,在 XML 中硬编码所有的约束并不总是最理想的选择。此时可以通过编程的方式修改现有约束(`ConstraintSet`)来进行实时调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值