Android开发实现底部导航栏+ViewPager滑动切换（记录一下）

        底部导航栏两种方式做，OK，没啥问题；ViewPager，页面滑动切换组件，主要是要实现自定义的MyPagerAdapter继承于PagerAdapter，并且重写相应的方法即可。这个也没啥问题，忘记的话，看一下之前的博文：https://blog.csdn.net/lpcrazyboy/article/details/80772216

这次实现的底部导航栏+ViewPager滑动切换效果，用到了Fragment（片段），所以这次MyPagerAdapter继承自FragmentPagerAdapter。然后重写其中的getItem()方法，返回值是一个Fragment对象。（很好用吧）

先上效果图：

布局样式就不贴了，查看之前的关于底部导航栏的博文即可。

1、MyFragmentPagerAdapter.java的代码如下：

 

package com.deepreality.fragmentcasethreedemo;

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

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private final int PAGER_COUNT = 4;
    private MyFragmentOne myFragment1 = null;
    private MyFragmentTwo myFragment2 = null;
    private MyFragmentThree myFragment3 = null;
    private MyFragmentFour myFragment4 = null;

    public MyFragmentPagerAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
        myFragment1 = new MyFragmentOne();
        myFragment2 = new MyFragmentTwo();
        myFragment3 = new MyFragmentThree();
        myFragment4 = new MyFragmentFour();
    }

    @Override
    public int getCount() {
        return PAGER_COUNT;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        return super.instantiateItem(container, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case MainActivity.PAGE_ONE:
                fragment = myFragment1;
                break;
            case MainActivity.PAGE_TWO:
                fragment = myFragment2;
                break;
            case MainActivity.PAGE_THREE:
                fragment = myFragment3;
                break;
            case MainActivity.PAGE_FOUR:
                fragment = myFragment4;
                break;
        }
        return fragment;
    }
}

其中，每一个Fragment界面，MyFragmentOne.java的代码如下：

 

package com.deepreality.fragmentcasethreedemo;

import android.support.v4.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class MyFragmentOne extends Fragment {

    private Context mContext;
    private TextView tvFragmentTitle;

    public MyFragmentOne() {

    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_my, container, false);
        tvFragmentTitle = view.findViewById(R.id.my_tvFragmentTitle);
        tvFragmentTitle.setText("第一个Fragment！");
        return view;
    }
}

剩下的就是MainActivity.java的代码如下：

 

package com.deepreality.fragmentcasethreedemo;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {

    //几个代表页面的常量
    public static final int PAGE_ONE = 0;
    public static final int PAGE_TWO = 1;
    public static final int PAGE_THREE = 2;
    public static final int PAGE_FOUR = 3;

    private RelativeLayout rLayoutTabMenuChannel, rLayoutTabMenuMessage, rLayoutTabMenuBetter, rLayoutTabMenuMy;
    private ViewPager vPagerNavigation;
    private TextView tvTabMenuChannel, tvTabMenuChannelNum, tvTabMenuMessage, tvTabMenuMessageNum, tvTabMenuBetter,
            tvTabMenuBetterNum, tvTabMenuMy, tvTabMenuMyNum;
    private MyFragmentPagerAdapter myFragmentPagerAdapter;

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

        //因为是用的V4的ViewPager
        myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
        bindView();
        tvTabMenuChannel.setSelected(true);
    }

    private void bindView() {
        rLayoutTabMenuChannel = findViewById(R.id.main_rLayoutTabMenuItemChannel);
        rLayoutTabMenuMessage = findViewById(R.id.main_rLayoutTabMenuItemMessage);
        rLayoutTabMenuBetter = findViewById(R.id.main_rLayoutTabMenuItemBetter);
        rLayoutTabMenuMy = findViewById(R.id.main_rLayoutTabMenuItemMy);
        tvTabMenuChannel = findViewById(R.id.main_tvTabMenuItemChannel);
        tvTabMenuChannelNum = findViewById(R.id.main_tvTabMenuItemChannelNum);
        tvTabMenuMessage = findViewById(R.id.main_tvTabMenuItemMessage);
        tvTabMenuMessageNum = findViewById(R.id.main_tvTabMenuItemMessageNum);
        tvTabMenuBetter = findViewById(R.id.main_tvTabMenuItemBetter);
        tvTabMenuBetterNum = findViewById(R.id.main_tvTabMenuItemBetterNum);
        tvTabMenuMy = findViewById(R.id.main_tvTabMenuItemMy);
        tvTabMenuMyNum = findViewById(R.id.main_tvTabMenuItemMyNum);

        vPagerNavigation = findViewById(R.id.main_vPagerNavigation);
        vPagerNavigation.setAdapter(myFragmentPagerAdapter);
        //设置当前页的ID
        vPagerNavigation.setCurrentItem(0);
        //添加翻页监听事件
        vPagerNavigation.addOnPageChangeListener(this);

        rLayoutTabMenuChannel.setOnClickListener(this);
        rLayoutTabMenuMessage.setOnClickListener(this);
        rLayoutTabMenuBetter.setOnClickListener(this);
        rLayoutTabMenuMy.setOnClickListener(this);
    }

    private void resetSelected() {
        tvTabMenuChannel.setSelected(false);
        tvTabMenuMessage.setSelected(false);
        tvTabMenuBetter.setSelected(false);
        tvTabMenuMy.setSelected(false);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.main_rLayoutTabMenuItemChannel:{
                resetSelected();
                tvTabMenuChannel.setSelected(true);
                vPagerNavigation.setCurrentItem(PAGE_ONE);
                break;
            }
            case R.id.main_rLayoutTabMenuItemMessage:{
                resetSelected();
                tvTabMenuMessage.setSelected(true);
                vPagerNavigation.setCurrentItem(PAGE_TWO);
                break;
            }
            case R.id.main_rLayoutTabMenuItemBetter:{
                resetSelected();
                tvTabMenuBetter.setSelected(true);
                vPagerNavigation.setCurrentItem(PAGE_THREE);
                break;
            }
            case R.id.main_rLayoutTabMenuItemMy:{
                resetSelected();
                tvTabMenuMy.setSelected(true);
                vPagerNavigation.setCurrentItem(PAGE_FOUR);
                break;
            }
            default:break;
        }
    }

    //重写ViewPager页面切换的处理方法
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //state的状态有三个，0表示什么都没做，1正在滑动，2滑动完毕
        if (state == 2) {
            switch (vPagerNavigation.getCurrentItem()) {
                case PAGE_ONE:{
                    resetSelected();
                    tvTabMenuChannel.setSelected(true);
                    break;
                }
                case PAGE_TWO:{
                    resetSelected();
                    tvTabMenuMessage.setSelected(true);
                    break;
                }
                case PAGE_THREE:{
                    resetSelected();
                    tvTabMenuBetter.setSelected(true);
                    break;
                }
                case PAGE_FOUR:{
                    resetSelected();
                    tvTabMenuMy.setSelected(true);
                    break;
                }
            }
        }
    }
}

