热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

我们都知道我们做软件的时候,有些应用是有广告的轮番图的,我们实现这个功能的时候大多数是采用:ViewPager+LinearLayout来实现的,今天分享一下我自己自定义的广告轮番图的控件!

要完成一个轮播图片,首先想到的应该是使用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 extends PagerAdapter implements ViewPager.OnPageChangeListener{

  private List data = new ArrayList<>();

  private Context mContext;
  private AutoViewPager mView;

  private OnAutoViewPagerItemClickListener listener;

  public BaseViewPagerAdapter(List 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 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 &#63; 0 : Integer.MAX_VALUE;
  }

  public int getRealCount(){
    return data == null &#63; 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 {
    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)方法,在这里进行图片的加载就行了。

如果你需不要底部的小圆点标示的话,这里就已经完成了。使用的时候,直接使用

  
    
  

代替

  

  

就可以了。需要底部的小圆点标示的话,继续往下

添加小圆点标示

需要添加小圆点标示的话。其实就是在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 

初始化的时候创建一个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 

更新小圆点:

 public void updatePointView(int position) {
    int size = layout.getChildCount();
    for (int i = 0; i 

带小圆点的使用以下控件



  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文探讨了线性表中元素的删除方法,包括顺序表和链表的不同实现策略,以及这些策略在实际应用中的性能分析。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 本文介绍了通过ADB命令查询Android设备CPU的当前频率、最小频率和最大频率的方法。 ... [详细]
  • 在Android中实现黑客帝国风格的数字雨效果
    本文将详细介绍如何在Android平台上利用自定义View实现类似《黑客帝国》中的数字雨效果。通过实例代码,我们将探讨如何设置文字颜色、大小,以及如何控制数字下落的速度和间隔。 ... [详细]
  • 3DSMAX制作超现实的体育馆模型
    这篇教程是向脚本之家的朋友介绍3DSMAX制作超现实的体育馆模型方法,教程制作出来的体育馆模型非常地不错,不过教程有点难度,需要有一定基础的朋友学习,推荐到脚本之家,喜欢的朋友可 ... [详细]
  • 本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项,并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
  • 在项目冲刺的最后一天,团队专注于软件用户界面的细节优化,包括调整控件布局和字体设置,以确保界面的简洁性和用户友好性。 ... [详细]
author-avatar
学圆周_486
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有