关于ConstraintLayout的Radio, group,

1. radio

ConstraintLayout的子布局中可以 如果有图片等需要设置比例, 可以使用layout_constraintDimensionRatio进行设置

        <ImageView
            app:layout_constraintDimensionRatio ="750:400"
            android:id="@+id/iv_bg"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

2. group

当我们使用了constraintlayout之后, 很多本来需要放在LinearLayout或者RelativeLayout 中的若干控件会以"零散"的形式存在, 当需要对一组的view进行Visiable或者Gone操作的时候, 为了避免进行挨个设置, Constrainlayout提供了一个group控件进行, 可以对view分组进行统一设置.

• 布局文件代码

<?xml version="1.0" encoding="utf-8"?>
<layout
    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.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.kotlin.TestActivity">


        <Button
            android:id="@+id/bt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button1" />


        <Button
            android:id="@+id/bt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button2"
            app:layout_constraintTop_toBottomOf="@id/bt1" />

        <Button
            android:id="@+id/bt3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button3"
            app:layout_constraintTop_toBottomOf="@id/bt2" />

        <android.support.constraint.Group
            android:id="@+id/icon_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:constraint_referenced_ids="bt1,bt2" />

    </android.support.constraint.ConstraintLayout>
</layout>

如上, 使用了有3个按钮, 我们希望点击按钮3的时候, 按钮1,2可以同时隐藏或者显示, 按照往常的做法, 需要分别设置两个view, 现在使用了android.support.constraint.Group组件, 不会显示在布局中, constraint_referenced_ids属性定义我们需要约束的组件id, 当点击按钮3的时候, 只需要设置group的属性即可.

• 页面代码

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test)
        bt3.setOnClickListener(this)
    }



    override fun onClick(v: View) {
        when (v.id) {
            R.id.bt3 ->
                icon_group.visibility = View.GONE
        }
    }

只需要设置group即可达到效果

更新: 最近发现一个group使用的坑, 当使用group对一组id设置visible属性的时候, 如果再对这组id中的一个控件单独设置visible属性时,设置会失效.
解决办法: 将该组件的id从group中剔除, 单独对组件进行设置即可

3. Barrier(屏障; 障碍; 栅栏; 分界线)

image.png

我们在某些需求中, tv3需要始终在tv1和tv2的右侧, 但是tv1,2的宽度都不固定, 当使用constarintlayout的时候, 使用Barrier可以减少嵌套.
Barrier的翻译为屏障, 性质和group相似, 都是用来约束一些组件的. 可以将Barrier理解为一堵墙

• 布局文件

<?xml version="1.0" encoding="utf-8"?>
<layout
    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.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.kotlin.TestActivity">

        <TextView
            android:id="@+id/tv1"
            android:text="tv1我是擦长一点的view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            app:layout_constraintTop_toBottomOf="@id/tv1"
            android:id="@+id/tv2"
            android:text="tv2短一点的view"
            app:layout_constraintBottom_toTopOf="@+id/bt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:textColor="@color/colorPrimary"
            app:layout_constraintLeft_toRightOf="@+id/barrier"
            android:id="@+id/tv3"
            android:text="我需要随时变动位置"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <android.support.constraint.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection ="end"
            app:constraint_referenced_ids="tv1,tv2"/>

        <Button
            android:id="@+id/bt"
            app:layout_constraintTop_toBottomOf="@id/tv2"
            android:text="把tv2变长"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </android.support.constraint.ConstraintLayout>
</layout>

• 页面代码

    override fun onClick(v: View) {
        when (v.id) {
            R.id.bt -> tv2.text = "tv2我是变长之后的tv2巴拉巴拉吧"
        }
    }

End

关于ConstraintLayout, 有大神系统的学习文档, 贴在这里供大家一起学习: https://segmentfault.com/a/1190000014876944?utm_source=tag-newest#articleHeader10