【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
.
参考界面 : 携程app首页的广告栏, 使用ViewPager实现
自制页面效果图 :
源码下载地址: http://download.csdn.net/detail/han1202012/6835401
.
作者 :万境绝尘
转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835
.
.
一. 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); //创建ViewPager adViewPager = new ViewPager(this); //获取屏幕像素相关信息 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //根据屏幕信息设置ViewPager广告容器的宽高 adViewPager.setLayoutParams(new LayoutParams(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 代码示例 :
private final class AdvAdapter extends PagerAdapter { private List<View> views = null; /** * 初始化数据源, 即View数组 */ public AdvAdapter(List<View> views) { this.views = views; } /** * 从ViewPager中删除集合中对应索引的View对象 */ @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(views.get(position)); } /** * 获取ViewPager的个数 */ @Override public int getCount() { return views.size(); } /** * 从View集合中获取对应索引的元素, 并添加到ViewPager中 */ @Override public Object instantiateItem(View container, int position) { ((ViewPager) container).addView(views.get(position), 0); return views.get(position); } /** * 是否将显示的ViewPager页面与instantiateItem返回的对象进行关联 * 这个方法是必须实现的 */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } }
创建PageAdapter代码 :
private void initPageAdapter() { pageViews = new ArrayList<View>(); ImageView img1 = new ImageView(this); img1.setBackgroundResource(R.drawable.view_add_1); pageViews.add(img1); ImageView img2 = new ImageView(this); img2.setBackgroundResource(R.drawable.view_add_2); pageViews.add(img2); ImageView img3 = new ImageView(this); img3.setBackgroundResource(R.drawable.view_add_3); pageViews.add(img3); ImageView img4 = new ImageView(this); img4.setBackgroundResource(R.drawable.view_add_4); pageViews.add(img4); ImageView img5 = new ImageView(this); img5.setBackgroundResource(R.drawable.view_add_5); pageViews.add(img5); ImageView img6 = new ImageView(this); img6.setBackgroundResource(R.drawable.view_add_6); pageViews.add(img6); adapter = new AdPageAdapter(pageViews); }
2. 小圆点导航策略
圆点存放策略 : 所有的小圆点都放在一个ViewGroup中, 有两种圆点, 一种是当前显示的, 一种是没激活的, 这里我们将一组圆点分别放入ImageView中, 并且将这些ImageView组装起来放到ViewGroup中即可;
圆点导航初始化 : 最初默认显示第一个页面, 第一个圆点激活, 根据ViewPager个数初始化圆点的个数, 组装圆点的时候, 第一个圆点状态激活;
代码如下 :
private void initCirclePoint(){ ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup); imageViews = new ImageView[pageViews.size()]; //广告栏的小圆点图标 for (int i = 0; i < pageViews.size(); i++) { //创建一个ImageView, 并设置宽高. 将该对象放入到数组中 imageView = new ImageView(this); imageView.setLayoutParams(new LayoutParams(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 页面改变监听器 */ private final class AdPageChangeListener implements OnPageChangeListener { /** * 页面滚动状态发生改变的时候触发 */ @Override public void onPageScrollStateChanged(int arg0) { } /** * 页面滚动的时候触发 */ @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } /** * 页面选中的时候触发 */ @Override public void onPageSelected(int arg0) { //获取当前显示的页面是哪个页面 atomicInteger.getAndSet(arg0); //重新设置原点布局集合 for (int i = 0; i < imageViews.length; i++) { imageViews[arg0] .setBackgroundResource(R.drawable.point_focused); if (arg0 != i) { imageViews[i] .setBackgroundResource(R.drawable.point_unfocused); } } } }
3. 自动翻页导航策略
线程中处理自动翻页 : 启动一个线程, 获取当前页面显示索引, 计算出下一个显示位置, 显示下一个页面;
.
相关代码 :
线程代码 :
new Thread(new Runnable() { @Override public void run() { while (true) { if (isContinue) { viewHandler.sendEmptyMessage(atomicInteger.get()); atomicOption(); } } } }).start();
handler代码 :
private void atomicOption() { atomicInteger.incrementAndGet(); if (atomicInteger.get() > imageViews.length - 1) { atomicInteger.getAndAdd(-5); } try { Thread.sleep(3000); } catch (InterruptedException e) { } } /* * 每隔固定时间切换广告栏图片 */ private final Handler viewHandler = new Handler() { @Override public void handleMessage(Message msg) { adViewPager.setCurrentItem(msg.what); super.handleMessage(msg); } };
.
作者 :万境绝尘
转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835
.
三. 程序所有代码 和 资源文件
XML布局文件 :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="5" android:orientation="vertical" > <LinearLayout android:id="@+id/view_pager_content" android:layout_height="wrap_content" android:layout_width="wrap_content" android:orientation="vertical"/> <LinearLayout android:id="@+id/viewGroup" android:layout_below="@id/view_pager_content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="-25px" android:gravity="right" android:orientation="horizontal" > </LinearLayout> </RelativeLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="2" android:orientation="vertical" android:background="#BBFFBB"> </LinearLayout> </LinearLayout>
主Activity源码 :
package shuliang.han.myviewpager; import java.util.ArrayList; import java.util.List; import java.util.concurrent.atomic.AtomicInteger; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends Activity { private ViewPager adViewPager; private LinearLayout pagerLayout; private List<View> pageViews; private ImageView[] imageViews; private ImageView imageView; private AdPageAdapter adapter; private AtomicInteger atomicInteger = new AtomicInteger(0); private boolean isContinue = true; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViewPager(); } private void initViewPager() { //从布局文件中获取ViewPager父容器 pagerLayout = (LinearLayout) findViewById(R.id.view_pager_content); //创建ViewPager adViewPager = new ViewPager(this); //获取屏幕像素相关信息 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //根据屏幕信息设置ViewPager广告容器的宽高 adViewPager.setLayoutParams(new LayoutParams(dm.widthPixels, dm.heightPixels * 2 / 5)); //将ViewPager容器设置到布局文件父容器中 pagerLayout.addView(adViewPager); initPageAdapter(); initCirclePoint(); adViewPager.setAdapter(adapter); adViewPager.setOnPageChangeListener(new AdPageChangeListener()); new Thread(new Runnable() { @Override public void run() { while (true) { if (isContinue) { viewHandler.sendEmptyMessage(atomicInteger.get()); atomicOption(); } } } }).start(); } private void atomicOption() { atomicInteger.incrementAndGet(); if (atomicInteger.get() > imageViews.length - 1) { atomicInteger.getAndAdd(-5); } try { Thread.sleep(3000); } catch (InterruptedException e) { } } /* * 每隔固定时间切换广告栏图片 */ private final Handler viewHandler = new Handler() { @Override public void handleMessage(Message msg) { adViewPager.setCurrentItem(msg.what); super.handleMessage(msg); } }; private void initPageAdapter() { pageViews = new ArrayList<View>(); ImageView img1 = new ImageView(this); img1.setBackgroundResource(R.drawable.view_add_1); pageViews.add(img1); ImageView img2 = new ImageView(this); img2.setBackgroundResource(R.drawable.view_add_2); pageViews.add(img2); ImageView img3 = new ImageView(this); img3.setBackgroundResource(R.drawable.view_add_3); pageViews.add(img3); ImageView img4 = new ImageView(this); img4.setBackgroundResource(R.drawable.view_add_4); pageViews.add(img4); ImageView img5 = new ImageView(this); img5.setBackgroundResource(R.drawable.view_add_5); pageViews.add(img5); ImageView img6 = new ImageView(this); img6.setBackgroundResource(R.drawable.view_add_6); pageViews.add(img6); adapter = new AdPageAdapter(pageViews); } private void initCirclePoint(){ ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup); imageViews = new ImageView[pageViews.size()]; //广告栏的小圆点图标 for (int i = 0; i < pageViews.size(); i++) { //创建一个ImageView, 并设置宽高. 将该对象放入到数组中 imageView = new ImageView(this); imageView.setLayoutParams(new LayoutParams(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 页面改变监听器 */ private final class AdPageChangeListener implements OnPageChangeListener { /** * 页面滚动状态发生改变的时候触发 */ @Override public void onPageScrollStateChanged(int arg0) { } /** * 页面滚动的时候触发 */ @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } /** * 页面选中的时候触发 */ @Override public void onPageSelected(int arg0) { //获取当前显示的页面是哪个页面 atomicInteger.getAndSet(arg0); //重新设置原点布局集合 for (int i = 0; i < imageViews.length; i++) { imageViews[arg0] .setBackgroundResource(R.drawable.point_focused); if (arg0 != i) { imageViews[i] .setBackgroundResource(R.drawable.point_unfocused); } } } } private final class AdPageAdapter extends PagerAdapter { private List<View> views = null; /** * 初始化数据源, 即View数组 */ public AdPageAdapter(List<View> views) { this.views = views; } /** * 从ViewPager中删除集合中对应索引的View对象 */ @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(views.get(position)); } /** * 获取ViewPager的个数 */ @Override public int getCount() { return views.size(); } /** * 从View集合中获取对应索引的元素, 并添加到ViewPager中 */ @Override public Object instantiateItem(View container, int position) { ((ViewPager) container).addView(views.get(position), 0); return views.get(position); } /** * 是否将显示的ViewPager页面与instantiateItem返回的对象进行关联 * 这个方法是必须实现的 */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } } }
.
作者 :万境绝尘
转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835
.
效果图 :
源码下载地址 : http://download.csdn.net/detail/han1202012/6835401
.
【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题的更多相关文章
- Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题
. 参考界面 : 携程app首页的广告栏, 使用ViewPager实现 自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...
- Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满屏幕
Android RelativeLayout wrap_content 而且 child view 使用 layout_alignParentBottom 时 RelativeLayout 高度会占满 ...
- SQLServer数据库中开启CDC导致事务日志空间被占满的原因
SQLServer数据库中开启CDC导致事务日志空间被占满的原因 转载 2017-04-01 投稿:mrr 我要评论 这篇文章主要介绍了SQLServer数据库中开启CDC导致事务日志空间 ...
- Android项目开发遇到的问题(64K的错误)的解决之路,从入坑到出坑
自己一个android项目,一直以来进展还算顺利,没有遇到什么严重性的问题,今天准备给同事手机上安装一下玩玩,谁知丢人丢大,无法build apk!报错!my god,我开发没问题啊,我手机连上usb ...
- 码农人生——从未学过Android如何开发Android App 案例讲解-第002期案例
标题有点晃眼,本次分享是002期博文的实践故事,不会有任何代码.也不会教别人android 如何开发,类似博文已经有大批大批,而且还会有陆陆续续的人写,我写的文章,主要是经验之谈,希望总结出的一些方法 ...
- android studio 开发android app 真机调试
大家都知道开发android app 的时候可以有2种调试方式, 一种是Android Virtual Device(虚拟模拟器) ,另一种就是真机调试. 这里要说的是真机调试的一些安装步骤: 1. ...
- ScrollView属性fillViewport解决android布局不能撑满全屏的问题
转:http://blog.sina.com.cn/s/blog_6cf2ea6a0102v61f.html 开发项目中遇到一个问题,布局高度在某些国产酷派小屏幕手机上高度不够全部显示,于是使用了Sc ...
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
- SQLServer数据库中开启CDC导致“事务日志空间被占满,原因为REPLICATION”的原因分析和解决办法
本文出处:http://www.cnblogs.com/wy123/p/6646143.html SQLServer中开启CDC之后,在某些情况下会导致事务日志空间被占满的现象为:在执行增删改语句(产 ...
随机推荐
- Dynamics CRM2013 导入解决方案(快速视图窗体)SystemForm With Id Does Not Exist的解决方法
在CRM2013的环境下导入解决方案报错,具体报错截图如下 根据id去数据库中查找这个id的systemform,确认是存在的,而且通过第二条记录我们也可以看到这个systemform属于哪个实体,我 ...
- Android底层开发经验
最近看到一个博客,他的博文虽然是转载的,但源作者肯定对底层的理解可谓是非常透彻,一副思维导图就可以将整个重要体系建立起来,非常适合大家学习.学习不单单只要有代码,生动有趣更重要.在此推荐一波: htt ...
- Python 3 智能发音
真是十分神奇.. import win32com.client import time s = win32com.client.Dispatch("SAPI.SpVoice") s ...
- python 3.3.3 字面量,正则,反斜杠和原始字符串
两个不起眼但是比较重要的设定 Python str类型的字面量解释器 当反斜杠及其紧接字符无法构成一个具有特殊含义的序列('recognized escape sequences')时,Python选 ...
- 使用Dialog实现全局Loading加载框
Dialog实现全局Loading加载框 很多人在实现Loading加载框的时候,都是在当前的页面隐藏一个Loading布局,需要加载的时候,显示出来,加载完再隐藏 使用Dialog实现Loading ...
- Findbugs异常总汇
FindBugs是基于Bug Patterns概念,查找javabytecode(.class文件)中的潜在bug,主要检查bytecode中的bug patterns,如NullPoint空指针检查 ...
- Java程序员必须掌握的线程知识-Callable和Future
Callable和Future出现的原因 创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果. 如果需 ...
- Dynamics CRM2013 流程拷贝
在CRM中工作流是一个非常不错的功能,在实际业务场景中能满足各种业务需求.在我们设置一个工作流的时候,同一个实体一个逻辑功能可能需要多个工作流来实现,而多个工作流的不同之处可能只是启动时间或者是步骤中 ...
- WINDOWS系统注册表取得管理权限研究
有的时候开发我们需要取得系统管理员权限,可以通过修改注册表实现,研究网上的各种方法,整理得一下脚本实现取得管理员权限 脚本如下 Windows Registry Editor Version 5.00 ...
- UNIX网络编程——epoll 系列函数简介、与select、poll 的区别
前面博客<<UNIX环境高级编程--epoll函数使用详解>>有关于epoll函数的讲解. 一.epoll 系列函数简介 #include <sys/epoll.h> ...