参考界面 : 携程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之后,在某些情况下会导致事务日志空间被占满的现象为:在执行增删改语句(产 ...

随机推荐

计算机网络之局域网&以太网
局域网的拓扑结构局域网最主要的特点是:网络为一个单位所拥有,且地理范围和站点数目均有限. 局域网具有广播功能,从一个站点可很方便地访问全网,局域网上的主机可共享连接在局域网上的各种硬件和软件资源. ...
android ActionBarActivity设置全屏无标题
新建的Activity继承自ActionBarActivity,设置全屏无标题本来很简单的事,但是没想到app竟然无缘无故的挂,要么就是白屏一片,要么就是黑屏.坑了我一个多小时!!! 原因是Actio ...
Spark技术内幕：Shuffle Pluggable框架详解，你怎么开发自己的Shuffle Service？
首先介绍一下需要实现的接口.框架的类图如图所示(今天CSDN抽风,竟然上传不了图片.如果需要实现新的Shuffle机制,那么需要实现这些接口. 1.1.1 org.apache.spark.shuf ...
修改CUSTOM.PLL文件调用客户化FORM&修改标准FORM
修改custom.pll文件里的过程event:参考例子如下,修改好后上传至$AU_TOP/resource 运行编译frmcmp_batch CUSTOM apps/apps module_typ ...
（一三〇）UITextField的光标操作扩展
简介在iOS开发中,有时候需要完全自主的定义键盘,用于完整的单词输入,例如计算机应用中,需要一次性的输入sin(,在移动光标时要完整的跳过sin(,在删除时也要完整的删除,这就需要对光标的位置进行精 ...
4.关于QT中的QFile文件操作,QBuffer,Label上添加QPixmap,QByteArray和QString之间的区别,QTextStream和QDataStream的区别,QT内存映射（
新建项目13IO 13IO.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += gui widgets network CON ...
自定义AlertDialog(仿微信)
安卓自定义AlertDialog,原理很简单: AlertDialog dialog = new AlertDialog.Builder(MainActivity.this).create(); di ...
python使用qq服务器发送邮件
python使用qq服务器发送邮件直接上代码: #!/usr/bin/python2.7 #-*- coding: UTF-8 -*- # sendmail.py # # init created: ...
【C++知识点】单例模式的简单实现
单例模式是最常见,也是使用最广泛的一种设计模式,其意图是保证一个类仅有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享. 单例模式的实现方法有很多种,本文只给出一个最简单的实现,如下: ...
深入浅出EF之ModelFirst和DBFirst
在上篇博文中,小编主要简单的介绍了一下EF的一些基础知识,其中,小编蜻蜓点水的提了一下ModelFirst和DBFirst,ModelFirst先设计实体,然后根据模型生成数据库,DBFirst根据数 ...

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

一. ViewPager适配页面问题

1. ViewPager出现的问题

2. 解决方案

3. 代码实现

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

1. ViewPager适配器PagerAdapter

2. 小圆点导航策略

3. 自动翻页导航策略

三. 程序所有代码 和 资源文件

【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题的更多相关文章

随机推荐

热门专题

三. 程序所有代码和资源文件