Android初级,实现网易云音乐歌曲列表界面效果,播放界面效果,ListView,ViewPager方法详解

初学Android初级,第一篇博客文章,如有错误,还望批评指正!

本文主要内容以网易云音乐歌曲列表界面效果代码,播放音乐界面效果代码为主,并将ListView和ViewPager作为实现界面滑动功能的适配器控件进行穿插讲解。

读完本文你将了解到:

  • 如何创建布局文件(线性布局及相对布局搭配使用)
  • 如何使用ListView和ViewPager进行界面滑动和切换(Fragment)
  • 利用缓存原理给布局视图控件赋值
  • 如何将手机本地音乐导入到已编写运行好的程序中(多媒体Media)

Part1 效果图

最终效果图
Android初级,实现网易云音乐歌曲列表界面效果,播放界面效果,ListView,ViewPager方法详解_第1张图片Android初级,实现网易云音乐歌曲列表界面效果,播放界面效果,ListView,ViewPager方法详解_第2张图片

Part2 整体思路详解

1.创建实体类

  1. 在Java中分别创建三个包
    • fragment
    • adapter(适配器)
    • entity(实体类)
  2. 在实体类中创建java文件用于实体类(注意类名首字母大写)
  3. 定义需要的参数(title,album,artist,“Bitmap” albumBmp)
    若定义类型为private型则需要进行set,get方法的构建

2. 创建layout文件

用于歌曲列表样式布局**,代码如下:

<Linear Layout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

//运用相对布局文件
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

//创建列表歌曲间的横线
        <View
            android:id="@+id/list_column_v"
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:visibility="visible"
            >View>
//设置专辑图片样式
        <ImageView
            android:id="@+id/simple_cover_Iv"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignBottom="@+id/linearLayout"
            android:layout_marginStart="11dp"
            android:layout_toEndOf="@+id/list_column_v"
            android:src="@mipmap/default_cover" />
//运行线性布局文件进行TextView布局
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/simple_cover_Iv"
            android:orientation="vertical"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:id="@+id/linearLayout">
//创建歌曲名布局代码
            <TextView
                android:id="@+id/simple_name_Tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:text="Something just like this" />
//创建歌曲专辑及作者名代码
            <TextView
                android:id="@+id/simple_edit_Tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="Cold Player/The Chainsmokers" />
        LinearLayout>
//创建“更多选项”图片
        <ImageView
            android:id="@+id/simple_more_iv"
            android:layout_width="20dp"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:layout_marginRight="10dp"
            android:src="@mipmap/ic_music_list_icon_more" />

    RelativeLayout>


LinearLayout>

效果图如下
Android初级,实现网易云音乐歌曲列表界面效果,播放界面效果,ListView,ViewPager方法详解_第3张图片

3.ListView,ViewPager方法详解

流程:
1.类名继承BaseAdapter

public class MusicListAdapter extends BaseAdapter

2.定义List<实体类名>数组,Context用于承接;

private List music;
private Context context;

3.创建以上定义的构造方法

public MusicListAdapter(List music, Context context) {
        this.music = music;
        this.context = context;
    }

4.修改自动跳转构造方法中getCount方法

public int getCount() {
        return music.size();
    }

5.创建ViewHolder类

 class ViewHolder {
        TextView titleTv;
        TextView artistTv;
        TextView albumTv;
        ImageView albumBmp;
    }

6.修改getView方法,利用缓存原理

 public View getView(int i, View view, ViewGroup viewGroup) {
        View v ;
        ViewHolder viewHolder; //声明v 和 viewHolder
        //判断view是否为空,是否需要重新创建“扳手”来拧“螺丝”,即是否需要重新创建布局构造器
        if (view == null) {    
            v = LayoutInflater.from(context).inflate(R.layout.musci_item_layout,null);//创建布局构造器

            viewHolder = new ViewHolder();//缓存对象实例化
            viewHolder.titleTv = v.findViewById(R.id.simple_name_Tv);//绑定ID
            viewHolder.albumTv = v.findViewById(R.id.simple_edit_Tv);
            viewHolder.artistTv = v.findViewById(R.id.simple_edit_Tv);
            viewHolder.albumBmp = v.findViewById(R.id.simple_cover_Iv);
            v.setTag(viewHolder);

        } else {
            v = view;//创建行布局视图
            viewHolder = (ViewHolder) v.getTag();
        }

    }

