Android ConstraintLayout 核心用法详解 | 极客日志

Java大前端java

Android ConstraintLayout 核心用法详解

ConstraintLayout 是 Android 默认布局，能减少层级提升性能。本文详解其核心用法，包括基础约束属性如左右上下对齐、约束力强度调整（Bias）、Visibility 为 gone 时的定位行为、宽高比设置、控件占比（Weights）以及链条（Chains）的空间分发策略。通过 Guideline 辅助定位，掌握 spread、spread_inside 等链样式，可灵活构建复杂界面。

数字游民发布于 2025/1/150 浏览

Android ConstraintLayout 核心用法详解

ConstraintLayout 作为 Android Studio 的默认布局，能有效减少布局层级并提升渲染性能。它通过约束关系灵活定位和调整子 View 的大小，理解其机制对构建高效界面至关重要。

基础约束属性

ConstraintLayout 的核心在于 layout_constraintXXX_toYYYOf 格式的属性，用于定义 View A 相对于 View B（或父容器 parent）的位置关系。常见的对齐方式包括左右、上下及基线对齐：

layout_constraintBaseline_toBaselineOf：文字基线对齐
layout_constraintLeft_toLeftOf / Right_toRightOf：左右边界对齐
layout_constraintTop_toTopOf / Bottom_toBottomOf：上下边界对齐
layout_constraintStart_toEndOf / End_toStartOf：支持 RTL 布局的起始/结束对齐

若某个方向缺少约束，控件将不会在该方向上居中。例如，仅设置顶部约束的 View 会紧贴顶部，而同时设置上下约束且强度一致时，View 会自动垂直居中。

<?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">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="200dp"
        android:layout_height="150dp"
        android:layout_margin="20dp"
        android:background="#f5ec7e"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf=
        = />

<TextView
    android:id="@+id/tv1"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="#f5ec7e"
    android:gravity="center"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintHorizontal_bias="1"
    app:layout_constraintVertical_bias="0.1" />

<TextView
    android:id="@+id/tv1"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#f5ec7e"
    android:gravity="center"
    android:text="16:7 标题栏"
    app:layout_constraintDimensionRatio="h,16:7"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tv2"
    android:layout_width="100dp"
    android:layout_height="0dp"
    android:background="#5476fd"
    android:gravity="center"
    android:text="15:25 竖图"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintDimensionRatio="W,15:25"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv1" />

<TextView
    android:id="@+id/tv1"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:background="#f5ec7e"
    android:gravity="center"
    android:text="权重 1.5"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintHorizontal_weight="1.5"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tv2"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:background="#55e4f4"
    android:gravity="center"
    android:text="权重 1"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/tv1"
    app:layout_constraintRight_toLeftOf="@+id/tv3"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/tv3"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:background="#f186ad"
    android:gravity="center"
    android:text="权重 1"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintLeft_toRightOf="@+id/tv2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/guideline1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="100dp" />

<TextView
    android:id="@+id/tv1"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:background="#f5ec7e"
    android:gravity="center"
    android:text="Hello World!"
    app:layout_constraintLeft_toRightOf="@+id/guideline1"
    app:layout_constraintTop_toBottomOf="@+id/guideline2" />