Android studio简单做一个音乐界面

条件：

首先请您先安装好Android studio，由于本文所写内容皆在此软件上所以需要先安装好软件及设置好环境，再此就不赘述了。

内容：

假设您软件环境等因素没有问题了，那么我们就可以开始在软件上做我们的音乐界面了。首先打开我们的module里的Java下的第一个com.example.lenovo.myapplication,可能你的文件名字和我的并不相同。我们需要先在这个文件下建立三个新的package。分别叫做entity、fragment、adapter。

建好包我们才能开始真正的第一步。

实体类：

首先我们需要在后面做界面用到很多类型的属性，如音乐标题，音乐图片，歌手等。在这里我们就需要一个实体类来定义他们。实体类的内容很简单，我们只需要在entity下new一个Java Class，里面写上我们需要用到的属性即可，这里使用public来定义方便后面adapter的直接使用。

public class Music {
public String title;
public String artlist;
public String album;
public Bitmap albummap;
public int length;}

布局文件：

音乐界面内有很多首歌曲我们布局界面不能一条条打出来，所以我们需要先做好一个“模范”布局，在利用ListView来放入数据。现在我们就先做好“模范”布局。

首先新建一个xml文件，再此我建立了个music_intem.xml文件。我们只需要利用RelativeLayout来设定好布局。并且将每一个图片，文字设定好id来为后面数据替换做准备。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp">
<ImageView
android:layout_margin="10dp"
android:id="@+id/music_intm_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/ic_launcher_background"/>
<TextView
android:id="@+id/music_intm_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/music_intm_image"
android:layout_margin="10dp"
android:text="某首歌"/>
<TextView
android:id="@+id/music_intm_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/music_intm_image"
android:layout_below="@id/music_intm_text"
android:layout_marginLeft="10dp"
android:text="某人"/>

</RelativeLayout>

创建适配器

为了能改变上面xml上的数据内容，我们需要用适配器来绑定控件，所以我们在adapter里面自定义一个MusicAdapter来继承BaseAdapter，继承BaseAdapter 需要实现它的方法 并且返还数组的大小,在MusicAdapter内先声明一个数组存放数据内容和context来获取上下文环境。然后我们在适配器内定义一个内部类来专门为组件命名，在此我们为了防止程序以后每次都需要创建一个新的View和绑定ID，我们使用缓存原理来编写绑定ID和创建View，首先判断是否有getview内的view是否存在缓存内容，如果不存在及创建一个新的view和绑定ID，如果存在内容及把view内的内容和绑定的ID取出来用。下面设置每个所绑定的控件内容即可。

package com.example.lenovo.myapplication.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.lenovo.myapplication.R;
import com.example.lenovo.myapplication.entity.Music;

import java.util.List;

/**
* Created by lenovo on 2017/12/18.
*/

public class MusicAdapter extends BaseAdapter {
//声明一个数组来存放数据内容和context来获取上下文环境
private List<Music> musicList;
private Context mcontext;
public MusicAdapter(Context context,List<Music> list){
this.mcontext=context;
this.musicList=list;
}
//实现BaseAdapter的方法
@Override
public int getCount() {
//返还数组的大小
return musicList.size();
}

@Override
public Object getItem(int i)
4000
{
return null;
}

@Override
public long getItemId(int i) {
return 0;
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
View v;
ViewHolder viewHolder;
//判断缓存是否为空
if (view==null){
v=LayoutInflater.from(mcontext).inflate(R.layout.music_intm,null);
viewHolder=new ViewHolder();
//绑定ID
viewHolder.titletv=v.findViewById(R.id.music_intm_text);
viewHolder.artlisttv=v.findViewById(R.id.music_intm_text2);
viewHolder.aubmaptv=v.findViewById(R.id.music_intm_image);
//利用setTag（）来传导绑定ID
v.setTag(viewHolder);
}
else {
v=view;
//接收缓存绑定ID
viewHolder= (ViewHolder) v.getTag();

}

//设置控件内容
Music music=musicList.get(i);
viewHolder.titletv.setText(music.title);
viewHolder.artlisttv.setText(music.artlist+"-"+music.album);
viewHolder.aubmaptv.setImageBitmap(music.albummap);

return v;
}
class ViewHolder{
//命名组件
TextView titletv;
TextView artlisttv;
ImageView aubmaptv;
}
}

除此之外我们还需要在创建一个新的MusicPagerAdapter用来对后面所需要用到的Fragment碎片来适配，MusicPagerAdapter需要继承FragmentPagerAdapter，并且实现它的方法，在这里我们在 public MusicPagerAdapter(FragmentManager fm,List fragmentList) 内自己加入了fm,List fragmentList用来传导数组。

package com.example.shaoyangyang.shaoshuaih.adapter;

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

import java.util.ArrayList;
import java.util.List;

/**
* Created by shaoyangyang on 2017/12/18.
*/

