自定义轮播图

mainActivity.xml

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     xmlns:tools="http://schemas.android.com/tools"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="200dp"  
7.     android:orientation="vertical"  
8.     tools:context="com.example.jinmuyan.bannerzdy.MainActivity">  
9.   
10.     <com.example.jinmuyan.bannerzdy.LoopPicture  
11.         android:id="@+id/loopPicture"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="250dp"/>  
14.   
15. </LinearLayout>  

mainActivity代码

[java]  view plain  copy

1. public class MainActivity extends AppCompatActivity {  
2.   
3.     private LoopPicture loopPicture;  
4.     @Override  
5.     protected void onCreate(Bundle savedInstanceState) {  
6.         super.onCreate(savedInstanceState);  
7.         setContentView(R.layout.activity_main);  
8.   
9.   
10.         loopPicture = (LoopPicture)this.findViewById(R.id.loopPicture);  
11.   
12.         String[] imagesRes = new String[] {  
13.                 "http://pic.sc.chinaz.com/files/pic/pic9/201604/apic20400.jpg",  
14.                 "http://pics.sc.chinaz.com/files/pic/pic9/201602/apic19022.jpg",  
15.                 "http://pics.sc.chinaz.com/files/pic/pic9/201603/fpic430.jpg",  
16.                 "http://pics.sc.chinaz.com/files/pic/pic9/201605/apic20631.jpg"};  
17.         loopPicture.setImageUrl(imagesRes, true);  
18. /*        int[] imagesRes = { R.drawable.a, R.drawable.b, R.drawable.c, 
19.                 R.drawable.d, R.drawable.e }; 
20.         loopPicture.setImageRes(imagesRes, true);*/  
21.        /* String[] titles = {"111111111111111111","2222222222222222", 
22.                 "3333333333333","4444444444444","5555555555"}; 
23.         loopPicture.setImageTitle(titles);*/  
24.   
25.     }  
26.   
27. }  

loop_pictures.xml

[html]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content">  
5.   
6.     <android.support.v4.view.ViewPager  
7.         android:id="@+id/vp"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"/>  
10.   
11.     <TextView  
12.         android:id="@+id/tv_title"  
13.         android:textSize="20sp"  
14.         android:textColor="@android:color/white"  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:layout_alignParentLeft="true"  
18.         android:layout_alignParentBottom="true"  
19.         android:padding="20dp"/>  
20.   
21.     <LinearLayout  
22.         android:id="@+id/ll_dot"  
23.         android:orientation="horizontal"  
24.         android:layout_width="wrap_content"  
25.         android:layout_height="wrap_content"  
26.         android:layout_alignParentRight="true"  
27.         android:layout_alignParentBottom="true"  
28.         android:padding="8dp"/>  
29.   
30. </RelativeLayout>  

LoopPicture代码

[java]  view plain  copy

