自制页面效果图 :

一. ViewPager适配页面问题

1. ViewPager出现的问题

ViewPager占满全屏问题 : ViewPager在XML中定义了android:layout_height 和 android:layout_width 之后, 不论这两个属性的值是 fill_parent 还是 wrap_content, 都会出现ViewPager占满全屏的问题;

不使用固定值定义宽高: 为了使ViewPager能适配各种类型的手机, 如果给ViewPager定义了高度和宽度, 与各种手机的界面兼容性肯定要大大的降低, 因此出现了下面的解决方案;

2. 解决方案

代码中添加组件 : 不在XML界面定义该组件, 可以在布局文件中,定义一个LinearLayout容器, 然后在代码中动态添加ViewPager;

好处 : 这样的好处是可以在代码中获取屏幕的宽高, 我们可以根据比例设定ViewPager的大小, 这样就解决了屏幕适配的问题;

3. 代码实现

//从布局文件中获取ViewPager父容器pagerLayout=(LinearLayout)findViewById(R.id.view_pager_content);//创建ViewPageradViewPager=newViewPager(this);//获取屏幕像素相关信息DisplayMetricsdm=newDisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);//根据屏幕信息设置ViewPager广告容器的宽高adViewPager.setLayoutParams(newLayoutParams(dm.widthPixels,dm.heightPixels*2/5));//将ViewPager容器设置到布局文件父容器中pagerLayout.addView(adViewPager);

二. ViewPager广告栏基本解决方案

1. ViewPager适配器PagerAdapter

自定义PagerAdapter类 : 我们需要自定义一个类, 去继承PageAdapter, 至少实现下面四个方法 :

destroyItem(View container, int position, Object object) :

作用 :删除container中指定位置position的页面;

参数 : container 就是容器, 这里指的是ViewPager对象, position就是删除的页面索引;

int getCount() :

作用 :获取ViewPager页面的个数;

返回值 : ViewPager页面个数;

Object instantiateItem(View container, int position) :

作用 :在给定的位置创建页面, PageAdapter负责向指定的position位置添加View页面;

参数 : container容器就是ViewPager, position指的是ViewPager的索引;

返回值 : 返回代表新的一页的对象;

boolean isViewFromObject(View view, Object object) :

作用 :决定instantiateItem()方法返回的Object对象是不是需要显示的页面关联, 这个方法必须要有;

参数 : view 要关联的页面, object instantiateItem()方法返回的对象;

返回值 : 是否要关联显示页面与 instantiateItem()返回值;

为PageAdapter关联数据源 : 可以将一个数组或者集合与PageAdapter关联,集合的索引与ViewPager的索引对应, destroyItem()方法中删除集合中对应索引的元素对象, instantiateItem 添加对应索引的元素对象;

PageAdapter 代码示例 :

privatefinalclassAdvAdapterextendsPagerAdapter{privateListviews=null;/***初始化数据源,即View数组*/publicAdvAdapter(Listviews){this.views=views;}/***从ViewPager中删除集合中对应索引的View对象*/@OverridepublicvoiddestroyItem(Viewcontainer,intposition,Objectobject){((ViewPager)container).removeView(views.get(position));}/***获取ViewPager的个数*/@OverridepublicintgetCount(){returnviews.size();}/***从View集合中获取对应索引的元素,并添加到ViewPager中*/@OverridepublicObjectinstantiateItem(Viewcontainer,intposition){((ViewPager)container).addView(views.get(position),0);returnviews.get(position);}/***是否将显示的ViewPager页面与instantiateItem返回的对象进行关联*这个方法是必须实现的*/@OverridepublicbooleanisViewFromObject(Viewview,Objectobject){returnview==object;}}

创建PageAdapter代码 :

privatevoidinitPageAdapter(){pageViews=newArrayList();ImageViewimg1=newImageView(this);img1.setBackgroundResource(R.drawable.view_add_1);pageViews.add(img1);ImageViewimg2=newImageView(this);img2.setBackgroundResource(R.drawable.view_add_2);pageViews.add(img2);ImageViewimg3=newImageView(this);img3.setBackgroundResource(R.drawable.view_add_3);pageViews.add(img3);ImageViewimg4=newImageView(this);img4.setBackgroundResource(R.drawable.view_add_4);pageViews.add(img4);ImageViewimg5=newImageView(this);img5.setBackgroundResource(R.drawable.view_add_5);pageViews.add(img5);ImageViewimg6=newImageView(this);img6.setBackgroundResource(R.drawable.view_add_6);pageViews.add(img6);adapter=newAdPageAdapter(pageViews);}

