Android应用开发--MP3音乐播放器界面设计（2）

以上第一个UI是主界面的，稍微美化了一下

列表布局music_list_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:id=“@+id/RelativeLayout1”

android:layout_width=“match_parent”

android:layout_height=“50.0dp”

android:orientation=“vertical” >

<ImageView

android:id=“@+id/albumImage”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentLeft=“true”

android:layout_alignParentTop=“true”

android:src=“@drawable/item” />

<TextView

android:id=“@+id/music_duration”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentRight=“true”

android:layout_alignParentTop=“true”

android:layout_marginRight=“5.0dp”

android:textColor=“@android:color/white”

android:text=“@string/time” />

<TextView

android:id=“@+id/music_title”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentTop=“true”

android:layout_marginLeft=“5dp”

android:layout_toRightOf=“@+id/albumImage”

android:textColor=“@android:color/white”

android:text=“@string/siger” />

<TextView

android:id=“@+id/music_Artist”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignLeft=“@+id/music_title”

android:layout_below=“@id/music_title”

android:textColor=“@android:color/white”

android:text=“@string/artist” />

第二个是用来显示歌词和控制播放的UI，是这篇博文要实现的。

布局代码如下：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:id=“@+id/RelativeLayout1”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:background=“@drawable/bg_playback” >

<RelativeLayout

android:id=“@+id/header_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_alignParentTop=“true” >

<Button

android:id=“@id/repeat_music”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentLeft=“true”

android:background=“@drawable/repeat_none_selector” />

<Button

android:id=“@id/shuffle_music”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentRight=“true”

android:background=“@drawable/shuffle_none_selector” />

<TextView

android:id=“@+id/musicTitle”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignBaseline=“@id/repeat_music”

android:layout_centerHorizontal=“true”

android:text=“@string/siger”

android:textAppearance=“?android:attr/textAppearanceLarge”

android:ellipsize=“marquee”

android:focusable=“true”

android:focusableInTouchMode=“true”

android:gravity=“center_horizontal”

android:lines=“1”

android:marqueeRepeatLimit=“marquee_forever”

android:textColor=“@android:color/white”

android:singleLine=“true”/>

<TextView

android:id=“@+id/musicArtist”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_below=“@id/musicTitle”

android:layout_marginTop=“15dp”

android:layout_centerHorizontal=“true”

android:textSize=“18sp”

android:textColor=“#0F0”

android:text=“@string/artist”

/>

<ScrollView

android:id=“@+id/lrcScrollView”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:layout_below=“@id/header_layout” >

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_gravity=“center”

android:text=“好歌不容错过”

android:textAppearance=“?android:attr/textAppearanceLarge” />

<RelativeLayout

android:id=“@+id/footer_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_alignParentBottom=“true” >

<RelativeLayout

android:id=“@+id/seekbarLayout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_below=“@id/lrcScrollView”

android:background=“@drawable/player_progresslayout_bg” >

<SeekBar

android:id=“@+id/audioTrack”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:layout_centerVertical=“true”

android:background=“@drawable/player_progress_bg”

android:progressDrawable=“@drawable/seekbar_img”

android:thumb=“@drawable/media_player_progress_button”

/>

<TextView

android:id=“@+id/current_progress”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_below=“@id/audioTrack”

android:text=“0:25” />

推荐学习资料

• Android进阶学习全套手册

  

• Android对标阿里P7学习视频

  

• BAT TMD大厂Android高频面试题

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
xt=“0:25” />

推荐学习资料

• Android进阶学习全套手册

  [外链图片转存中…(img-oDvLLkks-1714508697551)]

• Android对标阿里P7学习视频

  [外链图片转存中…(img-b3p04GE9-1714508697552)]

• BAT TMD大厂Android高频面试题

[外链图片转存中…(img-4XxoSNKM-1714508697553)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！