Android之ViewPager的介绍

王俊凯夫人

23152人浏览 · 2016-07-05 10:10:47

王俊凯夫人 · 2016-07-05 10:10:47 发布

一：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();
		}
		
	}
}

效果图：

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

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...