android之ViewPager介绍

一:ViewPager的含义:

ViewPager的功能就是可以使视图滑动,就像Lanucher左右滑动那样。

ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包android-support-v4.jar里面.

ViewPager:

1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类。

2)ViewPager类需要一个PagerAdapter适配器类给它提供数据。

3)ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中    的ViewPager使用。

4)在编写ViewPager的应用的使用,还需要使用两个组件类分别是PagerTitleStrip类和PagerTabStrip类,PagerTitleStrip类直接继承  自ViewGroup类,而PagerTabStrip类继承PagerTitleStrip类,所以这两个类也是容器类。但是有一点需要注意,在定义XML的layout  的时候,这两个类必须是ViewPager标签的子标签,不然会出错。

如下:

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

其中ViewPager为多页显示控件, pagerTitleStrip用于显示当前页面的标题,并且其android:layout_width必须设置成match_parent

二:完成一个简单的ViewPager例子

a)在布局文件中配置ViewPager

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"/>

b)在Activity中获取这这个ViewPager组件.

并且可以设置全屏效果:

requestWindowFeature(Window.FEATURE_NO_TITLE);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

WindowManager.LayoutParams.FLAG_FULLSCREEN);

c)加载要显示的页卡:初始化数据,即每一个页面显示的View.

将其View添加到List集合中。

LayoutInflater lf=getLayoutInflater();

list=new ArrayList<View>();

list.add(lf.inflate(R.layout.activity_layout1,null));

list.add(lf.inflate(R.layout.activity_layout2,null));

list.add(lf.inflate(R.layout.activity_layout3,null));

d)给ViewPager设置数据适配器PagerAdapter

viewPager.setAdapter(PagerAdatpser);

实现PagerAdapter至少要实现四个方法:

1)instantiateItem(ViewGroup, int)

对显示的资源进行初始化。将显示的View

加入到ViewGroup中,然后作为返回值返回。

//container.addView(list.get(position));

//return list.get(position);

2)destroyItem(ViewGroup, int, Object)

PagerAdapter有一个缓存范围,如果在滑动过程

中超过了缓存范围,就会调用这个方法,销毁资源。

//////container.removeView(list.get(position));

3)getCount()获取要滑动的控件的数量

4)isViewFromObject(View, Object)

来判断显示的是否是同一个视图,一般将两个参数进行比较返回即可。

代码如下:

public class MainActivity extends Activity {

	private ViewPager pager;
	//每一个界面
	private List<View> views;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(LayoutParams.FLAG_FORCE_NOT_FULLSCREEN,
				LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
		setContentView(R.layout.activity_main);
		pager=(ViewPager) findViewById(R.id.pager);
		views=new ArrayList<View>();
		LayoutInflater li=getLayoutInflater();
		views.add(li.inflate(R.layout.f1, null));
		views.add(li.inflate(R.layout.f2, null));
		views.add(li.inflate(R.layout.f3, null));
		//需要给ViewPager设置适配器
		PagerAdapter adapter=new PagerAdapter() {

			@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 views.size();
			}

			//对超出范围的资源进行销毁
			@Override
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				// TODO Auto-generated method stub
				//super.destroyItem(container, position, object);
				container.removeView(views.get(position));
			}
			//对显示的资源进行初始化
			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				//return super.instantiateItem(container, position);
				container.addView(views.get(position));
				return views.get(position);
			}

		};
		pager.setAdapter(adapter);

		//给ViewPager添加事件监听
		pager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this, "您选择了:"+arg0+"页面", 0).show();
			}

			@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,就不贴代码了,

效果如图:

三:实现了滑动页面的的简单实现方法,但有时,仅仅实现页面滑动是不够的,还要有标题栏才会显得更友好。

所以需要使用android.support.v4包中的两个控件PagerTabStrip与PagerTitleStrip,他们都是用来实现标题栏的,但各自有些不同。

a)PagerTitleStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个非交互的指示器。

它经常作为ViewPager控件的一个子控件被被添加

在XML布局文件中。在布局文件中,它必须作为子

控件添加在ViewPager中。而且要使用它的

android:layout_gravity性设置为TOP或BOTTOM来

将标题显示在ViewPager的顶部或底部。每个页面的标

题是通过适配器的getPageTitle(int)函数提供给ViewPager

的标题内容。

b)PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个可交互的指示器。

它经常作为ViewPager控件的一个子控件被被添加

在XML布局文件中。在你的布局文件中,将它作为

