hunterliy小作品之 HunterMusic音樂播放器（Day1-主頁面實現）

1.1初始化項目

1.1.1更改圖片放置的文件夾

mipmap 文件夾是用來存放 launch icon 的，他可以對圖片進行優化，但是 PNG、JPEG、GIF、點九圖、
XML,還是全部放在 drawable 目錄下的。在這裏我們不需要對圖片進行優化，所以我們將 mipmap 文件夾
刪除，創建一個 drawable-hdpi。

1.1.2包結構

在這個項目中我們需要創建 adapter、bean、utils、ui 以及 ui 下面的 activity 和 fragment 包。

1.2 引導頁面

Splash 界面用來顯示 icon 和廣告語，延時 2 秒後跳轉到主頁面。

SplashActivity.java

package com.example.administrator.huntermusic.activity;

import android.content.Intent;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;

import com.example.administrator.huntermusic.R;

public class GudieActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Intent intent = new Intent(GudieActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        }, 2000);
    }
}

這樣簡單的引導頁面就完成了，在Textview和ImageView中可以放自己喜歡的圖片和文字。

1.3主頁面實現

1.3.1完成主頁面佈局

主界面使用 LinearLayout 佈局。上面有兩個 TextView，一個爲視頻，一個爲音樂。在 TextView 的下面有一個指示器，下面是一個 ViewPager，然後最下面是另一個LinearLayout用來充當底部播放欄 。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="com.example.administrator.mediaplayer.ui.activity.Gudie">
    <LinearLayout
        android:id="@+id/main_tab"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:background="#FF4081"
        android:layout_height="55dp">

        <LinearLayout
            android:id="@+id/main_tab2"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
            android:id="@+id/tab_music"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="歌曲"
            android:textSize="16sp"
            android:textColor="#FF80AB"
            android:gravity="center"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/tab_singer"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="歌手"
            android:textSize="16sp"
            android:textColor="#FF80AB"
            android:layout_gravity="center"
            android:gravity="center"/>
        </LinearLayout>
    </LinearLayout>
    <View
        android:id="@+id/indicate_line"
        android:layout_width="200dp"
        android:layout_height="2dp"
        android:layout_marginLeft="6dp"
        android:layout_marginBottom="5dp"
        android:layout_alignBottom="@+id/main_tab"
        android:background="#FFFFFF">
    </View>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/main_tab"
        />



    <RelativeLayout
        android:id="@+id/tab_relative"
        android:layout_width="fill_parent"
        android:layout_height="65dp"
        android:layout_gravity="right|bottom"
        android:background="#E0E0E0"
        android:layout_alignParentBottom="true"
        >
        <ImageView
            android:id="@+id/tab_album"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/music_icon"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_gravity="center"/>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/tab_album"
        android:orientation="vertical"
        android:layout_gravity="center"
        android:paddingLeft="10dp"
        android:id="@+id/linearLayout">
        <TextView
            android:id="@+id/tab_music_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="#000000"/>
        <TextView
            android:id="@+id/tv_play_artist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:textColor="#757575"
            android:textSize="12sp" />
    </LinearLayout>


        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"
            android:layout_marginRight="10dp">


            <ImageView
                android:id="@+id/tab_play"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="16dp"
                />
            <ImageView
                android:id="@+id/tab_next"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/tab_next"
                />
        </LinearLayout>


    </RelativeLayout>

</RelativeLayout>

1.3.2填充主頁面

1.在MainActivity 中創建initView （）和initData（）方法用來初始化界面和數據。在 MainActivity 的 initView 方法中將 ViewPager 獲取出來，並且給其設置適配器。

 viewPager = (ViewPager) findViewById(R.id.main_viewpager);
 List<Fragment> fragments=new ArrayList<Fragment>();
 MainViewPagerAdapter mAdapter=new
 MainViewPagerAdapter(getSupportFragmentManager(),fragments);
 viewPager.setAdapter(mAdapter);

MainViewPagerAdapter.java

package com.example.administrator.huntermusic.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class MainViewPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;
    public MainViewPagerAdapter(FragmentManager fm, List<Fragment> fragments){
        super(fm);
        this.fragments = fragments;

    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }


}

2.1.將 MusicListFragment 和 SingerListFragment 創建出來，並填充數據。使用 CursorAdapter 給ListView填充數據，並且爲了方便，將數據從 Cursor 中拿出來封裝在 JavaBean 中。並且提供將 Cursor 轉化爲 JavaBean 的方法。

