自定义拖拽IndicatorView

1. 效果图

2. 根据效果,定义需要属性:

<declare-styleable name="IndicatorView">
<attr name="units" format="integer|reference"/>
<attr name="lightColor" format="reference|color"/>
<attr name="lightBitmap" format="reference"/>
<attr name="indicators" format="reference|string"/>

<attr name="controlStyle" format="enum">
<enum name="mode" value="0"/>
<enum name="wind" value="1"/>
<enum name="time" value="2"/>
</attr>
</declare-styleable>

private void parserAttrs(Context context, AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IndicatorView);
mLightColor = ta.getColor(R.styleable.IndicatorView_lightColor,
Color.argb(0xFF, 0xFF, 0xC1, 0x00));
int resourceId = ta.getResourceId(R.styleable.IndicatorView_lightBitmap, 0);
mLightBitmap = BitmapFactory.decodeResource(context.getResources(), resourceId);
mText = ta.getString(R.styleable.IndicatorView_indicators);
mIndicators = mText.split(",");
mUnits = mText.split(",").length - 1;

int mode = ta.getInt(R.styleable.IndicatorView_controlStyle, TIME);
switch (mode) {
case MODE:
mType = MODE;
break;
case WIND:
mType = WIND;
break;
case TIME:
mType = TIME;
break;
}

ta.recycle();
}

2. 初始化控件的一些默认值:

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mLeftX = getPaddingLeft();
mAvailableWidth = w - getPaddingLeft() - getPaddingRight();
float unit = mAvailableWidth / mUnits;
mThumbX = mLeftX + unit * mPosition;//粘近position

}

3. 测量控件的宽高:

/*简单测量,只支持为match_parent或者固定值*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width;
int height;

final int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
final int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
final int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
final int measureHeight = MeasureSpec.getSize(heightMeasureSpec);

/*布局width为match_parent或者固定值*/
if (measureWidthMode == MeasureSpec.EXACTLY) {
width = measureWidth;
} else {
width = mDefaultWidth;
}
/*布局height为match_parent或者固定值*/
if (measureHeightMode == MeasureSpec.EXACTLY) {
height = measureHeight;
} else {
height = mDefaultHeight;
}
setMeasuredDimension(width, height);
}

4.绘制thumb, 文本,及其tracker

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawTrack(canvas);
drawIndicatorTexts(canvas);
drawThumb(canvas);
}

/**
* 绘制thumb所在的track
*
* @param canvas
*/
private void drawTrack(Canvas canvas) {
Rect rect = new Rect(mLeftX, getHeight() * 2 / 3 - mTrackHeight / 2, mLeftX + mAvailableWidth,
getHeight() * 2 / 3 + mTrackHeight / 2);
mPaint.setColor(Color.parseColor("#ededed"));
canvas.drawRect(rect, mPaint);
}

/**
* 绘制indicators
*
* @param canvas
*/
private void drawIndicatorTexts(Canvas canvas) {
int count = mUnits;
Paint paint;
for (int i = 0; i <= count; i++) {
final float x = mAvailableWidth / count * i + mLeftX;

if (i == mPosition) {//当前选中的position
paint = mTextPaint;
mTextPaint.setColor(mLightColor);
} else {//没选中的position
paint = mTextPaint;
mTextPaint.setColor(Color.argb(0xFF, 0xBB, 0xBB, 0xBB));
}
paint.getTextBounds(mIndicators[i], 0, mIndicators[i].length(), mTextRect);
String text = mIndicators[i];
canvas.drawText(text, x - mTextRect.width() / 2, getHeight() / 3, paint);
}
}

/**
* 绘制thumb
*
* @param canvas
*/
private void drawThumb(Canvas canvas) {
Bitmap bitmap = mLightBitmap;
mThumbX = getThumbX(mPosition);
if (bitmap != null) {
canvas.drawBitmap(bitmap, mThumbX - bitmap.getWidth() / 2,
getHeight() * 2 / 3 - bitmap.getHeight() / 2, null);
}
}

5. 构建点击事件的监听器:

@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE: {
this.getParent().requestDisallowInterceptTouchEvent(true);
float x = event.getX();
moveThumb(x);
break;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL: {
if (mListener != null) {
mListener.onPositionChange(mPosition);
}
float x = event.getX();
moveThumb(x);
this.getParent().requestDisallowInterceptTouchEvent(false);
break;
}
}
return true;
}

private void moveThumb(float x) {
if (mPosition == getPosition(x)) {
return;
}
mPosition = getPosition(x);
switch (mType) {
case MODE:
if (mPosition == 0) {
mPosition = 1;
}
break;
case WIND:
if (mPosition == 0) {
mPosition = 1;
} else if (mPosition == 4) {
mPosition = 3;
}
break;

case TIME:
break;
}
mThumbX = getThumbX(mPosition);
invalidate();
}

