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

在写这篇文章之前，xxx已写过了几篇关于改音乐应用开发主题的文章,想要了解的朋友可以去翻一下之前的文章

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

2013年5月25日 简、美音乐播放器开发

真得很无奈，本来盘算很快结束这个实战项目的，但因为各种满课、学科、琐事给耽误了进度，现在小巫的这个简、美音乐播放器基本上已开发出来了个原型，以后会继承在这个原型基础上添加各种功能。这篇博文继承按照UI先搭建好，再实现业务逻辑。

这里有一点说明一下，关于歌词的滚动表现，小巫还没完整实现，须要去参考一下别人的实现方法，所以布局不太肯定，暂时用TextView控件代替，前面可能须要自定义TextView来实现歌词表现的功能，所以这是这个UI须要注意的。

效果图：





以上第一个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" />

</RelativeLayout>

第二个是用来表现歌词和控制播放的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"
/>
</RelativeLayout>

<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" />
</ScrollView>

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

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

<RelativeLayout
android:id="@+id/relativeLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/seekbarLayout" >

<Button
android:id="@id/play_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/relativeLayout2"
android:layout_centerHorizontal="true"
android:background="@drawable/pause_selector" />

<Button
android:id="@id/next_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/play_music"
android:layout_toRightOf="@+id/play_music"
android:background="@drawable/next_music_selector" />

<Button
android:id="@id/previous_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/play_music"
android:layout_toLeftOf="@+id/play_music"
android:background="@drawable/previous_music_selector" />

<Button
android:id="@+id/play_queue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/next_music"
android:layout_toRightOf="@+id/next_music"
android:background="@drawable/play_queue_selector" />

<Button
android:id="@+id/search_music"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/previous_music"
android:layout_toLeftOf="@+id/previous_music"
android:background="@drawable/search_selector" />
</RelativeLayout>
</RelativeLayout>

</RelativeLayout>

关于简、美音乐播放器是小巫本人自行计划的，是我想实现的效果，只是给个参考罢了，童鞋们自己可以按照自己的想法来布局，计划出更加美观好看的界面，小巫在这个方面是有些完善的。由于整个项目还处于开发状态，暂时不会共享项目源代码，直到把这个播放器开发到比较完善的时候才会上传资源，小巫也会把代码贴在每一篇博文上，须要的可以参考一下。

文章结束给大家分享下程序员的一些笑话语录：

程序语言综述

CLIPPER 程序员不去真的猎捕大象，他们只是购买大象部分的库然后花几年的时间试图综合它们。

DBASE 程序员只在夜间猎捕大象，因为那时没人会注意到他们还在使用石弓。

FOXPRO 程序员开始使用更新更好的步枪，这使他们花掉比实际狩猎更多的时间学习新的射击技术。

C 程序员拒绝直接购买步枪，宁可带着钢管和一个移动式机器车间到非洲，意欲从零开始造一枝完美的步枪。

PARADOX 程序员去非洲时带着好莱坞关于猎捕大象的电影剧本，他们认为照剧本行事就会逮到一头大象。

ACCESS 程序员在没有任何猎象经验的经验下就出发了，他们穿着华丽的猎装、带着全部装备，用漂亮的望远镜找到了大象，然后发觉忘了带扳机。

RBASE 程序员比大象还要稀少，事实上，如果一头大象看到了一个RBASE程序员，对他是个幸运日。

VISUAL ACCESS 程序员装上子弹、举起步枪、瞄准大象，这使大象感到可笑，究竟谁逃跑。他们无法抓住大象，因为由于他们对多重控制的偏爱，他们的吉普车有太多的方向盘因而无法驾驶。

ADA、APL和FORTRAN 程序员与圣诞老人和仙女一样是虚构的。

COBOL 程序员对和自己一样濒临灭绝的大象寄予了深切的同情。

---------------------------------
原创文章 By
音乐和应用开发
---------------------------------