ViewPager实现微信Tab主界面

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

ViewPager

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

1.在布局文件中加入

 
    

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 mView = new ArrayList();

        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;
       }
   }

结果展示

ViewPager实现微信Tab主界面_第1张图片

ViewPager实现微信Tab主界面_第2张图片

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

工程源码

你可能感兴趣的:(ViewPager实现微信Tab主界面)