美文网首页Android
ConstraintLayout最新版属性详细介绍

ConstraintLayout最新版属性详细介绍

作者: Android派 | 来源:发表于2018-04-07 22:06 被阅读0次

简介

public class ConstraintLayout extends ViewGroup

当前最新版本 ：
com.android.support.constraint:constraint-layout:1.1.0-beta6
com.android.support.constraint:constraint-layout:1.0.2

| [java.lang.Object](http://developer.android.google.cn/reference/java/lang/Object.html) |
|    ↳ | [android.view.View](http://developer.android.google.cn/reference/android/view/View.html) |
|   |    ↳ | [android.view.ViewGroup](http://developer.android.google.cn/reference/android/view/ViewGroup.html) |
|   |   |    ↳ | android.support.constraint.ConstraintLayout |

一句话简介

ConstraintLayout是一个允许您以灵活的方式定位和调整窗口小部件的大小的ViewGroup。

支持的约束类型

开发者指南

Relative Positioning (使用基本同RelativeLayout)

相对布局是ConstraintLayout基本构建模块之一，允许小部件间在水平和垂直方向相对定位

  • 水平方向支持属性 ：left right start end
  • 垂直方向支持属性 ：top bottom baseLine
image
常用属性
  • 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

以 layout_constraintLeft_toLeftOf = "@id/test" 为例。
constraintLeft 代表当前view的左侧，
toLeftOf 代表目标view,
"@id/test" 代表目标view的id。
整体代表当前view的左侧与目标view的左侧对齐

Margins

基本使用方式跟RelativeLayout相同

属性
  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom

以 android:layout_marginTop = "20dp" 为例。代表当前view上方距约束目标20dp的距离

除了以上属性，还提供了当约束目标处在gone状态时的一些属性

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

以 layout_goneMarginTop = "20dp" 为例。代表当前view上方约束目标处在gone的状态时，距离上方20dp的距离，具体可以自己写个view体验一下效果

Centering positioning

在ConstraintLayout里怎么居中呢?

<TextView
        android:id="@+id/ccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/bbb"     (ccc底部和bbb顶部对齐)
        app:layout_constraintLeft_toRightOf="@id/aaa"     (ccc左侧和aaa右侧对齐)
        app:layout_constraintRight_toLeftOf="@id/bbb"    （ccc右侧和bbb左侧对齐）
        app:layout_constraintTop_toBottomOf="@id/aaa"     (ccc顶部和aaa底部对齐)
         />

如图1所示：上方代码实现了ccc相对aaa和bbb的居中
[图片上传失败...(image-3d4914-1523169847355)]

bias
    <TextView
        android:id="@+id/ccc"
        android:text="ccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintVertical_bias="0.9"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintBottom_toTopOf="@id/bbb"
        app:layout_constraintLeft_toRightOf="@id/aaa"
        app:layout_constraintRight_toLeftOf="@id/bbb"
        app:layout_constraintTop_toBottomOf="@id/aaa" />

bias属性可以控制权重则可达到下图效果
在上方代码加入

app:layout_constraintVertical_bias="0.9"
app:layout_constraintHorizontal_bias="0.2"
图2

Circular positioning (1.1.x版本支持)

该定位方式支持以约束view为圆心，提供半径以及角度来定位当前view
app:layout_constraintCircle 设置约束view
app:layout_constraintCircleRadius 距离的半径
app:layout_constraintCircleAngle 偏差角度

<TextView
        android:id="@+id/ddd"
        android:text="ddd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintCircle="@id/ccc"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp" />
图3
图4
图5

Visibility behavior

visibility属性

  • visible （view可见）
  • gone （view不可见，且不占据布局空间）
  • invisible （view不可见，但占据布局空间）

ConstraintLayout提供了相对友好的布局方式(即当目标约束处在gone状态下时的布局调整)

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

具体使用见Margins相关介绍

Dimensions constraints

尺寸约束，支持属性:
  • android:minWidth 设置view最小宽度
  • android:minHeight 设置view最小高度
  • android:maxWidth 设置view最大宽度
  • android:maxHeight 设置view最大高度

当view设置为wrap_content时，以上属性方可使用。

Widgets dimension constraints

view的宽（android:layout_width）高（android:layout_height）有以下几种方式设置

  • 具体的值(例如：100dp)
  • wrap_content
  • 0dp

当使用warp_content时，还可以使用以下属性增加约束限制（1.1.x版本支持）:

  • app:layout_constrainedWidth=”true|false”
  • app:layout_constrainedHeight=”true|false”

当使用0dp时，可以使用以前属性：

  • layout_constraintWidth_min 和 layout_constraintHeight_min 设置view最小值
  • layout_constraintWidth_max 和 layout_constraintHeight_max 设置view最大值
  • layout_constraintWidth_percent 和 layout_constraintHeight_percent 设置view占 parent的百分比值

tip:
min和max可以设置为wrap，此效果和设置wrap_content效果一样
若要使用 layout_constraintWidth_percent 和 layout_constraintHeight_percent 需要满足以下条件：

  • 设置0dp
  • app:layout_constraintWidth_default="percent" 或 app:layout_constraintHeight_default="percent"
    (在版本1.1.0-beta1和1.1.0-beta2必须设置，后续版本不需设置)
  • 值必须在0-1之间
Ratio

该属性还可设置view宽高比，前提宽和高属性至少有一个为0dp

android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:5"
图6

Chains

Creating a chain

[图片上传失败...(image-bb598f-1523169847355)]

上图A和B互为彼此的Chain

Chain heads
图8
Margins in chains

在chains中允许使用margin属性，并会占据空间

Chain Style
图9

通过 layout_constraintHorizontal_chainStyle / layout_constraintVertical_chainStyle 设置

  • CHAIN_SPREAD 默认样式
  • CHAIN_SPREAD_INSIDE
  • CHAIN_PACKED
Weighted chains

可以通过 layout_constraintVertical_weight 或者 layout_constraintHorizontal_weight 设置权重


图10 
 <TextView
        android:id="@+id/aaa"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="aaa"
        android:background="@color/colorAccent"
        app:layout_constraintHorizontal_weight="4"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintEnd_toStartOf="@id/bbb"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/bbb"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="aaa"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintEnd_toStartOf="@id/ccc"
        app:layout_constraintStart_toEndOf="@id/aaa" />

    <TextView
        android:id="@+id/ccc"
        android:layout_width="0dp"
        android:background="@color/colorAccent"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="5"
        android:text="aaa"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/bbb" />
Margins and chains（1.1.x版本支持）

相关文章

网友评论

    本文标题：ConstraintLayout最新版属性详细介绍

    本文链接：https://www.haomeiwen.com/subject/bamyhftx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    Android

    关于我们|服务条款|联系我们|ConstraintLayout最新版属性详细介绍|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！