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

最新推荐文章于 2024-09-06 22:33:47 发布

原创最新推荐文章于 2024-09-06 22:33:47 发布 · 693 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #音乐播放器

android 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了一款音乐应用的UI设计与核心功能实现过程，包括引导页、主页面布局及交互逻辑，通过ViewPager实现页面切换，利用CursorAdapter填充音乐列表，并实现了Tab高亮与指针移动效果。

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