约束与无约束布局

在UI设计中，布局是一个必不可少的部分。布局就是为控件确定其位置、大小、边距等属性，以实现UI页面的排版。在布局过程中，我们通常会用到约束布局和无约束布局。

无约束布局

无约束布局是一种没有具体限制条件，控件可以随意放置的布局方式。例如，线性布局中的LinearLayout和相对布局中的RelativeLayout都是无约束布局。

线性布局(LinearLayout)

LinearLayout是一种线性布局，通过android:orientation属性设置排列方向，可以设置为水平或垂直。其子控件的位置和大小可以通过android:layout_weight属性进行调整。例如，将android:layout_weight设置为1，表示该子控件会占据剩余空间的1/3。同时，我们还可以用android:gravity属性来对子控件进行对齐操作。

示例代码

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="左侧"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="中间"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="右侧"/>
</LinearLayout>

相对布局(RelativeLayout)

RelativeLayout是一种相对布局，我们可以使用android:layout_alignParentTop、android:layout_alignParentLeft、android:layout_alignParentRight等属性来设置子控件相对于父控件的位置。同时，通过android:layout_below、android:layout_toRightOf等属性，我们还可以设置子控件相对于其他子控件的位置关系。

示例代码

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"/>
        
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_logo"
        android:layout_toRightOf="@id/tv_title"
        android:layout_alignBaseline="@id/tv_title"/>
</RelativeLayout>

约束布局

相对于无约束布局，约束布局是一种更加灵活且可控制的布局方式。约束布局中，控件通过设置相对位置和边距等属性，来表现出与其他控件之间的关系。Android Studio提供了ConstraintLayout布局容器，使我们能够轻松地创建约束布局。

约束属性

在约束布局中，控件可以通过以下属性进行相对定位：

• app:layout_constraintLeft_toLeftOf：控件左侧与另一个控件的左侧对齐。
• app:layout_constraintRight_toRightOf：控件右侧与另一个控件的右侧对齐。
• app:layout_constraintTop_toTopOf：控件顶部与另一个控件的顶部对齐。
• app:layout_constraintBottom_toBottomOf：控件底部与另一个控件的底部对齐。
• app:layout_constraintStart_toStartOf：用于支持从右到左的语言(如阿拉伯语)，控件开头与另一个控件的开头对齐。
• app:layout_constraintEnd_toEndOf：用于支持从右到左的语言(如阿拉伯语)，控件结束与另一个控件的结束对齐。
• app:layout_constraintHorizontal_bias：控件水平方向的偏移量。
• app:layout_constraintVertical_bias：控件垂直方向的偏移量。
• app:layout_constraintWidth_percent：相对于布局父容器宽度的比例。
• app:layout_constraintHeight_percent：相对于布局父容器高度的比例。

Guideline

在约束布局中，我们还可以使用Guideline来帮助我们确定控件的位置和大小。Guideline是一条虚拟的参考线，我们可以通过app:layout_constraintGuide_percent属性设置其相对于布局父容器的位置。

示例代码

下面的代码演示了如何通过约束布局和Guideline来实现一个简单的布局。其中，TextView通过设置app:layout_constraintTop_toBottomOf="@id/guideline"属性，让其与Guideline对齐。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:text="Hello World!"
        app:layout_constraintTop_toBottomOf="@id/guideline"/>

</androidx.constraintlayout.widget.ConstraintLayout>

结论

无约束布局灵活简单，适合解决简单的布局问题，而约束布局则更加灵活可控，适合处理复杂的UI排版。对于程序员而言，需要根据实际情况进行选择，能够同时熟练了解、应用两种布局方式会让开发变得更加高效。

参考文献：

• Android Developers. Create a Responsive UI with ConstraintLayout.