平常寫項目在寫介紹頁,或者一些簡單的輪播圖的時候,總會需要搭配指示器來標明當前在什麼位置.寫法也比較多,剛好自己需要用到,以前用的一些方法,用起來需要配置好多東西,有些大材小用,所以來簡單的實現一個.效果圖如下:
一、簡單分析與代碼實現
因爲比較簡單,所以就簡單的分析一下:
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) {
}
});
}
}
關於無限循環和自動播放的內容可以參考