Android实现自定义轮播图片控件示例

2022-06-06 07:03

短信预约 -IT技能 免费直播动态提醒

要完成一个轮播图片，首先想到的应该是使用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;

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;

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;

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开发在轮播图片上加入点击事件的方法Android实现自定义轮播图片控件详解Android实现轮播图片展示效果Android开发实现的自动换图片、轮播图效果示例Android ViewPager实现轮播图效果Android实现炫酷轮播图效果Android实现ViewPage轮播图效果Android自定义控件实现简单的轮播图控件Android自定义控件实现优雅的广告轮播图Android轮播图点击图片放大效果的实现方法

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

轮播图自定义示例图片轮播 Android

阅读原文内容投诉