约束性布局简介 ( 基于官方文档翻译 ) :
ConstraintLayout 布局中 单个组件 约束个数要求 :
约束设置 与 显示位置 :
ConstraintLayout 引入 :
repositories {
google()
}
dependencies {
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
}
ConstraintLayout 转换 与 添加 :
Design ( 设计 ) 和 Blueprint ( 蓝图 ) 界面 :
一般情况下 , 我们选择第三种 “Design + Blueprint” 同时显示 两个布局编辑界面 ;
添加 删除 约束 :
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
属性作用 : layout_constraintBottom
含义是 设置组件的 Bottom ( 底部 ) 位置的约束 ,toBottomOf
的含义是 设置其 目标约束位置 , 即 某个组件的 Bottom ( 底部 ) ,app:layout_constraintEnd_toEndOf="parent"
属性作用 : layout_constraintEnd
含义是 设置组件的 End ( 右部 ) 位置的约束 ,toEndOf
的含义是 设置其 目标约束位置 , 即 某个组件的 End ( 右部 ) ,app:layout_constraintStart_toStartOf="parent"
属性作用 : layout_constraintStart
含义是 设置组件的 Start ( 左部 ) 位置的约束 ,toStartOf
的含义是 设置其 目标约束位置 , 即 某个组件的 Start ( 左部 ) ,app:layout_constraintTop_toTopOf="parent"
属性作用 : layout_constraintTop
含义是 设置组件的 Top ( 顶部 ) 位置的约束 ,toTopOf
的含义是 设置其 目标约束位置 , 即 某个组件的 Top ( 顶部 ) ,相对定位属性 :
//将 被约束组件 的 左侧 约束到 目标组件 的左侧
layout_constraintLeft_toLeftOf
//将 被约束组件 的 左侧 约束到 目标组件 的右侧
layout_constraintLeft_toRightOf
//将 被约束组件 的 右侧 约束到 目标组件 的左侧
layout_constraintRight_toLeftOf
//将 被约束组件 的 右侧 约束到 目标组件 的右侧
layout_constraintRight_toRightOf
//将 被约束组件 的 上方 约束到 目标组件 的上方
layout_constraintTop_toTopOf
//将 被约束组件 的 上方 约束到 目标组件 的下方
layout_constraintTop_toBottomOf
//将 被约束组件 的 下方 约束到 目标组件 的上方
layout_constraintBottom_toTopOf
//将 被约束组件 的 下方 约束到 目标组件 的下方
layout_constraintBottom_toBottomOf
//将 被约束组件 的 开始 约束到 目标组件 的 结束
layout_constraintStart_toEndOf
//将 被约束组件 的 开始 约束到 目标组件 的 开始
layout_constraintStart_toStartOf
//将 被约束组件 的 结束 约束到 目标组件 的 开始
layout_constraintEnd_toStartOf
//将 被约束组件 的 结束 约束到 目标组件 的 结束
layout_constraintEnd_toEndOf
相对定位 垂直方向 约束 图解 :
相对定位 垂直方向 约束 图解 :
开始 结束 约束 图解 : 该种情况下 , 与 水平方向的 方位 基本一致 ;
角度定位 :
app:layout_constraintCircle="@id/button"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="200dp"
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:layout_editor_absoluteY="25dp">
<!-- 被 约束 的组件 -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="被约束组件"
app:layout_constraintCircle="@id/button"
app:layout_constraintCircleAngle="45"
app:layout_constraintCircleRadius="200dp" />
<!-- 约束 目标组件 -->
<Button
android:id="@+id/button"
android:layout_width="188dp"
android:layout_height="188dp"
android:text="目标组件"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
app:layout_constraintCircleRadius
属性配置的距离 , 是两个组件 中心点的距离 ;
基线约束 :
app:layout_constraintBaseline_toBaselineOf="@+id/button"
代码 ;<Button
...
app:layout_constraintBaseline_toBaselineOf="@+id/button"
... />
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 被 基线约束 的组件 -->
<!-- 垂直方向约束 自动取消 -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBaseline_toBaselineOf="@+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="parent" />
<!-- 基线约束 目标组件 -->
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button1"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>