1. 简介
上一个章节我们说了BottomNavigationView的基本使用，里面也配合了fragment。
连接：https://www.jianshu.com/p/3e73d9b3b459（BottomNavigationView的基本使用）
虽然只是简单的把代码列出来，基本原理是fragment的add的方法添加界面。
RadioGroup+ViewPager也可以做成BottomNavigationView的效果。左右的滑动，可以通过移动点的距离来判断，但是这个没有viewpager来的好。
这一章节介绍一下viewpager的使用list<Fragment> 类型的添加方式。
代码还是使用上一章讲的部分来继续。
GIF.gif
2.布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RadioGroup
android:id="@+id/wallpaper_rg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/recommend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:gravity="center"
android:text="@string/recommend"
android:textColor="#000000"
android:textSize="20sp" />
<RadioButton
android:id="@+id/classification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:button="@null"
android:gravity="center"
android:text="@string/classification"
android:textColor="@color/wallpaper_title"
android:textSize="16sp" />
<RadioButton
android:id="@+id/local"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:button="@null"
android:gravity="center"
android:text="@string/local"
android:textColor="@color/wallpaper_title"
android:textSize="16sp" />
</RadioGroup>
<android.support.v4.view.ViewPager
android:id="@+id/wallpaper_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp">
</android.support.v4.view.ViewPager>
</LinearLayout>
RadioButton如果只是想要显示文字，android:button可以设置成@null
RadioGroup是一个线性布局的类型，android:orientation可以设置
3.viewpager的适配器
public class WallpaperPaperAdapter extends FragmentPagerAdapter{
private List<Fragment> mList;
//传入一个list<Fragment>类型的数组
public WallpaperPaperAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.mList = list;
}
//返回数组的长度
@Override
public int getCount() {
return mList.size();
}
//得到当前的position
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
}
因为是通过list<view>的方式来添加，需要加载和销毁页面。所以需要加入instantiateItem方法和destroyItem方法
4.viewpager切换fragment的代码
public class WallpaperFragment extends Fragment implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {
private View wallpaperView;
private RadioButton mRecommend;
private RadioButton mClassification;
private RadioButton mLocal;
private RadioGroup mWallpaperRg;
private ViewPager mWallpaperVp;
private List<Fragment> mList;
//3个fragment的定义
private Fragment_Recommend fragment_recommend;
private Fragment_Classification fragment_classification;
private Fragment_Local fragment_local;
//适配器的定义
private WallpaperPaperAdapter wallpaperPaperAdapter;
//定义绘制文字的画笔
private TextPaint textPaint;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
wallpaperView = inflater.inflate(R.layout.fragment_wallpaper, container, false);
initData();
initView();
return wallpaperView;
}
private void initView() {
mRecommend = (RadioButton) wallpaperView.findViewById(R.id.recommend);
mClassification = (RadioButton) wallpaperView.findViewById(R.id.classification);
mLocal = (RadioButton) wallpaperView.findViewById(R.id.local);
mWallpaperRg = (RadioGroup) wallpaperView.findViewById(R.id.wallpaper_rg);
mWallpaperVp = (ViewPager) wallpaperView.findViewById(R.id.wallpaper_vp);
//radiogroup的点击事件
mWallpaperRg.setOnCheckedChangeListener(this);
//添加适配器
mWallpaperVp.setAdapter(wallpaperPaperAdapter);
//这里没有使用setOnPageChangeListener来设置是因为，setOnPageChangeListener已经过时，显示使用addOnPageChangeListener也是一样的效果，用法不变
mWallpaperVp.addOnPageChangeListener(this);
}
private void initData() {
mList = new ArrayList<Fragment>();
//实例化List数组
fragment_recommend = new Fragment_Recommend();
fragment_classification = new Fragment_Classification();
fragment_local = new Fragment_Local();
//添加到数组中
mList.add(fragment_recommend);
mList.add(fragment_classification);
mList.add(fragment_local);
//把list传给适配器
wallpaperPaperAdapter = new WallpaperPaperAdapter(getChildFragmentManager(), mList);
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
clearState();
switch (checkedId) {
case R.id.recommend:
Log.d("lcr", "mWallpaperVp 0 ->");
mWallpaperVp.setCurrentItem(0);
mRecommend.setTextColor(Color.BLACK);
mRecommend.setTextSize(20);
textPaint = mRecommend.getPaint();
textPaint.setFakeBoldText(true);
break;
case R.id.classification:
Log.d("lcr", "mWallpaperVp 1 ->");
mWallpaperVp.setCurrentItem(1);
mClassification.setTextColor(Color.BLACK);
mClassification.setTextSize(20);
textPaint = mClassification.getPaint();
textPaint.setFakeBoldText(true);
break;
case R.id.local:
Log.d("lcr", "mWallpaperVp 2 ->");
mWallpaperVp.setCurrentItem(2);
mLocal.setTextColor(Color.BLACK);
mLocal.setTextSize(20);
textPaint = mLocal.getPaint();
textPaint.setFakeBoldText(true);
break;
default:
break;
}
}
//滑动过程中的动作
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//选择某个页面松手后会被调用
@Override
public void onPageSelected(int position) {
clearState();
switch (position) {
case 0:
//这里必须设置一下setChecked，不然当viewpager滑动到最右边，无法点击最左边的那个radiogroup里面的radiobutton
mRecommend.setChecked(true);
mRecommend.setTextColor(Color.BLACK);
mRecommend.setTextSize(20);
textPaint = mRecommend.getPaint();
textPaint.setFakeBoldText(true);
break;
case 1:
mClassification.setChecked(true);
mClassification.setTextColor(Color.BLACK);
mClassification.setTextSize(20);
textPaint = mClassification.getPaint();
textPaint.setFakeBoldText(true);
break;
case 2:
mLocal.setChecked(true);
mLocal.setTextColor(Color.BLACK);
mLocal.setTextSize(20);
textPaint = mLocal.getPaint();
textPaint.setFakeBoldText(true);
break;
default:
break;
}
}
//手指放上去，松开，拖动都会被调用
//state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
@Override
public void onPageScrollStateChanged(int state) {
}
//初始化底部导航栏
private void clearState() {
mRecommend.setTextColor(getResources().getColor(R.color.wallpaper_title));
mClassification.setTextColor(getResources().getColor(R.color.wallpaper_title));
mLocal.setTextColor(getResources().getColor(R.color.wallpaper_title));
mRecommend.setTextSize(16);
mClassification.setTextSize(16);
mLocal.setTextSize(16);
//设置文字加粗
textPaint = mRecommend.getPaint();
textPaint.setFakeBoldText(false);
textPaint = mClassification.getPaint();
textPaint.setFakeBoldText(false);
textPaint = mLocal.getPaint();
textPaint.setFakeBoldText(false);
}
}
功能代码部分，我已经做了一些注释。
注意：这里的Fragment都是导入的v4的包
这里有好一个比较好的介绍，来自 作者：南顾夏浅
链接：https://www.jianshu.com/p/5d06e6faf155
app包下的fragment和v4包下fragment的区别
1.app包中的fragment在3.0以上才可以使用，最好使用兼容低版本的。
2.v4包下的可以兼容到 1.6版本。
3.两者都可以使用<fragment>标签，但是app包下的fragment所在的activity继承Activity即可。v4包下的fragment所在的activity必须继承FragmentActivity，否则会报错。
4.getSupportFragmentManager（）对应的是 v4 ；getFragmentManager（）对应的是 app；
5.fragment的功能代码和布局
1.布局
为了简洁代码，这里直接写一个背景颜色。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#9b1010" />
</LinearLayout>
2.功能代码
只是一个简单的Fragment，其他的页面也可以直接复制
public class Fragment_Classification extends Fragment {
private View myView;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
myView = inflater.inflate(R.layout.wallpaper_classification, container, false);
return myView;
}
}
6.小结
1. viewpager的适配器是继承FragmentPagerAdapter的
如果继承PagerAdapter那么可以做成一个滚动的导航栏
2.viewpager的点击事件函数设置成addOnPageChangeListener，与原来的setOnPageChangeListener用法一样，但是setOnPageChangeListener已过时
3.viewpager滑动时，需要对radiogroup设置setChecked，不设置可能无法点击
7.Githup的下载地址
https://github.com/githubsmallluo/ViewPager04.git
可以给作者评论，关注加喜欢吗？
QAQ.jpg
