RadioGroup+ViewPager+Fragment的组合使用

1. 简介

上一个章节我们说了BottomNavigationView的基本使用,里面也配合了fragment。
连接:https://www.jianshu.com/p/3e73d9b3b459(BottomNavigationView的基本使用)
虽然只是简单的把代码列出来,基本原理是fragment的add的方法添加界面。

RadioGroup+ViewPager也可以做成BottomNavigationView的效果。左右的滑动,可以通过移动点的距离来判断,但是这个没有viewpager来的好。

这一章节介绍一下viewpager的使用list 类型的添加方式。
代码还是使用上一章讲的部分来继续。

下面是显示效果:
GIF.gif

2.布局




    

        

        

        
    

    

    


RadioButton如果只是想要显示文字,android:button可以设置成@null
RadioGroup是一个线性布局的类型,android:orientation可以设置

3.viewpager的适配器

public class WallpaperPaperAdapter extends FragmentPagerAdapter{

    private List mList;
    //传入一个list类型的数组
    public WallpaperPaperAdapter(FragmentManager fm, List 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的方式来添加,需要加载和销毁页面。所以需要加入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 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();
        //实例化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.两者都可以使用标签,但是app包下的fragment所在的activity继承Activity即可。v4包下的fragment所在的activity必须继承FragmentActivity,否则会报错。
4.getSupportFragmentManager()对应的是 v4 ;getFragmentManager()对应的是 app;

5.fragment的功能代码和布局

1.布局

为了简洁代码,这里直接写一个背景颜色。




    

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

你可能感兴趣的:(RadioGroup+ViewPager+Fragment的组合使用)