Android

ConstraintLayout最新版属性详细介绍

2018-04-07  本文已影响0人  Android派

简介

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基本构建模块之一，允许小部件间在水平和垂直方向相对定位

image
常用属性

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

Margins

基本使用方式跟RelativeLayout相同

属性

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

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

以 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属性

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

具体使用见Margins相关介绍

Dimensions constraints

尺寸约束，支持属性:

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

Widgets dimension constraints

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

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

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

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

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 设置

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版本支持）
上一篇 下一篇

猜你喜欢

热点阅读