分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

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>

關於簡、美音樂播放器是小巫本人自行設計的，是我想實現的效果，只是給個參考罷了，童鞋們自己可以按照自己的想法來佈局，設計出更加美觀好看的介面，小巫在這個方面是有些欠缺的。由於整個專案還處於開發狀態，暫時不會共享專案原始碼，直到把這個播放器開發到比較完善的時候才會上傳資源，小巫也會把程式碼貼在每一篇博文上，需要的可以參考一下。

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow