一、新建一个项目,命名为MusicLayout。
二、导入界面图片,将图片导入res/drawable中,直接复制粘贴即可
三、放置界面控件
在activity_main.xml文件中编写代码:
- 最外层RelativeLayout:这是整个布局的根容器,它占据了整个父容器的宽度和高度(
match_parent
),并且设置了背景图片@drawable/music_bg
。 - ImageButton (btn_play_pause):这是一个图像按钮,用于播放和暂停音乐。它居中显示(
android:layout_centerHorizontal="true"
),并且位于距离顶部150dp的位置。背景设置为@drawable/music_icon
,这可能是一个包含播放和暂停图标的可切换图片资源。 - ProgressBar (progressBar):这是一个水平进度条,用于显示音乐的播放进度。它位于播放/暂停按钮的下方(
android:layout_below="@id/btn_play_pause"
),并且也是水平居中的(android:layout_centerHorizontal="true"
)。进度条的最大值设置为100,表示进度条的完整范围。 - 内嵌的RelativeLayout:这个
RelativeLayout
用于组织三个小的图像按钮(可能是用于控制播放列表的上一个、当前、下一个曲目)。它位于进度条的下方(android:layout_below="@id/progressBar"
),并且内容水平居中(通过android:gravity="center_horizontal"
实现,但在这个上下文中,它可能不会对子视图产生直接影响,因为子视图的位置是通过其他属性指定的)。 - 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>
四、运行效果界面图