ConstraintLayout学习笔记

ConstraintLayout学习笔记

参考来源

• 基本位置属性
  
  • layout_constraintLeft_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintLeft_toRightOf
  • layout_constraintTop_toBottomOf
  • layout_constraintRight_toLeftOf

这个很好理解,后面可以填具体的控件id,也可以填父布局parent
基本的位置使用如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="hello ConstraintLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
    <TextView
        android:layout_width="20dp"
        android:layout_height="20dp"
        app:layout_constraintLeft_toLeftOf="@id/tv1"
        app:layout_constraintRight_toRightOf="@id/tv1"
        app:layout_constraintTop_toTopOf="@id/tv1"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@color/colorPrimary"
        android:text="hello"/>

</android.support.constraint.ConstraintLayout>

可以看到当控件大小不足以填满空间时,会居中显示

• 偏斜

  • layout_constraintHorizontal_bias水平偏斜
  • layout_constraintVertical_bias垂直偏斜

  值为0到1,0.5为中间

• 圆定位（Circular positioning）（1.1新特性）

  • app:layout_constraintCircle 以某个空间为圆心
  • app:layout_constraintCircleAngle相对圆心的角度(0~360)
  • app:layout_constraintCircleRadius距离圆心的位置

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:text="hello ConstraintLayout"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
    <TextView
        android:layout_width="20dp"
        android:layout_height="20dp"
        app:layout_constraintCircle="@id/tv1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="200"
        android:background="@color/colorPrimary"
        android:text="hello"/>

</android.support.constraint.ConstraintLayout>

效果如图

• 尺寸约束（Dimensions constraints）

  • 确定尺寸：50dp
  • WRAP_CONTENT
  • 0dp
    0dp，相当于match_constraint，意思就是填满约束的空间。如果设置了margin值，也需要去掉margin的空间。

• 比例（Ratio)

  • layout_constraintDimensionRatio,宽高需给一个值,另一个按比例计算

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:9"
        />

</android.support.constraint.ConstraintLayout>

• 链条（Chains）

将一个维度的一组控件组成一个链条，另一个维度可以单独控制，相当于绑成一个组件。

一组部件通过双向连接就形成一个链条。

水平链的最左边和竖直链的最上边成为链头。

如果连接中设置了margin，要考虑在内。

链条样式（Chain Style）

给链条第一个元素设置属性layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle，则链条会根据样式更改。（默认CHAIN_SPREAD）

spread：元素间分散开

spread_inside：端点除外，元素间分散开，如上图区别

packed：元素间打包，即贴在一起

权重链（Weighted chains）

类似LinearLayout里的WEIGHT属性，若元素使用MATCH_CONSTRAINT，就是这些元素使用约束后的空间。

layout_constraintHorizontal_weight

layout_constraintVertical_weight

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        app:layout_constraintVertical_chainStyle="spread_inside"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/tv2"
        android:id="@+id/tv1"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:4"
        />
    <TextView
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv1"

        android:id="@+id/tv2"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:4"
        />

</android.support.constraint.ConstraintLayout>

• 虚拟辅助元素（Virtual Helper objects）

可以使用辅助对象来创建相对约束，可以通过水平或垂直的Guideline来定位控件。

Guideline

不会被显示，只会辅助布局

定位Guideline有三种方式：

layout_constraintGuide_begin：距离左侧或顶部的固定距离

layout_constraintGuide_end：距离右侧或底部的固定距离

layout_constraintGuide_percent：父控件的高度或宽度的百分比