android 图片文字轮播效果（图片和文字自动滚动）

图片轮播是类似知乎日报上的一个轮播效果，如下图。

好了直接进入正题，首先是出示一下效果：

MainActivity：

[java]  view plain  copy

1. import java.util.ArrayList;  
2. import java.util.List;  
3. import java.util.concurrent.Executors;  
4. import java.util.concurrent.ScheduledExecutorService;  
5. import java.util.concurrent.TimeUnit;  
6.   
7. import android.os.Bundle;  
8. import android.app.Activity;  
9. import android.support.v4.view.PagerAdapter;  
10. import android.support.v4.view.ViewPager;  
11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
12. import android.view.View;  
13. import android.view.ViewGroup;  
14. import android.widget.ImageView;  
15. import android.widget.ImageView.ScaleType;  
16. import android.widget.LinearLayout;  
17. import android.widget.TextView;  
18.   
19. public class MainActivity extends Activity {  
20.   
21.     //viewpager  
22.     private ViewPager view_pager;  
23.     private LinearLayout ll_dotGroup;  
24.     private TextView newsTitle;  
25.     private int imgResIds[] = new int[]{R.drawable.a, R.drawable.b,  
26.             R.drawable.c, R.drawable.d, R.drawable.b};  
27.     //存储5张图片  
28.     private String textview[]=new String[]{"12412515125","fawfafawf"  
29.             ,"13f1f12f211","1251f1f12","1t1f12f121"};  
30.     //存储5个目录  
31.     private int curIndex = 0;  
32.     //用来记录当前滚动的位置  
33.     PicsAdapter picsAdapter;  
34.   
35.     @Override  
36.     protected void onCreate(Bundle savedInstanceState) {  
37.         super.onCreate(savedInstanceState);  
38.         setContentView(R.layout.activity_main);  
39.   
40.         setViewPager();  
41.   
42.     }  
43.   
44.     private void setViewPager() {  
45.   
46.         newsTitle=(TextView)findViewById(R.id.NewsTitle);  
47.         view_pager = (ViewPager) findViewById(R.id.view_pager);  
48.         ll_dotGroup = (LinearLayout) findViewById(R.id.dotgroup);  
49.   
50.         picsAdapter = new PicsAdapter(); // 创建适配器  
51.         picsAdapter.setData(imgResIds);  
52.         view_pager.setAdapter(picsAdapter); // 设置适配器  
53.   
54.         view_pager.setOnPageChangeListener(new MyPageChangeListener()); //设置页面切换监听器  
55.   
56.         initPoints(imgResIds.length); // 初始化图片小圆点  
57.         startAutoScroll(); // 开启自动播放  
58.     }  
59.   
60.   
61.     // 初始化图片轮播的小圆点和目录  
62.     private void initPoints(int count) {  
63.         for (int i = 0; i < count; i++) {  
64.   
65.             ImageView iv = new ImageView(this);  
66.             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
67.                     20, 20);  
68.             params.setMargins(0, 0, 20, 0);  
69.             iv.setLayoutParams(params);  
70.   
71.             iv.setImageResource(R.drawable.dot1);  
72.   
73.             ll_dotGroup.addView(iv);  
74.   
75.         }  
76.         ((ImageView) ll_dotGroup.getChildAt(curIndex))  
77.                 .setImageResource(R.drawable.dot2);  
78.   
79.         newsTitle.setText(textview[curIndex]);  
80.     }  
81.   
82.     // 自动播放  
83.     private void startAutoScroll() {  
84.         ScheduledExecutorService scheduledExecutorService = Executors  
85.                 .newSingleThreadScheduledExecutor();  
86.         // 每隔4秒钟切换一张图片  
87.         scheduledExecutorService.scheduleWithFixedDelay(new ViewPagerTask(), 5,  
88.                 4, TimeUnit.SECONDS);  
89.     }  
90.   
91.     // 切换图片任务  
92.     private class ViewPagerTask implements Runnable {  
93.         @Override  
94.         public void run() {  
95.   
96.             runOnUiThread(new Runnable() {  
97.                 @Override  
98.                 public void run() {  
99.                     int count = picsAdapter.getCount();  
100.                     view_pager.setCurrentItem((curIndex + 1) % count);  
101.                 }  
102.             });  
103.         }  
104.     }  
105.   
106.     // 定义ViewPager控件页面切换监听器  
107.     class MyPageChangeListener implements OnPageChangeListener {  
108.   
109.         @Override  
110.         public void onPageScrolled(int position, float positionOffset,  
111.                                    int positionOffsetPixels) {  
112.         }  
113.   
114.         @Override  
115.         public void onPageSelected(int position) {  
116.             ImageView imageView1 = (ImageView) ll_dotGroup.getChildAt(position);  
117.             ImageView imageView2 = (ImageView) ll_dotGroup.getChildAt(curIndex);  
118.             if (imageView1 != null) {  
119.                 imageView1.setImageResource(R.drawable.dot2);  
120.             }  
121.             if (imageView2 != null) {  
122.                 imageView2.setImageResource(R.drawable.dot1);  
123.             }  
124.             curIndex = position;  
125.             newsTitle.setText(textview[curIndex]);  
126.   
127.         }  
128.   
129.   
130.         boolean b = false;  
131.   
132.         @Override  
133.         public void onPageScrollStateChanged(int state) {  
134.             //这段代码可不加，主要功能是实现切换到末尾后返回到第一张  
135.             switch (state) {  
136.                 case 1:// 手势滑动  
137.                     b = false;  
138.                     break;  
139.                 case 2:// 界面切换中  
140.                     b = true;  
141.                     break;  
142.                 case 0:// 滑动结束，即切换完毕或者加载完毕  
143.                     // 当前为最后一张，此时从右向左滑，则切换到第一张  
144.                     if (view_pager.getCurrentItem() == view_pager.getAdapter()  
145.                             .getCount() - 1 && !b) {  
146.                         view_pager.setCurrentItem(0);  
147.                     }  
148.                     // 当前为第一张，此时从左向右滑，则切换到最后一张  
149.                     else if (view_pager.getCurrentItem() == 0 && !b) {  
150.                         view_pager.setCurrentItem(view_pager.getAdapter()  
151.                                 .getCount() - 1);  
152.                     }  
153.                     break;  
154.   
155.                 default:  
156.                     break;  
157.             }  
158.         }  
159.     }  
160.   
161.     // 定义ViewPager控件适配器  
162.     class PicsAdapter extends PagerAdapter {  
163.   
164.         private List<ImageView> views = new ArrayList<ImageView>();  
165.   
166.         @Override  
167.         public int getCount() {  
168.             if (views == null) {  
169.                 return 0;  
170.             }  
171.             return views.size();  
172.         }  
173.   
174.         public void setData(int[] imgResIds) {  
175.             for (int i = 0; i < imgResIds.length; i++) {  
176.                 ImageView iv = new ImageView(MainActivity.this);  
177.                 ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(  
178.                         ViewGroup.LayoutParams.MATCH_PARENT,  
179.                         ViewGroup.LayoutParams.MATCH_PARENT);  
180.                 iv.setLayoutParams(params);  
181.                 iv.setScaleType(ScaleType.FIT_XY);  
182.                 //设置ImageView的属性  
183.                 iv.setImageResource(imgResIds[i]);  
184.                 views.add(iv);  
185.             }  
186.         }  
187.   
188.         public Object getItem(int position) {  
189.             if (position < getCount())  
190.                 return views.get(position);  
191.             return null;  
192.         }  
193.   
194.         @Override  
195.         public boolean isViewFromObject(View arg0, Object arg1) {  
196.             return arg0 == arg1;  
197.         }  
198.   
199.         @Override  
200.         public void destroyItem(View container, int position, Object object) {  
201.   
202.             if (position < views.size())  
203.                 ((ViewPager) container).removeView(views.get(position));  
204.         }  
205.   
206.         @Override  
207.         public int getItemPosition(Object object) {  
208.             return views.indexOf(object);  
209.         }  
210.   
211.         @Override  
212.         public Object instantiateItem(View container, int position) {  
213.             if (position < views.size()) {  
214.                 final ImageView imageView = views.get(position);  
215.                 ((ViewPager) container).addView(imageView);  
216.                 return views.get(position);  
217.             }  
218.             return null;  
219.         }  
220.   
221.     }  
222.   
223. }  