public class MusicPagerAdapter extends FragmentPagerAdapter{

private List<Fragment> fragmentList ;

public MusicPagerAdapter(FragmentManager fm,List<Fragment> fragmentList) {
super(fm);
this.fragmentList = fragmentList;
}

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

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

Fragment碎片

我们的音乐界面如果要实现能够左右滑动的效果，我们需要用到fragment这个碎片首先需要创建两个fragment用来放我们滑动的内容

很多功能权限的访问需要写在这里。首先我们创建好fragment后先来设置最简单的xml布局，这里使用listview来实现一条条的歌词效果。

<FrameLayout 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"
tools:context="com.example.shaoyangyang.shaoshuaih.fragment.LogicFragment">

<!-- TODO: Update blank fragment layout -->
<ListView
android:id="@+id/logic_lv"
android:layout_width="match_parent"
android:divider="@null"
android:layout_height="match_parent"></ListView>

</FrameLayout>

主界面

主界面就是我们所要做的显示给用户看到音乐界面,我们大体分为两个部分，首先是上面的标题栏，只需要简单的布局设置一下，这里我就简单的加上两个文本。而下面需要做的能够滑动到另一个界面，所以我们用Viewpager和Fragment来配合使用，可以理解为将fragment贴在activity上使用viewpager来滑动fragment，除此之外我们还需要增加点击监听事件来完成点击跳转。

第一步我们还是需要先将mainactivity界面布局先完成。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.shaoyangyang.shaoshuaih.MainActivity">

<LinearLayout
android:id="@+id/main_top_linlayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/reddemo">

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/main_menu_imgv"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:src="@mipmap/ic_menu" />

<TextView
android:id="@+id/main_logic_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:text="我的音乐"
android:textColor="#ffffff"
android:textSize="25dp" />

</RelativeLayout>

</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/main_online_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:text="在线音乐"
android:textColor="#ffffff"
android:textSize="25dp" />

<ImageView
android:id="@+id/main_search_imgv"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:src="@mipmap/ic_menu_search" />

</RelativeLayout>

</LinearLayout>

</LinearLayout>

<android.support.v4.view.ViewPager
android:id="@+id/main_vp"
android:layout_width="match_parent"
android:layout_height="match_parent">

</android.support.v4.view.ViewPager>

</LinearLayout>

之后我们在创建的fragment.java内创建ListView的对象将Music放入List集合中，并实例化List，绑定控件的id，利用View.OnClickListener接口实现对控件点击的监听。创建Fragment对象，将fragment对象加入数组内，创建MusicPagerAdapter的对象，实现自定义适配器的创建。viewPager绑定适配器。

package com.example.shaoyangyang.shaoshuaih;

import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.example.shaoyangyang.shaoshuaih.adapter.MusicPagerAdapter;
import com.example.shaoyangyang.shaoshuaih.fragment.LogicFragment;
import com.example.shaoyangyang.shaoshuaih.fragment.OnlineFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
//创建对象或者说是声明
private TextView logicTv;
private  TextView onlineTv;
private ViewPager viewPager;
private List<Fragment> fragmentList = new ArrayList<>();

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

//绑定id
bangdingID();
//设置监听
jianting();

LogicFragment logicFragment = new LogicFragment();
OnlineFragment onlineFragment = new OnlineFragment();

fragmentList.add(logicFragment);
fragmentList.add(onlineFragment);

MusicPagerAdapter musicPagerAdapter = new MusicPagerAdapter(getSupportFragmentManager(),fragmentList);
viewPager.setAdapter(musicPagerAdapter);

}

private void jianting() {
logicTv.setOnClickListener(this);
onlineTv.setOnClickListener(this);
}

private void bangdingID() {
logicTv = findViewById(R.id.main_logic_tv);
onlineTv = findViewById(R.id.main_online_tv);
viewPager = findViewById(R.id.main_vp);
}

@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.main_logic_tv :
viewPager.setCurrentItem(0);
break;
case R.id.main_online_tv:
viewPager.setCurrentItem(1);
break;
default:
break;
}

}
}

到此我们大体实现了主界面与Fragment之间配合所作出来到界面。下面我们只需要将本地音乐的数据获取并放在fragment上。

Fragment的填充和获取本地数据

我们通过上面应该已经能做出两个fragment界面滑动和activity界面显示给用户。

我们只需要将

package com.example.shaoyangyang.shaoshuaih.fragment;

import android.Manifest;
import android.content.ContentResolver;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.support.annotation.NonNull;
import android.support.v4.app.Fragment;
import android.text.TextUtils;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ListView;

import com.example.shaoyangyang.shaoshuaih.MusicActivity;
import com.example.shaoyangyang.shaoshuaih.R;
import com.example.shaoyangyang.shaoshuaih.adapter.MusicAdapter;
import com.example.shaoyangyang.shaoshuaih.adapter.MusicPagerAdapter;
import com.example.shaoyangyang.shaoshuaih.entity.Music;
import com.master.permissionhelper.PermissionHelper;

