Android App圖片輪播效果的組件化

簡介

一個通用的圖片輪播效果的通用組件，方便開發者快速集成。

初學者，其實應該實現一個自定義控件的，改天有空，在學習下吧，學習能力一般，以前也沒寫過java，這個組件都寫了好久，慚愧啊。

背景

筆者參考http://blog.csdn.net/allen315410/article/details/39294343 學習了圖片輪播效果的實現。在瀏覽代碼的過程中，總覺得圖片輪播的效果和Android Activity的耦合過高，如果一個開發者要集成該功能，會將整個功能代碼和自己的App代碼攪在一起，提高代碼的復雜度。同時圖片和圖片文字描述存放在兩個獨立的ArrayList，這樣的對應關系要由開發者手動維護，時刻關注對應關系正確性。
為什么需要組件：組件開發的目的，即讓開發者用最少的代碼，調用最少的接口，實現開發者的需求。
以上的描述是筆者對組件概念的最基本的認識，也是基于該原則，筆者基于http://blog.csdn.net/allen315410/article/details/39294343 進行了重構，實現了一個相對內聚的組件。

圖片輪播的要素

如果一個開發者需要開發一個圖片輪播的功能，開發者最少需要提供的元素有哪些：

輪播的圖片元素
每個圖片對應的文字描述
輪播圖片在布局中的位置
圖片描述在布局中的位置
圖片輪播的時間間隔

理論上講，開發者只需要提高以上幾個元素即可，剩下的就有組件完成吧。基于以上思路，開發者大概只需要完成類似代碼即可：

public class MainActivity extends Activity {//提供一個ViewPagerItem類型數組，ViewPagerItem包括了圖片信息和圖片對應描述信息，采用一一對應的方式，方便維護private ViewPagerItem[] viewPagerItem = new ViewPagerItem[] {new ViewPagerItem(R.drawable.a, "0圖片描述信息0"),new ViewPagerItem(R.drawable.b, "1圖片描述信息1"),new ViewPagerItem(R.drawable.c, "2圖片描述信息2"),new ViewPagerItem(R.drawable.d, "3圖片描述信息3"),new ViewPagerItem(R.drawable.e, "4圖片描述信息4"),new ViewPagerItem(R.drawable.e, "5圖片描述信息5"),};private ViewPagerShow mViewPagerShow;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//提供一個layout布局容器，用來指定圖片展示的位置LinearLayout container = (LinearLayout) findViewById(R.id.dot_container);//new一個ViewPagerShow，提供相應參數mViewPagerShow = new ViewPagerShow(viewPagerItem, this, (ViewPager)findViewById(R.id.vp), mHandler,(TextView)findViewById(R.id.title), container);}@Overrideprotected void onStart() {// TODO Auto-generated method stubsuper.onStart();}/*** 接收子線程傳遞過來的數據，調用ViewPagerShow提供的update方法，實現ui的更新*/private Handler mHandler = new Handler(){public void handleMessage(android.os.Message msg) {mViewPagerShow.update();};};@Overrideprotected void onStop() {// TODO Auto-generated method stubsuper.onStop();}
}

瀏覽以上代碼，不難發現該功能的加入，對開發者原有的代碼的侵入范圍不是很大。

用盡量少的代碼，完成功能需求，是軟件開發人員不斷的追求。

輪播組件的實現

下面附上圖片輪播效果組件的代碼實現：

package com.example.image.view;import android.content.Context;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;import static android.content.ContentValues.TAG;/*** Created by image on 2017/7/14.*/class ViewPagerItem {public int iMageId;public String iMageTitle;public ViewPagerItem(int iMageId, String iMageTitle) {this.iMageId = iMageId;this.iMageTitle = iMageTitle;}
}class ViewPagerAdapter extends PagerAdapter {private List<ImageView> iMageViews;public ViewPagerAdapter(List<ImageView> iMageViews) {this.iMageViews = iMageViews;}@Overridepublic int getCount() {return iMageViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup view, int position, Object object) {// TODO Auto-generated method stubview.removeView(iMageViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup view, int position) {// TODO Auto-generated method stubview.addView(iMageViews.get(position));return iMageViews.get(position);}
}class cloneView extends View {public cloneView(Context context) {super(context);}public cloneView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);}public cloneView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public cloneView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);}public Object clone(){Object o=null;try {o=super.clone();} catch (CloneNotSupportedException e) {e.printStackTrace();}return o;}
}class ViewPagerShow {private ArrayList<View> dots;private ViewPagerItem[] viewPagerItem;private List<ImageView> iMagesList;private Context context;private ViewPagerAdapter mViewPagerAdapter;private ViewPager mViewPager;private ScheduledExecutorService scheduledExecutorService;private Handler mHandler;private int currentItem = 0;private TextView titleText;private LinearLayout container;private View dot_focus, dot_unfocus;private class ViewPageTask implements Runnable{@Overridepublic void run() {currentItem = (currentItem + 1) % viewPagerItem.length;mHandler.sendEmptyMessage(0);};}public void dotUpdate() {container.removeAllViews();View view;for (int i = 0; i < this.viewPagerItem.length; i++) {if (i == currentItem) {view = LayoutInflater.from(context).inflate(R.layout.dot_focus, null);container.addView(view);} else {view = LayoutInflater.from(context).inflate(R.layout.dot_unfocus, null);container.addView(view);}}}public ViewPagerShow(final ViewPagerItem[] viewPagerItem, Context context, ViewPager mViewPager, Handler mHandler,final TextView titleText, LinearLayout container) {this.viewPagerItem = viewPagerItem;this.context = context;this.mViewPager = mViewPager;this.mHandler = mHandler;this.titleText = titleText;this.container = container;this.dot_focus = dot_focus;this.dot_unfocus = dot_unfocus;/* show first pic title */titleText.setText(viewPagerItem[0].iMageTitle);iMagesList = new ArrayList<ImageView>();for (int i = 0; i < this.viewPagerItem.length; i++) {ImageView imageView = new ImageView(context);imageView.setBackgroundResource(viewPagerItem[i].iMageId);imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubLog.d(TAG, "onClick: onClick");;}});iMagesList.add(imageView);}dotUpdate();mViewPagerAdapter = new ViewPagerAdapter(iMagesList);mViewPager.setAdapter(mViewPagerAdapter);mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {titleText.setText(viewPagerItem[position].iMageTitle);currentItem = position;dotUpdate();}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();scheduledExecutorService.scheduleWithFixedDelay(new ViewPageTask(), 5, 5, TimeUnit.SECONDS);}public void update() {mViewPager.setCurrentItem(currentItem);titleText.setText(viewPagerItem[currentItem].iMageTitle);dotUpdate();}
}