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

       

以上第一个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/se​
ekbarLayout”

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” />

<TextView

android:id=“@+id/final_progress”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:layout_alignParentRight=“true”

android:layout_below=“@id/audioTrack”

android:text=“3:59” />

<RelativeLayout

android:id=“@+id/relativeLayout2”

android:layout_width=“match_parent”

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取
id/relativeLayout2"

android:layout_width=“match_parent”

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-Yi2u8Eul-1719083501891)]一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取