ViewPager实现左右两个屏幕的切换

系统 1526 0
项目终于需要这样的效果了,采用ViewPager去实现吧,让网上那些乱七八糟的屏幕切换类都终结了吧,ViewPager是google官方的!
下面是 我借鉴的文章

起初最早接触到左右两个屏幕切换的是在 《创新源于模仿之三:实现左右两个屏幕的切换》 这篇文章上,感谢作者为我们提供了这么好的DEMO。

什么是ViewPager呢?
它是实现左右两个屏幕平滑地切换的一个类,它是Google提供的,作为Android的一个补充。先上个效果图把,让大家有个直观的认识。

ViewPager实现左右两个屏幕的切换
我们在网上搜索这相关到主题的时候,会看到有很多关于这方面的问题:如何平滑?水平移动?等等。现在,我们可以自己不去亲自做这个费力的事情了,只需要使用到一个叫ViewPager的类即可。ViewPager是最近在Compatibility package发布的,支持android 1.6+,如果要使用的话,要通过SDK Manager去更新Compatibility package,具体使用方法在<SDK_DOC_PATH>/sdk/compatibility-library.html(SDK_DOC_PATH是自带Android文档的位置,需要更新到最新的文档才有)。

《创新源于模仿之三:实现左右两个屏幕的切换》提供了Workspace实现了左右屏幕的切换,现在Google I/O上已经发布了这样的Workspace类,方便我们大家去使用,稍后我会同本文DEMO的源代码一起发布。那ViewPager和Workspace有什么样的区别呢?先看下api doc的说法:
Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.

如上所述,ViewPager提供了一个适配器,方便我们对各个View进行控制,而Workspace需要我们手动去添加,它相当于是一个"静态切换"。接下来我将介绍下如何使用:

1、下载来Android SDK & AVD manager的更新:Available Packages -> Android Repository -> Android Compatibility Package, revision 3. 它将安装在\extras\android\compatibility\v4文件下

2、建立一个Android项目,在上述安装目录下把 android-support-v4.jar添加进项目,如果是最新的ADT,只需要右击project->Android Tools->Add Compatibility Library


3、在Activity中使用ViewPager

4、如果ViewPager是用xml去定义的,需要写上全局的路径,如:
    
<android.support.v4.view.ViewPager
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:id="@+id/awesomepager"/>

  

5、建立一个PagerAdapter,实现如下方法:
getCount(), instantiateItem(), destroyItem(), isViewFromObject() 。
总上所述,贴上俺的代码,我们发现,可以很快很简单的实现左右两个屏幕的切换
    
public class AwesomePagerActivity extends Activity {
    
	private ViewPager awesomePager;

	private Context cxt;
	private AwesomePagerAdapter awesomeAdapter;
	
	private LayoutInflater mInflater;
	private List<View> mListViews;
	
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        cxt = this;
        
        awesomeAdapter = new AwesomePagerAdapter();
        awesomePager = (ViewPager) findViewById(R.id.awesomepager);
        awesomePager.setAdapter(awesomeAdapter);
        
        mListViews = new ArrayList<View>();
        mInflater = getLayoutInflater();
        mListViews.add(mInflater.inflate(R.layout.layout1, null));
        mListViews.add(mInflater.inflate(R.layout.layout2, null));
        mListViews.add(mInflater.inflate(R.layout.layout3, null));
        
    }
    
    private class AwesomePagerAdapter extends PagerAdapter{

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

	    /**
	     * 从指定的position创建page
	     *
	     * @param container ViewPager容器
	     * @param position The page position to be instantiated.
	     * @return 返回指定position的page,这里不需要是一个view,也可以是其他的视图容器.
	     */
		@Override
		public Object instantiateItem(View collection, int position) {

			
			((ViewPager) collection).addView(mListViews.get(position),0);
			
			return mListViews.get(position);
		}

	    /**
	     * <span style="font-family:'Droid Sans';">从指定的position销毁page</span>
	     * 
	     * 
	     *<span style="font-family:'Droid Sans';">参数同上</span>
	     */
		@Override
		public void destroyItem(View collection, int position, Object view) {
			((ViewPager) collection).removeView(mListViews.get(position));
		}

		
		
		@Override
		public boolean isViewFromObject(View view, Object object) {
			return view==(object);
		}

		@Override
		public void finishUpdate(View arg0) {}
		

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {}
    	
    }
    
    
}

  

就这样,我们可以很容易就实现左右两个屏幕之间的切换。具体页面到内容就靠大家去发挥了!
项目代码: http://download.csdn.net/source/3488073

补充:
用ViewPager写的左右滑屏,默认是没有没有循环效果的。就是当滑到最左端或者最右端就不能滑动了,所以就试着弄了下在左面和右面各增加个空View,然后在onPageSelected方法中:
    @Override
public void onPageSelected(int arg0) {
  // TODO Auto-generated method stub
  System.out.println("onPageSelected = " + arg0);
  if(arg0 == 0)
      mViewPaper.setCurrentItem(arg0 + 1);
  else if(arg0 == mViewList.size() - 1)
      mViewPaper.setCurrentItem(arg0 - 1);
  }

  

其他文章:
android中的左右滑屏实现By ViewPager
android-整体UI设计-(滑动导航栏+滚动页面)
http://blog.csdn.net/swadair/article/details/7551609

android UI进阶之用ViewPager实现欢迎引导页面
http://blog.csdn.net/notice520/article/details/7105658

高仿优酷Android客户端图片左右滑动(自动切换)
http://blog.csdn.net/t12x3456/article/details/8160128

ViewPager实现左右两个屏幕的切换


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论