Android ConstraintLayout 约束布局

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 提供了以下属性来支持这些布局

属性 说明
layout_constraintCircle 引用另一个小部件 ID
layout_constraintCircleRadius 到其它小部件中心的距离
layout_constraintCircleAngle 小部件应处于的角度 ( 度数,从 0 到 360 )

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

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.