/**
* 根据thumb的坐标获取thumb的位置
*
* @param x
* @return
*/
private int getPosition(float x) {
float unitWidth = mAvailableWidth / mUnits;
float originX = (x - mLeftX + unitWidth / 2f) / unitWidth;
return (int) originX;
}

/**
* 根据thumb的位置获取thumb的坐标
*
* @param position
* @return
*/
private float getThumbX(int position) {
float unit = mAvailableWidth / mUnits;
return mLeftX + unit * position;
}

6.保存与恢复自定义view的状态信息:

@Override
protected void onRestoreInstanceState(Parcelable state) {
if (!(state instanceof Bundle)) {
super.onRestoreInstanceState(state);
return;
}
Bundle bundle = (Bundle) state;
mLightBitmap = bundle.getParcelable("bitmap");
mText = bundle.getString("indicators");
mPosition = bundle.getInt("position");
mThumbX = bundle.getFloat("thumbX");
mType = bundle.getInt("mType");
mTrackHeight = bundle.getInt("trackHeight");
super.onRestoreInstanceState(bundle.getParcelable("instance"));
}

//##### 对外公布的方法###########################//

@Override
protected Parcelable onSaveInstanceState() {

Bundle bundle = new Bundle();
bundle.putParcelable("bitmap", mLightBitmap);
bundle.putInt("position", mPosition);
bundle.putString("indicators", mText);
bundle.putFloat("thumbX", mThumbX);
bundle.putInt("mType", mType);
bundle.putInt("trackHeight", mTrackHeight);
bundle.putParcelable("instance", super.onSaveInstanceState());
return bundle;
}

完整代码:

package ****

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.os.Bundle;
import android.os.Parcelable;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;

import com.bugull.yft_airclean.R;

/**
* @ author: showdy
* @ time: 2016/5/21 14:20
* @ des: 用于控件界面的indicatorView
*/
public class IndicatorView extends View {

private static final int MODE = 0;
private static final int WIND = 1;
private static final int TIME = 2;
private OnPositionChangedListener mListener;
private int mUnits;
private int mLightColor;
private Bitmap mLightBitmap;
private String mText;
private Paint mPaint;
private Paint mTextPaint; //文字画笔
private int mDefaultWidth;
private int mDefaultHeight;
private int mLeftX;
private int mAvailableWidth;
private float mThumbX; //thumb的起始横坐标
private int mPosition = 0; //当前位置
private String[] mIndicators;
private Rect mTextRect;
private int mTrackHeight = 0;
private int mType = TIME;
private Context mContext;

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);
mContext = context;
mTrackHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 4,
context.getResources().getDisplayMetrics());
mDefaultWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 260,
context.getResources().getDisplayMetrics());
mDefaultHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 70,
context.getResources().getDisplayMetrics());
parserAttrs(context, attrs);
initPaint();
}

private void initPaint() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mPaint.setColor(Color.argb(0xFF, 0xBB, 0xBB, 0xBB));
mPaint.setStyle(Paint.Style.FILL);

mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mTextPaint.setColor(Color.argb(0xFF, 0xBB, 0xBB, 0xBB));
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 14,
getResources().getDisplayMetrics()));

mTextRect = new Rect();

}

private void parserAttrs(Context context, AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IndicatorView);
mLightColor = ta.getColor(R.styleable.IndicatorView_lightColor, Color.argb(0xFF, 0xFF, 0xC1, 0x00));
int resourceId = ta.getResourceId(R.styleable.IndicatorView_lightBitmap, 0);
mLightBitmap = BitmapFactory.decodeResource(context.getResources(), resourceId);
mText = ta.getString(R.styleable.IndicatorView_indicators);
mIndicators = mText.split(",");
mUnits = mText.split(",").length - 1;

int mode = ta.getInt(R.styleable.IndicatorView_controlStyle, TIME);
switch (mode) {
case MODE:
mType = MODE;
break;
case WIND:
mType = WIND;
break;
case TIME:
mType = TIME;
break;
}

ta.recycle();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width;
int height;

final int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
final int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
final int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
final int measureHeight = MeasureSpec.getSize(heightMeasureSpec);

if (measureWidthMode == MeasureSpec.EXACTLY) {
width = measureWidth;
} else {
width = mDefaultWidth;
}
if (measureHeightMode == MeasureSpec.EXACTLY) {
height = measureHeight;
} else {
height = mDefaultHeight;
}
setMeasuredDimension(width, height);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mLeftX = getPaddingLeft();
mAvailableWidth = w - getPaddingLeft() - getPaddingRight();
float unit = mAvailableWidth / mUnits;
mThumbX = mLeftX + unit * mPosition;//粘近position

}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE: {
this.getParent().requestDisallowInterceptTouchEvent(true);
float x = event.getX();
moveThumb(x);
break;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL: {
if (mListener != null) {
mListener.onPositionChange(mPosition);
}
float x = event.getX();
moveThumb(x);
this.getParent().requestDisallowInterceptTouchEvent(false);
break;
}
}
return true;
}

