### 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); } ~~~ ? ? (2)NetRequestImp中實現接口NetRequest ，但不寫方法內容，提供空方法 ~~~ 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) { } } ~~~ ? ? （3）實現MusicRequest類 繼承自 NetRequestImp , 重寫使用的方法, 實現里面的方法 ~~~ /** * 音樂請求工具類 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(); } } ~~~ ? ? （4）需要實現AsyncHandler ，單獨的實現該類，后使用回調函數，將值回調出來； ~~~ 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); } } } ~~~ ? ? ?（5）回調接口 函數 ~~~ public interface MusicAsync { //成功 void onSuccess(List<MusicModel> mms); //失敗 void onFail(String msg); } ~~~ ? ? ?（6）圖解 ? ? ? ? ? ? ? ? ? ?? ### 5.總結 播放頁面的實現，與MusciSerivce 通信密切，同時還有Notification ，比如說 音樂暫停，播放頁面暫停后，通知欄上也要暫停；若控制通知欄上播放，那么播放頁面既要同步歌曲信息，也要保持進度進度一致性，時間一致性和狀態一致性。