AudioItem.java

package com.example.administrator.huntermusic.bean;

import android.database.Cursor;
import android.provider.MediaStore;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

public class AudioItem implements Serializable {
    public String path;
    public int duration;
    public String singer;
    public String name;
    public String album;
    public int album_id;
    public int song_id;

    public static AudioItem getAudioItemFromcursor(Cursor cursor){
        AudioItem item= new AudioItem();
        item.duration = cursor.getInt(cursor.getColumnIndex(MediaStore.Audio.Media.DURATION));
        item.path = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.DATA));
        item.singer = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.ARTIST));
        item.name = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.TITLE));
        item.album_id = cursor.getInt(cursor.getColumnIndex(MediaStore.Audio.Media.ALBUM_ID));
        item.album = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.ALBUM));
        item.song_id = cursor.getInt(cursor.getColumnIndex(MediaStore.Audio.Media._ID));
        return item;
    }
    public static List<AudioItem>getAudioItemFromCursor(Cursor cursor){
        List<AudioItem> items = new ArrayList<AudioItem>();
        if (cursor==null||cursor.getCount()==0){
            return items;
        }
        cursor.moveToPosition(-1);
        while (cursor.moveToNext()){
            AudioItem audioItem = AudioItem.getAudioItemFromcursor(cursor);
            items.add(audioItem);
        }
        return items;
    }

    public String getName() {
        return name;
    }

    public String getPath() {
        return path;
    }

    public int getDuration() {
        return duration;
    }

    public String getSinger() {
        return singer;
    }
    public String getAlbum() {
        return album;
    }



    public int getAlbum_id() {
        return album_id;
    }
    public int getSong_id() {
        return song_id;
    }

}

2.2從系統的數據庫中將音樂取出來

ContentResolver resolver=getActivity().getContentResolver();
final Cursor cursor=
resolver.query(MediaStore.Audio.Media.EXTERNAL_CONTENT_URI, new String[]{MediaStore.Audio.Media._ID, MediaStore.Audio.Media.DATA, MediaStore.Audio.Media.DURATION, MediaStore.Audio.Media.TITLE, MediaStore.Audio.Media.ARTIST,MediaStore.Audio.Media._ID,MediaStore.Audio.Media.ALBUM_ID,MediaStore.Audio.Media.ALBUM}, null, null, MediaStore.Audio.Media.DEFAULT_SORT_ORDER);

2.3給ListView 設置適配器

MusicAdapter musicAdapter = new MusicAdapter(getContext(),cursor);
listView.setAdapter(musicAdapter);

2.4 點擊條目跳轉到播放音樂頁面

 listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Cursor c = (Cursor) parent.getItemAtPosition(position);
                List<AudioItem> audioItems = AudioItem.getAudioItemFromCursor(c);
                Intent intent = new Intent(getActivity(), AudioPlayActivity.class);
                intent.putExtra("audioItems", (Serializable) audioItems);
                intent.putExtra("position", position);
                startActivity(intent);

1.3.3高亮Tab

在 onPageChangeListener 中的 onPageSelected 方法中進行判斷。如果當前的 position 等於 tabPosition的時候，就將對應的 tab 高亮。

 private ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            updateTab(position);
        }
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };
    private void updateTab(int position){
        tabLight(position,0,tab_music);
        tabLight(position, 1, tab_singer);
    }
    private void tabLight(int position,int tabposition,TextView tab){
        int white = getResources().getColor(R.color.colorNormal);
        int pink = getResources().getColor(R.color.colorShow);
        if (position==tabposition){
            tab.setTextColor(white);
        }else{
            tab.setTextColor(pink);
        }
    }

1.3.4指針的移動

當手指觸摸滑動時來進行Tab指針的移動，其實現是根據positionOffset 來計算指針的偏移量。當 viewpager 滑動的時候回調onPageScrolled方法，移動也是在此方法中實現。

@Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            int indicateWidth=indicate_line.getLayoutParams().width;
            int offset= (int) (positionOffset*indicateWidth);
            int startX=position*indicateWidth;
            int translationX=offset+startX;
            indicate_line.setTranslationX(translationX);
        }

至此整個主頁面的開發已經完畢，但是還有一些功能要隨着項目進行再添加，後面繼續完善，開發中還是會有一些不完美，所以也希望大家能認真給我提出不足，以後會慢慢改正完善。下一節就要開始進行重頭戲MusicService的編寫了，也希望大家能更耐心認真的看下去。