子控件添加在ViewPager中。而且要将它的

android:layout_gravity 属性设置为TOP或BOTTOM

来将它显示在ViewPager的顶部或底部。每个页面

的标题是通过适配器的getPageTitle(int)函数提

供给ViewPager的标题内容。

注意:其实这两个实现的效果基本差不多,但有两点不同:

1)PagerTabStrip在当前页面下,会有一个下划线条来提示当前页面的Tab是哪个。

2)PagerTabStrip的Tab是可以点击的,当用户点击某一个Tab时,当前页面就

会跳转到这个页面,而PagerTitleStrip

则没这个功能。

3)做标题栏需要重写适配器中的

getPageTitle(int position)返回标题内容。

所有标题可以放在List集合中,每次在

该方法中返回指定位置的标题。

4)可以自定义PagerTabStrip的样式

tabStrip = (PagerTabStrip)findViewById(R.id.pagertab);

//取消tab下面的长横线

tabStrip.setDrawFullUnderline(true);

//设置tab的背景色

tabStrip.setBackgroundColor(Color.BLUE);

//设置当前tab页签的下划线颜色

tabStrip.setTabIndicatorColor(Color.RED);

tabStrip.setTextColor(Color.CYAN);

实例代码:

布局:

<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.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pager" >
        <android.support.v4.view.PagerTabStrip
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:id="@+id/title"
            />

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

</RelativeLayout>

activity:

public class TestActivity extends Activity {

	private ViewPager pager;
	//每一个界面
	private List<View> views;
	//标题
	private String[] titles={"新闻","娱乐","军事"};

	private PagerTabStrip t;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(LayoutParams.FLAG_FORCE_NOT_FULLSCREEN,
				LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
		setContentView(R.layout.activity_test);

		t=(PagerTabStrip) findViewById(R.id.title);
		//自定义table的样式
		t.setBackgroundColor(Color.MAGENTA);
		t.setTextColor(Color.BLUE);
		t.setTextSize(0, 25f);
		t.setTabIndicatorColor(Color.GREEN);

		pager=(ViewPager) findViewById(R.id.pager);
		views=new ArrayList<View>();
		LayoutInflater li=getLayoutInflater();
		views.add(li.inflate(R.layout.f1, null));
		views.add(li.inflate(R.layout.f2, null));
		views.add(li.inflate(R.layout.f3, null));
		//需要给ViewPager设置适配器
		PagerAdapter adapter=new PagerAdapter() {

			//提供标题的内容
			@Override
			public CharSequence getPageTitle(int position) {
				// TODO Auto-generated method stub
				return titles[position];
			}

			@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 views.size();
			}

			//对超出范围的资源进行销毁
			@Override
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				// TODO Auto-generated method stub
				//super.destroyItem(container, position, object);
				container.removeView(views.get(position));
			}
			//对显示的资源进行初始化
			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				//return super.instantiateItem(container, position);
				container.addView(views.get(position));
				return views.get(position);
			}

		};
		pager.setAdapter(adapter);
	}
}

效果图:

四:PagerTabStrip和PagerTitleStrip都不适合用在实际用途中,

当要在实际运用中,我们就要自己去实现相关的功能。一般使用交互Tab的实现。

步骤:a)布局文件使用TextView完成tab的切换卡。

使用ImageView进行分割

使用ViewPager进行翻页

b)在Activity中获取TextView对象,

并分别设置点击事件。点击TextView

可以切换当前选中的卡片:

mPager.setCurrentItem(index);

c)在Activity中获取ViewPager对象。

添加卡片内容,设置PagerAdapter适配器。

d)给ViewPager对象设置setOnPageChangeListener();

可以监听某个卡片被选中的事件监听器。

修改TextView的字体大小和字体颜色。

实例:

布局:

<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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal"
        android:background="#D5D4C3"
        android:gravity="center">
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_weight="1"
            android:text="聊天"
            android:id="@+id/tv1"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_weight="1"
            android:text="发现"
            android:id="@+id/tv2"
            android:gravity="center"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_weight="1"
            android:text="通讯录"
            android:id="@+id/tv3"
            android:gravity="center"/>
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#68AE94"/>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/pager" />
</LinearLayout>

activity:

public class MyTabActivity extends Activity {

