ViewPager+Fragment实现页面滑动效果

简单使用XML文件，使用ViewPagerAdapter适配器，来适配不同的page

具体实现方法：

设置相应的xml文件，几个page以及title和bottom
在MainActivity.xml中加入Title和bottom还有viewPager
在MainActivity中初始化相应的View，实现ViewPager需要实现的Adapter其中需要复写几个方法

destroyItem(), 移除指定位置的页面。该 Adapter 负责在 finishUpdate() 方法返回时从容器删除视图。
container.removeView(mViews.get(position));
instantiateItem(), 创建指定位置的页面，该 Adapter 负责将视图添加进当前的容器（container），并返回一个键（key），用来关联当前的页面视图 View.直接在mViews里面取出相应的View，并且在container里面添加进去

View view = mViews.get(position);container.addView(view);return view;```
   getCount(), 返回可用视图的数量。
   isViewFromObject(),判断instantiateItem(ViewGroup, int) 方法所返回来的 Key 与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)。
   ```java
@Override
   public boolean isViewFromObject(View view, Object object) {
   return view == object;
   }```
- 现在实现初始化View的方法

  //初始化View，包括ViewPager和相应的几个控件
  private void initView() {
    mViewPager = (ViewPager) findViewById(R.id.view_pager);
    mTabWinxin = (LinearLayout) findViewById(R.id.id_tab_weixin);
    mTabWinAddres = (LinearLayout) findViewById(R.id.id_tab_contacts);
    mTabWinFrd = (LinearLayout) findViewById(R.id.id_tab_friend);
    mTabWinSetting = (LinearLayout) findViewById(R.id.id_tab_setting);

    mWinxinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
    mAddresImg = (ImageButton) findViewById(R.id.id_tab_contacts_img);
    mFrdImg = (ImageButton) findViewById(R.id.id_tab_friend_img);
    mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img);

    LayoutInflater mInflater = LayoutInflater.from(this);
    View tab01 = mInflater.inflate(R.layout.tab01, null);
    View tab02 = mInflater.inflate(R.layout.tab02, null);
    View tab03 = mInflater.inflate(R.layout.tab03, null);
    View tab04 = mInflater.inflate(R.layout.tab04, null);
    mViews.add(tab01);
    mViews.add(tab02);
    mViews.add(tab03);
    mViews.add(tab04);

    mAdapter = new PagerAdapter() {

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = mViews.get(position);
            container.addView(view);
            return view;
        }

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

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    };

    mViewPager.setAdapter(mAdapter);

}```

到现在，我们就实现了Viewpager的滑动，但是底部栏的变化和点击事件都没有写，下面对LinearLayout写入点击事件（如果LinearLayout里面有Button的点击冲突事件，那么要在Button里面写入Clickable为false，因为Layout首先处理有点击事件的控件）

private void initEvent() {
        //处理每一个的LinearLayout的点击事件
        mTabWinxin.setOnClickListener(this);
        mTabWinAddres.setOnClickListener(this);
        mTabWinFrd.setOnClickListener(this);
        mTabWinSetting.setOnClickListener(this);

        /**
         * 在设置好每次点击Bottom的点击事件后，如果想要拖动ViewPager同时bottom也发生改变
         * 那么就要重写PageChangeListener的PageSelected方法
         * 让在PageChange页面改变的时候，改变Bottom的图片
         *
         * Notice 注意SetOnPageChangeListener已经遗弃，用AddOnPageChangeListener替换
         */
        ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                int currentItem = mViewPager.getCurrentItem();
                resetImg();
                switch (currentItem) {
                    case 0:
                        mWinxinImg.setImageResource(R.drawable.tab_weixin_pressed);
                        break;
                    case 1:
                        mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);

                        break;
                    case 2:
                        mAddresImg.setImageResource(R.drawable.tab_address_pressed);
                        break;
                    case 3:
                        mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                        break;

                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        };
        mViewPager.addOnPageChangeListener(listener);
    }

注意Activity实现OnClickListener方法，重写OnClick()方法，当每次监听到点击事件，都会实现resetImg()方法，即重置每一个ImageButton成灰色，然后监听到的那个按钮的点击，即将那个ImageButton换成亮色

@Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.id_tab_weixin:
                mViewPager.setCurrentItem(0);
                mWinxinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case R.id.id_tab_contacts:
                mViewPager.setCurrentItem(2);
                mAddresImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case R.id.id_tab_friend:
                mViewPager.setCurrentItem(1);
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case R.id.id_tab_setting:
                mViewPager.setCurrentItem(3);
                mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
        }
}```

重置每一个Image，相应的resetImg()方法
```java
private void resetImg() {
        mWinxinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddresImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    } ```

这样整个Viewpager配合适配器的滑动界面就完成了

未完待续（挖坑）：ViewPager配合Fragment实现滑动不同界面

-----更新-----
####终极使用ViewPager实现页面滑动
#####ViewPager结合Fragment
此方法为上述方法的升级版，在View的管理上，使用Fragment管理会更清晰，而且更利于后期代码的修缮
主要是这样几个步骤：
1. 初始化View，创建需要的Fragment和xml布局，加入ViewPager布局
```java

创建Fragment的List，并且初始化ViewPager和FragmentPagerAdapter

private List mFragments;
onCreate(...){
...
        mFragments = new ArrayList<>();
        Fragment mTab01 = new WeixinFragment();
        Fragment mTab02 = new FrdFragment();
        Fragment mTab03 = new AddressFragment();
        Fragment mTab04 = new SettingFragment();

        mFragments.add(mTab01);
        mFragments.add(mTab02);
        mFragments.add(mTab03);
        mFragments.add(mTab04);
...   }```
3. 设置ViewPager的监听事件，重写onPageSelected()方法
```java
mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
mViewPager.setAdapter(mPagerAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //用来监听ViewPager的改变，通常用来改变Tab的样式
                int current = mViewPager.getCurrentItem();
                setTab(current);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });```
4. 设置Tab的点击事件(如果在点击或者滑动有特效，需要进一步去实现)这里只介绍，如何实现ViewPager和Fragment的组合效果
```java
public void setSelect(int select) {
        mViewPager.setCurrentItem(select);
    }```
5. 如果你想实现相应的通过ViewPager的监听，来改变Tab的样式，这里提供了代码参考,对应的是ViewPager的addOnPageChangeListener中onPageSelected()中用到的方法
```java
private void setTab(int select) {
        resetImg();
        switch (select){
            case 0:
                mTabWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                mTabFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                mTabAdressImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                mTabSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
        }
    }```

以上总结参考自[慕课网](http://www.imooc.com/video/5904)中[hyman](http://www.imooc.com/u/320852/courses?sort=publish)的课程
后续会更新热门开源项目[FlycoTabLayout](https://github.com/H07000223/FlycoTabLayout)的使用教程（挖坑），这个相对于ViewPager来说更酷炫，更方便使用，本文的代码参考在我的GitHub上，欢迎留言提出意见，感谢您的阅读

ViewPager+Fragment实现页面滑动效果

简单使用XML文件，使用ViewPagerAdapter适配器，来适配不同的page

具体实现方法：

你可能感兴趣的:(ViewPager+Fragment实现页面滑动效果)