微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：Android作者：编程之家AI导航网

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

  }

  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,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,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,T t);

因为每个App使用的图片加载框架都不一样，所以这里的加载就留个App自己实现。使用的时候创建Adapter只要继承这里的BaseViewPagerAdapter，然后重写loadImage(ImageView view,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,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,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);
    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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Android 性能优化——之控件的优化
Android性能优化——之控件的优化 前面讲了图像的优化，接下来分享一下控件的性能优化，这里主要是面向自定义View的优化。 1、首先先说一下我们在自定义View中可能会犯的3个错误： 1）UselesscallstoonDraw()：我们知道调用View.invalidate()会触发Vi...
android TextView描边
前言 上一篇已经讲了如何实现textView中粗字体效果，里面主要重写了onDraw方法。 这一边讲一个进阶功能，实现textView的描边效果。 上效果图。 上代码： 原理讲解： 效果实现思路是：因为系统api只给paint设置strokewidth方法，却没有提供设置描边的色值的方法，而且我们通
GreenDao教程1
最近项目重构，涉及到了数据库和文件下载，发现GreenDao这个框架还是不错的。直接面向对象的，可以通过对对象的操作，实现数据的存储。 但是官网上的API是在不敢恭维，文档写的很糙，看了半天，才搞懂一系列的流程。在此进行一下纪念。免得那天需要修改的时候，一脸懵逼。直接上干货 官网地址：http://
WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一、加载网络页面 加载网络页面，是最简单的一种方式，只需要传入http的URL就可以，实现WebView加载网络页面 代码如下图： 二、加载本地页面 1、加载assets目录下的HTML页面： 加载assets目录的页面，大多数可以用来做页面数据的存储打包，这样可以
Android 全局使用第三方字体
给APP全局设置字体主要分为两个方面来介绍 一、给原生界面设置第三方字体 1、准备工作-下载第三方字体：传送门 将文件放入工程assets目录下。（一般个人习惯单独命名一个文件夹放字体文件，也可直接放入根目录，但记得改引用路径） 2、代码实现 a、自定义application，将第三方的字体，替换当
Android中粗字体
前言 最近UI大牛出了一版新的效果图，按照IOS的效果做的，页面里面有普通字体、中粗字体、加粗字体。对于IOS的小伙伴，分分钟搞定，但是对于Android开发的我，瞬间懵逼了。WTF！ 安卓只有粗和不粗呀，哪有中粗这回事。硬着头皮做出来一版之后，看到UI嫌弃的表情。深深的刺痛了我的完美心。说啥也要搞
TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView，可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。 想直接了解如何实现短下滑效果的请看：TabLayout的高级用法 首先上几个效果图。 图： 使用方法 下面我们来看如何使用， 第一步，先在gradle引
AndroidStudio 各种异常情况处理大法
最近使用AndroidStudio出现了.java文件，显示为xml文件等问题，通过各种采坑之后，发现删除本地的缓存文件这个方法最管用，差不多可以根治95%的莫名其妙的问题。解决办法如下； 先将AS关闭，然后找到你电脑的目录C:\Users\用户名\.AndroidStudio3.5\system\
Android文件各种存储路径的比较
1、File cacheDir = context.getCacheDir(); 应用内部存储空间（数据文件私有）文件存储到这个路径下，不需要申请权限，当应用被卸载的时候，目录下的文件会被删除。 需要注意的是，这个文件的目录和应用的存储位置有关， 当应用被移动到外部存储设备的时候，文件的绝对路径也是
汉诺塔问题
汉诺塔问题 最近面试题遇到过汉诺塔的问题，当时竟然懵逼了，不会了！！大学研究的问题竟然都忘光了，于是抓紧捡起来。然而在网上看了看博客，发现非递归算法还真挺多。下面总结了一下。 一、递归算法 1、递归算法优缺点：递归算法算是最易于理解也是最容易实现的，但是对内存的消耗也是巨大的，因为递归需要系统堆栈来
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native