.

参考界面 : 携程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中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题的更多相关文章

  1. 【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  2. SQLServer数据库中开启CDC导致事务日志空间被占满的原因

    SQLServer数据库中开启CDC导致事务日志空间被占满的原因 转载  2017-04-01   投稿:mrr    我要评论 这篇文章主要介绍了SQLServer数据库中开启CDC导致事务日志空间 ...

  3. 解决微信浏览器video全屏的问题

    解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...

  4. Android中的沉浸式状态栏效果

    无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...

  5. Android中xml设置Animation动画效果详解

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  6. android中常见的内存泄漏和解决的方法

    android中的内存溢出预计大多数人在写代码的时候都出现过,事实上突然认为工作一年和工作三年的差别是什么呢.事实上干的工作或许都一样,产品汪看到的结果也都一样,那差别就是速度和质量了. 写在前面的一 ...

  7. Android中使用shape制作一个旋转的progressbar

    public class ZNtestResActivity extends Activity { @Override public void onCreate(Bundle savedInstanc ...

  8. Android中使用SurfaceView+MediaPlayer+自定义的MediaController实现自定义的视屏播放器

    效果图如下: (PS本来是要给大家穿gif动态图的,无奈太大了,没法上传) 功能实现:暂停,播放,快进,快退,全屏,退出全屏,等基本功能 实现的思路: 在主布局中放置一个SurfaceView,在Su ...

  9. SQLServer数据库中开启CDC导致“事务日志空间被占满,原因为REPLICATION”的原因分析和解决办法

    本文出处:http://www.cnblogs.com/wy123/p/6646143.html SQLServer中开启CDC之后,在某些情况下会导致事务日志空间被占满的现象为:在执行增删改语句(产 ...

随机推荐

  1. 消息队列MSMQ的使用

    1.MSMQ安装 控制面板-程序和功能-打开或关闭Windows功能-Microsoft Message Queue(MSMQ)服务器,选中所有,点击确定. 2.消息队列的应用场景(转载自http:/ ...

  2. vue服务端渲染缓存应用

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const m ...

  3. Python学习笔记:第3天 字符串的操作

    目录 1. python的数据类型 2. int类型的操作 3. bool类型 4. 字符串的操作 5. for循环 1. python的数据类型 int 整数 str 字符串.一般不会用字符串保存大 ...

  4. 快排(golang实现) 递归方法

    递归方法,逻辑简洁清晰.这个算法还是很重要的,需要重点记忆理解,面试经常考手写.据说是与傅里叶变换等并称“20世纪十大算法”.https://blog.csdn.net/v_JULY_v/articl ...

  5. SAS中的宏语言

    一.sas 宏变量 1) 宏变量属于SAS宏语言,与普通变量的区别是可以独立于DATA步 2) 可以再SAS程序中除数据行之外的任何地方定义并使用宏变量 3) %let语句定义宏变量并分配一个值给宏变 ...

  6. 关于 ssh 连接较慢的解决办法

    1. 概述 使用 ssh 软件连接 linux 时, 会碰到很慢的情况 2. 场景 概述 ssh 连接很慢 大概步骤 使用 xshell6 免费版, 连接 主机 一个小等待, 弹出 用户名 输入框 输 ...

  7. 实验1 查看CPU和内存,用机器指令和汇编指令编程

    ·实验任务 (1)使用Debug,用E命令和A命令以两种方式将指令写入内存 机器码        汇编指令 b8 20 4e    mov ax,4e20h 05 16 14    add ax,14 ...

  8. QT Creator 转VS2017+QT工程

    因为刚学QT 不熟悉其QT Creator 的开发环境,所以打算用VS2017来开发,因为要跨平台所以打算写出来的代码可以放在linux上编译. 这时就需要将VS2017的工程转换成QT Creato ...

  9. jxls-1.x导出excel入门——基本操作

    请注意,一下内容均基于1.x版本,2.x版本将另开随笔记录 一.概述  JXLS是基于Jakarta POI API的Excel报表生成工具,可以生成精美的Excel格式报表.它采用标签的方式,类似J ...

  10. 【转载】深入研究Windows内部原理绝对经典的资料

    原文:深入研究Windows内部原理绝对经典的资料 另一篇资料:深入研究Windows内部原理系列 (为了方便大家下,我打包了放在一下地址: 1-6:http://download.csdn.net/ ...