Android-ConstraintLayout(约束布局)-C

Circular一看字面就知道是圆形布局，有了这个布局想要实现一个环形菜单就简单多了哟。我们只需要知道三个属性即可:

layout_constraintCircle : references another widget id
layout_constraintCircleRadius : the distance to the other widget center
layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)

a. 是和哪个控件关联

b. 距离该控件的半径

c. 属于360度的多少度？12点钟方向是0度，环绕一圈是360，这样就很容易计算了...

官方图也很形象:

image

来整个:

      <?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="wrap_content"
        android:layout_height="wrap_content"
        android:text="sb_you"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--水平+偏离率-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="sb_you2"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/circle_sb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/profile_pic_01"/>

    <!--layout_constraintCircle : references another widget id-->
    <!--layout_constraintCircleRadius : the distance to the other widget center-->
    <!--layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)-->
    <ImageView
        app:layout_constraintCircle="@id/circle_sb"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="0"
        android:id="@+id/circle_sb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profile_pic_01"/>

    <ImageView
        app:layout_constraintCircle="@id/circle_sb"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="90"
        android:id="@+id/circle_sb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profile_pic_02"/>

    <ImageView
        app:layout_constraintCircle="@id/circle_sb"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="180"
        android:id="@+id/circle_sb3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profile_pic_03"/>

    <ImageView
        app:layout_constraintCircle="@id/circle_sb"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="270"
        android:id="@+id/circle_sb4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profile_pic_04"/>

</android.support.constraint.ConstraintLayout>

效果:

image

Circular 还是比较容易理解。下面接着说下Visibility behavior可见性吧。官方单独提出来说了，重点是View.GONE。这个和相对布局的可见性不太一样。其他布局的可见性如果设置为GONE，那么将不再成为布局的一个部分，也不可见。而约束性里面则不同，是一个部分，只是相对的margin什么的会被当做zero处理。（我想应该是为了保证控件之间的相互约束吧）

看官方解释：

   意思也就是说：不可见控件，常规是不显示，并且不会成为布局的一个部分。danshnshindling of widgets being marked as View.GONE.

GONE widgets, as usual, are not going to be displayed and are not part of the layout itself (i.e. their actual dimensions will not be changed if marked as GONE).

But in terms of the layout computations, GONE widgets are still part of it, with an important distinction:

For the layout pass, their dimension will be considered as zero (basically, they will be resolved to a point)
If they have constraints to other widgets they will still be respected, but any margins will be as if equals to zero

This specific behavior allows to build layouts where you can temporarily mark widgets as being GONE, without breaking the layout (Fig. 7), 
which can be particularly useful when doing simple layout animations.

意思也就是说：不可见控件，常规是不显示，并且不会成为布局的一个部分。但是,在layout计算方面，组件仍会作为一个部分，只是间距会被视为0对待。这种特性也就保证了布局。在做动画时可能会很重要。

其实到这里也不是很难理解，只是一开始去看这段文字有点迷，我自己都看了好几遍。后面继续分析下

• <u style="text-decoration: none; border-bottom: 1px dashed grey;">Dimension constraints</u>
• Chains
• Virtual Helpers objects

回家吃个酒碗就回来继续，顺便回顾。争取下周回来暂时终结这个约束布局，进入下一个学习环节？-》自定义View+自定义(shape，selector，layer-list) -》 再后续进入事件分发机制和相关冲突解决（会深入一些）------还有好多东西需要整，哎，哎，YEAH！YES！