private void moveThumb(float x) {
if (mPosition == getPosition(x)) {
return;
}
mPosition = getPosition(x);
switch (mType) {
case MODE:
if (mPosition == 0) {
mPosition = 1;
}
break;
case WIND:
if (mPosition == 0) {
mPosition = 1;
} else if (mPosition == 4) {
mPosition = 3;
}
break;

case TIME:
break;
}
mThumbX = getThumbX(mPosition);
invalidate();
}

/**
* 根据thumb的坐标获取thumb的位置
*
* @param x
* @return
*/
private int getPosition(float x) {
float unitWidth = mAvailableWidth / mUnits;
float originX = (x - mLeftX + unitWidth / 2f) / unitWidth;
return (int) originX;
}

/**
* 根据thumb的位置获取thumb的坐标
*
* @param position
* @return
*/
private float getThumbX(int position) {
float unit = mAvailableWidth / mUnits;
return mLeftX + unit * position;
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawTrack(canvas);
drawIndicatorTexts(canvas);
drawThumb(canvas);
}

/**
* 绘制thumb所在的track
*
* @param canvas
*/
private void drawTrack(Canvas canvas) {
Rect rect = new Rect(mLeftX, getHeight() * 2 / 3 - mTrackHeight / 2,
mLeftX + mAvailableWidth, getHeight() * 2 / 3 + mTrackHeight / 2);
mPaint.setColor(Color.parseColor("#ededed"));
canvas.drawRect(rect, mPaint);
}

/**
* 绘制indicators
*
* @param canvas
*/
private void drawIndicatorTexts(Canvas canvas) {
int count = mUnits;
Paint paint;
for (int i = 0; i <= count; i++) {
final float x = mAvailableWidth / count * i + mLeftX;

if (i == mPosition) {//当前选中的position
paint = mTextPaint;
mTextPaint.setColor(mLightColor);
} else {//没选中的position
paint = mTextPaint;
mTextPaint.setColor(Color.argb(0xFF, 0xBB, 0xBB, 0xBB));
}
paint.getTextBounds(mIndicators[i], 0, mIndicators[i].length(), mTextRect);
String text = mIndicators[i];
canvas.drawText(text, x - mTextRect.width() / 2, getHeight() / 3, paint);
}
}

/**
* 绘制thumb
*
* @param canvas
*/
private void drawThumb(Canvas canvas) {
Bitmap bitmap = mLightBitmap;
mThumbX = getThumbX(mPosition);
if (bitmap != null) {
canvas.drawBitmap(bitmap, mThumbX - bitmap.getWidth() / 2, getHeight() * 2 / 3 - bitmap.getHeight() / 2, null);
}
}

@Override
protected void onRestoreInstanceState(Parcelable state) {
if (!(state instanceof Bundle)) {
super.onRestoreInstanceState(state);
return;
}
Bundle bundle = (Bundle) state;
mLightBitmap = bundle.getParcelable("bitmap");
mText = bundle.getString("indicators");
mPosition = bundle.getInt("position");
mThumbX = bundle.getFloat("thumbX");
mType = bundle.getInt("mType");
mTrackHeight = bundle.getInt("trackHeight");
super.onRestoreInstanceState(bundle.getParcelable("instance"));
}

//##### 对外公布的方法###########################//

@Override
protected Parcelable onSaveInstanceState() {

Bundle bundle = new Bundle();
bundle.putParcelable("bitmap", mLightBitmap);
bundle.putInt("position", mPosition);
bundle.putString("indicators", mText);
bundle.putFloat("thumbX", mThumbX);
bundle.putInt("mType", mType);
bundle.putInt("trackHeight", mTrackHeight);
bundle.putParcelable("instance", super.onSaveInstanceState());
return bundle;
}

public void setPosition(int position) {
mPosition = position;
invalidate();
}

public void setLightColor(Context context, int resId, int color) {
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resId);
mLightBitmap = bitmap;
mLightColor = color;
invalidate();
}

public void setOnPositionChangedListener(OnPositionChangedListener listener) {
mListener = listener;
}

@Override
public void setEnabled(boolean enabled) {
if (!enabled) {
setPosition(0);
setLightColor(mContext, R.mipmap.fsk_thumb_black, Color.parseColor("#bbbbbb"));
}
super.setEnabled(enabled);
}

public interface OnPositionChangedListener {
void onPositionChange(int position);
}
}