簡介

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

初學(xué)者，其實應(yīng)該實現(xiàn)一個自定義控件的，改天有空，在學(xué)習(xí)下吧，學(xué)習(xí)能力一般，以前也沒寫過java，這個組件都寫了好久，慚愧啊。

背景

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

圖片輪播的要素

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

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

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

public class MainActivity extends Activity {//提供一個ViewPagerItem類型數(shù)組，ViewPagerItem包括了圖片信息和圖片對應(yīng)描述信息，采用一一對應(yīng)的方式，方便維護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，提供相應(yīng)參數(shù)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();}/*** 接收子線程傳遞過來的數(shù)據(jù)，調(diào)用ViewPagerShow提供的update方法，實現(xiàn)ui的更新*/private Handler mHandler = new Handler(){public void handleMessage(android.os.Message msg) {mViewPagerShow.update();};};@Overrideprotected void onStop() {// TODO Auto-generated method stubsuper.onStop();} }

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

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

輪播組件的實現(xiàn)

下面附上圖片輪播效果組件的代碼實現(xiàn)：

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();} }

圖片輪播的原理，基本都是參考http://blog.csdn.net/allen315410/article/details/39294343 該篇blog的介紹，這里做的主要的事情即把相關(guān)的接口進行一個整理，集中，剝離出一個通用的處理組件，方便開發(fā)者的集成。

目前該組件的實現(xiàn)還比較粗糙，待后續(xù)持續(xù)的更新，完善

文章寫的很隨意，時間精力關(guān)系很多細節(jié)沒有講到，最后附上github地址，供參考：https://github.com/imagec/ViewPager

總結(jié)

以上是生活随笔為你收集整理的Android App图片轮播效果的组件化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。