Android中常用的四种布局

用户824928192536
45 阅读5分钟

项目一：LinearLayout（线性布局）

项目结构

  • 包名：cn.edu.linearlayout
  • AndroidManifest.xml：配置应用包名、应用名称（从@string/app_name读取）、图标及圆角图标，并设置启动Activity为MainActivity
  • 布局文件：使用 LinearLayout 实现水平排列的按钮，通过 layout_weight 权重属性实现按比例分配宽度

核心代码

AndroidManifest.xml

xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.edu.linearlayout">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name="cn.edu.linearlayout.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

布局文件（activity_main.xml）

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮1"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮2"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="按钮3"/>
</LinearLayout>

 布局特点

  • 方向可控：通过 orientation 属性设置 horizontal（水平排列）或 vertical（垂直排列）
  • 权重分配：使用 layout_weight 属性实现控件在剩余空间中的比例分配
  • 尺寸优化：当 layout_width="0dp" 配合 layout_weight 时，控件宽度完全由权重决定，避免尺寸计算冲突
  • 线性排列：子控件按照添加顺序依次排列，简单直观

运行截图

屏幕截图 2026-03-25 140335.png

项目二：RelativeLayout（相对布局）

  • AndroidManifest.xml：配置应用包名、应用名称（从@string/app_name读取）、图标及圆角图标，并设置启动Activity为MainActivity
  • 布局文件：使用 RelativeLayout 实现按钮之间的相对定位，展示组件间的依赖关系

核心代码

AndroidManifest.xml

xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.edu.relativelayout">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name="cn.edu.relativelayout.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

布局文件

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/AppTheme"
    android:id="@+id/mainRelativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="1dp"

    >
    <Button
        android:id="@+id/btn_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"/>
    <Button
        android:id="@+id/btn_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="260dp"/>

    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/btn_two"
        android:layout_marginLeft="-5dp"
        android:layout_marginBottom="151dp"
        android:layout_toRightOf="@id/btn_two"
        android:text="按钮3" />
</RelativeLayout>

布局特点

  • 相对定位：组件可相对于父容器（如layout_alignParentTop、layout_centerInParent）或其他组件（如layout_above、layout_toRightOf）进行定位

  • 灵活性强：适合实现复杂、不规则或需要自适应屏幕的界面

  • 关键属性：

    • 相对于父容器：layout_alignParentTop、layout_alignParentBottom、layout_centerInParent、layout_alignParentStart等
    • 相对于其他组件：layout_above、layout_below、layout_toLeftOf、layout_toRightOf等

  • 注意事项：使用相对于其他组件的属性时，必须为被参照的组件设置android:id，且引用时使用@id/xxx

运行截图

屏幕截图 2026-03-25 140601.png

项目三：TableLayout（表格布局）

项目结构

  • AndroidManifest.xml：配置应用包名、应用名称（TableLayout）、图标及启动Activity
  • 布局文件：使用 TableLayout 实现不规则表格布局，通过 stretchColumns 和 layout_column 控制列宽和单元格位置

核心代码

AndroidManifest.xml

xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.edu.tablelayout">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name="cn.edu.tablelayout.MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

布局文件

xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="2" >
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="按钮1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮2" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮3" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮4" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮5" />
    </TableRow>
</TableLayout>

布局特点

  • 表格结构：通过 <TableRow> 定义每一行，行内的子控件自动形成列

  • 列控制：

    • android:stretchColumns="2"：指定第2列（从0开始计数）可拉伸填充剩余空间
    • android:layout_column：指定当前控件所在的列位置，实现跨列或不规则排列

  • 灵活布局：支持单元格跨列、空单元格、不规则表格布局

  • 自适应宽度：表格宽度由内容决定，也可通过 stretchColumns、shrinkColumns 控制列宽行为

运行截图

屏幕截图 2026-03-25 140641.png

项目四：Neonlamp(帧布局）

项目结构

  • 包名：cn.edu.neonlamp
  • AndroidManifest.xml：配置应用包名、应用名称（从@string/app_name读取）、图标及圆角图标，并设置启动Activity为MainActivity
  • 布局文件：使用 FrameLayout 实现多层按钮叠加效果，通过不同大小和颜色的按钮形成霓虹灯般的同心圆视觉效果

核心代码

AndroidManifest.xml

xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.edu.neonlamp">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

布局文件（activity_main.xml）

xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <Button
        android:id="@+id/btn_one"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#ff0000" />
        
    <Button
        android:id="@+id/btn_two"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:background="#00ff00" />
        
    <Button
        android:id="@+id/btn_three"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:background="#0000ff" />
        
    <Button
        android:id="@+id/btn_four"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:background="#ff1243" />
        
    <Button
        android:id="@+id/btn_five"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:background="#324678" />
        
</FrameLayout>

运行截图

屏幕截图 2026-03-25 140504.png

布局特点

  • 层叠特性：FrameLayout中的子控件会按照添加顺序依次叠加，后添加的控件显示在上层
  • 位置控制：通过 layout_gravity 属性控制控件在FrameLayout中的位置（本示例使用 center 实现居中）
  • 绝对定位：支持使用 layout_margin 等属性实现精确偏移
  • 轻量高效：FrameLayout结构简单，没有复杂的定位规则，渲染性能好
avatar
文章
阅读
粉丝