Android ConstraintLayout (约束布局) 是 Android Studio 2.3+ 创建 activity_main.xml 的默认布局方式

本节我们来讲讲 ConstraintLayout 约束布局 中的 环形定位 (Circular positioning)

前提

使用这个布局，需要修改 build.gradle 文件添加如下代码

dependencies {
  compile 'com.android.support.constraint:constraint-layout:1.1.0-beta3'
}

环形定位 (Circular positioning)

环形定位 (Circular positioning) 指的是可以约束一个 view 相对于另一个 view 的弧度和半径

ConstraintLayout 提供了以下属性来支持这些布局

view 是以各自的中心为参照来约束的，跟通常以 start/end/top/bottom 或者 baseline 来约束是不同的

有了这种约束 view 的方式，一些平常很难实现的布局和动画实现起来就非常简单了，比如模拟行星的运动，太阳在中心，行星绕着它做旋转

我们写一个 demo 来演示下这种布局

1. 创建一个 空的 Android 项目 cn.twle.android.ConstraintLayout

2. 修改 activity_main.xml 为以下内容

   <?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:id="@+id/buttonA"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintEnd_toEndOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintTop_toTopOf="parent" 
           android:text="Button A" />
   
       <Button
           android:id="@+id/buttonB"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Button B"
           app:layout_constraintCircle="@+id/buttonA"
           app:layout_constraintCircleRadius="100dp"
           app:layout_constraintCircleAngle="45" />
   
   </android.support.constraint.ConstraintLayout>
   

运行范例，显示如下

参考文档

1. Android ConstraintLayout Guideline

2. Android ConstrantLayout