Android实现自定义轮播图片控件详解

2024-02-22 07:30:41

首先上效果图

实现原理

要完成一个轮播图片，首先想到的应该是使用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编程实现图片放大缩小功能ZoomControls控件用法实例

本文实例讲述了Android编程实现图片放大缩小功能ZoomControls控件用法.分享给大家供大家参考,具体如下: MainActivity代码: package example.com.myapplication; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Matrix; import
Android中利用matrix 控制图片的旋转、缩放、移动

本文主要讲解利用android中Matrix控制图形的旋转缩放移动,具体参见一下代码: 复制代码代码如下: /** * 使用矩阵控制图片移动.缩放.旋转 */ public class CommonImgEffectView extends View { private Context context ; private Bitmap mainBmp , controlBmp ; private int mainBmpWidth , mainBmpHeight , c
Android中让图片自适应控件的大小的方法

这就需要把.png格式的图片转成.9.png格式,.9.png就是后缀名.在安装Android-SDK时自带了<draw9patch.bat>可以把.png格式的图片编辑后保存就变成了.9.png格式.这个文件存放在你所安装的Android-SDK目录->sdk->tools目录下. .9.png格式在Andriod中可以做到根据控件大小自适应,最重要的是不会失真.是不是很完美?下面就来看是如何制作.9.png格式的进度条. 启动后的界面如下: 首先要准备要转换的png图片,并把图
Android控件ImageSwitcher实现左右图片切换功能

ImageSwitcher类是ViewSwitcher类的子类,它实现的效果是在完成ImageView的切换并且带有动画效果.要使用这个类需要以下两个步骤: 1)为ImageSwitcher类提供一个ViewFactory,该ViewFactory生成的View组件必须是ImageView. 2)需要切换的时候,只需要嗲用ImageSwitcher的setImageDrawable().setImageResource().setImageURL()方法即可实现切换. activity_main
Android进阶篇-自定义图片伸缩控件具体实例

ZoomImageView.java: 复制代码代码如下: /** * @author gongchaobin * * 自定义可伸缩的ImageView */public class ZoomImageView extends View{ /** 画笔类 **/ private Paint mPaint; private Runnable mRefresh = null; /** 缩放手势监听类 **/ private ScaleGestureDetector
android 多点触摸图片缩放的具体实现方法

布局: 复制代码代码如下: <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/relativeLayout1" android:layout_width="fill_parent
Android中ImageView.src设置图片拉伸、填满控件的方法

问题 ImageView.src设置图片资源,图片不拉伸了,却有空隙部分: <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView andro
Android实现自定义轮播图片控件示例

要完成一个轮播图片,首先想到的应该是使用ViewPager来实现.ViewPager已经有了滑动的功能,我们只要让它自己滚动.再加上下方的小圆点就行了.所以我们本次的自定义控件就是由ViewPager和LinearLayout叠加起来组成的. 直接先上效果图: 创建一个自定义的ViewPager 先上完整的代码 package com.kcode.autoscrollviewpager.view; import android.content.Context; import android.os
Android自定义View实现多图片选择控件

前言相信很多朋友在开发中都会遇到图片上传的情况,尤其是多图上传,最经典的莫过于微信的图片选择了.所有很多情况下会使用到多图选择,所以就有了这篇文章,今天抽点时间写了个控件. •支持自定义选择图片的样式 •支持设置图片选择数量 •支持图片预览,删除 •支持图片拍照先来看看效果实现分析假如不定义控件,我们要实现这样一个功能,无非是写个GridView在item点击的时候去显示图片进行选择,在返回界面的时候进行GridView的数据刷新.我们把这些逻辑写在我们自定义的GridView中
Android使用控件ImageView加载图片的方法

在 Android 加载图片一般使用 ImageView,这里简单记录一下这个控件的使用方法. 最简单就是在 xml 里直接使用 ImageView 标签: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="
Android 图片网格布局控件示例代码

项目地址:MultiPictureView MultiPictureView是一个可以将多张图片以网格的方式显示的View,通过简单的接口实现烦人的布局,从此解放你的小手手显示效果支持设置图片数量上限支持设置最多显示列数支持动态布局和静态布局两种模式(见下图) 支持编辑模式和展示模式(编辑模式可以增加和删除图片) 布局方式动态布局静态布局编辑/显示模式如何使用 1. 在布局中声明 <com.goyourfly.multi_picture.MultiPictureView andr
Android编程实现GridView控件点击图片变暗效果的方法

本文实例讲述了Android编程实现GridView控件点击图片变暗效果的方法.分享给大家供大家参考,具体如下: @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); grid = (GridView) findViewById(R.id.grid); grid.setAdapte

Android实现自定义轮播图片控件详解

相关推荐

随机推荐