一、概述
在移动应用开发中,移动端页面的布局一直是一个难点。约束布局可以高效、简便地解决这个问题。使用约束布局可以快速、精细地实现移动端页面布局,提升用户体验。
二、约束布局的特点
约束布局的主要特点如下:
1、约束布局的布局方式类似于传统的 RelativeLayout
2、约束布局支持水平和垂直的约束关系,支持多个控件之间的约束关系
3、约束布局可以根据不同的屏幕大小和分辨率,来自动调整控件的位置和大小
4、约束布局可以在布局文件中直接实现动画效果,代码实现动画过程相对简单
三、基本使用方法
在布局文件中引入约束布局库后,可以开始使用约束布局。
示例代码如下:
<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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
在示例代码中,约束布局的核心节点是 ConstraintLayout,它对应了整个布局。在 ConstraintLayout 中通过添加约束条件和控件的 margin 来确定控件的位置和大小。
四、控件之间的约束关系
约束布局的核心是不同控件之间的约束关系。控件可以约束到其他控件的上、下、左、右等位置,或者约束到父布局的边缘。
示例代码如下:
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView 1"
app:layout_constraintBottom_toTopOf="@+id/textView2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView 2"
app:layout_constraintBottom_toTopOf="@+id/textView3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView1" />
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView 3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
在示例代码中,TextView 1 约束了它的上下左右与父布局相等。TextView 2 约束了它的上为 TextView 1 的下,下为 TextView 3 的上,左右与父布局相等。TextView 3 约束了它的上为 TextView 2 的下,下与父布局相等,左右与父布局相等。
五、辅助工具的使用
约束布局的开发辅助工具可以提高开发效率,快速实现约束布局。
1、自动辅助线:在 XML 中按住 Control 键,将鼠标悬停在视图之间,就可以看到自动线。自动辅助线会自动对齐控件,提高布局相对位置的精度。
2、布局编辑器:约束布局的布局编辑器可以直观地看到控件的约束关系,可以更加直观地进行布局设计。在布局文件中双击任何视图,都可以打开此视图的约束布局编辑器。
3、约束布局辅助器:使用约束布局辅助器可以对约束布局进行调整和查看。在布局文件中选择视图并点击右键,选择 Show in > ConstraintLayout Helper。
六、示例代码
以下是一个约束布局的示例代码:
<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">
<TextView
android:id="@+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="TextView 1"
app:layout_constraintEnd_toEndOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="TextView 2"
app:layout_constraintEnd_toEndOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView1" />
<TextView
android:id="@+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="TextView 3"
app:layout_constraintEnd_toEndOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<android.support.constraint.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
</android.support.constraint.ConstraintLayout>
在示例代码中,TextView 1 约束了它的上下左与父布局相等。TextView 2 约束了它的上为 TextView 1 的下,下为 TextView 3 的上,左右与父布局相等。TextView 3 约束了它的上为 TextView 2 的下,下与父布局相等,左右与父布局相等。
此外,还有两条 Guideline 控件。它们分别在布局高度的 0.25 和 0.75 的位置,可以用于布局设计。