Android学习文档之viewpage学习

说明：这一篇文章的代码是我参考别人的（链接地址为http://blog.csdn.net/harvic880925/article/details/38453725），有什么不对的地方，还望大家指正，另外，感谢那些无私奉献的人

 

我们在开发javaweb的时候，一般都会遇到这样的一种布局，那就是T型布局，如下：

在这种布局中，我们一般使用的frameset，那么在Android中是否存在这类控件呢？答案是肯定的。不过Android中一般的布局都是这样的

 

Android中有两种方式能够实现这类功能，一种就是今天我们所学习的viewpage，还有一个就是fragement，针对fragement的内容我们将在下一篇中介绍

 

不知道大家还是否记得之前我们在《Android学习文档之数据适配器+DDMS介绍》中使用的listview控件，其实我个人感觉他们之间是很相似的，都需要获得总数，都需要设置position等等

 

废话不多说，我们直接看代码

 

首先是activity_main.xml文件

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hackerant.viewpager.MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        >
        <android.support.v4.view.PagerTabStrip
            android:id="@+id/tabstrip"
            android:layout_width="wrap_content"
            android:layout_height="30dip"
            android:gravity="center" />
            <!-- <android.support.v4.view.PagerTitleStrip
            android:id="@+id/titleStrip"
            android:layout_width="wrap_content"
            android:layout_height="30dip"
            android:gravity="center" /> -->
    </android.support.v4.view.ViewPager>

</RelativeLayout>

在这个布局文件中，我们需要使用到两个新的标签，一个是android.support.v4.view.ViewPager 和android.support.v4.view.PagerTabStrip ，这两个控件都在android-support-v4.jar这个包下


第一个ViewPager表示父类标签，是一个view，PgaerTabStrip表示子类标签，是一个table，就是上面的按钮。
Ok，activity_main.xml布局准备好，下面就是其他布局了，这就像listview弄好了，要弄单个的list了。目前我定义了两个布局，当然你也可以更多，或者通过其他方式生成，其布局如下
layout1.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:orientation="vertical" >
    <TextView 
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tab1"
        />

</LinearLayout>

layout2.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:orientation="vertical" >
    <TextView 
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="tab2"
        />

</LinearLayout>

 

布局文件弄好了，我们下面就开始写代码了

MainActivity.java

package com.hackerant.viewpager;

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends ActionBarActivity {
	
	private ViewPager viewpager;
	private PagerTabStrip pts;
//	private PagerTitleStrip pts;
	private ArrayList<View> viewContent;
	private ArrayList<String> titleName;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		//初始化
		viewContent = new ArrayList<View>();
		titleName = new ArrayList<String>();
		
		viewpager = (ViewPager) findViewById(R.id.viewPager);
		//PagerTitleStrip不可点击title
//		pts = (PagerTitleStrip) findViewById(R.id.titleStrip);
//		pts.setBackgroundColor(this.getResources().getColor(R.color.peachpuff));
//		pts.setDrawingCacheBackgroundColor(this.getResources().getColor(R.color.azure));
		//PagerTabStrip可点击table
		pts = (PagerTabStrip) findViewById(R.id.tabstrip);
		//设置tab的下划线
		pts.setDrawFullUnderline(false);
		//设置tab的背景色
		pts.setBackgroundColor(this.getResources().getColor(R.color.peachpuff));
		//设置标签下的下划线颜色
		pts.setTabIndicatorColor(this.getResources().getColor(R.color.azure));
		//设置字符串宽
		pts.setTextSpacing(200);
		
		//加载布局文件
		View layout1 = LayoutInflater.from(this).inflate(R.layout.layout1, null);
		View layout2 = LayoutInflater.from(this).inflate(R.layout.layout2, null);
		
		viewContent.add(layout1);
		viewContent.add(layout2);
		
		titleName.add("tab1");
		titleName.add("tab2");
		
		viewpager.setAdapter(new myViewAdapter());
		viewpager.setOnPageChangeListener(new myOnPageChangeListener());
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	
	public class myViewAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			return viewContent.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// TODO Auto-generated method stub
//			super.destroyItem(container, position, object);
			container.removeView(viewContent.get(position));
		}

		@Override
		public int getItemPosition(Object object) {
			// TODO Auto-generated method stub
			return super.getItemPosition(object);
		}

		@Override
		public CharSequence getPageTitle(int position) {
			// TODO Auto-generated method stub
			return titleName.get(position);
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub
//			return super.instantiateItem(container, position);
			container.addView(viewContent.get(position));
            return viewContent.get(position);
		}

		
	}

	
	public class myOnPageChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {
			System.out.println(arg0);
			
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
			System.out.println(arg0+"===="+arg1+"==="+arg2);
		}

		@Override
		public void onPageSelected(int arg0) {
			// TODO Auto-generated method stub
			System.out.println(arg0+"456");
		}
		
	}
}

代码解析：
首先，我们要创建一个viewpage和一个pagertabstrip用来接收主布局文件里的两个控件，然后我们还要有一个table的集合和视图的集合，然后就是初始化和赋值，这里代码简单，不作赘述
当我们查找到table（准确的说应该是title）就可以设置其一些属性了，有如下

//设置tab的下划线
		pts.setDrawFullUnderline(false);
		//设置tab的背景色
		pts.setBackgroundColor(this.getResources().getColor(R.color.peachpuff));
		//设置标签下的下划线颜色
		pts.setTabIndicatorColor(this.getResources().getColor(R.color.azure));
		//设置字符串宽
		pts.setTextSpacing(200);

当然，我们从java面向对象的思想来看，只要对象有了，然后点一下就能看到其能够调用的方法，请阅读者自行尝试。
再然后就是设置适配器，这里使用到的适配器是android.support.v4.view.PagerAdapter，适配器方法中有什么获得总数啊，获得单个视图啊等等的信息，这和listview很是类似，我们就不一一讲述了，主要讲一下instantiateItem和destroyItem，这两个方法都是获得当前view对象并把当前对象返回进行处理，具体可参考http://blog.csdn.net/harvic880925/article/details/38487149
OnPageChangeListener方法是对当视图切换时做出的相应，这里只是打印了一下log，简单的了解一下。
Ok，下面我们看一下程勋的最终效果

源码下载http://pan.baidu.com/s/1dEtPdMp