android实现微信tab切换之-ViewPager

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

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

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

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

要实现如上图所示的效果,我们需要对整个界面布局,那么在上图中,页面可以分成三个部分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<View> mViews = new ArrayList<View>();

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、元素初始化

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <include layout="@layout/top" />
    
    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewPager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></android.support.v4.view.ViewPager>
    
    <include layout="@layout/bottom" />

</LinearLayout>

  在主页面中,首先我们需要通过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
				
			}
		});

  

 源码下载: ViewPager.rar

 

android实现微信tab切换之-ViewPager

上一篇:像玩魔兽一样编程——谈VS2010键盘流


下一篇:微信公众平台开发 获取access token (续)