ViewPager实现微信Tab主界面

首先，我们已经知道微信布局是包含三块部分，一块顶部，一块底部，剩下的就是中间的部分。最终实现的效果就是点击底部的图标，中间的内容区域相应变化，图标颜色也相应的变化；左右滑动内容区域，内容区域变化，底部相应的图标颜色也相应的变化，在这里我们只讲述ViewPager部分，顶部和底部的设计，可以观看代码自行了解。

ViewPager

ViewPager的功能就是可以使视图滑动，使用它需要三个步骤：

1.在布局文件中加入

 <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#fff">
    </android.support.v4.view.ViewPager>

2.加载要显示的页面

 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);
        
//private List<View> mView = new ArrayList<View>();

        mView.add(tab01);
        mView.add(tab02);
        mView.add(tab03);
        mView.add(tab04);

3.在Activity中实例化ViewPager组件，并设置它的PagerAdapter，需要重写PagerAdapter

 mAdapter = new PagerAdapter() {

            //PagerAdapter只缓存三张要显示的图片，如果滑动图片超出了缓存范围，就会调用这个方法，将图片销毁
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {

                container.removeView(mView.get(position));
            }

            // 当要显示的图片可以进行缓存时，会调用这个方法进行图片的初始化，我们将要显示的ImageView加入到ViewGroup，然后作为返回值即可
            @Override
            public Object instantiateItem(ViewGroup container, int position) {

                View view = mView.get(position);
                container.addView(view);
                return view;
            }

            //  需要获得滑动控件的数量，这里我们以滑动的微信界面为例，那么这里就应该展示的微信界面图片的ImageView数量
            @Override
            public int getCount() {
                return mView.size();
            }

            //来判断显示的是否是同一张图片，这里我们将两个参数比较返回即可
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
        };

        mViewPager.setAdapter(mAdapter);

ViewPager的适配器就是PagerAdapter，它的基类提供适配器来填充ViewPager内部。其实ViewPager 应该和Fragment一起使用，至少google官方是这么想的，但是在3.0之下，我们没有必要这样做。当你实现一个PagerAdapter时，一般至少需要覆盖以下四种方法：

• destroyItem(ViewGroup container, int position, Object object)
• isViewFromObject(View view, Object object)
• instantiateItem(ViewGroup container, int position)
• getCount()

4.为底部图标（ImageView类型）、ViewPager 添加点击事件

 //点击事件就是实现tab切换时，下面图标颜色的变化
   private void initEvents() {

       mTabWeixin.setOnClickListener(this);
       mTabFrd.setOnClickListener(this);
       mTabAdress.setOnClickListener(this);
       mTabSetting.setOnClickListener(this);

       //当ViewPager的内容区域发生变化时，相应的底部图标也发生变化，重写onPageSelected方法
       mViewPager.addOnPageChangeListener(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:
                       mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                       break;
                   case 1:
                       mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                       break;
                   case 2:
                       mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                       break;
                   case 3:
                       mSettingnImg.setImageResource(R.drawable.tab_settings_pressed);
                       break;
               }
           }

           @Override
           public void onPageScrollStateChanged(int state) {

           }
       });


   }
   
 //用来实现底部图标点击事件
    @Override
   public void onClick(View view) {

//实现之前，首先把所有底部图标变为暗色
       resetImg();
//然后根据点击的是哪个图标再进行相应图标变成亮色
       switch (view.getId()) {
           case R.id.id_tab_weixin:
               //如果点击的是微信图标，就跳转到第一个tab
               mViewPager.setCurrentItem(0);
               mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
               break;

           case R.id.id_tab_frd:
               mViewPager.setCurrentItem(1);
               mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
               break;

           case R.id.id_tab_address:
               mViewPager.setCurrentItem(2);
               mAddressImg.setImageResource(R.drawable.tab_address_pressed);
               break;

           case R.id.id_tab_setting:
               mViewPager.setCurrentItem(3);
             mSettingnImg.setImageResource(R.drawable.tab_settings_pressed);
               break;
               
           default:
               break;
       }
   }

---

结果展示

在中间区域可以左右滑动，内容区域会相应的变化，底部按钮也会相应的变化

工程源码