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).setBackg
fcf0
roundResource(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{

@Override
public int getCount() {
return images.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public 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));
}

@Override
public Object instantiateItem(ViewGroup view, int position) {
// TODO Auto-generated method stub
view.addView(images.get(position));
return images.get(position);
}

}

4)onStart()方法

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

具体实现代码如下：

/**
* 利用线程池定时执行动画轮播
*/
@Override
protected void onStart() {
// TODO Auto-generated method stub
super.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{

@Override
public 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

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

具体代码如下:

@Override
protected void onStop() {
// TODO Auto-generated method stub
super.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>