Android移动开发案例教程----音乐播放器界面

一、新建一个项目，命名为MusicLayout。

二、导入界面图片，将图片导入res/drawable中，直接复制粘贴即可

三、放置界面控件

在activity_main.xml文件中编写代码：

1. 最外层RelativeLayout：这是整个布局的根容器，它占据了整个父容器的宽度和高度（match_parent），并且设置了背景图片@drawable/music_bg。
2. ImageButton (btn_play_pause)：这是一个图像按钮，用于播放和暂停音乐。它居中显示（android:layout_centerHorizontal="true"），并且位于距离顶部150dp的位置。背景设置为@drawable/music_icon，这可能是一个包含播放和暂停图标的可切换图片资源。
3. ProgressBar (progressBar)：这是一个水平进度条，用于显示音乐的播放进度。它位于播放/暂停按钮的下方（android:layout_below="@id/btn_play_pause"），并且也是水平居中的（android:layout_centerHorizontal="true"）。进度条的最大值设置为100，表示进度条的完整范围。
4. 内嵌的RelativeLayout：这个RelativeLayout用于组织三个小的图像按钮（可能是用于控制播放列表的上一个、当前、下一个曲目）。它位于进度条的下方（android:layout_below="@id/progressBar"），并且内容水平居中（通过android:gravity="center_horizontal"实现，但在这个上下文中，它可能不会对子视图产生直接影响，因为子视图的位置是通过其他属性指定的）。
5. ImageButton (btn_left, btn_mid, btn_right)：这三个图像按钮分别代表播放列表的上一个、当前、下一个曲目控制。它们水平排列，每个按钮的宽度和高度都设置为30dp。btn_left和btn_mid的位置通过android:layout_toRightOf属性相对于前一个按钮定位，而btn_mid和btn_right之间以及btn_left与布局边界之间则通过android:layout_marginLeft属性设置间距。每个按钮的背景分别设置为@drawable/left_icon、@drawable/middle_icon和@drawable/right_icon

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/music_bg">

    <ImageButton
        android:id="@+id/btn_play_pause"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:background="@drawable/music_icon"/>

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:layout_below="@id/btn_play_pause"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/progressBar"
        android:layout_marginTop="35dp"
        android:gravity="center_horizontal">

        <ImageButton
            android:id="@+id/btn_left"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/left_icon"/>

        <ImageButton
            android:id="@+id/btn_mid"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginLeft="50dp"
            android:layout_toRightOf="@id/btn_left"
            android:background="@drawable/middle_icon"/>

        <ImageButton
            android:id="@+id/btn_right"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginLeft="50dp"
            android:layout_toRightOf="@id/btn_mid"
            android:background="@drawable/right_icon"/>

    </RelativeLayout>

</RelativeLayout>

四、运行效果界面图