自定義控制元件——輪播圖 ImageCycleView
阿新 • • 發佈:2018-12-10
1.ImageCycleView.Android 輪播圖選單,Huzhanzhou 出品。主要是對圖片的迴圈播放,預設播放時間3面,可以點選操作。
import android.content.Context; import android.os.Handler; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.LinearLayout; import com.loopj.android.image.SmartImageView; import java.util.ArrayList; import contrl.demo.cm.android.R; /** * 廣告圖片自動輪播控制元件</br> * */ public class ImageCycleView extends LinearLayout { /** * 上下文 */ private Context mContext; /** * 圖片輪播檢視 * * ViewPager用於實現多頁面的切換效果,該類存在於Google的相容包裡面,所以 * 在引用時記得在BuilldPath中加入“android-support-v4.jar”。 * * 使用ViewPager與ListView類似,也需要一個介面卡,PagerAdapter。 */ private ViewPager mAdvPager = null; /** * 滾動圖片檢視適配 */ private ImageCycleAdapter mAdvAdapter; /** * 圖片輪播指示器控制元件 * * View是所有UI元件的基類,而 ViewGroup是容納這些元件的容器,其 * 本身也是從View派生出來的. */ private ViewGroup mGroup; /** * 圖片輪播指示個圖 */ private ImageView mImageView = null; /** * 滾動圖片指示檢視列表 */ private ImageView[] mImageViews = null; /** * 圖片滾動當前圖片下標 */ private boolean isStop; ArrayList<String> imageNameList; /** * @param context */ public ImageCycleView(Context context) { super(context); } /** * @param context * @param attrs * * 寫在xml裡的 呼叫2個引數的 attr裡邊傳過來的是 xml裡邊對應的height width等 * 引數,包括自己定義的引數,如果在xml裡邊寫入自定義控制元件的話 必須要重寫2個引數的建構函式 */ public ImageCycleView(Context context, AttributeSet attrs) { super(context, attrs); mContext = context; LayoutInflater.from(context).inflate(R.layout.ad_cycle_view, this); mAdvPager = (ViewPager) findViewById(R.id.adv_pager); mAdvPager.setOnPageChangeListener(new GuidePageChangeListener()); mAdvPager.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_UP: // 開始圖片滾動 startImageTimerTask(); break; default: // 停止圖片滾動 stopImageTimerTask(); break; } return false; } }); // 滾動圖片右下指示器視 mGroup = (ViewGroup) findViewById(R.id.viewGroup); } /** * 裝填圖片資料 * * @param imageUrlList * @param imageCycleViewListener */ public void setImageResources(int[] imageUrlList ,ImageCycleViewListener imageCycleViewListener) { // 清除 mGroup.removeAllViews(); // 圖片廣告數量 final int imageCount = imageUrlList.length; mImageViews = new ImageView[imageCount]; for (int i = 0; i < imageCount; i++) { mImageView = new ImageView(mContext); LayoutParams params=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.leftMargin=30; //FIT_XY不按比例縮放圖片,目標是把圖片塞滿整個View mImageView.setScaleType(ScaleType.FIT_XY); mImageView.setLayoutParams(params); mImageViews[i] = mImageView; if (i == 0) { mImageViews[i].setBackgroundResource(R.mipmap.dot_gray); } else { mImageViews[i].setBackgroundResource(R.mipmap.dot_focus); } mGroup.addView(mImageViews[i]); } mAdvAdapter = new ImageCycleAdapter(mContext, imageUrlList ,imageCycleViewListener); mAdvPager.setAdapter(mAdvAdapter); startImageTimerTask(); } /** * 圖片輪播(手動控制自動輪播與否,便於資源控制元件) */ public void startImageCycle() { startImageTimerTask(); } /** * 暫停輪播—用於節省資源 */ public void pushImageCycle() { stopImageTimerTask(); } /** * 圖片滾動任務 */ private void startImageTimerTask() { stopImageTimerTask(); // 圖片滾動 mHandler.postDelayed(mImageTimerTask, 3000); } /** * 停止圖片滾動任務 */ private void stopImageTimerTask() { isStop=true; mHandler.removeCallbacks(mImageTimerTask); } private Handler mHandler = new Handler(); /** * 圖片自動輪播Task */ private Runnable mImageTimerTask = new Runnable() { @Override public void run() { if (mImageViews != null) { mAdvPager.setCurrentItem(mAdvPager.getCurrentItem()+1); if(!isStop){ //if isStop=true //當你退出後 要把這個給停下來 不然 這個一直存在 就一直在後臺迴圈 mHandler.postDelayed(mImageTimerTask, 3000); } } } }; /** * 輪播圖片監聽 * * @author minking */ private final class GuidePageChangeListener implements OnPageChangeListener { @Override /** * 此方法是在狀態改變的時候呼叫,其中arg0這個引數有三種狀態(0,1,2)。arg0 ==1的時辰默示正在滑 * 動,arg0==2的時辰默示滑動完畢了,arg0==0的時辰默示什麼都沒做。當頁面開始滑動的時候,三種狀態 * 的變化順序為(1,2,0) */ public void onPageScrollStateChanged(int state) { if (state == ViewPager.SCROLL_STATE_IDLE) startImageTimerTask(); } @Override /** * 當頁面在滑動的時候會呼叫此方法,在滑動被停止之前,此方法回一直得到呼叫。其中三個引數的含義分別為: arg0 :當前頁面,及你點選滑動的頁面 arg1:當前頁面偏移的百分比 arg2:當前頁面偏移的畫素位置 */ public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override /** * 此方法是頁面跳轉完後得到呼叫,index是你當前選中的頁面的Position(位置編號)。 */ public void onPageSelected(int index) { index=index%mImageViews.length; // 設定當前顯示的圖片 // 設定圖片滾動指示器背 mImageViews[index].setBackgroundResource(R.mipmap.dot_gray); for (int i = 0; i < mImageViews.length; i++) { if (index != i) { mImageViews[i].setBackgroundResource(R.mipmap.dot_focus); } } } } private class ImageCycleAdapter extends PagerAdapter { /** * 圖片檢視快取列表 */ private ArrayList<SmartImageView> mImageViewCacheList; /** * 圖片資源列表 */ private int[] mAdList = new int[10]; /** * 廣告圖片點選監聽 */ private ImageCycleViewListener mImageCycleViewListener; private Context mContext; public ImageCycleAdapter(Context context, int[] adList , ImageCycleViewListener imageCycleViewListener) { this.mContext = context; this.mAdList = adList; mImageCycleViewListener = imageCycleViewListener; mImageViewCacheList = new ArrayList<SmartImageView>(); } @Override public int getCount() { // return mAdList.size(); return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object obj) { return view == obj; } @Override public Object instantiateItem(ViewGroup container, final int position) { int imageUrl = mAdList[position%mAdList.length]; // Log.i("imageUrl",imageUrl); //smartImageVIew,支援從URL和通訊錄中獲取影象 SmartImageView imageView = null; if (mImageViewCacheList.isEmpty()) { imageView = new SmartImageView(mContext); imageView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); //test imageView.setScaleType(ScaleType.FIT_XY); //imageView.setImageUrl("http://imgs.xiuna.com/xiezhen/2014-9-25/2/5562900520140919100645087.jpg"); // 設定圖片點選監聽 imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mImageCycleViewListener.onImageClick(position%mAdList.length, v); } }); } else { imageView = mImageViewCacheList.remove(0); } imageView.setTag(imageUrl); container.addView(imageView); imageView.setImageResource(imageUrl); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { SmartImageView view = (SmartImageView) object; mAdvPager.removeView(view); mImageViewCacheList.add(view); } } /** * 輪播控制元件的監聽事件 * * @author minking */ public static interface ImageCycleViewListener { /** * 單擊圖片事件 * * @param position * @param imageView */ public void onImageClick(int position, View imageView); } }
XML:
<ui.ImageCycleView
android:id="@+id/idViewpager"
android:layout_width="match_parent"
android:layout_height="170dp"
android:layout_marginTop="100dp"/>
裝填圖片資料初始化:
private int[] pics = {R.mipmap.ic_launcher}; idViewpager.setImageResources(pics, mAdCycleViewListener); //圖片點選回撥 private ImageCycleView.ImageCycleViewListener mAdCycleViewListener = new ImageCycleView.ImageCycleViewListener() { @Override public void onImageClick(int position, View imageView) { // TODO 單擊圖片處理事件 switch (position){ case 0: Log.e("","這是第1個"); break; case 1: Log.e("","這是第2個"); break; } } }; //輪播圖暫停 @Override protected void onStop() { super.onStop(); idViewpager.pushImageCycle(); }