基于android的网络音乐播放器-添加viewpager和fragment实现滑动切换多个界面(二)
2017-03-31 16:19
766 查看
作为android初学者,最近把疯狂android讲义和疯狂Java讲义看了一遍,看到书中介绍的知识点非常多,很难全部记住,为了更好的掌握基础知识点,我将开发一个网络音乐播放器-EasyMusic来巩固下,也当作是练练手。感兴趣的朋友可以看看,有设计不足的地方也欢迎指出。
开发之前首先介绍下该音乐播放器将要开发的功能(需求):
1.本地音乐的加载和播放;
2.网络音乐的搜索,试听和下载;
3.音乐的断点下载;
4.点击播放图标加载专辑图片,点击歌词加载歌词并滚动显示(支持滑动歌词改变音乐播放进度);
5.支持基于popupWindow的弹出式菜单;
6.支持后台任务栏显示和控制。
该篇主要介绍采用viewpager和fragment组合成多个可以滑动切换的界面,采用这种界面的话我们的MainActivity需要改为继承FragmentActivity,主要修改如下:
MainActivity中添加ViewPager(需要配置FragmentPagerAdapter)和Fragment:
这样添加之后就可以实现多个fragment之间滑动切换的界面了,我们可以发现viewpager其实并不复杂,它跟listview非常像——都需要设置adapter,而它们的adapter中的getView或getFragment方法返回的是当前的视图,我们写的自定义adapter也主要是重写该方法。
MainActivity的布局也相应的改下(去掉音乐列表listview-后面将音乐列表移到musicListFragment中,然后添加ViewPager)
为了展示了界面切换的效果,几个Fragment先简单的写下就行,暂时写的都差不多,以DownloadFragment为例,代码如下:
这样虽然可以看到界面切换的效果,但是几个fragment都没有标题所以切换的效果有点欠佳;我们这里考虑采用几个textview分别代表加个fragment-在音乐列表的上方放置几个textView(有对应的标题文字),下方放置一条红线(其实也是textView),当前切换到哪个fragment就让红线滚动到对应的标题下方,这样会让fragment的切换效果更好,修改后的MainActivity的布局如下:
该文就先介绍到这里了,后面一篇将介绍把音乐列表移到MusicListFragment中,这样更方便我们的MainAtivity对几个fragment的管理,音乐列表移到MusicListFragment中后,我们的音乐列表点击播放需要用到回调监听。
音乐播放器已完成,下载地址:
Android音乐播放器
开发之前首先介绍下该音乐播放器将要开发的功能(需求):
1.本地音乐的加载和播放;
2.网络音乐的搜索,试听和下载;
3.音乐的断点下载;
4.点击播放图标加载专辑图片,点击歌词加载歌词并滚动显示(支持滑动歌词改变音乐播放进度);
5.支持基于popupWindow的弹出式菜单;
6.支持后台任务栏显示和控制。
该篇主要介绍采用viewpager和fragment组合成多个可以滑动切换的界面,采用这种界面的话我们的MainActivity需要改为继承FragmentActivity,主要修改如下:
MainActivity中添加ViewPager(需要配置FragmentPagerAdapter)和Fragment:
public class MainActivity extends FragmentActivity { ...... private ViewPager mViewPager; private SectionsPagerAdapter mSectionsPagerAdapter; ...... mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager()); mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mSectionsPagerAdapter); ...... public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { Fragment fragment = null; switch (position) { case 0: fragment = new MusicListFragment(); break; case 1: fragment = new StoredSongFragment(); break; case 2: fragment = new NetFragment(); break; case 3: fragment = new DownloadFragment(); break; } return fragment; } @Override public int getCount() { return FRAGMENT_COUNT; } @Override public CharSequence getPageTitle(int position) { Locale l = Locale.getDefault(); switch (position) { case 0: return getString(R.string.title_section1).toUpperCase(l); case 1: return getString(R.string.title_section2).toUpperCase(l); case 2: return getString(R.string.title_section3).toUpperCase(l); case 3: return getString(R.string.title_section4).toUpperCase(l); } return null; } } }
这样添加之后就可以实现多个fragment之间滑动切换的界面了,我们可以发现viewpager其实并不复杂,它跟listview非常像——都需要设置adapter,而它们的adapter中的getView或getFragment方法返回的是当前的视图,我们写的自定义adapter也主要是重写该方法。
MainActivity的布局也相应的改下(去掉音乐列表listview-后面将音乐列表移到musicListFragment中,然后添加ViewPager)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.sprd.easymusic.MainActivity" > <android.support.v4.view.ViewPager xmlns:tools="http://schemas.android.com/tools" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="20" android:background="#afeeee" android:alpha="0.8" tools:context=".MainActivity" > </android.support.v4.view.ViewPager> </LinearLayout>
为了展示了界面切换的效果,几个Fragment先简单的写下就行,暂时写的都差不多,以DownloadFragment为例,代码如下:
package com.sprd.easymusic.fragment; import android.app.Activity; import android.graphics.Color; import android.support.v4.app.Fragment; import android.os.Bundle; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class DownloadFragment extends Fragment { private final String TAG = "DownloadFragment"; public void onAttach(Activity activity) { super.onAttach(activity); } public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Log.d(TAG, "onCreate"); } //DownloadFragment向外界展示的内容 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { TextView tv = new TextView(this.getActivity()); tv.setBackgroundColor(Color.MAGENTA); tv.setTex caf2 t("DownloadFragment"); //先简单返回一个TextView(View的子类)看下切换效果 return tv; } public void onDestroy() { super.onDestroy(); } }
这样虽然可以看到界面切换的效果,但是几个fragment都没有标题所以切换的效果有点欠佳;我们这里考虑采用几个textview分别代表加个fragment-在音乐列表的上方放置几个textView(有对应的标题文字),下方放置一条红线(其实也是textView),当前切换到哪个fragment就让红线滚动到对应的标题下方,这样会让fragment的切换效果更好,修改后的MainActivity的布局如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.sprd.easymusic.MainActivity" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" > <TextView android:id="@+id/fragment1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/musicListFragment" android:textSize="15sp" /> <TextView android:id="@+id/fragment2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/storedMusicFragment" android:textSize="15sp" /> <TextView android:id="@+id/fragment3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/netFragment" android:textSize="15sp" /> <TextView android:id="@+id/fragment4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="@string/downloadFragment" android:textSize="15sp" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="3dp" android:gravity="center" > <!-- 该textview作为红线移动到当前fragment下 --> <TextView android:id="@+id/fragmentTitle" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#f00" /> <TextView android:id="@+id/textView6" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="3"/> </LinearLayout> <android.support.v4.view.ViewPager xmlns:tools="http://schemas.android.com/tools" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="20" android:alpha="0.8" android:background="#afeeee" tools:context=".MainActivity" > </android.support.v4.view.ViewPager> </LinearLayout>
该文就先介绍到这里了,后面一篇将介绍把音乐列表移到MusicListFragment中,这样更方便我们的MainAtivity对几个fragment的管理,音乐列表移到MusicListFragment中后,我们的音乐列表点击播放需要用到回调监听。
音乐播放器已完成,下载地址:
Android音乐播放器
相关文章推荐
- Android之Fragment+ViewPager实现点击+滑动界面切换学习笔记
- Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android App中使用ViewPager+Fragment实现滑动切换效果
- Android 使用ViewPager和RadioGroup配合Fragment实现标签页,可点击按钮切换、滑动切换。
- Android:详情界面左右滑动看更多,ViewPager动态添加Fragment,仿51job详情界面
- Android ViewPager和Fragment实现仿微信导航界面及滑动效果
- Android 通过ViewPager实现点击和滑动切换Fragment标签页
- Android ViewPager加Fragment实现滑动或者点击页面切换
- Android实战简易教程<三十四>(基于ViewPager和FragmentPagerAdapter实现滑动通用Tab)
- Android 实现多页界面左右滑动切换效果之入门+进阶 (ViewPager+PagerAdapter)
- android使用viewPager和Fragment实现滑动切换activity!
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
- Fragment+ViewPager实现仿微信点击和滑动切换界面