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

首先上效果图

实现原理

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

时间: 2024-10-12 02:37:26

Android实现自定义轮播图片控件详解的相关文章

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

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

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

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

Android自定义控件实现简单的轮播图控件_Android

最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图

Android自定义控件实现简单的轮播图控件

最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图

Android ToolBar控件详解及实例

ToolBar控件详解 在Activity中添加ToolBar 1.添加库 dependencies { ... compile "com.android.support:appcompat-v7:18.0.+" } 2.Activity要继承AppCompatActivity 3.设置主题 使用ToolBar,要将系统默认的ActionBar隐藏掉 <application android:theme="@style/Theme.AppCompat.Light.NoA

Android 自定义imageview实现图片缩放实例详解

Android 自定义imageview实现图片缩放实例详解 觉得这个自定义的imageview很好用 性能不错  所以拿出来分享给大家  因为不会做gif图  所以项目效果 就不好贴出来了  把代码贴出来 1.项目结构图 2.Compat.class package com.suo.image; import android.os.Build.VERSION; import android.os.Build.VERSION_CODES; import android.view.View; pu

Android Tab 控件详解及实例

Android Tab 控件详解及实例 在桌面应用中Tab控件使用得非常普遍,那么我们经常在Android中也见到以Tab进行布局的客户端.那么Android中的Tab是如何使用的呢? 1.Activity package com.wicresoft.activity; import com.wicresoft.myandroid.R; import android.app.TabActivity; import android.os.Bundle; import android.util.Lo

iOS开发之UIScrollView控件详解_IOS

一.UIScrollView控件是什么?     (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限     (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容     (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容     (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容     (5)  举例:手机上的"设置".其他⽰示例程序 二

转:ASP.NET验证控件详解

asp.net|控件|详解 ASP.NET验证控件详解 ASP.NET是微软推出的下一代WEB开发工具,其强大的功能立即吸引了一大批WEB开发者投入它的靡下.现在,我们来看看ASP.NET的验证控件,感受ASP.NET的强大功能同时方便我们现在的WEB开发. WEB开发者特别是ASP开发者,一直对数据验证比较恼火,当你好不容易写出数据提交程序的主体以后,还不得不花大把时间去验证用户的每一个输入是否合法.如果开发者熟悉JavaScript或者VBScript,可以用这些脚本语言轻松实现验证,但是又