Android實現自定義輪播圖片控件詳解

2019-12-12 04:56:38

字體：大中小

來源：轉載

供稿：網友

首先上效果圖

實現原理

要完成一個輪播圖片，首先想到的應該是使用ViewPager來實現。ViewPager已經有了滑動的功能，我們只要讓它自己滾動。再加上下方的小圓點就行了。所以我們本次的自定義控件就是由ViewPager和LinearLayout疊加起來組成的。

一、創建一個自定義的ViewPager

先上完整的代碼

package com.kcode.autoscrollviewpager.view;import android.content.Context;import android.os.Message;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import java.util.Timer;import java.util.TimerTask;/** * Created by caik on 2016/10/10. */public class AutoViewPager extends ViewPager { private static final String TAG = "AutoViewPager"; private int currentItem; private Timer mTimer; private AutoTask mTask; private boolean isFirst = true; public AutoViewPager(Context context) {  super(context); } public AutoViewPager(Context context, AttributeSet attrs) {  super(context, attrs); } public void start(){  if (mTimer == null) {   mTimer = new Timer();  }  mTimer.schedule(new AutoTask(),3000,3000); } private Runnable runnable = new Runnable() {  @Override  public void run() {   currentItem = getCurrentItem();   if(currentItem == getAdapter().getCount() - 1){    currentItem = 0 ;   }else {    currentItem++ ;   }   setCurrentItem(currentItem);  } }; private AutoHandler mHandler = new AutoHandler(); public void updatePointView(int size) {  if (getParent() instanceof AutoScrollViewPager){   AutoScrollViewPager pager = (AutoScrollViewPager) getParent();   pager.initPointView(size);  }else {   Log.e(TAG,"parent view not be AutoScrollViewPager");  } } public void onPageSelected(int position) {  AutoScrollViewPager pager = (AutoScrollViewPager) getParent();  pager.updatePointView(position); } private class AutoTask extends TimerTask{  @Override  public void run() {   mHandler.post(runnable);  } } private final static class AutoHandler extends android.os.Handler{  @Override  public void handleMessage(Message msg) {   super.handleMessage(msg);  } } public void onStop(){  //先取消定時器  if (mTimer != null) {   mTimer.cancel();   mTimer = null;  } } public void onDestroy(){  onStop(); } public void onResume(){  start(); } @Override public boolean onTouchEvent(MotionEvent ev) {  switch (ev.getAction()){   case MotionEvent.ACTION_DOWN:    Log.i(TAG,"down");    onStop();    break;   case MotionEvent.ACTION_MOVE:    Log.i(TAG,"move");    break;   case MotionEvent.ACTION_UP:    Log.i(TAG,"up");    onResume();    break;  }  return super.onTouchEvent(ev); }}

AutoViewPager 繼承至ViewPager，我們通過Timer來啟動一個定時器。

public void start(){  if (mTimer == null) {   mTimer = new Timer();  }  mTimer.schedule(new AutoTask(),3000,3000); } private Runnable runnable = new Runnable() {  @Override  public void run() {   currentItem = getCurrentItem();   if(currentItem == getAdapter().getCount() - 1){    currentItem = 0 ;   }else {    currentItem++ ;   }   setCurrentItem(currentItem);  } };

每隔三秒去更新一下頁面。這樣就能起到一個自己滾動的效果。

二、設置Adapter

要實現無限循環，只要把Adapter中的getCount()方法返回無限大，直接返回Integer.MAX_VALUE就可以了。

完整的Adapter代碼：

package com.kcode.autoscrollviewpager.view;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import com.kcode.autoscrollviewpager.R;import java.util.ArrayList;import java.util.List;/** * Created by caik on 2016/10/11. */public abstract class BaseViewPagerAdapter<T> extends PagerAdapter implements ViewPager.OnPageChangeListener{ private List<T> data = new ArrayList<>(); private Context mContext; private AutoViewPager mView; private OnAutoViewPagerItemClickListener listener; public BaseViewPagerAdapter(List<T> t) {  this.data = t; } public BaseViewPagerAdapter(Context context, AutoViewPager viewPager) {  this.mContext = context;  mView = viewPager;  mView.setAdapter(this);  mView.addOnPageChangeListener(this);  mView.setCurrentItem(0); } public BaseViewPagerAdapter(Context context, AutoViewPager viewPager,OnAutoViewPagerItemClickListener listener) {  this.mContext = context;  mView = viewPager;  this.listener = listener;  mView.setAdapter(this);  mView.addOnPageChangeListener(this);  mView.setCurrentItem(0); } public BaseViewPagerAdapter(Context context, List<T> data,AutoViewPager viewPager,OnAutoViewPagerItemClickListener listener) {  this.mContext = context;  mView = viewPager;  this.data = data;  this.listener = listener;  mView.setAdapter(this);  mView.addOnPageChangeListener(this);  mView.setCurrentItem(0);  mView.start();  mView.updatePointView(getRealCount()); } public void add(T t){  data.add(t);  notifyDataSetChanged();  mView.updatePointView(getRealCount()); } @Override public int getCount() {  return data == null ? 0 : Integer.MAX_VALUE; } public int getRealCount(){  return data == null ? 0 : data.size(); } @Override public void destroyItem(ViewGroup container, int position, Object object) {  container.removeView((ImageView) object); } @Override public Object instantiateItem(ViewGroup container, final int position) {  ImageView view = (ImageView) LayoutInflater.from(mContext)    .inflate(R.layout.imageview,container,false);  view.setOnClickListener(new View.OnClickListener() {   @Override   public void onClick(View view) {    if (listener != null) {     listener.onItemClick(position % getRealCount(),data.get(position % getRealCount()));    }   }  });  loadImage(view,position, data.get(position % getRealCount()));  container.addView(view);  return view; } public abstract void loadImage(ImageView view,int position,T t); @Override public boolean isViewFromObject(View view, Object object) {  return view == object; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) {  mView.onPageSelected(position % getRealCount()); } @Override public void onPageScrollStateChanged(int state) { } public interface OnAutoViewPagerItemClickListener<T> {  void onItemClick(int position,T t); }}

這里我們使用了泛型，因為有時候我們可能只傳一個url集合進來，也可能是對象集合，方便拓展。加載圖片的方法也是一個抽象方法

public abstract void loadImage(ImageView view,int position,T t);

因為每個App使用的圖片加載框架都不一樣，所以這里的加載就留個App自己實現。使用的時候創建Adapter只要繼承這里的BaseViewPagerAdapter，然后重寫loadImage(ImageView view,int position,T t)方法，在這里進行圖片的加載就行了。

如果你需不要底部的小圓點標示的話，這里就已經完成了。

使用的時候，直接使用

 <com.kcode.autoscrollviewpager.view.AutoViewPager  android:layout_width="match_parent"  android:layout_height="200dp">   </com.kcode.autoscrollviewpager.view.AutoViewPager>

代替

 <android.support.v4.view.ViewPager  android:layout_width="match_parent"  android:layout_height="match_parent"> </android.support.v4.view.ViewPager>

就可以了。需要底部的小圓點標示的話，繼續往下

三、添加小圓點標示

需要添加小圓點標示的話。其實就是在ViewPager上再加一層。我們新建一個View，繼承至RelativeLayout

完整代碼如下：

package com.kcode.autoscrollviewpager.view;import android.content.Context;import android.util.AttributeSet;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.RelativeLayout;import com.kcode.autoscrollviewpager.R;import static android.view.Gravity.CENTER;/** * Created by caik on 2016/10/17. */public class AutoScrollViewPager extends RelativeLayout{ private AutoViewPager mViewPager; private Context mContext; private LinearLayout layout; public AutoScrollViewPager(Context context) {  super(context);  init(context); } public AutoScrollViewPager(Context context, AttributeSet attrs) {  super(context, attrs);  init(context); } private void init(Context context){  mContext = context;  mViewPager = new AutoViewPager(context);  layout = new LinearLayout(mContext);  addView(mViewPager); } public AutoViewPager getViewPager() {  return mViewPager; } public void initPointView(int size){  layout = new LinearLayout(mContext);  for (int i = 0; i < size; i++) {   ImageView imageView = new ImageView(mContext);   LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);   params.leftMargin = 8;   params.gravity = CENTER;   imageView.setLayoutParams(params);   if (i == 0) {    imageView.setBackgroundResource(R.drawable.point_checked);   }else {    imageView.setBackgroundResource(R.drawable.point_normal);   }   layout.addView(imageView);  }  LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  layoutParams.addRule(ALIGN_PARENT_BOTTOM);  layoutParams.addRule(ALIGN_PARENT_RIGHT);  layoutParams.setMargins(12,20,12,20);  layout.setLayoutParams(layoutParams);  addView(layout); } public void updatePointView(int position) {  int size = layout.getChildCount();  for (int i = 0; i < size; i++) {   ImageView imageView = (ImageView) layout.getChildAt(i);   if (i == position){    imageView.setBackgroundResource(R.drawable.point_checked);   }else {    imageView.setBackgroundResource(R.drawable.point_normal);   }  } }}

初始化的時候創建一個ViewPager,一個LinearLayout（用來放小圓點）

 public AutoScrollViewPager(Context context) {  super(context);  init(context); } public AutoScrollViewPager(Context context, AttributeSet attrs) {  super(context, attrs);  init(context); } private void init(Context context){  mContext = context;  mViewPager = new AutoViewPager(context);  layout = new LinearLayout(mContext);  addView(mViewPager); }

再通過addView(mViewPager);添加。

需要準備兩張圖片，這里用Shape進行繪制,Shape的使用可以查看Android Shape使用.

初始化小圓點：

 public void initPointView(int size){  layout = new LinearLayout(mContext);  for (int i = 0; i < size; i++) {   ImageView imageView = new ImageView(mContext);   LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(20,20);   params.leftMargin = 8;   params.gravity = CENTER;   imageView.setLayoutParams(params);   if (i == 0) {    imageView.setBackgroundResource(R.drawable.point_checked);   }else {    imageView.setBackgroundResource(R.drawable.point_normal);   }   layout.addView(imageView);  }  LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  layoutParams.addRule(ALIGN_PARENT_BOTTOM);  layoutParams.addRule(ALIGN_PARENT_RIGHT);  layoutParams.setMargins(12,20,12,20);  layout.setLayoutParams(layoutParams);  addView(layout); }

更新小圓點：

 public void updatePointView(int position) {  int size = layout.getChildCount();  for (int i = 0; i < size; i++) {   ImageView imageView = (ImageView) layout.getChildAt(i);   if (i == position){    imageView.setBackgroundResource(R.drawable.point_checked);   }else {    imageView.setBackgroundResource(R.drawable.point_normal);   }  } }

帶小圓點的使用以下控件

 <com.kcode.autoscrollviewpager.view.AutoScrollViewPager  android:id="@+id/viewPager"  android:layout_width="match_parent"  android:layout_height="220dp"> </com.kcode.autoscrollviewpager.view.AutoScrollViewPager>

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

上一篇：Android中解決頁簽手指按下從左到右滑動的bug

下一篇：Android編程自定義title bar(標題欄)示例