Android ConstraintLayout 约束布局

Android ConstraintLayout (约束布局) 是 Android Studio 2.3+ 创建 activity_main.xml 的默认布局方式

在上一章节中我们学习了 Android ConstraintLayout 中的 尺寸约束 ( Dimensions constraints ) 约束布局,本章我们就来学习 比例 ( Ratio) 属性

比例 ( Ratio )

ConstraintLayout 提供了以下属性用于设置某个方向的 比例 ( Ratio) 约束

属性 说明
app:layout_constraintDimensionRatio 约束比例,用逗号分隔方向 (,) ,用冒号(:)分隔比例

只有一个方向约束

如果只有一个方向的约束,可以用比例去定义 View 的宽高

为了做到这一点,需要将至少一个约束维度设置为 0dp ( 即 MATCH_CONSTRAINT ) , 并将属性 app:layout_constraintDimentionRatio 设置为给定的比例

我们写一个 demo 来演示一下

  1. 创建一个 空的 Android 项目 cn.twle.android.ConstraintLayout

  2. 修改 activity_main.xml 为以下内容

    <?xml version="1.0" encoding="utf-8" ?>
    <android.support.constraint.ConstraintLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <Button android:layout_width="200dp"
            android:layout_height="0dp"
            android:text="Ratio"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="2:1"
            app:layout_constraintTop_toTopOf="parent"/>
    </android.support.constraint.ConstraintLayout>
    

运行范例,显示如下

比例值有两种类型

  1. 浮点值 : 表示宽度和高度之间的比率 ( 2,0.5 )
  2. width:height: 宽:高形式的比例 ( 3:4 或 1:5 )

当约束多于一个 ( 宽高都被约束了)

如果两个维度均设置为 MATCH_CONSTRAINT ( 0dp ) ,也可以使用比例

在这种情况下,系统会使用满足所有约束条件和比率的最大尺寸

如果需要根据一个维度的尺寸去约束另一个维度的尺寸,则可以在比率值的前面添加 W 或者 H 来分别约束宽度或者高度

例如,如果一个尺寸被两个目标约束 ( 比如宽度为 0,在父容器中居中),可以使用 W 或 H 来指定哪个维度被约束

我们写一个 demo 来演示下

  1. 创建一个 空的 Android 项目 cn.twle.android.ConstraintLayout

  2. 修改 activity_main.xml 为以下内容

    <?xml version="1.0" encoding="utf-8" ?>
    <android.support.constraint.ConstraintLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <Button 
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="H,2:1"
            app:layout_constraintTop_toTopOf="parent"/>
    
    </android.support.constraint.ConstraintLayout>
    

这里用 H 表示以高度为约束,高度的最大尺寸就是父控件的高度,2:1 表示高:宽 = 2:1 ,即宽度为高度的一半

运行范例,显示如下

参考文档

  1. Android ConstraintLayout Guideline

  2. Android ConstrantLayout

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.