import java.util.ArrayList;
import java.util.List;

/**
* A simple {@link Fragment} subclass.
*/
public class LogicFragment extends Fragment {
//下面两个属性和获取mediadatabase的权限有关系，可查阅代码块下的链接
private String TAG = "HelloActivity";
private PermissionHelper permissionHelper;
//创建ListView的对象
private ListView listView;
//将Music放入List集合中，并实例化List<Music>
private List<Music> musicList = new ArrayList<>();

public LogicFragment() {
// Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
//创建View对象，返回view
View view = inflater.inflate(R.layout.fragment_logic, container, false);

//关于权限的代码
permissionHelper = new PermissionHelper(this, new String[]{ Manifest.permission.WRITE_EXTERNAL_STORAGE}, 100);
permissionHelper.request(new PermissionHelper.PermissionCallback() {
@Override
public void onPermissionGranted() {
initListView();
Log.d(TAG, "onPermissionGranted() called");
}

@Override
public void onIndividualPermissionGranted(String[] grantedPermission) {
Log.d(TAG, "onIndividualPermissionGranted() called with: grantedPermission = [" + TextUtils.join(",",grantedPermission) + "]");
}

@Override
public void onPermissionDenied() {
Log.d(TAG, "onPermissionDenied() called");
}

@Override
public void onPermissionDeniedBySystem() {
Log.d(TAG, "onPermissionDeniedBySystem() called");
}
});
//权限代码结束

//绑定listView控件的id
listView = view.findViewById(R.id.logic_lv);
//将listView的每一个item实现监听
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//intent实现页面的跳转，getActivity()获取当前的activity， MusicActivity.class将要调转的activity
Intent intent = new Intent(getActivity(), MusicActivity.class);
//通过putExtra（）方法实现信息的传输，将歌名，歌唱者，专辑名传送到MusicActivity
intent.putExtra("title",musicList.get(position).title);
intent.putExtra("artist",musicList.get(position).artist);
intent.putExtra("album",musicList.get(position).album);
//开启传送
startActivity(intent);
}
});
//创建MusicAdapter的对象，实现自定义适配器的创建
MusicAdapter adapter = new MusicAdapter(getActivity(),musicList);
//listView绑定适配器
listView.setAdapter(adapter);
return view;
}
//权限代码
@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
if (permissionHelper != null) {
permissionHelper.onRequestPermissionsResult(requestCode, permissions, grantResults);
}
}
//权限代码结束

//在权限代码中会调用initListView()实现对手机中MediaDataBase的扫描
private void initListView() {
//获取ContentResolver的对象，并进行实例化
ContentResolver resolver =getActivity().getContentResolver();
//创建游标MediaStore.Audio.Media.EXTERNAL_CONTENT_URI获取音频的文件，后面的是关于select筛选条件，这里填土null就可以了
Cursor cursor = resolver.query(MediaStore.Audio.Media.EXTERNAL_CONTENT_URI,null,null,null,null);
//游标归零
cursor.moveToFirst();
do{
//通过cursor获取歌名
String title = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.TITLE));
//通过cursor获取歌唱者
String artist = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.ARTIST));
//通过cursor获取专辑名
String album = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.ALBUM));
//通过cursor获取专辑图片id
int albumID = cursor.getInt(cursor.getColumnIndex(MediaStore.Audio.Media.ALBUM_ID));
//创建Music对象，并赋值
Music music = new Music();
music.title = title;
music.artist = artist;
music.album = album;
music.albumBip = getAlbumArt(albumID);
//将music放入musicList集合中
musicList.add(music);
//当游标不能搜索到底时，cursor.moveToNext()==false
}while(cursor.moveToNext());
//关闭游标
cursor.close();
}
//前面我们只是获取了专辑图片id，在这里实现通过id获取掉专辑图片
private Bitmap getAlbumArt(int album_id) {
String mUriAlbums = "content://media/external/audio/albums";
String[] projection = new String[]{"album_art"};
Cursor cur = getActivity().getContentResolver().query(Uri.parse(mUriAlbums + "/" + Integer.toString(album_id)), projection, null, null, null);
String album_art = null;
if (cur.getCount() > 0 && cur.getColumnCount() > 0) {
cur.moveToNext();
album_art = cur.getString(0);
}
cur.close();
Bitmap bm = null;
if (album_art != null) {
bm = BitmapFactory.decodeFile(album_art);
} else {
bm = BitmapFactory.decodeResource(getResources(), R.mipmap.default_cover);
}
return bm;
}

}

结尾

音乐界面大体所需要的内容在此，由于代码手机不在身边，以及不太会写博客，就在此结束吧，以后再慢慢来改这一篇小白博客。