Android高效率实现广告图片循环播放，手把手教会你实现效果，项目中直接使用

手把手教会你实现效果，项目中直接使用"/>

Android高效率实现广告图片循环播放，手把手教会你实现效果，项目中直接使用

转载请注明出处：

好多app上都会看到广告图片无限制的循环播放，今天带大家一步步实现自己定义的控件，项目中使用自己定义的控件那就是一个字帅

按照惯例，先看效果图：

功能介绍：

图片可以手动左右滑动，当手指抬起时图片间隔3秒时间自动播放，无缝隙循环播放

思路分析：

1. 图片可以手动左右滑动
   这里采用ViewPager实现左右滑动，又因为当手指按下时，手动滑动，自动切换功能停止，这里采用自定义ViewPager类，把down和up事件提供给调用者，自己写个回调方法，当手指按下时通知调用者停止定时器，当手指抬起时，开启定时器，实现自动定时切换页面
2. 松开手后图片间隔3秒时间自动切换
   这里采用定时器，当间隔3秒时执行任务，也可以使用handler（略），这里采用定时器
3. 图片切换时对应下方圆点也对应改变
   这里是通过获取ViwePager当前显示的条目（索引）设置给对应圆点显示

步骤：

1. 自定义类MyViewPager继承ViewPager
2. 自定义类MyContainer继承RelativeLayout，将所有的逻辑处理等在这个类中进行，封装到这个类中
3. 创建一个容器，存储圆点，根据页面数来创建圆点ImageView控件，再根据当前页面显示的条目指定对应圆点显示，获取到当前页面索引值是通过给ViewPager设置页面改变监听器来获取到
4. 这里的原点采用shape通过xml绘制
5. 在MyContainer视图显示在主MainActivity中

原理图：

具体代码实现：

自定义类MyViewPager继承ViewPager

public class MyViewPager extends ViewPager {public MyViewPager(Context context) {this(context,null);}public MyViewPager(Context context, AttributeSet attrs) {super(context, attrs);}@Overridepublic boolean onTouchEvent(MotionEvent ev) {switch (ev.getAction()) {case MotionEvent.ACTION_DOWN:if(listener != null) {listener.down();}break;case MotionEvent.ACTION_UP:if(listener != null) {listener.up();}break;default:break;}return super.onTouchEvent(ev);}private OnTouchChangeListener listener;public void setTouchChangeListener(OnTouchChangeListener listener) {this.listener = listener;}public interface OnTouchChangeListener {public void down();public void up();}
}

上面代码很容易理解，这里主要是想办法获取到down和up事件
传递给外部调用，OnTouchChangeListener 是自己定义的接口提供回调方法通知调用者手指的动作

定义容器MyContainer类，继承RelativeLayout控件

/*** 存储圆点图片，原点的父容器*/private LinearLayout linearLayout;/*** 自定义ViewPager类*/private MyViewPager viewPager;/*** 适配器*/private MyAdapter myAdapter;/*** 定时器*/private Timer timer;/*** 定时器任务*/private MyTimerTask task;/*** 原点父容器的高度*/private int height = 50;/*** 设置原点的宽*/private int circleWidth = 25;/*** 设置原点的高*/private int circleHeight = 25;/*** 设置原点父容器的背景色*/private int backgroundColor = Color.parseColor("#55aaaaaa");/*** 当前容器的高度*/private int containerHeight = 300;/*** 弱引用，存储Activity，防止内存泄漏*/private WeakReference<Activity> weak;/*** 集合存储外部传过来的数据*/private List<ImageView> lists = new ArrayList<>();

上面定义的字段，标注很详细

public void init() {//设置当前容器布局大小RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,containerHeight);//给当前控件设置布局setLayoutParams(params);//创建自定义ViewPagerviewPager = new MyViewPager(getContext());//设置自定义ViewPager布局大小RelativeLayout.LayoutParams paramsPager = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);//给自定义ViewPager添加布局viewPager.setLayoutParams(paramsPager);//创建适配器myAdapter = new MyAdapter();//设置适配器viewPager.setAdapter(myAdapter);//设置页面改变监听器viewPager.addOnPageChangeListener(this);//设置自定义的触摸监听器viewPager.setTouchChangeListener(this);//创建控件下方的视图容器，存储圆点图片，原点的父容器linearLayout = new LinearLayout(getContext());RelativeLayout.LayoutParams linearLayoutParams = new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT,height);//设置背景颜色linearLayout.setBackgroundColor(backgroundColor);//设置子控件对齐方式linearLayout.setGravity(Gravity.CENTER_VERTICAL|Gravity.RIGHT);//设置本身在外部的对齐方式linearLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);//设置布局linearLayout.setLayoutParams(linearLayoutParams);//将自定ViewPager控件添加到当前容器中addView(viewPager);//将圆点容器添加到当前容器中addView(linearLayout);}

这个方法里主要是进行初始化，创建ViewPager控件和LinearLayout容器存储圆点，需要注意的是，将这个两个容器创建完一定要添加到当前容器中，通addView方法添加当前布局

public void addImageData(List<ImageView> list, Activity activity) {if(weak == null) {//防止关闭时，引用外部对象造成内存泄漏weak = new WeakReference<Activity>(activity);}//添加数据时，先清空lists.clear();this.lists = list;//设置当前页面viewPager.setCurrentItem(3000*lists.size());myAdapter.notifyDataSetChanged();//添加圆点到容器中addImagePoint(0);//开启定时器startScrollPager();}

上方代码主要是外部调用设置数据，设置ViewPager当前显示的页面setCurrentItem(3000*lists.size());这里的3000*lists.size()是取页面数的整数倍，3000是随便设置的数，这样可以实现ViewPager左右循环无缝隙滑动，相当于取个中间页，左右都有页数，可以滑动，这里需要注意WeakReference弱引用，将外部传进来activity存在弱引用中，防止外部页面开始关闭了，但是activity页面对象被引用无法正常关闭页面导致内存泄漏

/*** 根据数据个数创建原点* @param curentPosition*/private void addImagePoint(int curentPosition) {for(int i = 0; i < lists.size(); i++) {ImageView imageView = new ImageView(getContext());//设置图片控件布局，circleWidth和circleWidth指定图片大小LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(circleWidth,circleHeight);//设置原点图片右边间距大小params.rightMargin = 15;if(curentPosition == i) {imageView.setImageResource(R.drawable.circle_a);}else {imageView.setImageResource(R.drawable.circle_b);}//设置布局imageView.setLayoutParams(params);//把原点添加到父容器中linearLayout.addView(imageView);}}

通过ViewPager页面数，动态创建原点，通过当前页面索引选中当前原点

/*** 页面改变时，同步显示的原点* @param position*/private void changeImageState(int position) {for(int i = 0; i < linearLayout.getChildCount(); i++) {ImageView childAt = (ImageView) linearLayout.getChildAt(i);if(position == i) {childAt.setImageResource(R.drawable.circle_a);}else {childAt.setImageResource(R.drawable.circle_b);}}}

这个方法根据不同页面显示对应圆点，可以认为是同步原点显示

private class MyAdapter extends PagerAdapter {@Overridepublic int getCount() {return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {//网络请求图片在这里进行,注意防止图片错位ImageView imageView = lists.get(position % lists.size());//添加对应控件到ViewPager((ViewPager)container).addView(imageView);return imageView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {//从ViewPager中移除对应控件((ViewPager)container).removeView((ImageView) object);}}

上方类是给ViewPager设置适配器，这里需要注意，通过instantiateItem方法给当前页面添加ImageView控件，在destroyItem方法中一定要移除对应ImageView控件，这里需要注意getCount() 方法返回最大页数，为了实现无限制页面播放，其实页面是有限制的，页面数为Integer.MAX_VALUE

    /***创建定时器，方法多种，可以使用handler*/private class MyTimerTask extends TimerTask {@Overridepublic void run() {if(weak != null) {weak.get().runOnUiThread(new Runnable() {@Overridepublic void run() {//设置显示当前页面viewPager.setCurrentItem(viewPager.getCurrentItem()+1);}});}}}

这个类是创建定时器任务，当定时时间到了就会执行run方法，在这里设置显示下一个页面，当前页面加一

    /*** 开启定时器*/public void startScrollPager() {timer = new Timer();task = new MyTimerTask();//执行定时器timer.schedule(task,3000,3000);}/*** 停止滚动*/public void stopScrollPager() {if(timer != null) {timer.cancel();timer = null;}if(task != null) {task.cancel();task = null;}}

startScrollPager() 方法开启定时器，stopScrollPager() 关闭定时器

    @Overridepublic void down() {//当手指按下时，取消定时器stopScrollPager();}@Overridepublic void up() {//当手指抬起时，启动定时器startScrollPager();}

当手指按下时，关闭定时器，当手指抬起时，开启定时器

    /*** 当关闭页面时，取消定时器*/@Overrideprotected void onDetachedFromWindow() {super.onDetachedFromWindow();//取消定时器stopScrollPager();}

这个方法是当页面从当前窗体解除关联时会执行这个方法，在这里关闭定会器

绘制原点xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="" android:shape="rectangle"><corners android:radius="10dp" /><solid android:color="@android:color/white" />
</shape>

这里是绘制原点
这里MainActivity方法就不给列出了，详细下载Demo，代码里标注很详细

如果你觉得此文章对你有收获，那么就顶下，你的无意间的动作就是我写出好文章的动力，希望能够帮助到大家，共同进步

如果大家还有什么疑问，请在下方留言。

源码下载，请点击这里！