android 微信tab切换,android实现微信tab切换之-ViewPager

ViewPager是我们在android开发中常用的一个组件，今天在本文中我们将用ViewPager实现类似微信的Tab切换这样一个功能，本文只适用于android开发初学者，大牛请绕道，先上图。

      

      

首先要实现以上功能，需要准备一些素材图片,素材图片我们的源码中有。

要实现如上图所示的效果，我们需要对整个界面布局，那么在上图中，页面可以分成三个部分top，content，bottom三个部分，那么在content中，因为我们使用的是viewpager组建，所以我们需要设计四个不同的布局文件，那么要实现整个页面的效果，我们总共需要7个布局文件顶部布局文件top.xml、底部tab布局文件bottom.xml、微信tab内容布局文件weixin.xml、朋友tab内容布局文件frd.xml、通讯录内容布局文件address.xml、设置tab内容布局文件setting.xml、启动页面布局文件activity_main.xml.

至于页面怎么布局，我们这里就不细细的再去讲了，在本文的地段现在源码，在源码里面都有。这里主要分析怎么通过ViewPager实现如图所示的功能。

1、声明页面中的元素

private ViewPager mViewPager;

private PagerAdapter mAdapter;

private List mViews = new ArrayList();

private LinearLayout mTabWeiXin;

private LinearLayout mTabFrd;

private LinearLayout mTabAddress;

private LinearLayout mTabSetting;

private ImageButton mWeiXinImg;

private ImageButton mFrdImg;

private ImageButton mAddressImg;

private ImageButton mSettingImg;

基于ViewPager实现tab切换，需要为ViewPager对象设置页面的适配器，所以我们需要mAdapter作为ViewPager的数据适配器，数据适配器需要有数据源，所以我们也需要声明一个View类型的List作为mAdapter的数据源。

2、元素初始化

在讲解初始化元素之前，我们先分析一下主布局文件的代码

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

>

android:id="@+id/id_viewPager"

android:layout_width="fill_parent"

android:layout_height="0dp"

android:layout_weight="1"

>

在主页面中，首先我们需要通过include标记将top和bottom两个布局导入到页面中，中间内容的切换基于ViewPager实现，这里需要注意一点就是ViewPager是在v4包中，所以在布局时需要指定ViewPager所在的包。

按照常规的方式，我们先对页面的元素进行初始化

mViewPager = (ViewPager) findViewById(R.id.id_viewPager);

//tabs

mTabWeiXin = (LinearLayout) findViewById(R.id.id_WeiXin);

mTabFrd = (LinearLayout) findViewById(R.id.Tab_id_Frd);

mTabAddress = (LinearLayout) findViewById(R.id.id_Adrress);

mTabSetting = (LinearLayout) findViewById(R.id.id_Setting);

//ImageButton

mWeiXinImg = (ImageButton) findViewById(R.id.id_WeiXin_Img);

mFrdImg = (ImageButton) findViewById(R.id.id_Frd_Img);

mAddressImg = (ImageButton) findViewById(R.id.id_Adrress_Img);

mSettingImg = (ImageButton) findViewById(R.id.id_Setting_Img);

通过初始化得到ViewPager元素，tab元素质之后，我们需要为mViewPager添加适配器，添加适配器之前需要准备数据源，初始化mAdapter。

LayoutInflater mInflater = LayoutInflater.from(this);

View weixinTabView = mInflater.inflate(R.layout.weixin, null);

View frdTabView = mInflater.inflate(R.layout.frd, null);

View settingTabView = mInflater.inflate(R.layout.setting, null);

View addressTabView = mInflater.inflate(R.layout.address, null);

mViews.add(weixinTabView);

mViews.add(frdTabView);

mViews.add(addressTabView);

mViews.add(settingTabView);

mAdapter = new PagerAdapter() {

@Override

public void destroyItem(ViewGroup container, int position,Object object) {

// TODO Auto-generated method stub

container.removeView(mViews.get(position));

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

// TODO Auto-generated method stub

View view = mViews.get(position);

container.addView(view);

return view;

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

// TODO Auto-generated method stub

return arg0==arg1;

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return mViews.size();

}

};

mViewPager.setAdapter(mAdapter);

3、事件处理

页面中设计到的时间主要包括tab的点击事件和ViewPager的滑动事件，在本示例中为了代码的简洁，我们让MainActivity实现OnClickListener接口来实现点击事件。

实现OnClickListener接口需要实现onClick方法。

tab点击时，为了实现被点击tab高亮，其他tab变暗，那么首先电泳ResetImg()方法将所有图片tab设置变暗，然后再根据所点击的tab实现页面切换和tab的点亮。

public void onClick(View v) {

// TODO Auto-generated method stub

ResetImg();

switch (v.getId()) {

case R.id.id_WeiXin:

mViewPager.setCurrentItem(0);

mWeiXinImg.setImageResource(R.drawable.tab_weixin_pressed);

break;

case R.id.Tab_id_Frd:

mViewPager.setCurrentItem(1);

mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);

break;

case R.id.id_Adrress:

mViewPager.setCurrentItem(2);

mAddressImg.setImageResource(R.drawable.tab_address_pressed);

break;

case R.id.id_Setting:

mViewPager.setCurrentItem(3);

mSettingImg.setImageResource(R.drawable.tab_settings_pressed);

break;

default:

break;

}

}

private void ResetImg() {

// TODO Auto-generated method stub

mWeiXinImg.setImageResource(R.drawable.tab_weixin_normal);

mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);

mAddressImg.setImageResource(R.drawable.tab_address_normal);

mSettingImg.setImageResource(R.drawable.tab_settings_normal);

}

在我们滑动页面时，ViewPager切换的同时，tab也要跟着切换，所以我们还需要对ViewPager切换事件进行处理。

//view发生变化

mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override

public void onPageSelected(int arg0) {

// TODO Auto-generated method stub

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:

mSettingImg.setImageResource(R.drawable.tab_settings_pressed);

break;

default:

break;

}

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

// TODO Auto-generated method stub

}

@Override

public void onPageScrollStateChanged(int arg0) {

// TODO Auto-generated method stub

}

});

原文：http://www.cnblogs.com/Ron-Zheng/p/4656669.html