Android之Fragment+ViewPager实现点击+滑动界面切换学习笔记

Android之Fragment+ViewPager实现点击+滑动界面切换学习笔记

　　今天在上一个界面切换的基础上来添加一个功能，就是模仿微信滑动界面的切换，我们不仅可以点击下面的控件来选择我们的界面，而且可以自由的滑动切换界面，所有的功能我将通过在代码中添加注释来说明，这里的Fragment代码我就不重复写了，和上一个篇的Fragment代码是一样的，需要了解的请点击无滑动界面切换进行查看。
　　
　　先看一下显示效果：
　　
　　

MyAdapter.java

public class MyAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;
    public MyAdapter(FragmentManager fm,List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    /**
    * 返回对应位置的Fragment
    */
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    /**
    * 获取ViewPager显示的数量
    */
    @Override
    public int getCount() {
        return fragments == null ? 0 : fragments.size();
    }
}

MainActivity.java

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


    //指南页面常量
    private final int ZN = 0;
    //热门页面常量
    private final int RM = 1;
    //分类页面常量
    private final int FL = 2;
    //我的页面常量
    private final int WD = 3;

    //指南页面布局控件
    private LinearLayout mLinZN;
    //分类页面布局控件
    private LinearLayout mLinFL;
    //热门页面布局控件
    private LinearLayout mLinRM;
    //我的页面布局控件
    private LinearLayout mLinWD;

    //分类Fragment
    private Fragment mFLFragment;
    //指南Fragment
    private Fragment mZNFragment;
    //我的Fragment
    private Fragment mWDFragment;
    //热门Fragment
    private Fragment mRMFragment;

    //热门ImageButton控件
    private ImageButton mRMIBtn;
    //指南ImageButton控件
    private ImageButton mZNIBtn;
    //分类ImageButton控件
    private ImageButton mFLIBtn;
    //我的ImageButton控件
    private ImageButton mWDIBtn;

    //热门文字控件
    private TextView mRMTv;
    //指南文字控件
    private TextView mZNTv;
    //分类文字控件
    private TextView mFLTv;
    //我的文字控件
    private TextView mWDTv;

    //适配器数据集
    private List<Fragment> mFragments;
    //适配器对象
    private MyAdapter mAdapter;
    //ViewPager对象
    private ViewPager mViewPager;

    //上一个被选中的底部控件
    private int mPreviousItem;
    //当前被选中的底部控件
    private int mCurrentItem;

    @Override

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
        event();
        showViewPagerData(mFragments);
    }

    /**
     * 初始化所有控件
     */
    private void initView() {
        mLinZN = (LinearLayout) findViewById(R.id.mLinZN);
        mLinFL = (LinearLayout) findViewById(R.id.mLinFenLei);
        mLinRM = (LinearLayout) findViewById(R.id.mLinReMen);
        mLinWD = (LinearLayout) findViewById(R.id.mLinUser);
        mRMIBtn = (ImageButton) findViewById(R.id.mBtnRM);
        mZNIBtn = (ImageButton) findViewById(R.id.mBtnZN);
        mFLIBtn = (ImageButton) findViewById(R.id.mBtnFL);
        mWDIBtn = (ImageButton) findViewById(R.id.mBtnWD);
        mRMTv = (TextView) findViewById(R.id.mTvReMen);
        mZNTv = (TextView) findViewById(R.id.mTvZhiNan);
        mFLTv = (TextView) findViewById(R.id.mTvFenLei);
        mWDTv = (TextView) findViewById(R.id.mTvUser);
        mViewPager = (ViewPager) findViewById(R.id.mViewPager);
    }

    /**
     * 初始化ViewPager上要显示的所有Fragment数据
     */
    private void initData() {
        mFragments = new ArrayList<>();
        if (mZNFragment == null) {
            mZNFragment = new ZNFragment();
            mFragments.add(mZNFragment);
        }
        if (mRMFragment == null) {
            mRMFragment = new RMFragment();
            mFragments.add(mRMFragment);
        }
        if (mFLFragment == null) {
            mFLFragment = new FLFragment();
            mFragments.add(mFLFragment);
        }
        if (mWDFragment == null) {
            mWDFragment = new WDFragment();
            mFragments.add(mWDFragment);
        }
    }

    private void showViewPagerData(List<Fragment> fragments) {
        if (mAdapter == null) {
            //设置对应的适配器
            mAdapter = new MyAdapter(getSupportFragmentManager(), fragments);
            mViewPager.setAdapter(mAdapter);
        } else {
            //这里是更新数据时，刷新ViewPager显示的数据
            mFragments.addAll(fragments);
            mAdapter.notifyDataSetChanged();
        }
    }

    /**
     * 初始化事件
     */
    private void event() {
        mLinFL.setOnClickListener(this);
        mLinRM.setOnClickListener(this);
        mLinWD.setOnClickListener(this);
        mLinZN.setOnClickListener(this);
        mViewPager.addOnPageChangeListener(this);
    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.mLinFenLei:
                //当前控件项减去上一次的控件项，表示的就是他们之间的一个偏移量
                //例如上一次控件选中的是第3个item，当前要选择的是第0个，则相减
                //之后的偏移量为FL - mPreviousItem = 0 - 3 = -3
                int disItem = FL - mPreviousItem;
                //然后设置当前被选择的是第几项，mViewPager.getCurrentItem()获取的是当前
                // 选中的为3，即mViewPager.getCurrentItem() + disItem = 3 + (-3) = 0
                //拿到当前需要被选择的位置后，设置一下即可
                mCurrentItem = mViewPager.getCurrentItem() + disItem;
                break;
            case R.id.mLinReMen:
                disItem = RM - mPreviousItem;
                mCurrentItem = mViewPager.getCurrentItem() + disItem;
                break;
            case R.id.mLinUser:
                disItem = WD - mPreviousItem;
                mCurrentItem = mViewPager.getCurrentItem() + disItem;
                break;
            case R.id.mLinZN:
                disItem = ZN - mPreviousItem;
                mCurrentItem = mViewPager.getCurrentItem() + disItem;
                break;
        }
        //先隐藏上一个被选中的控件的为未选中状态，就是改变上一个控件显示的颜色
        hidePreviousColor(mPreviousItem);
        //设置当前被选中的控件为选中状态，改变颜色为橙色
        setCurrentItem(mCurrentItem);
    }


    private void setCurrentItem(int current) {
        //每次先隐藏上一个控件
        hidePreviousColor(mPreviousItem);
        switch (current) {
            case ZN:
                //设置对应的
                mZNTv.setTextColor(getResources().getColor(R.color.pressed));
                mZNIBtn.setBackgroundResource(R.mipmap.zhinan_pressed);
                break;
            case RM:
                mRMTv.setTextColor(getResources().getColor(R.color.pressed));
                mRMIBtn.setBackgroundResource(R.mipmap.remen_pressed);
                break;
            case FL:
                mFLTv.setTextColor(getResources().getColor(R.color.pressed));
                mFLIBtn.setBackgroundResource(R.mipmap.fenlei_pressed);
                break;
            case WD:
                mWDTv.setTextColor(getResources().getColor(R.color.pressed));
                mWDIBtn.setBackgroundResource(R.mipmap.user_pressed);
                break;

        }
        mViewPager.setCurrentItem(current);
    }

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

    }

    @Override
    public void onPageSelected(int position) {
        //记录当前的位置
        mCurrentItem = position;
        //隐藏上一次的位置
        hidePreviousColor(mPreviousItem);
        //设置上一个控件的位置
        mPreviousItem = mCurrentItem;
        //设置当前需要选择的控件
        setCurrentItem(mCurrentItem);
    }

    /**
     * 隐藏上一个被选中的控件的橙色颜色，设置为未选中的灰色颜色
     * @param previousItem
     */
    private void hidePreviousColor(int previousItem) {
        Log.d("IT_Real", "hidePreviousColor: current = " + mCurrentItem + "previous = " + previousItem);
        switch (previousItem) {
            case FL:
                mFLTv.setTextColor(getResources().getColor(R.color.normal));
                mFLIBtn.setBackgroundResource(R.mipmap.fenlei_normal);
                break;
            case ZN:
                mZNTv.setTextColor(getResources().getColor(R.color.normal));
                mZNIBtn.setBackgroundResource(R.mipmap.zhinan_normal);
                break;
            case RM:
                mRMTv.setTextColor(getResources().getColor(R.color.normal));
                mRMIBtn.setBackgroundResource(R.mipmap.remen_normal);
                break;
            case WD:
                mWDTv.setTextColor(getResources().getColor(R.color.normal));
                mWDIBtn.setBackgroundResource(R.mipmap.user_normal);
                break;
        }
    }


    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

基本功能就已经实现了,对于不同的项目有不同的需求，有些项目不需要滑动切换界面，所以根据具体的项目需求选择即可。需要源代码的请点击获取源代码进行下载