【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);//创建ViewPageradViewPager = 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; @Overrideprotected 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);//创建ViewPageradViewPager = 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占满全屏页面适配问题相关推荐
- css中调整高度充满_CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
- 在Android软件开发教学过程中应当注意的事项总结
近些年来,为了提升学生就业率和收入水平,某些高校或培训机构将Android软件开发当做一门专业学科.Android学科的主要目标是培养学生快速掌握Android开发基本知识和技能,以便于学生利用掌握的 ...
- u盘里android文件夹作用,Android应用开发android tv box ---- 插入u盘直接播放指定文件夹中的视频...
本文将带你了解Android应用开发android tv box ---- 插入u盘直接播放指定文件夹中的视频,希望本文对大家学Android有所帮助. android tv box ---- 插入u ...
- android ble 设备扫描程序,Android应用开发Android 7.0 BLE scan 问题：程序无错但扫描不到BLE设备...
本文将带你了解Android应用开发Android 7.0 BLE scan 问题:程序无错但扫描不到BLE设备,希望本文对大家学Android有所帮助. < 最近在做毕设,需要几周内从头学起 ...
- android studio socket 失败,Android应用开发Android Studio建立Socket连接失败解决方法
本文将带你了解Android应用开发Android Studio建立Socket连接失败解决方法,希望本文对大家学Android有所帮助. < Android Studio建立Socket连接失 ...
- android baseactivity,Android应用开发Android通过BaseActivity获取到当前启动的Activity名称...
本文将带你了解Android应用开发Android通过BaseActivity获取到当前启动的Activity名称,希望本文对大家学Android有所帮助. < 在BaseActivity的on ...
- android view 点击变暗,Android应用开发Android ImageView点击变暗效果
本文将带你了解Android应用开发Android ImageView点击变暗效果,希望本文对大家学Android有所帮助. < 自定义ImageView: 在ImageView中setPres ...
- android studio获取数字签名,Android应用开发Android Studio数字签名打包apk图文步骤教程...
本文将带你了解Android应用开发Android Studio数字签名打包apk图文步骤教程,希望本文对大家学Android有所帮助. Android Studio数字签名打包release版apk ...
- android程序包不存在,Android应用开发Android studio 错误: 程序包 不存在
本文将带你了解Android应用开发Android studio 错误: 程序包 不存在,希望本文对大家学Android有所帮助. " Android studio 错误: 程序包 不存在 ...
最新文章
- houdini + maya的pulldownit
- EngineRoot是在哪里定义的？
- bread是可数还是不可数_不可数名词用法详解，小小名词大作用，英语想打好基础必学的词性...
- 设计模式：模板方法模式（Template Method）
- kruskal算法java_克鲁斯卡尔算法(Kruskal)的java实现
- 测试mysql连接服务器_实现服务器与数据库的连接
- Oracle11g不能导出空表问题
- 条码管理系统mysql_银行通用固定资产条码管理系统
- 金融数据分析与挖掘实战 4.2 Matplotlib（二）
- android零碎要点---android开发者的福音，59_1 Android的界面设计工具，直接拖拉就可以设计界面，Java技术qq交流群：JavaDream：251572072
- 11.history命令历史
- ICPC程序设计题解书籍系列之二：刘汝佳：《算法竞赛入门经典训练指南》
- 20191003每日一句
- 【基础处理】基于matlab GUI语音信号播放【含Matlab源码 946期】
- android调整图片大小,Android图像调整大小并保留EXIF数据（方向，旋转等）
- TI MSP430工程配置及2019年电赛A题编程示例（使用430 F5529）
- 2021 MoDnet-V 抠图网络论文学习笔记
- 浅谈电话机器人与人工坐席的优劣势
- PHOTOSHOP绘制卡通人物简单教程
- 第1关 Numpy创建数组 (educoder