要完成一个轮播图片,首先想到的应该是使用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自定义控件实现简单的轮播图控件,包括了Android自定义控件实现简单的轮播图控件的使用技巧和注意事项,需要的朋友参考一下 最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码。于是自己封装了一下。本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不
本文向大家介绍Android实现图片轮播列表,包括了Android实现图片轮播列表的使用技巧和注意事项,需要的朋友参考一下 这个效果在交友app中比较常见,一般作为首页使用,顶部是一个自动轮播的ViewPager,下面放一个横向LinearLayout,最下面要放一个ListView,但是注意这三个部分都支持滑动,应该和固定在顶部的标题栏和底部的操作栏分开,也就是把ViewPager和Linear
本文向大家介绍Android线程实现图片轮播,包括了Android线程实现图片轮播的使用技巧和注意事项,需要的朋友参考一下 一、实现效果 本篇文章实现了简单的图片轮播,初始化3张资源图片,初始化3秒更换一次图片背景,轮换播放。 二、知识点 Thread线程start() 、sleep();handler机制;Android 控件imageView、setBackgroundResource(id)
本文向大家介绍Android高级图片滚动控件实现3D版图片轮播器,包括了Android高级图片滚动控件实现3D版图片轮播器的使用技巧和注意事项,需要的朋友参考一下 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧。 说到图片轮播器,很多的Androi
本文向大家介绍Android开发实现的自动换图片、轮播图效果示例,包括了Android开发实现的自动换图片、轮播图效果示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android开发实现的自动换图片、轮播图效果。分享给大家供大家参考,具体如下: 50行代码急速实现轮播图: 先看效果: 两个例子没太大区别, 不过i是布局文件中控件的Height不一样罢了这里一第二个为例: 嗯好像是五十
本文向大家介绍Android自定义实现循环滚轮控件WheelView,包括了Android自定义实现循环滚轮控件WheelView的使用技巧和注意事项,需要的朋友参考一下 首先呈上Android循环滚轮效果图: 现在很多地方都用到了滚轮布局WheelView,比如在选择生日的时候,风格类似系统提供的DatePickerDialog,开源的控件也有很多,不过大部分都是根据当前项目的需求绘制的界面