手把手教你做音樂播放器（七）播放音樂（下）

7.2 播放界面

根據我們的設計，播放界面位於音樂列表的下方。這裏面將包含播放、暫停、上一首、下一首、播放進度展示、播放進度拖動等功能。

7.2.1 界面修改

爲了實現各種控制功能，我們需要修改界面佈局方式，將這個區域叫做播放控制區域。界面佈局如下，

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <ListView
        android:layout_weight="1"
        android:id="@+id/music_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <!--增加一條分隔線-->
    <View
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@color/colorContract" />

    <!--界面控制區域 開始-->
    <LinearLayout
        android:id="@+id/control_panel"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:orientation="vertical"
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/music_title"
            android:textColor="#FFFFFF"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:gravity="center"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">

            <TextView
                android:id="@+id/played_time"
                android:text="00:00"
                android:textColor="#FFF"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />
            <SeekBar
                android:id="@+id/seek_music"
                android:layout_weight="5"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/duration_time"
                android:text="--:--"
                android:textColor="#FFF"
                android:gravity="center"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content" />

        </LinearLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="5dp">

            <Button
                android:id="@+id/play_btn"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:layout_centerInParent="true"
                android:text=""
                android:background="@mipmap/ic_play"
                android:onClick="onClick"/>

            <Button
                android:id="@+id/pre_btn"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:layout_marginRight="50dp"
                android:layout_toLeftOf="@id/play_btn"
                android:layout_centerVertical="true"
                android:text=""
                android:background="@mipmap/ic_pre"
                android:onClick="onClick"/>

            <Button
                android:id="@+id/next_btn"
                android:layout_width="55dp"
                android:layout_height="55dp"
                android:layout_marginLeft="50dp"
                android:layout_toRightOf="@id/play_btn"
                android:layout_centerVertical="true"
                android:text=""
                android:background="@mipmap/ic_next"
                android:onClick="onClick"/>

        </RelativeLayout>
    </LinearLayout>
    <!--界面控制區域 結束-->
</LinearLayout>

7.2.2 控制區域組件

當MusicListActivity創建的時候，我們將獲取播放器控制區域的組件，並添加對按鈕進度條的響應，

public class MusicListActivity extends AppCompatActivity {
   ......
   private Button mPlayBtn;
   private Button mPreBtn;
   private Button mNextBtn;
   private TextView mMusicTitle;
   private TextView mPlayedTime;
   private TextView mDurationTime;
   private SeekBar mMusicSeekBar;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_music_list);

       ......

       //播放和暫停使用的按鈕
       mPlayBtn = (Button) findViewById(R.id.play_btn);
       //前一首
       mPreBtn = (Button) findViewById(R.id.pre_btn);
       //下一首
       mNextBtn = (Button) findViewById(R.id.next_btn);
       //音樂名稱
       mMusicTitle = (TextView) findViewById(R.id.music_title);
       //播放時長
       mDurationTime = (TextView) findViewById(R.id.duration_time);
       //當前播放時間
       mPlayedTime = (TextView) findViewById(R.id.played_time);
       //進度條
       mMusicSeekBar = (SeekBar) findViewById(R.id.seek_music);
       mMusicSeekBar.setOnSeekBarChangeListener(mOnSeekBarChangeListener);
       ......
   }

   public void onClick(View view) {
        switch (view.getId()) {
            //點擊播放按鈕
            case R.id.play_btn:
            {
                if(mMusicService != null) {
                    if(!mMusicService.isPlaying()) {
                        //開始播放
                        mMusicService.play();
                    }
                    else {
                        //暫停播放
                        mMusicService.pause();
                    }
                }
            }
            break;
            //點擊下一首按鈕
            case R.id.next_btn:
            {
                if(mMusicService != null) {
                    mMusicService.playNext();
                }
            }
            break;
            //點擊前一首按鈕
            case R.id.pre_btn:
            {
                if(mMusicService != null) {
                    mMusicService.playPre();
                }
            }
            break;
        }
    }

    //進度條拖動的監聽器
    private SeekBar.OnSeekBarChangeListener mOnSeekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            //停止拖動時，根據進度條的位置來設定播放的位置
            if(mMusicService != null) {
                mMusicService.seekTo(seekBar.getProgress());
            }
        }
    };
    ......   
}

7.2.3 禁用和啓動控制區域

當音樂列表進入modal狀態或者播放列表爲空時，要讓控制區域不可操作，

