androidUI设计之旅 ----ViewPager的基本应用

ViewPager多页面得滑动效果在实际编程中，我们经常用到，比说说用他事先tab，和图片的一张一张的切换效果。他可以使页面做的好看，用户体验也会很舒服。

自3.0起，sdk中提供一个一个jar包，名字叫：android.support.v4.jar。用这个包可以事先版本兼容。其中，就有一个可以事先左右滑动的类ViewPager。

首先要了解一点基本知识：

继承PagerAdapter时候，至少重写一下几个方法：

1.getCount()

2. instantiateItem();

3.destroyItem();

4.isViewFromObject();

 

我们要实现的效果：

 

 

布局文件要这么写：activity_main.xml

<android.support.v4.view.ViewPager
        android:id="@+id/ViewPager1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center" >

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/PagerTitle1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top" >
        </android.support.v4.view.PagerTitleStrip>
    </android.support.v4.view.ViewPager>

自己去写三个View吧。随便建三个XML就可以。

 

package com.example.android_viewpager;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends Activity {
	private ViewPager viewPager;
	private PagerTitleStrip pagerTitleStrip;
	private List<View> list;
	private List<String> list2;
	private View view1;
	private View view2;
	private View view3;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewPager = (ViewPager) findViewById(R.id.ViewPager1);
		pagerTitleStrip = (PagerTitleStrip) findViewById(R.id.PagerTitle1);
		list = new ArrayList<View>();
		list2 = new ArrayList<String>();
		view1 = getLayoutInflater().inflate(R.layout.view1, null);
		view2 = getLayoutInflater().inflate(R.layout.view2, null);
		view3 = getLayoutInflater().inflate(R.layout.view3, null);
		list.add(view1);
		list.add(view2);
		list.add(view3);
		list2.add("tab1");
		list2.add("tab2");
		list2.add("tab3");
		viewPager.setAdapter(new myViewPagerAdapter());

	}

	class myViewPagerAdapter extends PagerAdapter {
		// 返回ViewPager包含的不觉的个数
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return list.size();
		}

		// 绑定一个特殊的对象 这个对象由instantiateItem返回
		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}

		// 销毁View
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// TODO Auto-generated method stub
			((ViewPager) container).removeView(list.get(position));
		}

		// 初始化
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub

			((ViewPager) container).addView(list.get(position));
			return list.get(position);
		}

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

}

ViewPager 的页面滑动监听。

当装在页面数据的时候，我们就不得不考虑在哪个方法里面动态加载数据。哪个方法比较合适呢？下面我们来讨论一下。

结果是：onPageScrollStateChanged().为甚么呢？因为这个方法是在一个页面完全进入到屏幕上时，才回调的。

Viewpager的设置监听：

 

viewPager.setOnPageChangeListener(new OnPageChangeListener() {
		//当前页面
			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				System.out.println("onPageSelected"+arg0);
			}
			//页面移动的时候出发
			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub
				System.out.println("=========================");
				System.out.println("arg0"+arg0);
				System.out.println("arg1"+arg1);
				System.out.println("arg2"+arg2);
				System.out.println("=========================");
			}
			//页面全部进入时候触发
			@Override
			public void onPageScrollStateChanged(int arg0) {
		// 有三种状态（0，1，2）。arg0 ==1的时正在滑动，arg0==2的滑动完毕了，arg0==0的什么都没做。				System.out.println("onPageScrollStateChanged"+arg0);
			}
		});