前言
在 Android 开发学习中，布局是基础中的基础。本文将带你一步步创建 4 个典型页面：线性布局、相对布局、表格布局和霓虹灯效果页面，并实现页面间跳转，完整复现项目从 0 到 1 的构建过程。
一、项目初始化
1. 创建新项目
打开 Android Studio，选择 Empty Views Activity 模板，配置如下：
- Language：Java
- Minimum SDK：API 24（兼容更多设备）
- 包名：
cn.edu.linearlayout
2. 基础配置检查
确保 build.gradle 和 AndroidManifest.xml 初始配置正确，主题使用 AppTheme，保证全局样式统一。
二、页面 1：LinearLayout（主页面）
1.线性布局 (LinearLayout)
线性布局是最简单的布局方式，通过 android:orientation 属性控制子视图的排列方向（垂直或水平）。创建一个 activity_linearlayout.xml 文件，定义垂直排列的布局：
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"/>
</LinearLayout>
2.运行效果
编辑
三、页面 2：RelativeLayout（相对布局）
1.相对布局 (RelativeLayout)
相对布局通过 android:layout_alignParentTop 等属性实现视图间的相对定位。创建 activity_relativelayout.xml：
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<Button
android:id="@+id/btn_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Center Button"/>
<Button
android:id="@+id/btn_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/btn_center"
android:text="Right Button"/>
</RelativeLayout>
2.运行效果
编辑
四、页面 3：TableLayout（表格布局）
1.表格布局 (TableLayout)
表格布局通过 <TableRow> 标签定义行，适合规整的数据展示。创建 activity_tablelayout.xml：
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow>
<TextView android:text="Name" android:padding="8dp"/>
<TextView android:text="Age" android:padding="8dp"/>
</TableRow>
<TableRow>
<TextView android:text="Alice" android:padding="8dp"/>
<TextView android:text="25" android:padding="8dp"/>
</TableRow>
</TableLayout>
2.页面效果
编辑
五、页面 4：NeonLamp（霓虹灯页面）
1.霓虹灯效果布局 (NeonLamp)
通过代码动态改变视图属性实现霓虹灯效果。创建 activity_neon.xml 和对应的 NeonActivity.java：
<!-- activity_neon.xml -->
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"/>
// NeonActivity.java
public class NeonActivity extends AppCompatActivity {
private FrameLayout container;
private Handler handler = new Handler();
private int[] colors = {Color.RED, Color.BLUE, Color.GREEN};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_neon);
container = findViewById(R.id.container);
startColorChange();
}
private void startColorChange() {
handler.postDelayed(new Runnable() {
int index = 0;
@Override
public void run() {
container.setBackgroundColor(colors[index % colors.length]);
index++;
handler.postDelayed(this, 500);
}
}, 0);
}
}
2.页面效果
编辑
六、AndroidManifest.xml 页面注册
1.页面跳转实现
所有页面必须在清单文件中注册，最终配置如下：
<?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=".NeonLamp"
android:exported="false" />
<!-- 表格布局页面 -->
<activity
android:name=".TableLayout"
android:exported="false" />
<!-- 相对布局页面 -->
<activity
android:name=".RelativeLayout"
android:exported="false" />
<!-- 主页面（启动页） -->
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
注：项目结构建议
app/
├── src/
│ ├── main/
│ │ ├── java/
│ │ │ ├── MainActivity.java
│ │ │ ├── LinearLayoutActivity.java
│ │ │ ├── RelativeLayoutActivity.java
│ │ │ ├── TableLayoutActivity.java
│ │ │ └── NeonActivity.java
│ │ └── res/
│ │ ├── layout/
│ │ │ ├── activity_main.xml
│ │ │ ├── activity_linearlayout.xml
│ │ │ ├── activity_relativelayout.xml
│ │ │ ├── activity_tablelayout.xml
│ │ │ └── activity_neon.xml
