note-47 ViewPager

from:

http://www.open-open.com/lib/view/open1328833592437.html

http://www.open-open.com/lib/view/open1330003503468.html

说明：

ViewPager用于实现多页面的切换效果，该类存在于Google的兼容包里面，所以在引用时记得在BuilldPath中加入“android-support-v4.jar”

主布局文件

main.xml

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04	android:layout_height="fill_parent"

05	android:orientation="vertical" >

06

07	<android.support.v4.view.ViewPager

08	android:id="@+id/viewpager"

09	android:layout_width="wrap_content"

10	android:layout_height="wrap_content"

11	android:layout_gravity="center" >

12

13	<android.support.v4.view.PagerTitleStrip

14	android:id="@+id/pagertitle"

15	android:layout_width="wrap_content"

16	android:layout_height="wrap_content"

17	android:layout_gravity="top" />

18	</android.support.v4.view.ViewPager>

19

20	</LinearLayout>

其中ViewPager为多页显示控件，PagerTitleStrip用于显示当前页面的标题

 

主窗口代码：

PagerTitleDemoActivity.java

01	package com.ns.pager;

02

03	import java.util.ArrayList;

04

05	import android.app.Activity;

06	import android.os.Bundle;

07	import android.support.v4.view.PagerAdapter;

08	import android.support.v4.view.PagerTitleStrip;

09	import android.support.v4.view.ViewPager;

10	import android.view.LayoutInflater;

11	import android.view.View;

12

13	public class PagerTitleDemoActivity extends Activity {

14	/** Called when the activity is first created. */

15	private ViewPager mViewPager;

16	private PagerTitleStrip mPagerTitleStrip;

17

@Override

18	public void onCreate(Bundle savedInstanceState) {

19	super.onCreate(savedInstanceState);

20	setContentView(R.layout.main);

21	mViewPager = (ViewPager)findViewById(R.id.viewpager);

22	mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle);

23

24	//将要分页显示的View装入数组中

25	LayoutInflater mLi = LayoutInflater.from(this);

26	View view1 = mLi.inflate(R.layout.view1, null);

27	View view2 = mLi.inflate(R.layout.view2, null);

28	View view3 = mLi.inflate(R.layout.view3, null);

29

30	//每个页面的Title数据

31	final ArrayList<View> views = new ArrayList<View>();

32	views.add(view1);

33	views.add(view2);

34	views.add(view3);

35

36	final ArrayList<String> titles = new ArrayList<String>();

37	titles.add("tab1");

38	titles.add("tab2");

39	titles.add("tab3");

40

41	//填充ViewPager的数据适配器

42	PagerAdapter mPagerAdapter = new PagerAdapter() {

43

44

@Override

45	public boolean isViewFromObject(View arg0, Object arg1) {

46	return arg0 == arg1;

47

}

48

49

@Override

50	public int getCount() {

51	return views.size();

52

}

53

54

@Override

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

56	((ViewPager)container).removeView(views.get(position));

57

}

58

59

@Override

60	public CharSequence getPageTitle(int position) {

61	return titles.get(position);

62

}

63

64

@Override

65	public Object instantiateItem(View container, int position) {

66	((ViewPager)container).addView(views.get(position));

67	return views.get(position);

68

}

69

};

70

71	mViewPager.setAdapter(mPagerAdapter);

72

}

73

}

 ---------------------------------------------------------------------------------------------------------------------

 exp2:

先看效果，就是左右滑屏的效果

具体实现详解

android compatibility package, revision 3在7月份发布后，其中有个ViewPager引起了我的注意

官方的描述：

 请参考：http://developer.android.com/sdk/compatibility-library.html#Notes

ViewPager的下载与安装

首先通过SDK Manager更新最新版android compatibility package, revision 3

更新后，在eclipse中工程上点击右键，选择android tools -> add compatibility library即可完成安装

实际上就是一个jar包，手工导到工程中也可

jar包所在位置是\android-sdk\extras\android\compatibility\v4\android-support-v4.jar

至此准备环境已经ok

下边还是通过代码进行说话吧

准备布局文件

 

准备布局文件