2. 小圆点导航策略

圆点存放策略 : 所有的小圆点都放在一个ViewGroup中, 有两种圆点, 一种是当前显示的, 一种是没激活的, 这里我们将一组圆点分别放入ImageView中, 并且将这些ImageView组装起来放到ViewGroup中即可;

圆点导航初始化 : 最初默认显示第一个页面, 第一个圆点激活, 根据ViewPager个数初始化圆点的个数, 组装圆点的时候, 第一个圆点状态激活;

代码如下 :

privatevoidinitCirclePoint(){ViewGroupgroup=(ViewGroup)findViewById(R.id.viewGroup);imageViews=newImageView[pageViews.size()];//广告栏的小圆点图标for(inti=0;i<pageViews.size();i++){//创建一个ImageView,并设置宽高.将该对象放入到数组中imageView=newImageView(this);imageView.setLayoutParams(newLayoutParams(20,20));imageViews[i]=imageView;//初始值,默认第0个选中if(i==0){imageViews[i].setBackgroundResource(R.drawable.point_focused);}else{imageViews[i].setBackgroundResource(R.drawable.point_unfocused);}//将小圆点放入到布局中group.addView(imageViews[i]);}}

ViewPager页面改变时圆点导航随之改变 : 获取ViewPager当前显示页面索引,重新组装ViewGroup中的圆点排列顺序, 这个方法在ViewPager页面改变监听器中实现;

代码如下 :

/***ViewPager页面改变监听器*/privatefinalclassAdPageChangeListenerimplementsOnPageChangeListener{/***页面滚动状态发生改变的时候触发*/@OverridepublicvoidonPageScrollStateChanged(intarg0){}/***页面滚动的时候触发*/@OverridepublicvoidonPageScrolled(intarg0,floatarg1,intarg2){}/***页面选中的时候触发*/@OverridepublicvoidonPageSelected(intarg0){//获取当前显示的页面是哪个页面atomicInteger.getAndSet(arg0);//重新设置原点布局集合for(inti=0;i<imageViews.length;i++){imageViews[arg0].setBackgroundResource(R.drawable.point_focused);if(arg0!=i){imageViews[i].setBackgroundResource(R.drawable.point_unfocused);}}}}

3. 自动翻页导航策略

线程中处理自动翻页 : 启动一个线程, 获取当前页面显示索引, 计算出下一个显示位置, 显示下一个页面;

相关代码 :

线程代码 :

newThread(newRunnable(){@Overridepublicvoidrun(){while(true){if(isContinue){viewHandler.sendEmptyMessage(atomicInteger.get());atomicOption();}}}}).start();

handler代码 :

privatevoidatomicOption(){atomicInteger.incrementAndGet();if(atomicInteger.get()>imageViews.length-1){atomicInteger.getAndAdd(-5);}try{Thread.sleep(3000);}catch(InterruptedExceptione){}}/**每隔固定时间切换广告栏图片*/privatefinalHandlerviewHandler=newHandler(){@OverridepublicvoidhandleMessage(Messagemsg){adViewPager.setCurrentItem(msg.what);super.handleMessage(msg);}};

三. 程序主要代码

主Activity源码 :

packageshuliang.han.myviewpager;importjava.util.ArrayList;importjava.util.List;importjava.util.concurrent.atomic.AtomicInteger;importandroid.app.Activity;importandroid.os.Bundle;importandroid.os.Handler;importandroid.os.Message;importandroid.support.v4.view.PagerAdapter;importandroid.support.v4.view.ViewPager;importandroid.support.v4.view.ViewPager.OnPageChangeListener;importandroid.util.DisplayMetrics;importandroid.view.View;importandroid.view.ViewGroup;importandroid.view.ViewGroup.LayoutParams;importandroid.widget.ImageView;importandroid.widget.LinearLayout;publicclassMainActivityextendsActivity{privateViewPageradViewPager;privateLinearLayoutpagerLayout;privateListpageViews;privateImageView[]imageViews;privateImageViewimageView;privateAdPageAdapteradapter;privateAtomicIntegeratomicInteger=newAtomicInteger(0);privatebooleanisContinue=true;@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initViewPager();}privatevoidinitViewPager(){//从布局文件中获取ViewPager父容器pagerLayout=(LinearLayout)findViewById(R.id.view_pager_content);//创建ViewPageradViewPager=newViewPager(this);//获取屏幕像素相关信息DisplayMetricsdm=newDisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);//根据屏幕信息设置ViewPager广告容器的宽高adViewPager.setLayoutParams(newLayoutParams(dm.widthPixels,dm.heightPixels*2/5));//将ViewPager容器设置到布局文件父容器中pagerLayout.addView(adViewPager);initPageAdapter();initCirclePoint();adViewPager.setAdapter(adapter);adViewPager.setOnPageChangeListener(newAdPageChangeListener());newThread(newRunnable(){@Overridepublicvoidrun(){while(true){if(isContinue){viewHandler.sendEmptyMessage(atomicInteger.get());atomicOption();}}}}).start();}privatevoidatomicOption(){atomicInteger.incrementAndGet();if(atomicInteger.get()>imageViews.length-1){atomicInteger.getAndAdd(-5);}try{Thread.sleep(3000);}catch(InterruptedExceptione){}}/**每隔固定时间切换广告栏图片*/privatefinalHandlerviewHandler=newHandler(){@OverridepublicvoidhandleMessage(Messagemsg){adViewPager.setCurrentItem(msg.what);super.handleMessage(msg);}};privatevoidinitPageAdapter(){pageViews=newArrayList();ImageViewimg1=newImageView(this);img1.setBackgroundResource(R.drawable.view_add_1);pageViews.add(img1);ImageViewimg2=newImageView(this);img2.setBackgroundResource(R.drawable.view_add_2);pageViews.add(img2);ImageViewimg3=newImageView(this);img3.setBackgroundResource(R.drawable.view_add_3);pageViews.add(img3);ImageViewimg4=newImageView(this);img4.setBackgroundResource(R.drawable.view_add_4);pageViews.add(img4);ImageViewimg5=newImageView(this);img5.setBackgroundResource(R.drawable.view_add_5);pageViews.add(img5);ImageViewimg6=newImageView(this);img6.setBackgroundResource(R.drawable.view_add_6);pageViews.add(img6);adapter=newAdPageAdapter(pageViews);}privatevoidinitCirclePoint(){ViewGroupgroup=(ViewGroup)findViewById(R.id.viewGroup);imageViews=newImageView[pageViews.size()];//广告栏的小圆点图标for(inti=0;i<pageViews.size();i++){//创建一个ImageView,并设置宽高.将该对象放入到数组中imageView=newImageView(this);imageView.setLayoutParams(newLayoutParams(10,10));imageViews[i]=imageView;//初始值,默认第0个选中if(i==0){imageViews[i].setBackgroundResource(R.drawable.point_focused);}else{imageViews[i].setBackgroundResource(R.drawable.point_unfocused);}//将小圆点放入到布局中group.addView(imageViews[i]);}}/***ViewPager页面改变监听器*/privatefinalclassAdPageChangeListenerimplementsOnPageChangeListener{/***页面滚动状态发生改变的时候触发*/@OverridepublicvoidonPageScrollStateChanged(intarg0){}/***页面滚动的时候触发*/@OverridepublicvoidonPageScrolled(intarg0,floatarg1,intarg2){}/***页面选中的时候触发*/@OverridepublicvoidonPageSelected(intarg0){//获取当前显示的页面是哪个页面atomicInteger.getAndSet(arg0);//重新设置原点布局集合for(inti=0;i<imageViews.length;i++){imageViews[arg0].setBackgroundResource(R.drawable.point_focused);if(arg0!=i){imageViews[i].setBackgroundResource(R.drawable.point_unfocused);}}}}privatefinalclassAdPageAdapterextendsPagerAdapter{privateListviews=null;/***初始化数据源,即View数组*/publicAdPageAdapter(Listviews){this.views=views;}/***从ViewPager中删除集合中对应索引的View对象*/@OverridepublicvoiddestroyItem(Viewcontainer,intposition,Objectobject){((ViewPager)container).removeView(views.get(position));}/***获取ViewPager的个数*/@OverridepublicintgetCount(){returnviews.size();}/***从View集合中获取对应索引的元素,并添加到ViewPager中*/@OverridepublicObjectinstantiateItem(Viewcontainer,intposition){((ViewPager)container).addView(views.get(position),0);returnviews.get(position);}/***是否将显示的ViewPager页面与instantiateItem返回的对象进行关联*这个方法是必须实现的*/@OverridepublicbooleanisViewFromObject(Viewview,Objectobject){returnview==object;}}}

源码下载地址 : http://download.csdn.net/detail/han1202012/6835401

Android中使用ViewPager制作广告栏滚屏效果