1. public class LoopPicture extends FrameLayout {  
2.     private Context context;  
3.     private DisplayImageOptions options;  
4.     private ImageLoader mImageLoader;  
5.     private String[] imageTitle; //展示图片的标题  
6.     private List<ImageView> images;       //展示的图片  
7.     private List<ImageView> imagesDots;     //展示图片位置的小圆点  
8.     private int delayTime; //轮播图延迟换图的时间  
9.   
10.     private boolean isAutoPlay;  
11.     private int currentItem;  
12.     public Handler handler = new Handler();  
13.     private ViewPager viewPager;  
14.     private int imageLength;  
15.     private LinearLayout dotLayout;  
16.     private int titleLength;  
17.     private TextView titleTV;  
18.     private boolean hasTitle;  
19.   
20.     public LoopPicture(Context context) {  
21.         this(context, null);  
22.     }  
23.   
24.     public LoopPicture(Context context, AttributeSet attrs) {  
25.         this(context, attrs, 0);  
26.     }  
27.   
28.     public LoopPicture(Context context, AttributeSet attrs, int defStyleAttr) {  
29.         super(context, attrs, defStyleAttr);  
30.         this.context = context;  
31.   
32.         //使用第三方库universal-imageloader 加载图片缓存  
33.         initImageLoader(context);  
34.   
35.         //初始化数据  
36.         initData();  
37.     }  
38.   
39.     /** 
40.      * 使用第三方库universal-imageloader 加载图片缓存 
41.      */  
42.     private void initImageLoader(Context context) {  
43.         ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(  
44.                 context).threadPriority(Thread.NORM_PRIORITY - 2)  
45.                 .denyCacheImageMultipleSizesInMemory()  
46.                 .diskCacheFileNameGenerator(new Md5FileNameGenerator())  
47.                 .tasksProcessingOrder(QueueProcessingType.LIFO)  
48.                 .writeDebugLogs().build();  
49.         ImageLoader.getInstance().init(config);  
50.         mImageLoader = ImageLoader.getInstance();  
51.     }  
52.   
53.     /** 
54.      * 初始化轮播器中的数据 
55.      */  
56.     private void initData() {  
57.         images = new ArrayList<ImageView>();  
58.         imagesDots = new ArrayList<ImageView>();  
59.         delayTime = 2000;  
60.     }  
61.   
62.     /** 
63.      * 提供接口： 
64.      * 使用轮播器时设置图片(图片id) 
65.      */  
66.     public void setImageRes(int[] imagesRes, boolean hasTitle) {  
67.         this.hasTitle = hasTitle;  
68.         initView();  
69.         initImgFromRes(imagesRes);  
70.         startLoopPicture();  
71.     }  
72.   
73.     /** 
74.      * 提供接口： 
75.      * 使用轮播器时设置图片(图片URl) 
76.      */  
77.     public void setImageUrl(String[] imageUrl, boolean hasTitle){  
78.         this.hasTitle = hasTitle;  
79.         initView();  
80.         initImgFromUrl(imageUrl);  
81.         startLoopPicture();  
82.     }  
83.   
84.     /** 
85.      * 提供接口： 
86.      * 使用轮播器时设置图片的标题 
87.      */  
88.     public void setImageTitle(String[] imageTitle){  
89.         this.imageTitle = imageTitle;  
90.     }  
91.   
92.     /** 
93.      * 初始化轮播器布局 
94.      */  
95.     private void initView() {  
96.         images.clear();  
97.         View view = LayoutInflater.from(context).inflate(R.layout.loop_pictures, this, true);  
98.         viewPager = (ViewPager)view.findViewById(R.id.vp);  
99.         dotLayout = (LinearLayout) view.findViewById(R.id.ll_dot);  
100.         titleTV = (TextView) view.findViewById(R.id.tv_title);  
101.         dotLayout.removeAllViews();  
102.     }  
103.   
104.   
105.   
106.     /** 
107.      * 初始化轮播器的图片(图片URL) 
108.      * 使用第三方类库universal-imageloader 加载图片缓存 
109.      */  
110.     private void initImgFromUrl(String[] imageUrl) {  
111.         imageLength = imageUrl.length;  
112.         for(int i = 0;i<imageLength;i++){  
113.             ImageView dotView = new ImageView(context);  
114.             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
115.                     LinearLayout.LayoutParams.WRAP_CONTENT,  
116.                     LinearLayout.LayoutParams.WRAP_CONTENT);  
117.             params.leftMargin = 5;  
118.             params.rightMargin = 5;  
119.             dotView.setImageResource(R.drawable.dot_blur);  
120.             dotLayout.addView(dotView, params);  
121.             imagesDots.add(dotView);  
122.         }  
123.         imagesDots.get(0).setImageResource(R.drawable.dot_focus);  
124.   
125.         //universal-imageloader 加载图片缓存  
126.         for(int i = 0; i <= imageLength + 1; i++){  
127.             ImageView imageView = new ImageView(context);  
128.             imageView.setScaleType(ImageView.ScaleType.FIT_XY);  
129.             imageView.setBackgroundResource(R.drawable.loading);  
130.             if(i == 0){  
131.                 mImageLoader.displayImage(imageUrl[imageLength - 1], imageView);  
132.             } else if(i == imageLength + 1){  
133.                 mImageLoader.displayImage(imageUrl[0], imageView);  
134.             } else {  
135.                 mImageLoader.displayImage(imageUrl[i - 1], imageView);  
136.             }  
137.             images.add(imageView);  
138.         }  
139.     }  
140.   
141.     /** 
142.      * 初始化轮播器的图片(图片id) 
143.      */  
144.     private void initImgFromRes(int[] imagesRes) {  
145.         imageLength = imagesRes.length;  
146.         for(int i = 0; i < imageLength; i++){  
147.             ImageView dotView = new ImageView(context);  
148.             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(  
149.                     LinearLayout.LayoutParams.WRAP_CONTENT,  
150.                     LinearLayout.LayoutParams.WRAP_CONTENT);  
151.             params.leftMargin = 5;  
152.             params.rightMargin = 5;  
153.             dotView.setImageResource(R.drawable.dot_blur);  
154.             dotLayout.addView(dotView, params);  
155.             imagesDots.add(dotView);  
156.         }  
157.         //设置第一张轮播图的小圆点为选中状态  
158.         imagesDots.get(0).setImageResource(R.drawable.dot_focus);  
159.   
160.         for(int i = 0;i<= imageLength+1 ; i++){  
161.             ImageView imageView = new ImageView(context);  
162.             imageView.setScaleType(ImageView.ScaleType.FIT_XY);  
163.             imageView.setBackgroundResource(R.drawable.loading);  
164.             if(i == 0){  
165.                 imageView.setImageResource(imagesRes[imageLength - 1]);  
166.             } else if (i == imageLength + 1){  
167.                 imageView.setImageResource(imagesRes[0]);  
168.             } else {  
169.                 imageView.setImageResource(imagesRes[i - 1]);  
170.             }  
171.             images.add(imageView);  
172.         }  
173.     }  
174.   
175.     /** 
176.      * 设置ViewPager,开启轮播器 
177.      */  
178.     private void startLoopPicture(){  
179.         viewPager.setAdapter(new LoopPicturesAdapter());  
180.         viewPager.setFocusable(true);  
181.         viewPager.setCurrentItem(1);  
182.         currentItem = 1;  
183.         viewPager.addOnPageChangeListener((ViewPager.OnPageChangeListener) new LoopPicturesListener());  
184.   
185.         //开启轮播器  
186.         isAutoPlay = true;  
187.         handler.postDelayed(task, 2000);  
188.     }  
189.   
190.   
191.     private final Runnable task = new Runnable() {  
192.         @Override  
193.         public void run() {  
194.             if (isAutoPlay) {  
195.                 currentItem = currentItem % (imageLength + 1) + 1;  
196.                 if (currentItem == 1) {  
197.                     viewPager.setCurrentItem(currentItem, false);  
198.                     handler.post(task);  
199.                 } else {  
200.                     viewPager.setCurrentItem(currentItem);  
201.                     handler.postDelayed(task, 3000);  
202.                 }  
203.             } else {  
204.                 handler.postDelayed(task, 5000);  
205.             }  
206.         }  
207.     };  
208.   
209.   
210.     class LoopPicturesAdapter extends PagerAdapter {  
211.   
212.         @Override  
213.         public int getCount() {  
214.             return images.size();  
215.         }  
216.   
217.         @Override  
218.         public boolean isViewFromObject(View view, Object object) {  
219.             return view == object;  
220.         }  
221.   
222.         @Override  
223.         public Object instantiateItem(ViewGroup container, int position) {  
224.             View view = images.get(position);  
225.             container.addView(view);  
226.             return view;  
227.         }  
228.   
229.         @Override  
230.         public void destroyItem(ViewGroup container, int position, Object object) {  
231.             container.removeView((View)object);  
232.         }  
233.     }  
234.   
235.     class LoopPicturesListener implements ViewPager.OnPageChangeListener {  
236.   
237.         @Override  
238.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
239.   
240.         }  
241.   
242.         @Override  
243.         public void onPageSelected(int position) {  
244.             for(int i = 0; i<imagesDots.size();i++){  
245.                 if(i == position - 1){  
246.                     imagesDots.get(i).setImageResource(R.drawable.dot_focus);  
247.                     if(hasTitle) {  
248.                        // titleTV.setText(imageTitle[i]);  
249.                     }  
250.                 } else {  
251.                     imagesDots.get(i).setImageResource(R.drawable.dot_blur);  
252.                 }  
253.             }  
254.   
255.         }  
256.   
257.         @Override  
258.         public void onPageScrollStateChanged(int state) {  
259.             switch (state){  
260.                 case 1:  
261.                     isAutoPlay = false;  
262.                     break;  
263.                 case 2:  
264.                     isAutoPlay = true;  
265.                     break;  
266.                 case 0:  
267.                     if (viewPager.getCurrentItem() == 0) {  
268.                         viewPager.setCurrentItem(imageLength, false);  
269.                     } else if (viewPager.getCurrentItem() == imageLength + 1) {  
270.                         viewPager.setCurrentItem(1, false);  
271.                     }  
272.                     currentItem = viewPager.getCurrentItem();  
273.                     isAutoPlay = true;  
274.                     break;  
275.             }  
276.   
277.         }  
278.     }  
279. }