viewpager_layout.xml

 

01	<?xml version="1.0" encoding="utf-8"?>

02

03	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

04	android:layout_width="fill_parent"

05	android:layout_height="fill_parent" android:orientation="vertical">

06	<!-- 此处需要给出全路径 -->

07	<android.support.v4.view.ViewPager

08	android:id="@+id/viewpagerLayout" android:layout_height="fill_parent"android:layout_width="fill_parent"/>

09

10	</LinearLayout>

layout1.xml

 

 

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04

05	android:layout_height="fill_parent" android:orientation="vertical">

06	<TextView android:textAppearance="?android:attr/textAppearanceLarge"android:layout_height="wrap_content" android:id="@+id/textView1"android:layout_width="fill_parent" android:text="第一页"></TextView>

07

08	<EditText android:layout_width="match_parent" android:layout_height="wrap_content"android:id="@+id/editText1">

09	<requestFocus></requestFocus>

10	</EditText>

11

12	</LinearLayout>

layout2.xml

 

 

 

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03

04	android:layout_width="fill_parent"

05	android:layout_height="fill_parent" android:orientation="vertical">

06	<TextView android:textAppearance="?android:attr/textAppearanceLarge"android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent"android:text="第二页"></TextView>

07

08	<EditText android:layout_width="match_parent" android:layout_height="wrap_content"android:id="@+id/editText1">

09	<requestFocus></requestFocus>

10	</EditText>

11

12	</LinearLayout>

layout3.xml

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04

05	android:layout_height="fill_parent" android:orientation="vertical">

06	<TextView android:textAppearance="?android:attr/textAppearanceLarge"android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent"android:text="第三页"></TextView>

07

08	<EditText android:layout_width="match_parent" android:layout_height="wrap_content"android:id="@+id/editText1">

09	<requestFocus></requestFocus>

10	</EditText>

11

12	</LinearLayout>

主程序

001	package a.b;

002

003	import java.util.ArrayList;

004	import java.util.List;

005

006	import android.app.Activity;

007	import android.os.Bundle;

008	import android.os.Parcelable;

009	import android.support.v4.view.PagerAdapter;

010	import android.support.v4.view.ViewPager;

011	import android.support.v4.view.ViewPager.OnPageChangeListener;

012	import android.util.Log;

013	import android.view.LayoutInflater;

014	import android.view.View;

015	import android.widget.EditText;

016

017	public class TestViewPager extends Activity {

018	private ViewPager myViewPager;

019

020	private MyPagerAdapter myAdapter;

021

022	private LayoutInflater mInflater;

023	private List<View> mListViews;

024	private View layout1 = null;

025	private View layout2 = null;

026	private View layout3 = null;

027

028

@Override

029	protected void onCreate(Bundle savedInstanceState) {

030	super.onCreate(savedInstanceState);

031	setContentView(R.layout.viewpager_layout);

032	myAdapter = new MyPagerAdapter();

033	myViewPager = (ViewPager) findViewById(R.id.viewpagerLayout);

034	myViewPager.setAdapter(myAdapter);

035

036	mListViews = new ArrayList<View>();

037	mInflater = getLayoutInflater();

038	layout1 = mInflater.inflate(R.layout.layout1, null);

039	layout2 = mInflater.inflate(R.layout.layout2, null);

040	layout3 = mInflater.inflate(R.layout.layout3, null);

041

042	mListViews.add(layout1);

043	mListViews.add(layout2);

044	mListViews.add(layout3);

045

046	//初始化当前显示的view

047	myViewPager.setCurrentItem(1);

048

049	//初始化第二个view的信息

050	EditText v2EditText = (EditText)layout2.findViewById(R.id.editText1);

051	v2EditText.setText("动态设置第二个view的值");

052

053	myViewPager.setOnPageChangeListener(new OnPageChangeListener() {

054

055

@Override

056	public void onPageSelected(int arg0) {

057	Log.d("k", "onPageSelected - " + arg0);

058	//activity从1到2滑动，2被加载后掉用此方法

059	View v = mListViews.get(arg0);

060	EditText editText = (EditText)v.findViewById(R.id.editText1);

061	editText.setText("动态设置#"+arg0+"edittext控件的值");

062

}

063

064

@Override

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

066	Log.d("k", "onPageScrolled - " + arg0);

067	//从1到2滑动，在1滑动前调用

068

}

069

070

@Override

071	public void onPageScrollStateChanged(int arg0) {

072	Log.d("k", "onPageScrollStateChanged - " + arg0);

073	//状态有三个0空闲，1是增在滑行中，2目标加载完毕

074

/**

075	* Indicates that the pager is in an idle, settled state. The current page

076	* is fully in view and no animation is in progress.

077

*/

078	//public static final int SCROLL_STATE_IDLE = 0;

079

/**

080	* Indicates that the pager is currently being dragged by the user.

081

*/

082	//public static final int SCROLL_STATE_DRAGGING = 1;

083

/**

084	* Indicates that the pager is in the process of settling to a final position.

085

*/

086	//public static final int SCROLL_STATE_SETTLING = 2;

087

088

}

089

});

090

091

}

