Android利用ViewPager实现Tab

Android利用ViewPager实现Tab布局

以下为最终结果:

使用Tab类型的发布项目具有很多,比如典型的微信.. QQ等都具备,这也是手机程序中不可缺少的一种布局方式。现在就好好聊聊怎么实现的,其实非常简单！（想要学习本列, 需要掌握ViewPager'的基本用法）

思路:    1)   我们整体的布局文件要创建好。 因今天不是讲解布局文件，所以等下我就直接将布局文件源代码贴出来。
     2)   在效果图中可以看出,一直在变化的是中间的ViewPager。
     3)   根据单击的按钮不同, 命令ViewPager显示第几张布局。

ps: 要注意,Android studio较低版本的情况下可能找不到ViewPager类; 需导入v4包才能运行

一步一步讲解：

1） 整体工程结构图

2）最终效果图的布局文件（直接贴出源代码）

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="ViewPager impl tab" >
    </TextView>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/hello_world" />

    <LinearLayout
        android:id="@+id/id_linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/id_btn1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="btnStartClick"
            android:text="btn1" />

        <Button
            android:id="@+id/id_btn2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="btnStartClick"
            android:text="btn2" />
    </LinearLayout>

</LinearLayout>

3.1) ViewPager中内部的布局文件(activity_item_one.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="VIEWPAGER1" 
        android:textSize="20pt"/>

</LinearLayout>

3.2) ViewPager中内部的布局文件(activity_item_two.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="VIEWPAGER2"
        android:textSize="20pt" />

</LinearLayout>

4)操作MainActivity.java文件(所有的控制逻辑

4.1）定义成员属性

<span style="white-space:pre">	</span>private ViewPager viewPager;
	private List<View> views;
	private PagerAdapter pagerAdapter;

viewPager:  引用配置文件的viewPager，也使用此对象进行tab页面的切换操作

views: 定义系列view, 保存在viewPager中以便使用

pagerAdapter: 为ViewPager的适配器

4.2) 创建监听按钮的单击方法（用来通知ViewPager显示第几张布局文件

public void btnStartClick(View v) {

		switch (v.getId()) {
		case R.id.id_btn1:
			viewPager.setCurrentItem(0);
			break;

		case R.id.id_btn2:
			viewPager.setCurrentItem(1);
			break;

		}

	}

4.3)  初始化属性

// 获取viewPager
		viewPager = (ViewPager) findViewById(R.id.id_viewpager);
		
		// 初始化集合数据
		views = new ArrayList<View>();
		// 将定义好的两个布局文件加载进来, 就是viewPager里面可以用来显示的布局
		views.add(getLayoutInflater().inflate(R.layout.activity_item_one, null));
		views.add(getLayoutInflater().inflate(R.layout.activity_item_two, null));
			
		// viewPager的适配器创建
		pagerAdapter = new PagerAdapter() {
			
			/**
			 * 内部用来决定显示哪张布局文件
			 */
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0 == arg1;
			}

			/**
			 * 该ViewPager中共具有几张布局
			 */
			@Override
			public int getCount() {
				return views.size();
			}

			/**
			 * 开始创建布局文件的方法. 将返回的view类型对象显示在ViewPager同等大小的组件上
			 */
			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				container.addView(views.get(position));
				return views.get(position);
			}

			/**
			 * 当销毁时调用的方法
			 */
			@Override
			public void destroyItem(ViewGroup container, int position, Object object) {
				container.removeView(views.get(position));
			}
		};

ps:实现PagerAdapter中instantiateItem和destroyItem方法是用来进行缓存优化使用的。ViewPager的实现原理与ListView的实现原理基本类似。 其清除缓存方式同样类似

4.4) 绑定适配器

viewPager.setAdapter(pagerAdapter);

至此，我们的所有代码已经实现,非常简单的Tab布局实现方式,仔细看代码中的注释基本上就全部明白了。相信有一些基本知识的学习者看过之后就理解了。

除了使用ViewPager实现Tab布局之外，还有使用Fragment进行实现,下一篇博客我们将会进行讲解。

学习者们可以利用现有的知识去实现微信的Tab布局了。 （唯一需要改变的就只有其布局文件....