任务一搭建主页面框架

先为应用设置启动页，再搭建音乐播放器的页面骨架：划分标题栏、歌曲列表区和播放控制区。

一、任务目标

完成本任务后，应用将具备以下页面结构：

点击图标后先显示启动页，再进入主页面。
MainActivity 使用 ViewBinding 加载主布局。
MusicListFragment 和 PlayerFragment 能够独立加载各自布局。
顶部显示页面标题，中部和底部分别预留两个 Fragment 容器。

二、设置应用启动页

用户点击应用图标后，启动页会先于主页面出现。它既是应用给用户的第一印象，也让启动过程有一个自然的过渡。本项目采用简洁的启动设计：页面以白色为背景，中央显示初始工程提供的音乐图标，主页面准备完成后自动进入。

1. 添加启动页依赖

打开 app/build.gradle.kts，在 dependencies 中加入启动页依赖。

dependencies {
    // ... 省略已有依赖。
    implementation("androidx.core:core-splashscreen:1.0.1")
}

保存文件并等待 Gradle 同步。

2. 定义启动页主题

打开 app/src/main/res/values/themes.xml，在 Theme.MusicPlayer 之后新增启动页主题。

<resources>
    ...
    <style name="Theme.MusicPlayer" parent="Base.Theme.MusicPlayer" />

    <style name="Theme.MusicPlayer.Splash" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/ic_music</item>
        <item name="postSplashScreenTheme">@style/Theme.MusicPlayer</item>
    </style>
</resources>

三个属性分别控制启动页的外观和后续页面主题：

属性	作用
`windowSplashScreenBackground`	设置启动页的背景色。
`windowSplashScreenAnimatedIcon`	指定启动页中央显示的图标。
`postSplashScreenTheme`	指定启动页结束后 Activity 使用的主题。

3. 给 MainActivity 指定启动页主题

打开 app/src/main/AndroidManifest.xml，在 MainActivity 声明上增加 android:theme。

<manifest ...>
    ...
    <application ...>
        <activity
            android:name="com.sziit.musicplayer.ui.activity.MainActivity"
            android:theme="@style/Theme.MusicPlayer.Splash"
            ...>
            ...
        </activity>
    </application>
</manifest>

只有启动页面的 Activity 使用 Theme.MusicPlayer.Splash。应用内后续新增的页面不写 android:theme，继续沿用 <application> 上声明的 Theme.MusicPlayer。

4. 安装启动页

打开 app/src/main/java/com/sziit/musicplayer/ui/activity/MainActivity.kt，补充导入并在 super.onCreate() 之前安装启动页。

import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

installSplashScreen() 必须在 super.onCreate() 之前调用。它读取 postSplashScreenTheme 并设置主页面主题，随后 Activity 继续创建和加载布局。启动页显示期间，主页面也在准备，并不是等启动页消失后才开始创建。

5. 验证启动页效果

验证启动页时，先完全结束应用进程，再点击应用图标重新启动。

这一次应该先看到白色背景和中央的音乐图标，短暂停留后自动进入主页面，如下图所示。

启动页显示时间较短，观察背景是否为白色、中央是否显示音乐图标，以及是否自动进入主页面。如果没有看到预期效果，检查启动主题、Manifest 配置和 installSplashScreen() 的调用位置。

三、配置 Activity 使用 ViewBinding

ViewBinding 由 app/build.gradle.kts 的 android 代码块中的一行配置开启：

android {
    // ... 省略其他配置。
    buildFeatures {
        viewBinding = true // 开启 ViewBinding，为每个布局生成绑定类。
    }
}

初始工程已经写好这段配置，所以后面的任务都不需要再改动它，直接使用生成的绑定类即可。

打开 app/src/main/java/com/sziit/musicplayer/ui/activity/MainActivity.kt，把主页面的加载方式从 setContentView(R.layout.activity_main) 改为通过 ActivityMainBinding 绑定类完成。

import com.sziit.musicplayer.R
import com.sziit.musicplayer.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }
}

ActivityMainBinding 是根据 activity_main.xml 自动生成的绑定类。调用 inflate() 可以创建布局对象，setContentView(binding.root) 则把布局显示到 Activity 中。上一节加入的 installSplashScreen() 保持原位，仍然在 super.onCreate() 之前。

四、创建歌曲列表 Fragment

1. 创建 fragment_music.xml

在 app/src/main/res/layout 中创建 fragment_music.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"
    android:background="@color/white" >

</FrameLayout>

白色背景使歌曲列表区域与主页面背景保持一致。

2. 创建 MusicListFragment.kt

在 app/src/main/java/ 目录下新建 com.sziit.musicplayer.ui.fragment 软件包，并在软件包中创建 MusicListFragment.kt。

package com.sziit.musicplayer.ui.fragment

import androidx.fragment.app.Fragment
import com.sziit.musicplayer.R

class MusicListFragment : Fragment(R.layout.fragment_music)

MusicListFragment 加载 fragment_music.xml，将歌曲列表区域作为独立的界面部分管理。

五、创建底部播放区域 Fragment

1. 创建 fragment_player.xml

在 app/src/main/res/layout 中创建 fragment_player.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="72dp"
    android:background="#F6F0FB" />

底部 Fragment 先使用固定高度和浅紫色背景标出播放控制区。播放歌曲名称、进度和控制按钮将在任务二中添加。

2. 创建 PlayerFragment.kt

继续在 com.sziit.musicplayer.ui.fragment 软件包中创建 PlayerFragment.kt。

package com.sziit.musicplayer.ui.fragment

import androidx.fragment.app.Fragment
import com.sziit.musicplayer.R

class PlayerFragment : Fragment(R.layout.fragment_player)

六、编写主页面布局

在主布局 activity_main.xml 中加入两个 Fragment 容器，分别显示歌曲列表区域和底部播放区域。

1. 删除占位文字

打开 app/src/main/res/layout/activity_main.xml，删除 Toolbar 容器下方 ID 为 tv_initial_hint 的 TextView。

<LinearLayout ...>
    <androidx.appcompat.widget.Toolbar ...>
        ...
    </androidx.appcompat.widget.Toolbar>

    <TextView
        android:id="@+id/tv_initial_hint"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:text="音乐列表将在后续任务中实现"
        android:textColor="@android:color/darker_gray"
        android:textSize="18sp" />
</LinearLayout>

占位文字只用于初始工程的运行检查。主页面接入 Fragment 后不再需要该控件。

2. 添加两个 Fragment 容器

在刚才删除占位文字的位置，依次加入歌曲列表和播放控制容器。

<LinearLayout ...>
    <androidx.appcompat.widget.Toolbar ...>
        ...
    </androidx.appcompat.widget.Toolbar>
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_list"
        android:name="com.sziit.musicplayer.ui.fragment.MusicListFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragment_player"
        android:name="com.sziit.musicplayer.ui.fragment.PlayerFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

歌曲列表容器使用 layout_weight="1" 占据标题栏与底部区域之间的剩余空间；播放控制容器使用自身高度，不会挤压标题栏。

3. 验证主页面布局效果

运行应用，检查主页面是否形成上、中、下三个区域：顶部是标题栏，中间是暂时空白的歌曲列表区，底部是浅紫色的播放控制区。运行效果如下。

任务小结

从启动页到页面骨架已经就位：应用启动时先由启动页过渡到主页面，Activity 负责承载整体布局，两个 Fragment 分别预留歌曲列表区和播放控制区。当前页面只验证启动效果、区域关系和加载方式，具体歌曲内容和控制操作留到后续任务实现。

任务一 搭建主页面框架