092

093	private class MyPagerAdapter extends PagerAdapter{

094

095

@Override

096	public void destroyItem(View arg0, int arg1, Object arg2) {

097	Log.d("k", "destroyItem");

098	((ViewPager) arg0).removeView(mListViews.get(arg1));

099

}

100

101

@Override

102	public void finishUpdate(View arg0) {

103	Log.d("k", "finishUpdate");

104

}

105

106

@Override

107	public int getCount() {

108	Log.d("k", "getCount");

109	return mListViews.size();

110

}

111

112

@Override

113	public Object instantiateItem(View arg0, int arg1) {

114	Log.d("k", "instantiateItem");

115	((ViewPager) arg0).addView(mListViews.get(arg1),0);

116	return mListViews.get(arg1);

117

}

118

119

@Override

120	public boolean isViewFromObject(View arg0, Object arg1) {

121	Log.d("k", "isViewFromObject");

122	return arg0==(arg1);

123

}

124

125

@Override

126	public void restoreState(Parcelable arg0, ClassLoader arg1) {

127	Log.d("k", "restoreState");

128

}

129

130

@Override

131	public Parcelable saveState() {

132	Log.d("k", "saveState");

133	return null;

134

}

135

136

@Override

137	public void startUpdate(View arg0) {

138	Log.d("k", "startUpdate");

139

}

140

141

}

142

143

}

在实机上测试后，非常流畅，这也就是说官方版的左右滑屏控件已经实现

目前，关于viewpager的文章非常少，本文是通过阅读viewpager源代码分析出的写法

当然此文章仅是抛砖引玉，而且属于框架式程序，目的就是让读者了解API的基本用法

希望这篇原创文章对大家有帮助

欢迎感兴趣的朋友一起讨论

共同学习，共同进步

另外，ViewPager的注释上有这么一段话，大体意思是该控件目前属于早期实现，后续会有修改

01

/**

02	* Layout manager that allows the user to flip left and right

03	* through pages of data.  You supply an implementation of a

04	* {@link PagerAdapter} to generate the pages that the view shows.

05

*

06	* <p>Note this class is currently under early design and

07	* development.  The API will likely change in later updates of

08	* the compatibility library, requiring changes to the source code

09	* of apps when they are compiled against the newer version.</p>

10

*/

 ------------------------------------------------------------------------------------------------------------------------------------

如果将此控件放在 ActivityGroup里面实现，按 ActivityGroup LocalActivityManager 方法获取子视图。

1. getLocalActivityManager().startActivity(  
2.                         "Module1",  
3.                         new Intent(TestView.this, ModuleView1.class)  
4.                                 .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))  
5.                         .getDecorView());  

Intent intent = intents.get(i);
			intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
			LocalActivityManager manager = activityGroup.getLocalActivityManager();
			final Window w = manager.startActivity(TAB+i, intent);
			View currentView = w.getDecorView();
			pageViews.add(currentView);

 实现可控的转跳：

 viewPager.setCurrentItem(2, true);

       

参数1-要转跳到的页数，从0开始；

参数2-是否平滑过渡；