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

时间:2021-04-02 10:13:57

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的编写了,也希望大家能更耐心认真的看下去。