1.背景

   音樂播放頁面實現的功能有 ：

   （1）當前歌曲的資訊

   （2）歌詞顯示

   （3）進度條顯示當前進度

   （4）倒計時

   （5）返回 和（下載或分享）

   （6）當前音樂的控制 ：播放/暫停/下一曲/下一曲

   如下圖所示 ：

     這篇將實現整個介面的佈局；

2.佈局實現

   （1）整個模糊背景實現

             整個佈局，設定了一張背景圖片；

   （2）當前歌曲資訊

              最主要的是它的背景顏色，在color.xml 中配置 顏色為 ：其中55表示透明度，半透明狀態實現；   

 <color name="app_color_whrit">#55FCFCFC</color>

              總佈局為RelativeLayout :          

 <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="80dp"
                android:layout_marginTop="10dp"
                android:background="@color/app_color_whrit" >

                <ImageView
                    android:id="@+id/iv_music_songpic"
                    android:layout_width="80dp"
                    android:layout_height="match_parent"
                    android:layout_alignParentLeft="true"
                    android:scaleType="fitXY"
                    android:src="@drawable/moren_big" />

                <TextView
                    android:id="@+id/tv_music_songname"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="18dp"
                    android:layout_toRightOf="@+id/iv_music_songpic"
                    android:maxLines="2"
                    android:text="@string/list_item_song_name"
                    android:textColor="@color/text_color_black"
                    android:textSize="15sp" />

                <TextView
                    android:id="@+id/tv_music_singer"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginBottom="10dp"
                    android:layout_marginRight="20dp"
                    android:text="@string/list_item_singer_name"
                    android:textColor="@color/app_color_zi"
                    android:textSize="12sp" />
            </RelativeLayout>
 

      （3）歌詞的實現是自定義View

               在這裡不分享歌詞的自定義View ，歌詞的顯示 在後面將要實現，因為內容稍微有點多。 

  <cn.labelnet.ui.LrcView
                    android:id="@+id/lrc"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="@string/music_song_ci"
                    lrc:animationDuration="1000"
                    lrc:currentTextColor="?attr/currentTextColor"
                    lrc:dividerHeight="24dp"
                    lrc:normalTextColor="@android:color/white"
                    lrc:textSize="16sp" />
 

        （4）控制實現

                 基本控制的實現，圖示在這裡就不分享了，自己可以在網上找到。

  <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="80dp"
                android:layout_marginTop="10dp"
                android:padding="10dp" >

                <ImageView
                    android:id="@+id/music_play"
                    android:layout_width="50dp"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:src="@drawable/pause" />

                <ImageView
                    android:id="@+id/music_next"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerInParent="true"
                    android:layout_marginLeft="20dp"
                    android:layout_toRightOf="@+id/music_play"
                    android:src="@drawable/next" />

                <ImageView
                    android:id="@+id/music_prev"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerInParent="true"
                    android:layout_marginRight="20dp"
                    android:layout_toLeftOf="@+id/music_play"
                    android:src="@drawable/prevers" />
            </RelativeLayout>

           （5）進度條/倒計時實現

                      倒計時和進度條實現，因為要同步歌曲的進度，所以內容也將單獨的寫一篇文章，敬請期待；

     <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="80dp"
                android:layout_marginTop="10dp"
                android:background="@color/app_color_whrit" >

                <ProgressBar
                    android:id="@+id/progressbar_music"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/tv_time_sheng"
                    android:layout_centerInParent="true"
                    android:max="100"
                    android:progress="50" />

                <TextView
                    android:id="@+id/tv_time_sheng"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginLeft="10dp"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/procress_1_23"
                    android:textColor="@color/app_color_zi" />

                <TextView
                    android:id="@+id/tv_time_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginRight="10dp"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="@string/procress_1_23"
                    android:textColor="@color/app_color_zi" />
            </RelativeLayout>

3.歌曲資訊適配實現

    這裡使用了廣播(BoradCastReceiver )來實現，上面幾篇中已經使用了，當MusicActivity啟動的時候，傳送廣播到MusicService ，MusicService收到後，傳送廣播給MusicActivity ，進行初始化介面。這就是為什麼前面進行開始就啟動MusicService了吧。

    基本過程圖解 ：

     （1）初始化基本過程如上圖所示，初始化流程。

     （2）有一個問題，在第一篇中不是說了，音樂專輯中沒有提供圖片，所以我們需要自己動手去搜索裡獲得圖片連結，在去請求圖片；

