Android 中ViewPager 实现banner无限轮播效果
2016-06-13 10:35
726 查看
概述
本文实现了ViewPager展示广告无限轮播的效果图。该效果网上资源非常多,实现方式大同小异,这里我将其进行封装在一个自定义的LinearLayout布局中。里面包含了ViewPager,PagerAdapter,进度引导原点,图片显示,图片点击事件等功能。所有的操作都在该类内部进行,调用者只需要进行简单的配置即可。
下面将使用代码显示如何调用:
布局文件:activity_main.xml
MainActivity中的代码:
以上便是简单的调用该封装的控件。使用起来非常简单,没有累赘的操作,代码清晰易懂。
下面便是自定义LinearLayout控件ImageCycleView,直接拿来使用即可,也可以自己定制它。
里面涉及到的布局文件:ad_cycle_view.xml
将上面两个文件分别放在对应的目录下,就可以直接使用了,是不是非常简单!!!
本文实现了ViewPager展示广告无限轮播的效果图。该效果网上资源非常多,实现方式大同小异,这里我将其进行封装在一个自定义的LinearLayout布局中。里面包含了ViewPager,PagerAdapter,进度引导原点,图片显示,图片点击事件等功能。所有的操作都在该类内部进行,调用者只需要进行简单的配置即可。
下面将使用代码显示如何调用:
布局文件:activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@android:color/holo_orange_dark" android:layout_height="match_parent" > <com.yuminfeng.myviewpager.ImageCycleView android:id="@+id/cycleView" android:layout_width="match_parent" android:layout_height="120dp" android:layout_margin="20dp" /> </LinearLayout>
MainActivity中的代码:
package com.yuminfeng.myviewpager; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.ImageView; import android.widget.Toast; public class MainActivity extends Activity { private ImageCycleView imageCycleView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageCycleView = (ImageCycleView) findViewById(R.id.cycleView); ArrayList<String> urlList = new ArrayList<>(); urlList.add(String.valueOf(R.drawable.pic1)); urlList.add(String.valueOf(R.drawable.pic2)); urlList.add(String.valueOf(R.drawable.pic3)); urlList.add(String.valueOf(R.drawable.pic4)); urlList.add(String.valueOf(R.drawable.pic5)); initCarsuelView(urlList); } private void initCarsuelView(ArrayList<String> urlList) { ImageCycleView.ImageCycleViewListener mAdCycleViewListener = new ImageCycleView.ImageCycleViewListener() { @Override public void onImageClick(int position, View imageView) { Toast.makeText(getApplicationContext(), "点击了:"+position, 0).show(); } @Override public void displayImage(String imageURL, ImageView imageView) { imageView.setImageResource(Integer.valueOf(imageURL)); } }; imageCycleView.setImageResources(urlList,mAdCycleViewListener); imageCycleView.startImageCycle(); } @Override protected void onStop() { super.onStop(); imageCycleView.pauseImageCycle(); } }
以上便是简单的调用该封装的控件。使用起来非常简单,没有累赘的操作,代码清晰易懂。
下面便是自定义LinearLayout控件ImageCycleView,直接拿来使用即可,也可以自己定制它。
package com.yuminfeng.myviewpager; import android.content.Context; import android.os.Handler; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.LinearLayout; import java.util.ArrayList; /** *自定义容器,用于循环播放广告 * */ public class ImageCycleView extends LinearLayout { /** * 上下文 */ private Context mContext; /** * 图片轮播控件viewpager */ private ViewPager mAdvPager = null; /** * viewpager适配器 */ private ImageCycleAdapter mAdvAdapter; /** * 图片轮播进度控件 */ private ViewGroup mGroup; /** * ViewPager的显示的imageview */ private ImageView mImageView = null; /** * 滚动图片进度指示列表 */ private ImageView[] dots = null; /** * 自动循环标志 */ private boolean isStop; public ImageCycleView(Context context) { super(context); init(context) ; } public ImageCycleView(Context context, AttributeSet attrs) { super(context, attrs); init(context) ; } private void init(Context context){ mContext = context; LayoutInflater.from(context).inflate(R.layout.ad_cycle_view, this); mAdvPager = (ViewPager) findViewById(R.id.adv_pager); mAdvPager.setOnPageChangeListener(new GuidePageChangeListener()); // 滚动图片右下指示器 mGroup = (ViewGroup) findViewById(R.id.circles); } /** * 装填图片数据 * * @param : * @param imageCycleViewListener */ public void setImageResources(ArrayList<String> imageUrlList,ImageCycleViewListener imageCycleViewListener) { if(imageUrlList != null && imageUrlList.size() > 0){ this.setVisibility(View.VISIBLE); }else{ this.setVisibility(View.GONE); return; } // 清除 mGroup.removeAllViews(); // 图片广告数量 final int imageCount = imageUrlList.size(); dots = new ImageView[imageCount]; for (int i = 0; i < imageCount; i++) { mImageView = new ImageView(mContext); mImageView.setScaleType(ScaleType.CENTER_CROP); dots[i] = mImageView; if (i == 0) { dots[i].setBackgroundResource(R.drawable.banner_dot_focus); } else { dots[i].setBackgroundResource(R.drawable.banner_dot_normal); } mGroup.addView(dots[i]); } mAdvAdapter = new ImageCycleAdapter(mContext, imageUrlList,imageCycleViewListener); mAdvPager.setAdapter(mAdvAdapter); } /** * 图片轮播(手动控制自动轮播与否,便于资源控件) */ public void startImageCycle() { startImageTimerTask(); } /** * 暂停轮播—用于节省资源 */ public void pauseImageCycle() { stopImageTimerTask(); } /** * 图片滚动任务 */ private void startImageTimerTask() { isStop = false; // 图片滚动 mHandler.postDelayed(mImageTimerTask, 3000); } /** * 停止图片滚动任务 */ private void stopImageTimerTask() { isStop=true; mHandler.removeCallbacks(mImageTimerTask); } private Handler mHandler = new Handler(); /** * 图片自动轮播Task */ private Runnable mImageTimerTask = new Runnable() { @Override public void run() { if (!isStop) { mAdvPager.setCurrentItem(mAdvPager.getCurrentItem()+1); } } }; /** * 轮播图片监听 * * @author minking */ private final class GuidePageChangeListener implements OnPageChangeListener { @Override public void onPageScrollStateChanged(int state) { if (state == ViewPager.SCROLL_STATE_IDLE){ //处于停止状态 startImageTimerTask(); }else if(state == ViewPager.SCROLL_STATE_DRAGGING){ //用户正在滑动 stopImageTimerTask(); } } @Override public void onPageScrolled(int position,float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { position = position % dots.length; // 设置图片滚动指示器背景 dots[position].setBackgroundResource(R.drawable.banner_dot_focus); for (int i = 0; i < dots.length; i++) { if (position != i) { dots[i].setBackgroundResource(R.drawable.banner_dot_normal); } } } } private class ImageCycleAdapter extends PagerAdapter { /** * 图片视图缓存列表 */ private ArrayList<ImageView> mImageViewCacheList; /** * 图片资源列表URL */ private ArrayList<String> mAdURL; /** * 广告图片点击监听 */ private ImageCycleViewListener mImageCycleViewListener; private Context mContext; public ImageCycleAdapter(Context context, ArrayList<String> mAdURL,ImageCycleViewListener imageCycleViewListener) { this.mContext = context; this.mAdURL = mAdURL; mImageCycleViewListener = imageCycleViewListener; mImageViewCacheList = new ArrayList<ImageView>(); } @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object obj) { return view == obj; } @Override public Object instantiateItem(ViewGroup container, final int position) { String imageUrl = mAdURL.get(position % mAdURL.size()); ImageView imageView ; if (mImageViewCacheList.isEmpty()) { imageView = new ImageView(mContext); imageView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); imageView.setScaleType(ScaleType.CENTER_CROP); } else { imageView = mImageViewCacheList.remove(0); } // 设置图片点击监听 imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mImageCycleViewListener.onImageClick(position % mAdURL.size(), v); } }); imageView.setTag(imageUrl); container.addView(imageView); mImageCycleViewListener.displayImage(imageUrl, imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ImageView view = (ImageView) object; mAdvPager.removeView(view); mImageViewCacheList.add(view); } } /** * 轮播控件的监听事件 * * @author minking */ public interface ImageCycleViewListener { /** * 加载图片资源 * * @param imageURL * @param imageView */ void displayImage(String imageURL, ImageView imageView); /** * 单击图片事件 * * @param position * @param imageView */ void onImageClick(int position, View imageView); } }
里面涉及到的布局文件:ad_cycle_view.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ad_rl" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v4.view.ViewPager android:id="@+id/adv_pager" android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/circles" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center" android:orientation="horizontal" android:paddingBottom="5dp" > </LinearLayout> </RelativeLayout>
将上面两个文件分别放在对应的目录下,就可以直接使用了,是不是非常简单!!!
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories