Android之——史上最简单图片轮播广告效果实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913

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

一、原理

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

二、实现

1、程序启动界面MainActivity

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

1)成员变量

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

具体代码如下:

[java]  view plain  copy

1. private ViewPager mViewPaper;  
2. private List<ImageView> images;  
3. private List<View> dots;  
4. private int currentItem;  
5. //记录上一次点的位置  
6. private int oldPosition = 0;  
7. //存放图片的id  
8. private int[] imageIds = new int[]{  
9.         R.drawable.a,  
10.         R.drawable.b,  
11.         R.drawable.c,  
12.         R.drawable.d,  
13.         R.drawable.e  
14. };  
15. //存放图片的标题  
16. private String[]  titles = new String[]{  
17.         "巩俐不低俗，我就不能低俗",   
18.         "扑树又回来啦！再唱经典老歌引万人大合唱",    
19.         "揭秘北京电影如何升级",     
20.         "乐视网TV版大派送",      
21.         "热血屌丝的反杀"  
22.     };  
23. private TextView title;  
24. private ViewPagerAdapter adapter;  
25. private ScheduledExecutorService scheduledExecutorService;  

2)onCreate方法

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

具体实现代码如下:

[java]  view plain  copy

1. @Override  
2. protected void onCreate(Bundle savedInstanceState) {  
3.     super.onCreate(savedInstanceState);  
4.     setContentView(R.layout.activity_main);  
5.     mViewPaper = (ViewPager) findViewById(R.id.vp);  
6.       
7.     //显示的图片  
8.     images = new ArrayList<ImageView>();  
9.     for(int i = 0; i < imageIds.length; i++){  
10.         ImageView imageView = new ImageView(this);  
11.         imageView.setBackgroundResource(imageIds[i]);  
12.         images.add(imageView);  
13.     }  
14.     //显示的小点  
15.     dots = new ArrayList<View>();  
16.     dots.add(findViewById(R.id.dot_0));  
17.     dots.add(findViewById(R.id.dot_1));  
18.     dots.add(findViewById(R.id.dot_2));  
19.     dots.add(findViewById(R.id.dot_3));  
20.     dots.add(findViewById(R.id.dot_4));  
21.       
22.     title = (TextView) findViewById(R.id.title);  
23.     title.setText(titles[0]);  
24.       
25.     adapter = new ViewPagerAdapter();  
26.     mViewPaper.setAdapter(adapter);  
27.       
28.     mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
29.           
30.   
31.         @Override  
32.         public void onPageSelected(int position) {  
33.             title.setText(titles[position]);  
34.             dots.get(position).setBackgroundResource(R.drawable.dot_focused);  
35.             dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);  
36.               
37.             oldPosition = position;  
38.             currentItem = position;  
39.         }  
40.           
41.         @Override  
42.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
43.               
44.         }  
45.           
46.         @Override  
47.         public void onPageScrollStateChanged(int arg0) {  
48.               
49.         }  
50.     });  
51. }  

3)自定义Adapter类ViewPagerAdapter

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

将具体实现代码如下:

[java]  view plain  copy

1. /** 
2.  * 自定义Adapter 
3.  * @author liuyazhuang 
4.  * 
5.  */  
6. private class ViewPagerAdapter extends PagerAdapter{  
7.   
8.     @Override  
9.     public int getCount() {  
10.         return images.size();  
11.     }  
12.   
13.     @Override  
14.     public boolean isViewFromObject(View arg0, Object arg1) {  
15.         return arg0 == arg1;  
16.     }  
17.   
18.     @Override  
19.     public void destroyItem(ViewGroup view, int position, Object object) {  
20.         // TODO Auto-generated method stub  
21. //          super.destroyItem(container, position, object);  
22. //          view.removeView(view.getChildAt(position));  
23. //          view.removeViewAt(position);  
24.         view.removeView(images.get(position));  
25.     }  
26.   
27.     @Override  
28.     public Object instantiateItem(ViewGroup view, int position) {  
29.         // TODO Auto-generated method stub  
30.         view.addView(images.get(position));  
31.         return images.get(position);  
32.     }  
33.       
34. }  

4)onStart()方法

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

具体实现代码如下：

[java]  view plain  copy

1. /** 
2.  * 利用线程池定时执行动画轮播 
3.  */  
4. @Override  
5. protected void onStart() {  
6.     // TODO Auto-generated method stub  
7.     super.onStart();  
8.     scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();  
9.     scheduledExecutorService.scheduleWithFixedDelay(  
10.             new ViewPageTask(),   
11.             2,   
12.             2,   
13.             TimeUnit.SECONDS);  
14. }  

5)图片轮播任务ViewPageTask

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

具体实现代码如下:

[java]  view plain  copy

1. /** 
2.  * 图片轮播任务 
3.  * @author liuyazhuang 
4.  * 
5.  */  
6. private class ViewPageTask implements Runnable{  
7.   
8.     @Override  
9.     public void run() {  
10.         currentItem = (currentItem + 1) % imageIds.length;  
11.         mHandler.sendEmptyMessage(0);  
12.     }  
13. }  

6)handler

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

具体实现代码如下：

[java]  view plain  copy

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

7)onStop

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

具体代码如下:

[java]  view plain  copy

1. @Override  
2. protected void onStop() {  
3.     // TODO Auto-generated method stub  
4.     super.onStop();  
5.     if(scheduledExecutorService != null){  
6.         scheduledExecutorService.shutdown();  
7.         scheduledExecutorService = null;  
8.     }  
9. }  

8)完整代码如下：

[java]  view plain  copy

1. package com.lyz.viewpage.activity;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5. import java.util.concurrent.Executors;  
6. import java.util.concurrent.ScheduledExecutorService;  
7. import java.util.concurrent.TimeUnit;  
8.   
9. import android.app.Activity;  
10. import android.os.Bundle;  
11. import android.os.Handler;  
12. import android.support.v4.view.PagerAdapter;  
13. import android.support.v4.view.ViewPager;  
14. import android.view.Menu;  
15. import android.view.View;  
16. import android.view.ViewGroup;  
17. import android.widget.ImageView;  
18. import android.widget.TextView;  
19.   
20. /** 
21.  * 程序主入口 
22.  * @author liuyazhuang 
23.  * 
24.  */  
25. public class MainActivity extends Activity {  
26.   
27.     private ViewPager mViewPaper;  
28.     private List<ImageView> images;  
29.     private List<View> dots;  
30.     private int currentItem;  
31.     //记录上一次点的位置  
32.     private int oldPosition = 0;  
33.     //存放图片的id  
34.     private int[] imageIds = new int[]{  
35.             R.drawable.a,  
36.             R.drawable.b,  
37.             R.drawable.c,  
38.             R.drawable.d,  
39.             R.drawable.e  
40.     };  
41.     //存放图片的标题  
42.     private String[]  titles = new String[]{  
43.             "巩俐不低俗，我就不能低俗",   
44.             "扑树又回来啦！再唱经典老歌引万人大合唱",    
45.             "揭秘北京电影如何升级",     
46.             "乐视网TV版大派送",      
47.             "热血屌丝的反杀"  
48.         };  
49.     private TextView title;  
50.     private ViewPagerAdapter adapter;  
51.     private ScheduledExecutorService scheduledExecutorService;  
52.   
53.     @Override  
54.     protected void onCreate(Bundle savedInstanceState) {  
55.         super.onCreate(savedInstanceState);  
56.         setContentView(R.layout.activity_main);  
57.         mViewPaper = (ViewPager) findViewById(R.id.vp);  
58.           
59.         //显示的图片  
60.         images = new ArrayList<ImageView>();  
61.         for(int i = 0; i < imageIds.length; i++){  
62.             ImageView imageView = new ImageView(this);  
63.             imageView.setBackgroundResource(imageIds[i]);  
64.             images.add(imageView);  
65.         }  
66.         //显示的小点  
67.         dots = new ArrayList<View>();  
68.         dots.add(findViewById(R.id.dot_0));  
69.         dots.add(findViewById(R.id.dot_1));  
70.         dots.add(findViewById(R.id.dot_2));  
71.         dots.add(findViewById(R.id.dot_3));  
72.         dots.add(findViewById(R.id.dot_4));  
73.           
74.         title = (TextView) findViewById(R.id.title);  
75.         title.setText(titles[0]);  
76.           
77.         adapter = new ViewPagerAdapter();  
78.         mViewPaper.setAdapter(adapter);  
79.           
80.         mViewPaper.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
81.               
82.   
83.             @Override  
84.             public void onPageSelected(int position) {  
85.                 title.setText(titles[position]);  
86.                 dots.get(position).setBackgroundResource(R.drawable.dot_focused);  
87.                 dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);  
88.                   
89.                 oldPosition = position;  
90.                 currentItem = position;  
91.             }  
92.               
93.             @Override  
94.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
95.                   
96.             }  
97.               
98.             @Override  
99.             public void onPageScrollStateChanged(int arg0) {  
100.                   
101.             }  
102.         });  
103.     }  
104.   
105.     /** 
106.      * 自定义Adapter 
107.      * @author liuyazhuang 
108.      * 
109.      */  
110.     private class ViewPagerAdapter extends PagerAdapter{  
111.   
112.         @Override  
113.         public int getCount() {  
114.             return images.size();  
115.         }  
116.   
117.         @Override  
118.         public boolean isViewFromObject(View arg0, Object arg1) {  
119.             return arg0 == arg1;  
120.         }  
121.   
122.         @Override  
123.         public void destroyItem(ViewGroup view, int position, Object object) {  
124.             // TODO Auto-generated method stub  
125. //          super.destroyItem(container, position, object);  
126. //          view.removeView(view.getChildAt(position));  
127. //          view.removeViewAt(position);  
128.             view.removeView(images.get(position));  
129.         }  
130.   
131.         @Override  
132.         public Object instantiateItem(ViewGroup view, int position) {  
133.             // TODO Auto-generated method stub  
134.             view.addView(images.get(position));  
135.             return images.get(position);  
136.         }  
137.           
138.     }  
139.       
140.     @Override  
141.     public boolean onCreateOptionsMenu(Menu menu) {  
142.         // Inflate the menu; this adds items to the action bar if it is present.  
143.         getMenuInflater().inflate(R.menu.main, menu);  
144.         return true;  
145.     }  
146.   
147.     /** 
148.      * 利用线程池定时执行动画轮播 
149.      */  
150.     @Override  
151.     protected void onStart() {  
152.         // TODO Auto-generated method stub  
153.         super.onStart();  
154.         scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();  
155.         scheduledExecutorService.scheduleWithFixedDelay(  
156.                 new ViewPageTask(),   
157.                 2,   
158.                 2,   
159.                 TimeUnit.SECONDS);  
160.     }  
161.       
162.       
163.     /** 
164.      * 图片轮播任务 
165.      * @author liuyazhuang 
166.      * 
167.      */  
168.     private class ViewPageTask implements Runnable{  
169.   
170.         @Override  
171.         public void run() {  
172.             currentItem = (currentItem + 1) % imageIds.length;  
173.             mHandler.sendEmptyMessage(0);  
174.         }  
175.     }  
176.       
177.     /** 
178.      * 接收子线程传递过来的数据 
179.      */  
180.     private Handler mHandler = new Handler(){  
181.         public void handleMessage(android.os.Message msg) {  
182.             mViewPaper.setCurrentItem(currentItem);  
183.         };  
184.     };  
185.     @Override  
186.     protected void onStop() {  
187.         // TODO Auto-generated method stub  
188.         super.onStop();  
189.         if(scheduledExecutorService != null){  
190.             scheduledExecutorService.shutdown();  
191.             scheduledExecutorService = null;  
192.         }  
193.     }  
194.       
195. }  

2、布局activity_main.xml

具体实现代码如下：

[html]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent" >  
5.   
6.     <FrameLayout  
7.         android:layout_width="match_parent"  
8.         android:layout_height="200dip" >  
9.   
10.         <android.support.v4.view.ViewPager  
11.             android:id="@+id/vp"  
12.             android:layout_width="match_parent"  
13.             android:layout_height="match_parent" />  
14.   
15.         <LinearLayout  
16.             android:layout_width="match_parent"  
17.             android:layout_height="35dip"  
18.             android:layout_gravity="bottom"  
19.             android:background="#33000000"  
20.             android:gravity="center"  
21.             android:orientation="vertical" >  
22.   
23.             <TextView  
24.                 android:id="@+id/title"  
25.                 android:layout_width="wrap_content"  
26.                 android:layout_height="wrap_content"  
27.                 android:text="图片标题"  
28.                 android:textColor="@android:color/white" />  
29.   
30.             <LinearLayout  
31.                 android:layout_width="wrap_content"  
32.                 android:layout_height="wrap_content"  
33.                 android:layout_marginTop="3dip"  
34.                 android:orientation="horizontal" >  
35.   
36.                 <View  
37.                     android:id="@+id/dot_0"  
38.                     android:layout_width="5dip"  
39.                     android:layout_height="5dip"  
40.                     android:layout_marginLeft="2dip"  
41.                     android:layout_marginRight="2dip"   
42.                     android:background="@drawable/dot_focused"/>  
43.   
44.                 <View  
45.                     android:id="@+id/dot_1"  
46.                     android:layout_width="5dip"  
47.                     android:layout_height="5dip"  
48.                     android:layout_marginLeft="2dip"  
49.                     android:layout_marginRight="2dip"   
50.                     android:background="@drawable/dot_normal"/>  
51.                 <View  
52.                     android:id="@+id/dot_2"  
53.                     android:layout_width="5dip"  
54.                     android:layout_height="5dip"  
55.                     android:layout_marginLeft="2dip"  
56.                     android:layout_marginRight="2dip"   
57.                     android:background="@drawable/dot_normal"/>  
58.                 <View  
59.                     android:id="@+id/dot_3"  
60.                     android:layout_width="5dip"  
61.                     android:layout_height="5dip"  
62.                     android:layout_marginLeft="2dip"  
63.                     android:layout_marginRight="2dip"   
64.                     android:background="@drawable/dot_normal"/>  
65.                 <View  
66.                     android:id="@+id/dot_4"  
67.                     android:layout_width="5dip"  
68.                     android:layout_height="5dip"  
69.                     android:layout_marginLeft="2dip"  
70.                     android:layout_marginRight="2dip"   
71.                     android:background="@drawable/dot_normal"/>  
72.                   
73.             </LinearLayout>  
74.         </LinearLayout>  
75.     </FrameLayout>  
76.   
77. </RelativeLayout>  

3、AndroidManifest.xml

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

具体代码如下：

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.     package="com.lyz.viewpage.activity"  
4.     android:versionCode="1"  
5.     android:versionName="1.0" >  
6.   
7.     <uses-sdk  
8.         android:minSdkVersion="10"  
9.         android:targetSdkVersion="18" />  
10.   
11.     <application  
12.         android:allowBackup="true"  
13.         android:icon="@drawable/ic_launcher"  
14.         android:label="@string/app_name"  
15.         android:theme="@style/AppTheme" >  
16.         <activity  
17.             android:name="com.lyz.viewpage.activity.MainActivity"  
18.             android:label="@string/app_name" >  
19.             <intent-filter>  
20.                 <action android:name="android.intent.action.MAIN" />  
21.   
22.                 <category android:name="android.intent.category.LAUNCHER" />  
23.             </intent-filter>  
24.         </activity>  
25.     </application>  
26.   
27. </manifest>  

三、运行效果

四、温馨提示

大家可以到链接http://download.csdn.net/detail/l1028386804/9057555下载Android图片轮播效果实现完整源代码

本实例中，为了方面，我把一些文字直接写在了布局文件中和相关的类中，大家在真实的项目中要把这些文字写在string.xml文件中，在外部引用这些资源，切记，这是作为一个Android程序员最基本的开发常识和规范，我在这里只是为了方便直接写在了类和布局文件中。

顶