Android布局设计常用方式

发布时间：2023-12-08

Android布局设计常用方式

更新：<time datetime="2023-05-14 07:21">2023-05-14 07:21</time>

一、线性布局

线性布局按照线性排列的方式进行布局，支持嵌套，具有灵活性和方便性。在实现线性布局时，需要设置其方向（水平或垂直），还可以设置gravity属性来控制子视图的位置和对齐方式。以下是一个简单的线性布局代码示例：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</LinearLayout>

在以上代码中，LinearLayout的orientation属性设置为horizontal，即水平方向排列子视图。ImageView和TextView都放在LinearLayout中，ImageView和TextView均设置了layout_width和layout_height属性，子视图会根据这些属性进行排列。

二、相对布局

相对布局按照相对的位置进行布局，它支持子视图间相互定位，灵活性高。在实现相对布局时，需要设置子视图之间的对齐方式、相对位置和间距等属性。以下是一个简单的相对布局代码示例：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_toRightOf="@id/image"
        android:layout_centerVertical="true" />
</RelativeLayout>

在以上代码中，ImageView和TextView分别位于左侧和右侧，通过layout_toRightOf和android:layout_alignParentLeft属性设置相对位置。

三、帧布局

帧布局从左上角开始，支持子视图的堆叠，适合做小型的页面。在实现帧布局时，需要注意子视图的布局顺序，后添加的子视图会覆盖前面的子视图。以下是一个简单的帧布局代码示例：

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/background" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_gravity="center" />
</FrameLayout>

在以上代码中，ImageView和TextView都放在FrameLayout中，ImageView会覆盖TextView。通过layout_gravity属性可以控制TextView的位置和对齐方式。

四、表格布局

表格布局按照行和列的方式进行布局，支持跨行跨列，类似于HTML中的table布局。在实现表格布局时，需要设置行列数、子视图的位置和对齐方式等属性。以下是一个简单的表格布局代码示例：

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name:"
            android:padding="5dp" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your name" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Age:"
            android:padding="5dp" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your age" />
    </TableRow>
</TableLayout>

在以上代码中，通过TableRow设置每行的子视图，TextView和EditText分别位于左侧和右侧。通过padding属性设置内边距。

五、约束布局

约束布局是最为强大的布局方式，支持子视图之间的依赖关系、循环依赖以及动态的约束条件。在实现约束布局时，需要设置每个子视图之间的约束关系，如相对位置、边距和对齐方式等属性。以下是一个简单的约束布局代码示例：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <EditText
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name"
        app:layout_constraintTop_toBottomOf="@id/label" />
</androidx.constraintlayout.widget.ConstraintLayout>

在以上代码中，TextView和EditText都在ConstraintLayout中，TextView相对于parent居中显示，EditText相对于TextView的下方显示。

推荐文章