Android简单的ViewPager指示器
2016-06-16 13:07
459 查看
平常写项目在写介绍页,或者一些简单的轮播图的时候,总会需要搭配指示器来标明当前在什么位置.写法也比较多,刚好自己需要用到,以前用的一些方法,用起来需要配置好多东西,有些大材小用,所以来简单的实现一个.效果图如下:
1)每一个指示器项有两种状态,普通状态和选中状态,所以需要准备两种状态的图片.
2)指示器的个数和ViewPager的页数要保持一致.可以引用ViewPager对象,来获取ViewPager的页数.从而创建指示器.
3)指示器要跟随ViewPager的移动来动态的改变状态.同样可以引用ViewPager对象,对ViewPager进行监听,处理指示器的状态改变.
有了思路,就来具体实现一下,提出一些自定义属性,在attr文件中定义:
新建一个IndicatorView继承自LinearLayout即可,因为需要对ViewPager进行监听,所以实现一下ViewPager的监听.定义变量并获取自定义属性:
这里因为监听了ViewPager,所以需要对外提供回调方法,将ViewPager的监听方法暴露出去,方便其他地方对ViewPager对象进行监听.
再来看一下init方法:
在init方法中对自定义属性做了相关处理,如果没有设置指示器的图片,就建立两种状态下的圆形指示器图片.
接着看一下对于ViewPager对象的引用及处理:
获取ViewPager对象,并通过对ViewPager对象的监听去设置指示器的状态.获取ViewPager对象提供两种方法,方便设置指示器默认显示的位置.
最后看一下指示器的创建:
在绘制过程中,去创建指示器,并设置相关属性和默认选中指示器的位置.
activity_main.xml:
banner_item.xml:
IndicatorView:
BannerPagerAdapter:
MainActivity:
关于无限循环和自动播放的内容可以参考
无限循环和自动播放的实现
一、简单分析与代码实现
因为比较简单,所以就简单的分析一下:1)每一个指示器项有两种状态,普通状态和选中状态,所以需要准备两种状态的图片.
2)指示器的个数和ViewPager的页数要保持一致.可以引用ViewPager对象,来获取ViewPager的页数.从而创建指示器.
3)指示器要跟随ViewPager的移动来动态的改变状态.同样可以引用ViewPager对象,对ViewPager进行监听,处理指示器的状态改变.
有了思路,就来具体实现一下,提出一些自定义属性,在attr文件中定义:
<?xml version="1.0" encoding="utf-8"?> <resources> <!--IndicatorView相关--> <!--普通指示器图片--> <attr name="normalDrawable" format="reference"/> <!--选中指示器图片--> <attr name="selectDrawable" format="reference"/> <!--指示器间隔--> <attr name="indicatorInterval" format="dimension"/> <!--普通指示器颜色--> <attr name="normalColor" format="color"/> <!--选中指示器颜色--> <attr name="selectColor" format="color"/> <!--圆点弧度--> <attr name="indicatorRadius" format="integer"/> <declare-styleable name="IndicatorView"> <attr name="normalDrawable"/> <attr name="selectDrawable"/> <attr name="indicatorInterval"/> <attr name="normalColor"/> <attr name="selectColor"/> <attr name="indicatorRadius"/> </declare-styleable> </resources>
新建一个IndicatorView继承自LinearLayout即可,因为需要对ViewPager进行监听,所以实现一下ViewPager的监听.定义变量并获取自定义属性:
/** * 轮播图圆形指示器 * Created by junweiliu on 16/6/15. */ public class IndicatorView extends LinearLayout implements ViewPager.OnPageChangeListener { /** * 需要创建的指示器个数 */ private int childViewCount = 0; /** * 设置圆点间margin */ private int mInterval; /** * 当前选中的位置 */ private int mCurrentPostion = 0; /** * 普通显示的图片 */ private Bitmap normalBp; /** * 选中时显示的图片 */ private Bitmap selectBp; /** * 设置的轮播图Vp */ private ViewPager mViewPager; /** * 指示器单项宽度 */ private int mWidth; /** * 指示器单项高度 */ private int mHeight; /** * 圆点半径 */ private int mRadius; /** * 普通状态圆点颜色 */ private int normalColor; /** * 选中状态圆点颜色 */ private int selectColor; /** * 对外提供ViewPager的回调接口 */ interface OnPageChangeListener { public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels); public void onPageSelected(int position); public void onPageScrollStateChanged(int state); } /** * 回调接口 */ private OnPageChangeListener mListener; /** * 设置回调 * * @param listener */ public void setOnPageChangeListener(OnPageChangeListener listener) { this.mListener = listener; } public IndicatorView(Context context) { this(context, null); } public IndicatorView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // 获取自定义属性 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IndicatorView); normalBp = drawableToBitamp(ta.getDrawable(R.styleable.IndicatorView_normalDrawable)); selectBp = drawableToBitamp(ta.getDrawable(R.styleable.IndicatorView_selectDrawable)); mInterval = ta.getDimensionPixelOffset(R.styleable.IndicatorView_indicatorInterval, 6); normalColor = ta.getColor(R.styleable.IndicatorView_normalColor, Color.GRAY); selectColor = ta.getColor(R.styleable.IndicatorView_selectColor, Color.RED); mRadius = ta.getInteger(R.styleable.IndicatorView_indicatorRadius, 6); ta.recycle(); // 初始化 init(); }
这里因为监听了ViewPager,所以需要对外提供回调方法,将ViewPager的监听方法暴露出去,方便其他地方对ViewPager对象进行监听.
再来看一下init方法:
/** * 初始化数据 */ private void init() { // 处理自定义属性 if (null == normalBp) { normalBp = makeIndicatorBp(normalColor); } if (null == selectBp) { selectBp = makeIndicatorBp(selectColor); } mWidth = normalBp.getWidth(); mHeight = normalBp.getWidth(); } /** * 创建圆点指示器图片 * * @param color 创建不同颜色的指示器项 * @return */ private Bitmap makeIndicatorBp(int color) { Bitmap normalBp = Bitmap.createBitmap(mRadius * 2, mRadius * 2, Bitmap.Config.ARGB_8888); Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(color); Canvas canvas = new Canvas(normalBp); canvas.drawCircle(mRadius, mRadius, mRadius, paint); return normalBp; }
在init方法中对自定义属性做了相关处理,如果没有设置指示器的图片,就建立两种状态下的圆形指示器图片.
接着看一下对于ViewPager对象的引用及处理:
/** * 设置Vp * * @param viewpager */ public void setViewPager(ViewPager viewpager) { if (null == viewpager) { return; } if (null == viewpager.getAdapter()) { throw new IllegalStateException("ViewPager does not have adapter."); } this.mViewPager = viewpager; this.mViewPager.addOnPageChangeListener(this); this.childViewCount = viewpager.getAdapter().getCount(); invalidate(); } /** * 设置Vp * * @param viewpager * @param currposition 当前选中的位置 */ public void setViewPager(ViewPager viewpager, int currposition) { if (null == viewpager) { return; } if (null == viewpager.getAdapter()) { throw new IllegalStateException("ViewPager does not have adapter."); } this.mViewPager = viewpager; this.mViewPager.addOnPageChangeListener(this); this.childViewCount = viewpager.getAdapter().getCount(); this.mCurrentPostion = currposition; invalidate(); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (null != mListener) { mListener.onPageScrolled(position, positionOffset, positionOffsetPixels); } } @Override public void onPageSelected(int position) { setIndicatorState(position); if (null != mListener) { mListener.onPageSelected(position); } } @Override public void onPageScrollStateChanged(int state) { if (null != mListener) { mListener.onPageScrollStateChanged(state); } } /** * 设置指示器的状态 * * @param position */ public void setIndicatorState(int position) { for (int i = 0; i < getChildCount(); i++) { if (i == position) ((ImageView) getChildAt(i)).setImageBitmap(selectBp); else ((ImageView) getChildAt(i)).setImageBitmap(normalBp); } }
获取ViewPager对象,并通过对ViewPager对象的监听去设置指示器的状态.获取ViewPager对象提供两种方法,方便设置指示器默认显示的位置.
最后看一下指示器的创建:
/** * 重绘 * * @param canvas */ @Override protected void dispatchDraw(Canvas canvas) { // 创建指示器圆点 if (getChildCount() < childViewCount && getChildCount() == 0) { for (int i = 0; i < childViewCount; i++) { addView(makeIndicatorItem()); } // 设置默认选中指示器 setIndicatorState(mCurrentPostion); } super.dispatchDraw(canvas); } /** * 创建指示器 * * @return */ private View makeIndicatorItem() { ImageView iv = new ImageView(getContext()); LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); lp.width = normalBp.getWidth(); lp.height = normalBp.getHeight(); lp.rightMargin = mInterval; iv.setImageBitmap(normalBp); iv.setLayoutParams(lp); return iv; }
在绘制过程中,去创建指示器,并设置相关属性和默认选中指示器的位置.
二、完整代码及使用
不是特别复杂,注释也比较全,看一下完整代码:activity_main.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:idv="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="225dp" tools:context="com.example.junweiliu.simpleindicatorview.MainActivity"> <!--轮播图--> <android.support.v4.view.ViewPager android:id="@+id/vp_banner" android:layout_width="match_parent" android:layout_height="225dp" > </android.support.v4.view.ViewPager> <!--指示器--> <com.example.junweiliu.simpleindicatorview.IndicatorView android:id="@+id/idv_banner" android:layout_width="match_parent" android:layout_height="10dp" android:layout_alignParentBottom="true" android:layout_marginTop="20dp" idv:indicatorInterval="10dp" android:gravity="center_horizontal" idv:normalDrawable="@mipmap/oval_indicator_grey" idv:selectDrawable="@mipmap/oval_indicator_green"> </com.example.junweiliu.simpleindicatorview.IndicatorView> </RelativeLayout>
banner_item.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/iv_banner_item" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" /> </LinearLayout>
IndicatorView:
package com.example.junweiliu.simpleindicatorview; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; /** * 轮播图圆形指示器 * Created by junweiliu on 16/6/15. */ public class IndicatorView extends LinearLayout implements ViewPager.OnPageChangeListener { /** * 需要创建的指示器个数 */ private int childViewCount = 0; /** * 设置圆点间margin */ private int mInterval; /** * 当前选中的位置 */ private int mCurrentPostion = 0; /** * 普通显示的图片 */ private Bitmap normalBp; /** * 选中时显示的图片 */ private Bitmap selectBp; /** * 设置的轮播图Vp */ private ViewPager mViewPager; /** * 指示器单项宽度 */ private int mWidth; /** * 指示器单项高度 */ private int mHeight; /** * 圆点半径 */ private int mRadius; /** * 普通状态圆点颜色 */ private int normalColor; /** * 选中状态圆点颜色 */ private int selectColor; /** * 对外提供ViewPager的回调接口 */ interface OnPageChangeListener { public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels); public void onPageSelected(int position); public void onPageScrollStateChanged(int state); } /** * 回调接口 */ private OnPageChangeListener mListener; /** * 设置回调 * * @param listener */ public void setOnPageChangeListener(OnPageChangeListener listener) { this.mListener = listener; } public IndicatorView(Context context) { this(context, null); } public IndicatorView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // 获取自定义属性 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IndicatorView); normalBp = drawableToBitamp(ta.getDrawable(R.styleable.IndicatorView_normalDrawable)); selectBp = drawableToBitamp(ta.getDrawable(R.styleable.IndicatorView_selectDrawable)); mInterval = ta.getDimensionPixelOffset(R.styleable.IndicatorView_indicatorInterval, 6); normalColor = ta.getColor(R.styleable.IndicatorView_normalColor, Color.GRAY); selectColor = ta.getColor(R.styleable.IndicatorView_selectColor, Color.RED); mRadius = ta.getInteger(R.styleable.IndicatorView_indicatorRadius, 6); ta.recycle(); // 初始化 init(); } /** * 初始化数据 */ private void init() { // 处理自定义属性 if (null == normalBp) { normalBp = makeIndicatorBp(normalColor); } if (null == selectBp) { selectBp = makeIndicatorBp(selectColor); } mWidth = normalBp.getWidth(); mHeight = normalBp.getWidth(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); // 如果是wrap_content设置为图片宽高,否则设置为父容器宽高 setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth : (mWidth + mInterval) * childViewCount , (heightMode == MeasureSpec.EXACTLY) ? sizeHeight : mHeight); } /** * 重绘 * * @param canvas */ @Override protected void dispatchDraw(Canvas canvas) { // 创建指示器圆点 if (getChildCount() < childViewCount && getChildCount() == 0) { for (int i = 0; i < childViewCount; i++) { addView(makeIndicatorItem()); } // 设置默认选中指示器 setIndicatorState(mCurrentPostion); } super.dispatchDraw(canvas); } /** * 设置Vp * * @param viewpager */ public void setViewPager(ViewPager viewpager) { if (null == viewpager) { return; } if (null == viewpager.getAdapter()) { throw new IllegalStateException("ViewPager does not have adapter."); } this.mViewPager = viewpager; this.mViewPager.addOnPageChangeListener(this); this.childViewCount = viewpager.getAdapter().getCount(); invalidate(); } /** * 设置Vp * * @param viewpager * @param currposition 当前选中的位置 */ public void setViewPager(ViewPager viewpager, int currposition) { if (null == viewpager) { return; } if (null == viewpager.getAdapter()) { throw new IllegalStateException("ViewPager does not have adapter."); } this.mViewPager = viewpager; this.mViewPager.addOnPageChangeListener(this); this.childViewCount = viewpager.getAdapter().getCount(); this.mCurrentPostion = currposition; invalidate(); } /** * 创建指示器 * * @return */ private View makeIndicatorItem() { ImageView iv = new ImageView(getContext()); LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); lp.width = normalBp.getWidth(); lp.height = normalBp.getHeight(); lp.rightMargin = mInterval; iv.setImageBitmap(normalBp); iv.setLayoutParams(lp); return iv; } /** * 创建圆点指示器图片 * * @param color 创建不同颜色的指示器项 * @return */ private Bitmap makeIndicatorBp(int color) { Bitmap normalBp = Bitmap.createBitmap(mRadius * 2, mRadius * 2, Bitmap.Config.ARGB_8888); Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(color); Canvas canvas = new Canvas(normalBp); canvas.drawCircle(mRadius, mRadius, mRadius, paint); return normalBp; } /** * drawable转bitmap * * @param drawable * @return */ private Bitmap drawableToBitamp(Drawable drawable) { if (null == drawable) { return null; } if (drawable instanceof BitmapDrawable) { BitmapDrawable bd = (BitmapDrawable) drawable; return bd.getBitmap(); } int w = drawable.getIntrinsicWidth(); int h = drawable.getIntrinsicHeight(); Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); drawable.setBounds(0, 0, w, h); drawable.draw(canvas); return bitmap; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (null != mListener) { mListener.onPageScrolled(position, positionOffset, positionOffsetPixels); } } @Override public void onPageSelected(int position) { setIndicatorState(position); if (null != mListener) { mListener.onPageSelected(position); } } @Override public void onPageScrollStateChanged(int state) { if (null != mListener) { mListener.onPageScrollStateChanged(state); } } /** * 设置指示器的状态 * * @param position */ public void setIndicatorState(int position) { for (int i = 0; i < getChildCount(); i++) { if (i == position) ((ImageView) getChildAt(i)).setImageBitmap(selectBp); else ((ImageView) getChildAt(i)).setImageBitmap(normalBp); } } }
BannerPagerAdapter:
package com.example.junweiliu.simpleindicatorview; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import java.util.ArrayList; import java.util.List; /** * Created by junweiliu on 16/6/14. * VP适配器 */ public class BannerPagerAdapter extends PagerAdapter { /** * 上下文 */ private Context mContext; /** * 图像列表 */ private List<Integer> pictureList = new ArrayList<>(); public BannerPagerAdapter(Context context, List<Integer> pictureList) { this.mContext = context; this.pictureList = pictureList; } @Override public int getCount() { return pictureList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, final int position) { View view = LayoutInflater.from(mContext).inflate(R.layout.banner_item, container, false); ImageView imageView = (ImageView) view.findViewById(R.id.iv_banner_item); imageView.setImageResource(pictureList.get(position)); container.addView(view); return view; } @Override public void finishUpdate(ViewGroup container) { } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } }
MainActivity:
package com.example.junweiliu.simpleindicatorview; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { /** * 轮播图 */ private ViewPager mViewPager; /** * 指示器 */ private IndicatorView mIndicatorView; /** * 适配器 */ private BannerPagerAdapter mBannerPagerAdapter; private List<Integer> pictureList = new ArrayList<>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initDatas(); initView(); } /** * 初始化数据 */ private void initDatas() { pictureList.add(R.drawable.pic_one); pictureList.add(R.drawable.pic_two); pictureList.add(R.drawable.pic_three); pictureList.add(R.drawable.pic_one); pictureList.add(R.drawable.pic_two); pictureList.add(R.drawable.pic_three); } /** * 初始化控件 */ private void initView() { mViewPager = (ViewPager) findViewById(R.id.vp_banner); mIndicatorView = (IndicatorView) findViewById(R.id.idv_banner); mBannerPagerAdapter = new BannerPagerAdapter(this, pictureList); mViewPager.setAdapter(mBannerPagerAdapter); mIndicatorView.setViewPager(mViewPager); mIndicatorView.setOnPageChangeListener(new IndicatorView.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } }); } }
关于无限循环和自动播放的内容可以参考
无限循环和自动播放的实现
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories