Android最强的广告轮播

如今的Android开发需求越来越来多，实现效果越来越酷炫，很多Android APP都要实现PC网站上那样的图片轮播效果，那么，这些图片的轮播效果是如何实现的呢？下面，我就跟大家一起来实现这些酷炫的功能。

一、原理

首先，将这些要轮播的图片和一些文本分别放置在不同的数据集合中，程序启动的时候默认显示一组图片和文本数据，然后启动一个定时器，每隔一段时间便替换掉显示的图片和文本数据，同时加入一些动画效果，已达到轮播的特效。同时，我们也要实现手指滑动图片达到轮播的效果。

二、实现

1、程序启动界面MainActivity

我将所有的实现都放在了MainActivity中，下面我们就来分解来看这个类。

1)成员变量

这些成员变量包括界面上显示的控件，存放图片的id数组，存放图片的标题数组，自定义的ViewPagerAdapter适配器，线程池ScheduledExecutorService

具体代码如下:

private ViewPager mViewPaper;<span style="white-space: pre;"></span>public   List<ImageView> images;<span style="white-space: pre;"></span>private List<View> dots;<span style="white-space: pre;"></span>private int currentItem;<span style="white-space: pre;"></span>//记录上一次点的位置<span style="white-space: pre;"></span>private int oldPosition = 0;<span style="white-space: pre;"></span>//存放图片的id<span style="white-space: pre;"></span>private int[] imageIds = new int[]{<span style="white-space: pre;"></span>R.drawable.map_23,<span style="white-space: pre;"></span>R.drawable.map_24,<span style="white-space: pre;"></span>R.drawable.map_25,<span style="white-space: pre;"></span>R.drawable.map_26,<span style="white-space: pre;"></span>R.drawable.map_27,<span style="white-space: pre;"></span>};<span style="white-space: pre;"></span>//存放图片的标题<span style="white-space: pre;"></span>private String[]  titles = new String[]{<span style="white-space: pre;"></span>"非凡抢购",<span style="white-space: pre;"></span><span style="white-space: pre;"></span>"抢购，抢购，",<span style="white-space: pre;"></span><span style="white-space: pre;"></span>"谁最快，谁就是最大的抢购赢家",<span style="white-space: pre;"></span><span style="white-space: pre;"></span>"时间就使金钱，速度就是生命",<span style="white-space: pre;"></span><span style="white-space: pre;"></span>"又一波，抢购潮开始啦  。。。。"<span style="white-space: pre;"></span>};<span style="white-space: pre;"></span>private TextView title;<span style="white-space: pre;"></span>//定义adapter<span style="white-space: pre;"></span>private  ViewPagerAdapter   adapter;<span style="white-space: pre;"></span>private ScheduledExecutorService scheduledExecutorService;

2)onCreate方法

这个方法是程序启动创建界面时的回调方法，这个方法中主要实现的功能就是初始化界面，同时为ViewPager设置页面变化监听事件。

具体实现代码如下:

@Override<span style="white-space: pre;"></span>public View onCreateView(LayoutInflater inflater, ViewGroup container,<span style="white-space: pre;"></span>Bundle savedInstanceState) {<span style="white-space: pre;"></span>View   view =inflater.inflate(R.layout.fragment_nearby_quanbu_one, null);<span style="white-space: pre;"></span>mViewPaper = (ViewPager) view.findViewById(R.id.vp);<span style="white-space: pre;"></span>btnnazhuang=  (Button) view.findViewById(R.id.bt_nearber_nvzhuang);<span style="white-space: pre;"></span><span style="white-space: pre;"></span>//显示的图片<span style="white-space: pre;"></span>images = new ArrayList<ImageView>();<span style="white-space: pre;"></span>for(int i = 0; i < imageIds.length; i++){<span style="white-space: pre;"></span>ImageView imageView = new   ImageView(getActivity());<span style="white-space: pre;"></span>imageView.setBackgroundResource(imageIds[i]);<span style="white-space: pre;"></span>images.add(imageView);<span style="white-space: pre;"></span>}<span style="white-space: pre;"></span>//显示的小点<span style="white-space: pre;"></span>dots = new ArrayList<View>();<span style="white-space: pre;"></span>dots.add(view.findViewById(R.id.dot_0));<span style="white-space: pre;"></span>dots.add(view.findViewById(R.id.dot_1));<span style="white-space: pre;"></span>dots.add(view.findViewById(R.id.dot_2));<span style="white-space: pre;"></span>dots.add(view.findViewById(R.id.dot_3));<span style="white-space: pre;"></span>dots.add(view.findViewById(R.id.dot_4));<span style="white-space: pre;"></span>title = (TextView)view. findViewById(R.id.title);<span style="white-space: pre;"></span>title.setText(titles[0]);<span style="white-space: pre;"></span>adapter=new ViewPagerAdapter();<span style="white-space: pre;"></span>mViewPaper.setAdapter(adapter);<span style="white-space: pre;"></span>setListener();<span style="white-space: pre;"></span>return view;<span style="white-space: pre;"></span>}<span style="white-space: pre;"></span>private void setListener() {<span style="white-space: pre;"></span>btnnazhuang.setOnClickListener(new OnClickListener() {<span style="white-space: pre;"></span>@Override<span style="white-space: pre;"></span>public void onClick(View arg0) {<span style="white-space: pre;"></span>startActivity(new Intent(getActivity(), QiangouActivity.class));<span style="white-space: pre;"></span>}<span style="white-space: pre;"></span>});mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {<span style="white-space: pre;"></span><span style="white-space: pre;"></span>@Override<span style="white-space: pre;"></span>public void onPageSelected(int position) {<span style="white-space: pre;"></span>title.setText(titles[position]);<span style="white-space: pre;"></span>dots.get(position).setBackgroundResource(R.drawable.pointed);<span style="white-space: pre;"></span>dots.get(oldPosition).setBackgroundResource(R.drawable.point);<span style="white-space: pre;"></span><span style="white-space: pre;"></span>oldPosition = position;<span style="white-space: pre;"></span>currentItem = position;<span style="white-space: pre;"></span>}<span style="white-space: pre;"></span><span style="white-space: pre;"></span>@Override<span style="white-space: pre;"></span>public void onPageScrolled(int arg0, float arg1, int arg2) {<span style="white-space: pre;"></span><span style="white-space: pre;"></span>}<span style="white-space: pre;"></span><span style="white-space: pre;"></span>@Override<span style="white-space: pre;"></span>public void onPageScrollStateChanged(int arg0) {<span style="white-space: pre;"></span><span style="white-space: pre;"></span>}<span style="white-space: pre;"></span>});<span style="white-space: pre;"></span>}

3)自定义Adapter类ViewPagerAdapter

这个自定义的Adapter类不同于以往的自定义Adapter类，它继承自PagerAdapter，PagerAdapter中实现了图片切换的动画效果

将具体实现代码如下:

/** * 自定义Adapter * @author liuyazhuang * */private class ViewPagerAdapter extends PagerAdapter{@Overridepublic int getCount() {return images.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup view, int position, Object object) {// TODO Auto-generated method stub//super.destroyItem(container, position, object);//view.removeView(view.getChildAt(position));//view.removeViewAt(position);view.removeView(images.get(position));}@Overridepublic Object instantiateItem(ViewGroup view, int position) {// TODO Auto-generated method stubview.addView(images.get(position));return images.get(position);}}

4)onStart()方法

这个方法是界面创建完成，启动时的回调方法，我在这个方法中完成的操作是，创建线程池启动定时调度任务，调用自定义的线程任务，实现定时实现图片轮播效果。

具体实现代码如下：

/** * 利用线程池定时执行动画轮播 */@Overrideprotected void onStart() {// TODO Auto-generated method stubsuper.onStart();scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();scheduledExecutorService.scheduleWithFixedDelay(new ViewPageTask(), 2, 2, TimeUnit.SECONDS);}

5)图片轮播任务ViewPageTask

这个类实现了Runnable接口，在run方法中实现了图片轮播的显示效果，并通过handler通知UI线程，UI线程更新界面显示，这里我们不需要传递任何数据，所以通过handler发送空消息即可。

具体实现代码如下:

/** * 图片轮播任务 * @author liuyazhuang * */private class ViewPageTask implements Runnable{@Overridepublic void run() {currentItem = (currentItem + 1) % imageIds.length;mHandler.sendEmptyMessage(0);}}

6)handler

接收ViewPageTask消息完成UI更新操作

具体实现代码如下：

/** * 接收子线程传递过来的数据 */private Handler mHandler = new Handler(){public void handleMessage(android.os.Message msg) {mViewPaper.setCurrentItem(currentItem);};};

7)onStop

我在这个方法中主要实现的操作就是停止线程池的执行，释放线程池资源。

具体代码如下:

@Overrideprotected void onStop() {// TODO Auto-generated method stubsuper.onStop();if(scheduledExecutorService != null){scheduledExecutorService.shutdown();scheduledExecutorService = null;}}

8)完整代码如下：

</pre>package muzi.yunfeng.nearderfragment;import java.util.ArrayList;import java.util.List;import java.util.concurrent.Executors;import java.util.concurrent.ScheduledExecutorService;import java.util.concurrent.TimeUnit;import muzi.yunfeng.JunMei.R;import muzi.yunfeng.ui.QiangouActivity;import android.content.Intent;import android.os.Bundle;import android.os.Handler;import android.support.v4.app.Fragment;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.Button;import android.widget.ImageView;import android.widget.TextView;public class NearbyQuanbuFragment extends Fragment{<span style="white-space:pre"></span>private ViewPager mViewPaper;<span style="white-space:pre"></span>public   List<ImageView> images;<span style="white-space:pre"></span>private List<View> dots;<span style="white-space:pre"></span>private int currentItem;<span style="white-space:pre"></span>//记录上一次点的位置<span style="white-space:pre"></span>private int oldPosition = 0;<span style="white-space:pre"></span>//存放图片的id<span style="white-space:pre"></span>private int[] imageIds = new int[]{<span style="white-space:pre"></span>R.drawable.map_23,<span style="white-space:pre"></span>R.drawable.map_24,<span style="white-space:pre"></span>R.drawable.map_25,<span style="white-space:pre"></span>R.drawable.map_26,<span style="white-space:pre"></span>R.drawable.map_27,<span style="white-space:pre"></span>};<span style="white-space:pre"></span>//存放图片的标题<span style="white-space:pre"></span>private String[]  titles = new String[]{<span style="white-space:pre"></span>"非凡抢购",<span style="white-space:pre"></span><span style="white-space:pre"></span>"抢购，抢购，",<span style="white-space:pre"></span><span style="white-space:pre"></span>"谁最快，谁就是最大的抢购赢家",<span style="white-space:pre"></span><span style="white-space:pre"></span>"时间就使金钱，速度就是生命",<span style="white-space:pre"></span><span style="white-space:pre"></span>"又一波，抢购潮开始啦  。。。。"<span style="white-space:pre"></span>};<span style="white-space:pre"></span>private TextView title;<span style="white-space:pre"></span>//定义adapter<span style="white-space:pre"></span>private  ViewPagerAdapter   adapter;<span style="white-space:pre"></span>private ScheduledExecutorService scheduledExecutorService;   <span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public View onCreateView(LayoutInflater inflater, ViewGroup container,<span style="white-space:pre"></span>Bundle savedInstanceState) {<span style="white-space:pre"></span>View   view =inflater.inflate(R.layout.fragment_nearby_quanbu_one, null);<span style="white-space:pre"></span>mViewPaper = (ViewPager) view.findViewById(R.id.vp);<span style="white-space:pre"></span>btnnazhuang=  (Button) view.findViewById(R.id.bt_nearber_nvzhuang);<span style="white-space:pre"></span><span style="white-space:pre"></span>//显示的图片<span style="white-space:pre"></span>images = new ArrayList<ImageView>();<span style="white-space:pre"></span>for(int i = 0; i < imageIds.length; i++){<span style="white-space:pre"></span>ImageView imageView = new   ImageView(getActivity());<span style="white-space:pre"></span>imageView.setBackgroundResource(imageIds[i]);<span style="white-space:pre"></span>images.add(imageView);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>//显示的小点<span style="white-space:pre"></span>dots = new ArrayList<View>();<span style="white-space:pre"></span>dots.add(view.findViewById(R.id.dot_0));<span style="white-space:pre"></span>dots.add(view.findViewById(R.id.dot_1));<span style="white-space:pre"></span>dots.add(view.findViewById(R.id.dot_2));<span style="white-space:pre"></span>dots.add(view.findViewById(R.id.dot_3));<span style="white-space:pre"></span>dots.add(view.findViewById(R.id.dot_4));<span style="white-space:pre"></span>title = (TextView)view. findViewById(R.id.title);<span style="white-space:pre"></span>title.setText(titles[0]);<span style="white-space:pre"></span>adapter=new ViewPagerAdapter();<span style="white-space:pre"></span>mViewPaper.setAdapter(adapter);<span style="white-space:pre"></span>setListener();<span style="white-space:pre"></span>return view;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>private void setListener() {<span style="white-space:pre"></span>btnnazhuang.setOnClickListener(new OnClickListener() {<span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void onClick(View arg0) {<span style="white-space:pre"></span>startActivity(new Intent(getActivity(), QiangouActivity.class));<span style="white-space:pre"></span>}<span style="white-space:pre"></span>});mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {<span style="white-space:pre"></span><span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void onPageSelected(int position) {<span style="white-space:pre"></span>title.setText(titles[position]);<span style="white-space:pre"></span>dots.get(position).setBackgroundResource(R.drawable.pointed);<span style="white-space:pre"></span>dots.get(oldPosition).setBackgroundResource(R.drawable.point);<span style="white-space:pre"></span><span style="white-space:pre"></span>oldPosition = position;<span style="white-space:pre"></span>currentItem = position;<span style="white-space:pre"></span>}<span style="white-space:pre"></span><span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void onPageScrolled(int arg0, float arg1, int arg2) {<span style="white-space:pre"></span><span style="white-space:pre"></span>}<span style="white-space:pre"></span><span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void onPageScrollStateChanged(int arg0) {<span style="white-space:pre"></span><span style="white-space:pre"></span>}<span style="white-space:pre"></span>});<span style="white-space:pre"></span>}<span style="white-space:pre"></span><span style="white-space:pre"></span>/**<span style="white-space:pre"></span> * 自定义adapter<span style="white-space:pre"></span> * @author Administrator<span style="white-space:pre"></span> *<span style="white-space:pre"></span> */<span style="white-space:pre"></span>public class ViewPagerAdapter extends  PagerAdapter{<span style="white-space:pre"></span><span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public int getCount() {<span style="white-space:pre"></span>return  images.size();<span style="white-space:pre"></span>}<span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public boolean isViewFromObject(View arg0, Object arg1) {<span style="white-space:pre"></span>return arg0 == arg1;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void destroyItem(ViewGroup view, int position, Object object) {<span style="white-space:pre"></span>view.removeView(images.get(position));<span style="white-space:pre"></span>}<span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public Object instantiateItem(ViewGroup view, int position) {<span style="white-space:pre"></span>view.addView(images.get(position));<span style="white-space:pre"></span>return images.get(position);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}<span style="white-space:pre"></span>/**<span style="white-space:pre"></span> * 利用线程池定时执行动画轮播<span style="white-space:pre"></span> */<span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void onStart() {<span style="white-space:pre"></span>super.onStart();<span style="white-space:pre"></span><span style="white-space:pre"></span>scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();<span style="white-space:pre"></span>scheduledExecutorService.scheduleWithFixedDelay(new ViewPageTask(), 1, 5, <span style="white-space:pre"></span>TimeUnit.SECONDS);<span style="white-space:pre"></span><span style="white-space:pre"></span>}<span style="white-space:pre"></span>/**<span style="white-space:pre"></span> * 图片轮播任务<span style="white-space:pre"></span> * @author lizhengfeng<span style="white-space:pre"></span> *<span style="white-space:pre"></span> */<span style="white-space:pre"></span>private class ViewPageTask implements Runnable{<span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void run() {<span style="white-space:pre"></span>currentItem = (currentItem + 1) % imageIds.length;<span style="white-space:pre"></span>mHandler.sendEmptyMessage(0);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}    /**     * 消除线程的运行     */<span style="white-space:pre"></span>Button btnnazhuang;<span style="white-space:pre"></span>/**<span style="white-space:pre"></span> * 接收子线程传递过来的数据<span style="white-space:pre"></span> */<span style="white-space:pre"></span>private Handler mHandler = new Handler(){<span style="white-space:pre"></span>public void handleMessage(android.os.Message msg) {<span style="white-space:pre"></span>mViewPaper.setCurrentItem(currentItem);<span style="white-space:pre"></span>}<span style="white-space:pre"></span>};<span style="white-space:pre"></span>@Override<span style="white-space:pre"></span>public void onDestroy() {<span style="white-space:pre"></span>super.onDestroy();<span style="white-space:pre"></span>if(scheduledExecutorService != null){<span style="white-space:pre"></span>scheduledExecutorService.shutdown();<span style="white-space:pre"></span>scheduledExecutorService = null;<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}}<pre name="code" class="sycode" style="white-space: pre-wrap; word-wrap: break-word; word-break: break-all; margin-top: 10px; margin-bottom: 10px; padding: 5px; font-family: 'Courier New', Arial; border-color: rgb(221, 221, 221) rgb(221, 221, 221) rgb(221, 221, 221) rgb(108, 226, 108); border-style: solid; border-width: 1px 1px 1px 4px; border-image-source: none; font-size: 10pt; line-height: 24px; color: rgb(51, 51, 51); background: none 0px 0px repeat scroll rgb(246, 246, 246);">

3、AndroidManifest.xml

这个文件不需要做任何更新。

具体代码如下：

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.lyz.viewpage.activity"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="10"        android:targetSdkVersion="18" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.lyz.viewpage.activity.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>