此处为接收跳转页面后传递的歌曲名及专辑名的值,将在后面内容进行详解

 //
        Music m = music.get(i);
        viewHolder.titleTv.setText(m.title);
        viewHolder.albumTv.setText(m.artist+"-"+m.album);
        if (m.albumBmp != null)
        {
            viewHolder.albumBmp.setImageBitmap(m.albumBmp);
        }else{
            viewHolder.albumBmp.setImageResource(R.mipmap.default_cover);
        }

        return v;

**7.创建两个Fragement,用于页面滑动,建议读者创建时将最底下两个√去掉,避免累赘
在Fragment的layout文件中书写ListView方法,**

 <ListView
        android:id="@+id/fragment_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    ListView>

8.Main布局文件中-创建-两个-创建ViewPager
代码如下:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp">

        <TextView
            android:id="@+id/main_mymusic_tv"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="我的音乐"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/main_onlinemusic_tv"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="在线音乐"
            android:textSize="20sp" />

    LinearLayout>

9.MainActivity实现布局文件-创建统一绑定ID的方法

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView mymusicTv;//进行定义
    private TextView onlinemusicTv;
    private ViewPager viewPager;

    private List fragmentList = new ArrayList<>();

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

        linkID();//创建构造方法用于绑定ID
        mymusicTv.setOnClickListener(this);//设置监听事件
        onlinemusicTv.setOnClickListener(this);

        MyMusicFragment f1 = new MyMusicFragment();//将Fragment文件实例化
        OnlineMusicFragment f2 = new OnlineMusicFragment();

        fragmentList.add(f1);//将Fragment添加至列表
        fragmentList.add(f2);

        MusicPagerAdapter m1 = new MusicPagerAdapter(getSupportFragmentManager(),fragmentList);//创建适配器文件,绑定适配器
        viewPager.setAdapter(m1);
    }


    private void linkID() {//指向刚才的调用方法
        mymusicTv = findViewById(R.id.main_mymusic_tv);
        onlinemusicTv = findViewById(R.id.main_onlinemusic_tv);
        viewPager = findViewById(R.id.main_viewpager);
    }

10.创建Musicpager适配器,并将list内容传入到Fragment中

  • 继承FragmentPagerAdapter,private List创建数组,并创建此类继承后的构造方法
public class MyMusicFragment extends Fragment {

    private ListView listView;
    private List musicList = new ArrayList<>();

    public MyMusicFragment() {
        // Required empty public constructor
  • 在FragementActivity中声明view布局文件
  View view = inflater.inflate(R.layout.fragment_my_music, container, false);
  listView = view.findViewById(R.id.fragment_list);
  • 创建单独用于填充Fragment的方法
 fulllistview();

接下来将把获取手机中的音乐及填充Fragment一起书写

private void fulllistview() {//新创建的用于填充的方法


        //获取resolver对象:(用于获取手机中音乐文件)
        ContentResolver resolver = getContext().getContentResolver();
        //创建游标
        Cursor cursor = resolver.query(MediaStore.Audio.Media.EXTERNAL_CONTENT_URI, null, null, null, null);
        //游标移到第一行
        cursor.moveToFirst();

        do {
            Music m = new Music();//执行数据填充操作
            m.title = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.ALBUM));//根据Media获取相应数据
            m.artist = cursor.getString(cursor.getColumnIndex("artist"));//直接输入字符串(另一种写法)
            m.album = cursor.getString(cursor.getColumnIndex(MediaStore.Audio.Media.ALBUM));


            int albumId  = cursor.getInt(cursor.getColumnIndex(MediaStore.Audio.Media.ALBUM_ID));
            m.albumBmp = getAlbumArt(albumId);

            musicList.add(m);
        } while (cursor.moveToNext());

        cursor.close();
        MusicListAdapter musicListAdapter = new MusicListAdapter(musicList, getActivity());//绑定适配器
        listView.setAdapter(musicListAdapter);
    }

报错提示:

因获取本地音乐需要安全权限,但我们没有对此程序进行权限允许,所以会报接下里的错误:

Permission Denial: reading com.android.providers.media.MediaProvider

安卓6.0版本解决方法如下:

  • 在AndroidManifest.xml中插入如下代码:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

即可解决问题,如若手机版本为6.0以上版本,则需要获取动态权限,此处本文不做详解,请移步百度~
或参考3052world写的代码:
Android6.0权限分配终极解决方案

第一篇博客文章到此结束,希望对你能有帮助!

你可能感兴趣的:(android)