	private ViewPager pager;
	private List<View> views;
	//放标签页
	private List<TextView>tvs=new ArrayList<TextView>();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_my_tab);
		initTextView();
		//初始化ViewPager组件
		initView();
		initViewPager();
	}

	public void initTextView() {
		// TODO Auto-generated method stub
		TextView tv1=(TextView) findViewById(R.id.tv1);
		tv1.setTextColor(Color.BLUE);
		TextView tv2=(TextView) findViewById(R.id.tv2);
		TextView tv3=(TextView) findViewById(R.id.tv3);
		//添加点击事件
		//OnClickListener click=new MyClickListener();
		tv1.setOnClickListener(new MyClickListener(0));
		tv2.setOnClickListener(new MyClickListener(1));
		tv3.setOnClickListener(new MyClickListener(2));
		tvs.add(tv1);
		tvs.add(tv2);
		tvs.add(tv3);
	}
	private class MyClickListener implements OnClickListener{

		private int index;
		public MyClickListener(int index) {
			// TODO Auto-generated constructor stub
			this.index=index;
		}
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			//改变ViewPager当前显示页面
			pager.setCurrentItem(index);
		}
	}

	//初始化ViewPager中显示的数据
	public void initView() {
		// TODO Auto-generated method stub
		views=new ArrayList<View>();
		LayoutInflater li=getLayoutInflater();
		views.add(li.inflate(R.layout.f1, null));
		views.add(li.inflate(R.layout.f2, null));
		views.add(li.inflate(R.layout.f3, null));
	}

	public void initViewPager() {
		// TODO Auto-generated method stub
		pager=(ViewPager) findViewById(R.id.pager);
		PagerAdapter adapter=new MyPagerAdapter();
		pager.setAdapter(adapter);
		pager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int index) {
				// TODO Auto-generated method stub
				for(int i=0;i<tvs.size();i++){
					if(i==index){
						tvs.get(i).setTextColor(Color.BLUE);
					}else{
						tvs.get(i).setTextColor(Color.rgb(55,55,55));
					}
				}
			}

			@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

			}
		});
	}
	private class MyPagerAdapter extends PagerAdapter{

		@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 views.size();
		}
		//对超出范围的资源进行销毁
		@Override
		public void destroyItem(ViewGroup container, int position,
				Object object) {
			// TODO Auto-generated method stub
			//super.destroyItem(container, position, object);
			container.removeView(views.get(position));
		}
		//对显示的资源进行初始化
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub
			//return super.instantiateItem(container, position);
			container.addView(views.get(position));
			return views.get(position);
		}
	}
}

效果图:

五:前面介绍ViewPager的普通实现方法,但android官方最推荐的一种实现方法却是使用fragment。

使用Fragment的时候需要使用的适配器为FragmentPagerAdapter。

FragmentPagerAdapter是PagerAdapter的子类,专门用于处理Fragment翻页的适配器。

这个适配器最好用于有限个静态fragment页面的管理。尽管不可见的视图有时会被销毁,但用户所有访问过的fragment都会被保存在内存中。因此fragment实例会保存大量的各种状态,这就造成了很大的内存开销。

所以如果要处理大量的页面切换,建议使用FragmentStatePagerAdapter.对于FragmentPagerAdapter的派生类,只需要重写getItem(int)和getCount()就可以了。

步骤:a)写一个Activity继承FragmentActivity,

专门处理Frament的Activity,重写onCreate方法

List<Fragment> fragments=new ArrayList<Fragment>();

fragments.add(new Fragment1());

fragments.add(new Fragment2());

fragments.add(new Fragment3());

FragAdapter adapter = new FragAdapter(

getSupportFragmentManager(), fragments);

//设定适配器

ViewPager vp = (ViewPager)findViewById(R.id.viewpager);

vp.setAdapter(adapter);

b)FragAdapter是extends FragmentPagerAdapter。

//提供构造器

private List<Fragment> mFragments;

public FragAdapter(FragmentManager fm,List<Fragment> fragments) {

super(fm);

mFragments=fragments;

}

//重写方法

@Override

public Fragment getItem(int arg0) {

return mFragments.get(arg0);

}

@Override

public int getCount() {

return mFragments.size();

}

实例:

布局:和上一个一样

activity:

public class MyFragmentActivity extends FragmentActivity {

	private ViewPager pager;
	private List<Fragment>list;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_my_tab);
		list=new ArrayList<Fragment>();
		list.add(new ChatFragment());
		list.add(new FindFragment());
		list.add(new ContactFragment());
		pager=(ViewPager) findViewById(R.id.pager);
		MyAdapter adapter=new MyAdapter(getSupportFragmentManager());
		pager.setAdapter(adapter);
	}

	//处理Fragment和ViewPager的适配器
	private class MyAdapter extends FragmentPagerAdapter{

		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		@Override
		public Fragment getItem(int arg0) {
			// TODO Auto-generated method stub
			return list.get(arg0);
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return list.size();
		}

	}
}

