Android實現自定義輪播圖片控件示例

2019-12-12 04:51:17

字體：大中小

來源：轉載

供稿：網友

要完成一個輪播圖片，首先想到的應該是使用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自定義UI實現微信語音

下一篇：Android編程實現對電池狀態的監視功能示例