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);
        }

hunterliy小作品之 HunterMusic音乐播放器（Day1-主页面实现）

至此整个主页面的开发已经完毕，但是还有一些功能要随着项目进行再添加，后面继续完善，开发中还是会有一些不完美，所以也希望大家能认真给我提出不足，以后会慢慢改正完善。下一节就要开始进行重头戏MusicService的编写了，也希望大家能更耐心认真的看下去。

秒客网

hunterliy小作品之 HunterMusic音乐播放器（Day1-主页面实现）

1.1初始化项目

1.1.1更改图片放置的文件夹

1.1.2包结构

1.2 引导页面

1.3主页面实现

1.3.1完成主页面布局

1.3.2填充主页面

1.3.3高亮Tab

1.3.4指针的移动

相关文章