完整Demo地址：https://download.csdn.net/download/lpcrazyboy/10515883

代码优化版：

效果图如下：

参考文档：https://blog.csdn.net/lpCrazyBoy/article/details/80883631

一、ViewPagerAdapter.java适配器的代码如下：

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private List fragmentList;

    public ViewPagerAdapter(FragmentManager fm, List fragmentList) {
        super(fm);
        this.fragmentList = fragmentList;
    }

    public ViewPagerAdapter(FragmentManager supportFragmentManager) {
        super(supportFragmentManager);
    }

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

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

二、相应的Activity代码如下：

public class ViewPagerAndFragmentActivity extends BaseActivity implements ViewPager.OnPageChangeListener, RadioGroup.OnCheckedChangeListener {

    private Context mContext;

    private ViewPager viewPager;
    private RadioGroup radioGroup;

    private FragmentOne fragmentOne;
    private FragmentTwo fragmentTwo;
    private FragmentThree fragmentThree;
    private FragmentFour fragmentFour;

    private List fragmentList;
    private ViewPagerAdapter viewPagerAdapter;

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

        baseDataInit();
        bindViews();
        viewsAddListener();
        viewsDataInit();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void baseDataInit() {
        mContext = this;
        fragmentOne = new FragmentOne();
        fragmentTwo = new FragmentTwo();
        fragmentThree = new FragmentThree();
        fragmentFour = new FragmentFour();

        fragmentList = new ArrayList<>();
        fragmentList.add(fragmentOne);
        fragmentList.add(fragmentTwo);
        fragmentList.add(fragmentThree);
        fragmentList.add(fragmentFour);
    }

    @Override
    public void bindViews() {
        viewPager = findViewById(R.id.ViewPagerAndFragment_vPager);
        radioGroup = findViewById(R.id.ViewPagerAndFragment_rGroup);
    }

    @Override
    public void viewsAddListener() {
        viewPager.addOnPageChangeListener(this);
        radioGroup.setOnCheckedChangeListener(this);
    }

    @Override
    public void viewsDataInit() {
        viewPagerSetAdapter();
        ((RadioButton)(radioGroup.getChildAt(0))).setChecked(true);
        changeTextColor(radioGroup.getChildAt(0).getId());
    }

    /**
     * ViewPager设置适配器
     */
    private void viewPagerSetAdapter() {
        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragmentList);
        viewPager.setAdapter(viewPagerAdapter);
    }

    /**
     * 初始化RadioButton文本字体颜色
     */
    private void rGroupTextColorInit() {
        for (int i = 0; i < radioGroup.getChildCount(); i ++) {
            ((RadioButton)(radioGroup.getChildAt(i))).setTextColor(getResources().getColor(R.color.colorBlack));
        }
    }

    /**
     * 改变RadioButton文本字体颜色
     *
     * @param checkId
     */
    private void changeTextColor(int checkId) {
        rGroupTextColorInit();
        ((RadioButton)(findViewById(checkId))).setTextColor(getResources().getColor(R.color.colorLightBlueFB));
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {
        if (state == 2) {
            ((RadioButton)(radioGroup.getChildAt(viewPager.getCurrentItem()))).setChecked(true);
            changeTextColor(radioGroup.getChildAt(viewPager.getCurrentItem()).getId());
        }
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        changeTextColor(checkedId);
        switch (checkedId) {
            case R.id.ViewPagerAndFragment_rBtn1: {
                viewPager.setCurrentItem(0, true);
                break;
            }
            case R.id.ViewPagerAndFragment_rBtn2: {
                viewPager.setCurrentItem(1, true);
                break;
            }
            case R.id.ViewPagerAndFragment_rBtn3: {
                viewPager.setCurrentItem(2, true);
                break;
            }
            case R.id.ViewPagerAndFragment_rBtn4: {
                viewPager.setCurrentItem(3, true);
                break;
            }
            default:break;
        }
    }
}