public class MusicListActivity extends AppCompatActivity {
   ......
   private ListView.MultiChoiceModeListener mMultiChoiceListener = new AbsListView.MultiChoiceModeListener() {

       @Override
       public boolean onCreateActionMode(ActionMode mode, Menu menu) {
           getMenuInflater().inflate(R.menu.music_choice_actionbar, menu);
           //使控制區域不可操作
           enableControlPanel(false);
           return true;
       }

       @Override
       public void onDestroyActionMode(ActionMode mode) {
           //使控制區域可操作
           enableControlPanel(true);
       }

       ......
   };

   private ServiceConnection mServiceConnection = new ServiceConnection()
   {

       @Override
       public void onServiceConnected(ComponentName name, IBinder service) {

           mMusicService = (MusicService.MusicServiceIBinder) service;
           //獲取播放列表中可播的音樂
           MusicItem item = mMusicService.getCurrentMusic();
           if(item ＝= null) {
               //沒有可播的音樂，是控制區域不可操作
               enableControlPanel(false);
           }

       }

       @Override
       public void onServiceDisconnected(ComponentName name) {

       }
   };

   private void enableControlPanel(boolean enabled) {
       mPlayBtn.setEnabled(enabled);
       mPreBtn.setEnabled(enabled);
       mNextBtn.setEnabled(enabled);
       mMusicSeekBar.setEnabled(enabled);
   }
}

7.2.4 註冊監聽器

更新播放狀態，在取得MusicService的訪問接口後，註冊監聽器，更新控制區域的信息，

public class MusicListActivity extends AppCompatActivity {
   ......
   private ServiceConnection mServiceConnection = new ServiceConnection()
   {

       @Override
       public void onServiceConnected(ComponentName name, IBinder service) {

           mMusicService = (MusicService.MusicServiceIBinder) service;

           //註冊監聽器
           mMusicService.registerOnStateChangeListener(mStateChangeListenr);

           MusicItem item = mMusicService.getCurrentMusic();
           if(item == null) {
               enableControlPanel(false);
               return;
           }
           else {
               //根據當前被加載的音樂信息更新控制區域信息
               updatePlayingInfo(item);
           }
           if(mMusicService.isPlaying()) {
               //如果音樂處於播放狀態降按鈕背景設置成暫停圖標
               mPlayBtn.setBackgroundResource(R.mipmap.ic_pause);
           }
       }

       @Override
       public void onServiceDisconnected(ComponentName name) {

       }
   };

   //更新播放信息
   private void updatePlayingInfo(MusicItem item) {
        //將毫秒單位的時間，轉化成xx:xx形式的時間
       String times = Utils.convertMSecendToTime(item.duration);
       mDurationTime.setText(times);

       times = Utils.convertMSecendToTime(item.playedTime);
       mPlayedTime.setText(times);

        //設置進度條的最大值
       mMusicSeekBar.setMax((int) item.duration);
       //設置進度條的當前值
       mMusicSeekBar.setProgress((int) item.playedTime);

       mMusicTitle.setText(item.name);
   }

   @Override
    protected void onDestroy() {
        super.onDestroy();

        ......
        //註銷監聽器
        mMusicService.unregisterOnStateChangeListener(mStateChangeListenr);
        ......
    }
   ......
}

7.2.5 實現監聽器

實現監聽器監聽MusicService的變化，

public class MusicListActivity extends AppCompatActivity {
   private MusicService.OnStateChangeListenr mStateChangeListenr = new MusicService.OnStateChangeListenr() {

       @Override
       public void onPlayProgressChange(MusicItem item) {
           //更新播放進度信息
           updatePlayingInfo(item);
       }

       @Override
       public void onPlay(MusicItem item) {
           //更新播放按鈕背景
           mPlayBtn.setBackgroundResource(R.mipmap.ic_pause);
           updatePlayingInfo(item);
           //激活控制區域
           enableControlPanel(true);
       }

       @Override
       public void onPause(MusicItem item) {
           //更新播放按鈕背景
           mPlayBtn.setBackgroundResource(R.mipmap.ic_play);
           //激活控制區域
           enableControlPanel(true);
       }
   };
   ......
}

---

至此，整個應用的音樂播放功能就完整的實現了。下面就播放一下你準備好的歌曲吧。

---

/*******************************************************************/
* 版權聲明
* 本教程只在CSDN和安豆網發佈，其他網站出現本教程均屬侵權。

*另外，我們還推出了Arduino智能硬件相關的教程，您可以在我們的網店跟我學Arduino中購買相關硬件。同時也感謝大家對我們這些碼農的支持。

*最後再次感謝各位讀者對安豆的支持，謝謝:)
/*******************************************************************/