效果图:

有想要代码的可以:下载链接

时间: 2024-08-27 12:51:39

android之ViewPager介绍的相关文章

Android的ViewPager的初步使用

之前想实现页面的滑动效果,在网上搜了下,挺多的关于TabHost的使用的例子,然后就使用了TabHost,但是效果非常一般(Maybe我不会用).然后同学介绍使用ViewPager,就上网问百老师,挺多例子挺详细的,亲自试了下,做出了我想要的效果,现在就总结下: 1.建立一个主的Activity,继承FragmentActivity,再创建一个Adapter类,继承FragmentPagerAdapter(继承其他Adapter没有测试过),使用的方式和ListView的Adapter差不多.然

android使用ViewPager实现欢迎引导页

android使用ViewPager实现欢迎引导页 大多数APP第一次启动的时候,都会有一个引导界面,左右滑动,到最后一张,用户点击才再次进入主界面.当第二次启动的时候,则直接进入主界面. 这种效果一般使用ViewPager实现.今天就来为大家介绍一下ViewPager的使用. 实现步骤: 使用SharedPerferences来记录是否是第一次启动APP,如果是,则转跳到Guide页面,如果不是第一次启动.就转跳到主Activity. MainActivity: 本Activity作为Logo

Android多媒体开发介绍(转)

Android多媒体开发介绍 转自:http://blog.csdn.net/reiliu/article/details/9060557 一.       多媒体架构 基于第三方PacketVideo公司的OpenCORE来实现,支持所有通用的音频/视频/静态图像格式,包括:MPEG4.H.264.MP3.AAC.AMR.JPG.PNG.GIF等.从功能上分为两部分,一是音/视频的回放(PlayBack),二是音视频的纪录(Recorder). CODEC(编解码器)使用OpenMAX 1L

Android:ViewPager扩展详解——带有导航的ViewPagerIndicator(附带图片缓存,异步加载图片)

大家都用过viewpager了, github上有对viewpager进行扩展,导航风格更加丰富,这个开源项目是ViewPagerIndicator,很好用,但是例子比较简单,实际用起来要进行很多扩展,比如在fragment里进行图片缓存和图片异步加载. 下面是ViewPagerIndicator源码运行后的效果,大家也都看过了,我多此一举截几张图: 下载源码请点击这里 ===========================================华丽的分割线==============

我的Android第三章:Android的组件介绍

小编摘录了Android文档介绍Android四大组件的基本内容,感觉文档的内容写的很详细所以小编将它写入了博客 Android 使用Java语言开发.Android SDK 工具编译代码-以及任意数据并连同相关资源打包进一个Android 包内,它是一个以.apk 为后缀的压缩文件. 一个 .apk 文件中的 所有代码就是一个程序.这个.apk文件就用于在Android设备上安装这个程序. 一旦安装成功,这个Android程序就拥有了自己独立的运行沙盒(沙盒是在受限的安全环境中运行应用程序的一

Android控件介绍

Android控件介绍 多选按钮(CheckBox) CheckBox有两个常用的事件,OnClickListener事件和OnClickChangeListener事件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_w

转android intent action 介绍大全

一些常用的Intent: Uri Action 功能 备注 geo:latitude,longitude Intent.ACTION_VIEW 打开地图应用程序并显示指定的经纬度   geo:0,0?q=street+address Intent.ACTION_VIEW 打开地图应用程序并显示指定的地址   http://web_address Intent.ACTION_VIEW 打开浏览器程序并显示指定的URL   https://web_address Intent.ACTION_VIEW

Android NDK 简单介绍、工具安装、环境配置

NDK全称:Native Development Kit. 1.NDK是一系列工具的集合. * NDK提供了一系列的工具,帮助开发人员高速开发C(或C++)的动态库,并能自己主动将so和java应用一起打包成apk.这些工具对开发人员的帮助是巨大的. * NDK集成了交叉编译器,并提供了对应的mk文件隔离平台.CPU.API等差异,开发者仅仅须要简单改动mk文件(指出"哪些文件须要编译"."编译特性要求"等),就能够创建出so. * NDK能够自己主动地将so和Ja

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa