约束布局的使用(二)

最新推荐文章于 2024-05-06 03:29:25 发布
最新推荐文章于 2024-05-06 03:29:25 发布
阅读量574 收藏 1
点赞数
分类专栏： # Android学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Duckdan/article/details/102989402
版权

主要介绍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>
Duckdan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
约束布局ConstraintLayout
GeofferySun的专栏
04-21 2654
国际惯例，官网参考文档是最好的学习资料： 使用 ConstraintLayout 构建自适应界面 1，背景 约束布局 ConstraintLayout 是最受欢迎的 Jetpack 库之一，其实是Android Studio 2.2中主要的新增功能之一，也是 Google 在2016年的 I/O 大会上重点宣传的一个功能。AS 已经将它作为新建页面默认布局了。经历这几年的迭代，功能已经非常的成熟，现在 2.0 正式版本也发布了，也许你已熟悉了旧版本中的功能，并开始用它来快速构建复杂的页面布局，而新版本除了包
约束布局ConstraintLayout看这一篇就够了
weixin_34167819的博客
09-27 3052
目录 1.介绍 2.为什么要用ConstraintLayout 3.如何使用ConstraintLayout 3.1 添加依赖 3.2 相对定位 3.3 角度定位 3.4 边距 3.5 居中和偏移 3.6 尺寸约束 3.7 链 4.辅助工具 4.1 Optimizer 4.2 Barrier 4.3 Group 4.4 Placeholder 4.5.Guideline 5.总结 1.介绍 约...
ConstrainLayout 基础教程2(2)
最新发布
u010508150的博客
05-06 899
由于文章篇幅原因，我只把面试题列了出来，详细的答案，我整理成了一份PDF文档，这份文档还包括了还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料 ，帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习。《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可获取！份文档还包括了还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料 ，帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习。
约束布局使用详解
EleganceKing的博客
07-13 8778
约束布局使用详解 一、前言 在一般的安卓开发中，编写界面需要很多嵌套，这会有一定的性能影响，这个时候就可以使用 ConstraintLayout 或 RelativeLayout来减少嵌套，简化布局深度。ConstraintLayot 类似 RelativeLayout，但是更灵活更强大。 具有更强的性能优势，简化嵌套深度。 更好的屏幕适配，可以使用比例来适配，效果更好。 可视化编辑，操作起来不是很完美。 二、使用 引入 implementation 'com.a
ConstraintLayout约束布局
Smile.L.B的博客
11-08 508
郭霖：http://blog.csdn.net/guolin_blog/article/details/53122387 鸿洋：http://mp.weixin.qq.com/s/vI-fPaNoJ7ZBlZcMkEGdLQ
【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-28 5227
一. ConstraintLayout 简介 1. 引入 约束 布局 ( 1 ) 约束性布局 作用 和 简介 2. 约束 简介 ( 1 ) 约束个数要求 ( 2 ) 约束设置 与 显示位置 3. ConstraintLayout 引入 ( 1 ) ConstraintLayout 依赖添加 ( 2 ) ConstraintLayout 转换 与 添加 二. ConstraintLayout 约束 的 基本操作 1. 约束基本操作 ( 1 ) Design ( 设计 ) 和 Bluepr
Android约束布局ConstraintLayout使用完全解析
11-21
二、约束的设置 `ConstraintLayout`通过连接视图之间的边来定义它们的位置。有四种基本约束： 1. 左右约束：`app:layout_constraintLeft_toLeftOf` 和 `app:layout_constraintRight_toRightOf`。 2. 上下约束：`...
实验二 布局管理器及简单控件的使用
05-24
6. **约束布局（ConstraintLayout）**：最新的布局管理器，通过定义控件之间的约束关系实现灵活的布局，适合复杂的界面设计。 二、简单控件 简单控件是构建用户界面的基本元素，包括： 1. **文本视图（TextView）*...
ConstraintLayout全解&实例，官方推荐的约束布局
06-09
4. **使用Layout Inspector**：在调试过程中，使用Android Studio的Layout Inspector可以帮助检查布局的约束是否正确，有助于找出潜在问题。 通过以上讲解，我们可以看出ConstraintLayout是Android开发中的一个重要...
SampleConstrainLayoutNew:样本约束布局新
03-25
**Android约束布局（ConstraintLayout）详解** 在Android应用开发中，布局管理器是构建用户界面的关键部分。`ConstraintLayout`是Google推出的一种高效且灵活的布局工具，它允许开发者创建复杂的、响应式的用户界面...
android demo，ConstraintLayout （约束布局）
05-28
android demo，ConstraintLayout （约束布局），该demo详细的介绍了layout_constraint布局的所有属性。
Constraint_Layout:活动约束布局
03-07
- 约束布局基于二维图形的约束系统，允许视图之间建立关系，通过这些关系来确定视图的位置和大小。它是一种声明式的方法，开发者无需精确地指定每个视图的坐标。 - **约束链**：约束布局允许创建从一个视图到另一...
约束布局使用
养猪专业户
01-14 263
原文：https://blog.csdn.net/lmj623565791/article/details/78011599   
关于约束布局Constraintlayout
snoto的专栏
11-03 1312
ConstraintLayout 约束布局，说是对RelativeLayout的提升版 http://blog.csdn.net/lmj623565791/article/details/78011599?utm_source=tuicool&utm_medium=referral http://blog.csdn.net/fallfollowernolisten/...
约束布局ConstraintLayout（官翻篇）
梦想家Eva的专栏
11-15 2792
想写一篇关于约束布局ConstraintLayout的使用，看了网上其他人总结的很全面，一下子不知道自己该写什么了，索性翻译下官网文章，顺便锻炼下英文阅读能力。 原文地址： ConstraintLayout https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout
约束布局ConstraintLayout（学习）
秦.帆
10-28 689
简单了解 约束布局：它是为了解决什么样的问题才出现的？为了解决布局嵌套过多的问题。 RelativeLayout(相对布局)不也可以解决布局嵌套过多的问题吗？它与之相比又有何优势呢？是的。它与之相比更灵活，性能更好，而且它使用百分比来进行定位与布局，可以相对的解决屏幕适配问题。 开始使用 官方文档 1.添加依赖 implementation 'com.android.support.constraint:constraint-layout:1.1.3' 2.简单使用 <andr.
Android-第二节ConstraintLayout（约束布局）
H_xxxxd的博客
01-20 4193
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录1.为什么要使用ConstraintLayout（约束布局）？2.ConstraintLayout（约束布局）简介3.ConstraintLayout（约束布局）优点4.ConstraintLayout（约束布局）的基本属性4.1控件内宽高比4.1.1app:layout_constraintDimensionRatio="h,?:?"4.1.2app:layout_constraintDimensionRatio="w,?:?"4
第二种方案详细使用
06-02
好的，下面我详细介绍一下使用辅助布局的方案： 1. 在GridLayout的子控件外部添加一个辅助布局，例如LinearLayout，例如： ``` <androidx.gridlayout.widget.GridLayout android:layout_width="match_parent" android:layout_height="match_parent" app:columnCount="2" app:rowCount="2"> <LinearLayout android:id="@+id/linear_layout" android:layout_width="0dp" android:layout_height="0dp" android:orientation="vertical" app:layout_columnWeight="1" app:layout_rowWeight="1"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0" app:layout_constraintVertical_bias="0" android:text="Button 1"/> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintVertical_bias="0" android:text="Button 2"/> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0" app:layout_constraintVertical_bias="0.5" android:text="Button 3"/> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintVertical_bias="0.5" android:text="Button 4"/> </androidx.constraintlayout.widget.ConstraintLayout> </LinearLayout> </androidx.gridlayout.widget.GridLayout> ``` 2. 在辅助布局中使用约束布局实现子控件的布局，例如： ``` <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/button1" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0" app:layout_constraintVertical_bias="0" android:text="Button 1"/> <Button android:id="@+id/button2" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintVertical_bias="0" android:text="Button 2"/> <Button android:id="@+id/button3" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0" app:layout_constraintVertical_bias="0.5" android:text="Button 3"/> <Button android:id="@+id/button4" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.5" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintVertical_bias="0.5" android:text="Button 4"/> </androidx.constraintlayout.widget.ConstraintLayout> ``` 这样可以避免GridLayout的限制，同时还可以灵活地调整子控件的位置和大小。 希望这个方案也能够解决你的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值