activity_main:

[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.     tools:context=".MainActivity" >  
6.   
7.     <RelativeLayout  
8.         android:layout_width="match_parent"  
9.         android:layout_height="150dp"  
10.         android:layout_marginBottom="5dp"  
11.         android:orientation="vertical" >  
12.   
13.         <android.support.v4.view.ViewPager  
14.             android:id="@+id/view_pager"  
15.             android:layout_width="match_parent"  
16.             android:layout_height="match_parent"  
17.             android:layout_gravity="center" >  
18.         </android.support.v4.view.ViewPager>  
19.   
20.         <RelativeLayout  
21.             android:layout_width="match_parent"  
22.             android:layout_height="wrap_content"  
23.             android:layout_alignParentBottom="true"  
24.             android:background="@drawable/focus_bg"  
25.             >  
26.             <TextView  
27.                 android:id="@+id/NewsTitle"  
28.                 android:layout_width="wrap_content"  
29.                 android:layout_height="wrap_content"  
30.                 android:text="我校交换生演讲比赛夺冠 美国华盛本大学万里发来贺电"  
31.                 android:paddingTop="10dp"  
32.                 android:paddingBottom="8dp"  
33.                 android:paddingLeft="10dp"  
34.                 android:paddingRight="100dp"  
35.                 android:textSize="15sp"  
36.                 android:textColor="#fff"/>  
37.         <LinearLayout  
38.             android:id="@+id/dotgroup"  
39.             android:layout_width="wrap_content"  
40.             android:layout_height="wrap_content"  
41.             android:layout_alignParentRight="true"  
42.             android:paddingTop="23dp"  
43.             android:paddingRight="10dp"  
44.             android:gravity="center"  
45.             android:layout_marginBottom="15dp"  
46.             android:orientation="horizontal" >  
47.         </LinearLayout>  
48.     </RelativeLayout>  
49.     </RelativeLayout>  
50.   
51. </RelativeLayout>  

最后附上源码：http://download.csdn.net/detail/double2hao/9155675

本人博客，android均为新手，闻过则喜，望各位前辈不吝批评指点。