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

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>

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