4.SDK網路請求封裝與圖解

   （1）首先實現NetRequest 介面，所有的showAPI SDK請求都來自它

public interface NetRequest {
	
	/**
	 * 網路請求介面 
	 */
	
	//請求字串
	String requestStringData();
	
	void requestStringData(int topid);
	
	void requestStringData(String keyword);
	
	void requestStringLrcData(String songId);
	
}

public class NetRequestImp implements NetRequest {

	/**
	 * 實現NetRequest介面,給想要實現方法的提供想要的方法
	 * 
	 */

	@Override
	public String requestStringData() {
		return null;
	}

	@Override
	public void requestStringData(int topid) {
		// 這裡給MusicRequest 提供此方法,在MusicRequest 中 重寫這個方法即可
	}
	
	@Override
	public void requestStringData(String keyword) {
	}

	@Override
	public void requestStringLrcData(String songId) {
		
	}
	
}

/**
 * 音樂請求工具類 ShowAPi 提供的方法
 * 
 */
public class MusicRequest extends NetRequestImp {

	/**
	 *  音樂列表資訊
	 */
	private final String HOT_MUSIC_URL = "http://route.showapi.com/213-4";
	private final String SHOW_API_APPID = "xxxxx";
	private final String SHOW_API_SECRET = "xxxxx";
	
	/**
	 * 音樂id , 查詢資訊
	 */
	private final String SELECT_SONG_BY_KEYWORD_URL="http://route.showapi.com/213-1";
	
	/**
	 * 歌詞地址
	 */
	private final String GET_SONG_LRC_URL="http://route.showapi.com/213-2";
	
	
	
	ShowApiRequest apiRequest = null;
	// 提供非同步回撥方法
	private AsyncHttpResponseHandler musicAsyncHandler;

	public void setMusicAsyncHandler(AsyncHttpResponseHandler handler) {
		this.musicAsyncHandler = handler;
	}

	/**
	 * 熱門榜 : 資料請求
	 */
	@Override
	public void requestStringData(int topid) {
		new ShowApiRequest(HOT_MUSIC_URL, SHOW_API_APPID, SHOW_API_SECRET)
				.setResponseHandler(musicAsyncHandler)
				.addTextPara("topid", topid + "").post();
	}
	
	/**
	 *  關鍵字搜尋
	 */
	@Override
	public void requestStringData(String keyword) {
		new ShowApiRequest(SELECT_SONG_BY_KEYWORD_URL, SHOW_API_APPID, SHOW_API_SECRET)
        .setResponseHandler(musicAsyncHandler)
        .addTextPara("keyword", keyword)
        .addTextPara("page", "1")
        .post();
	}
	
	/**
	 * 獲取歌詞
	 */
	@Override
	public void requestStringLrcData(String songId) {
	    new ShowApiRequest(GET_SONG_LRC_URL ,SHOW_API_APPID,SHOW_API_SECRET)
        .setResponseHandler(musicAsyncHandler)
        .addTextPara("musicid",songId+"")
        .post();
	}
	
}

public  class MusicAsyncHandler extends AsyncHttpResponseHandler {

	private MusicAsync mAsync;
	private List<MusicModel> mms = null;


	public void setMAsync(MusicAsync mAsync) {
		this.mAsync = mAsync;
		mms = new ArrayList<MusicModel>();
	}

	@Override
	public void onFailure(int arg0, Header[] arg1, byte[] arg2, Throwable arg3) {
		// 失敗
		mAsync.onFail(arg3.getMessage() + " : " );
	}

	@Override
	public void onSuccess(int arg0, Header[] arg1, byte[] arg2) {
		// 成功
		String msg = "no msg";
		if (arg2.length > 0) {
			msg = new String(arg2);
			mms = StringUtil.getMusicList(msg);
			if(mms!=null){
				mAsync.onSuccess(mms);
			}else{
				msg="解析為null";
				mAsync.onFail(msg);
			}
		
		} else {
			mAsync.onFail(msg);
		}

	}

}

public interface MusicAsync {

	//成功
	void onSuccess(List<MusicModel> mms);
	
	//失敗
	void onFail(String msg);
	
}

     （6）圖解

5.總結

    播放頁面的實現，與MusciSerivce 通訊密切，同時還有Notification ，比如說 音樂暫停，播放頁面暫停後，通知欄上也要暫停；若控制通知欄上播放，那麼播放頁面既要同步歌曲資訊，也要保持進度進度一致性，時間一致性和狀態一致性。