Android UI设计之<十二>自定义View，实现绚丽的字体大小控制控件FontSliderBar

        转载请注明出处：http://blog.csdn.net/llew2011/article/details/51668407

        了解iOS的同学应该知道在iOS中有个UISliderBar控件，在iPhone手机中的设置文字大小中使用了该控件。近来产品提的需求中有一个是更改APP中部分字体大小，虽然技术难度不大但工作量还是有的，思路是利用LayoutInflater.Factory实现的(如果你对LayoutInflater.Factory不熟悉可以阅读之前写的Android
源码系列之<四>从源码的角度深入理解LayoutInflater.Factory之主题切换系类文章)。UI是参考iOS的UISliderBar设计的，而Android系统并没有提供直接符合要求的控件，于是动手写了个类似UISliderBar的控件，我给它起名为FontSliderBar，运行效果如下所示：


        


        好了，开始讲解如果实现该效果吧，开始实现该功能之前我们先分析一下iOS的UISliderBar的运行效果，根据iOS的截图图左一可以知道该控件有刻度条

，在刻度条的上方还有一个可拖动的圆球

，因此FontSliderBar可以做一下拆分，把画表刻度尺的功能单独提取出来用Bar来表示，拖动的圆球用Thumb来表示，拆分图如下所示：


        根据拆分图我们来分析一下Thumb和Bar应该具有什么属性和功能吧。

Thumb功能分析

        Thumb的职责就是负责在屏幕上进行绘制操作，既然进行绘制操作，肯定需要画布Canvas实例，获取Canvas实例可以通过方法传递进来；其次绘制的时候绘制在哪，所以Thumb需要属性坐标XY(其中Thumb的X坐标是可更改的而Y坐标是不可更改的)；再次Thumb在绘制圆的时候绘制多大，当手指摁下绘制成什么颜色手指抬起后又要绘制成什么颜色，所以Thumb需要有半径属性radius和表示手指摁下和抬起的颜色属性normalColor和pressedColor。好了，经过分析，我们的Thumb对象算是可以构建出来了，代码如下：

public class Thumb {

private static final float MINIMUM_TARGET_RADIUS = 50;

private final float mTouchZone;
private boolean mIsPressed;

private final float mY;
private float mX;

private Paint mPaintNormal;
private Paint mPaintPressed;

private float mRadius;
private int mColorNormal;
private int mColorPressed;

public Thumb(float x, float y, int colorNormal, int colorPressed, float radius) {

mRadius = radius;
mColorNormal = colorNormal;
mColorPressed = colorPressed;

mPaintNormal = new Paint();
mPaintNormal.setColor(mColorNormal);
mPaintNormal.setAntiAlias(true);

mPaintPressed = new Paint();
mPaintPressed.setColor(mColorPressed);
mPaintPressed.setAntiAlias(true);

mTouchZone = (int) Math.max(MINIMUM_TARGET_RADIUS, radius);

mX = x;
mY = y;
}

public void setX(float x) {
mX = x;
}

public float getX() {
return mX;
}

public boolean isPressed() {
return mIsPressed;
}

public void press() {
mIsPressed = true;
}

public void release() {
mIsPressed = false;
}

public boolean isInTargetZone(float x, float y) {
if (Math.abs(x - mX) <= mTouchZone && Math.abs(y - mY) <= mTouchZone) {
return true;
}
return false;
}

public void draw(Canvas canvas) {
if (mIsPressed) {
canvas.drawCircle(mX, mY, mRadius, mPaintPressed);
} else {
canvas.drawCircle(mX, mY, mRadius, mPaintNormal);
}
}

public void destroyResources() {
if(null != mPaintNormal) {
mPaintNormal = null;
}
if(null != mPaintPressed) {
mPaintPressed = null;
}
}
}

 
      Thumb的代码很简单，需要说明的是在Thumb中新加了一个mTouchDelegate属性，该属性模拟了Android系统中的TouchDelegate特性(有不熟悉View中的TouchDelegate原理的请自行查阅源码，这个不在做详述了)，使用场景就是当圆的半径太小的时候可能手指点击不住，这样会影响用户体验，所以就设置了mTouchDelete属性，它表示手指触摸的最小范围。
Bar功能分析

        Bar的功能是绘制刻度尺，竟然是绘制刻度尺首先和Thumb一样需要有XY坐标和Canvas实例；其次该刻度尺有多长，有多少个刻度，刻度的高度是多少，刻度尺的颜色是什么样的；再次刻度尺上边还有一个文字，文字的大小，文字的颜色等都需要知道，通过这样的分析，我们就可以抽象出Bar对象了，代码如下：

public class Bar {

private Paint mBarPaint;
private Paint mTextPaint;

private final float mLeftX;
private final float mRightX;
private final float mY;
private final float mPadding;

private int mSegments;
private float mTickDistance;
private final float mTickHeight;
private final float mTickStartY;
private final float mTickEndY;

public Bar(float x, float y, float width, int tickCount, float tickHeight,
float barWidth, int barColor,int textColor, int textSize, int padding) {

mLeftX = x;
mRightX = x + width;
mY = y;
mPadding = padding;

mSegments = tickCount - 1;
mTickDistance = width / mSegments;
mTickHeight = tickHeight;
mTickStartY = mY - mTickHeight / 2f;
mTickEndY = mY + mTickHeight / 2f;

mBarPaint = new Paint();
mBarPaint.setColor(barColor);
mBarPaint.setStrokeWidth(barWidth);
mBarPaint.setAntiAlias(true);

mTextPaint = new Paint();
mTextPaint.setColor(textColor);
mTextPaint.setTextSize(textSize);
mTextPaint.setAntiAlias(true);
}

public void draw(Canvas canvas) {
drawLine(canvas);
drawTicks(canvas);
}

public float getLeftX() {
return mLeftX;
}

public float getRightX() {
return mRightX;
}

public float getNearestTickCoordinate(Thumb thumb) {
final int nearestTickIndex = getNearestTickIndex(thumb);
final float nearestTickCoordinate = mLeftX + (nearestTickIndex * mTickDistance);
return nearestTickCoordinate;
}

public int getNearestTickIndex(Thumb thumb) {
return getNearestTickIndex(thumb.getX());
}

public int getNearestTickIndex(float x) {
return (int) ((x - mLeftX + mTickDistance / 2f) / mTickDistance);
}

private void drawLine(Canvas canvas) {
canvas.drawLine(mLeftX, mY, mRightX, mY, mBarPaint);
}

private void drawTicks(Canvas canvas) {
for (int i = 0; i <= mSegments; i++) {
final float x = i * mTickDistance + mLeftX;
canvas.drawLine(x, mTickStartY, x, mTickEndY, mBarPaint);
String text = 0 == i ? "小" : mSegments == i ? "大" : "";
if(!TextUtils.isEmpty(text)) {
canvas.drawText(text, x - getTextWidth(text) / 2, mTickStartY - mPadding, mTextPaint);
}
}
}

float getTextWidth(String text) {
return mTextPaint.measureText(text);
}

public void destroyResources() {
if(null != mBarPaint) {
mBarPaint = null;
}
if(null != mTextPaint) {
mTextPaint = null;
}
}
}

        Bar的方法也不是太复杂，相信童靴们也都看的懂，其中方法getNearestTickCoordinate()方法表示的是找到距离thumb最近刻度的X坐标，getNearestTickIndex()表示的是找到距离thumb最近的刻度的下标。

        分析过Bar和Thumb后，开始实现我们的FontSliderBar，首先FontSliderBar继承View并实现构造方法，其次要重写View的onMeasure()方法来确定FontSliderBar的尺寸大小，需要注意的是如果在使用FontSliderBar的时候设置其宽和高都为warp_content的话就会出问题，所以要对宽和高做最小值限定，宽的最小值比较好理解，高的确定如下图所示：


        根据上图我们可以很清楚的计算出FontSliderBar的最小高度，宽度可以直接给定一个最小值，接下来就是定义我们的FontSliderBar了，全部代码如下所示：

public class FontSliderBar extends View {

private static final String TAG = "SliderBar";

private static final int DEFAULT_TICK_COUNT = 3;
private static final float DEFAULT_TICK_HEIGHT = 24;

private static final float DEFAULT_BAR_WIDTH = 3;
private static final int DEFAULT_BAR_COLOR = Color.LTGRAY;

private static final int DEFAULT_TEXT_SIZE = 16;
private static final int DEFAULT_TEXT_COLOR = Color.LTGRAY;
private static final int DEFAULT_TEXT_PADDING = 20;

private static final float DEFAULT_THUMB_RADIUS = 20;
private static final int DEFAULT_THUMB_COLOR_NORMAL = 0xff33b5e5;
private static final int DEFAULT_THUMB_COLOR_PRESSED = 0xff33b5e5;

private int mTickCount = DEFAULT_TICK_COUNT;
private float mTickHeight = DEFAULT_TICK_HEIGHT;

private float mBarWidth = DEFAULT_BAR_WIDTH;
private int mBarColor = DEFAULT_BAR_COLOR;

private float mThumbRadius = DEFAULT_THUMB_RADIUS;
private int mThumbColorNormal = DEFAULT_THUMB_COLOR_NORMAL;
private int mThumbColorPressed = DEFAULT_THUMB_COLOR_PRESSED;

private int mTextSize = DEFAULT_TEXT_SIZE;
private int mTextColor = DEFAULT_TEXT_COLOR;
private int mTextPadding = DEFAULT_TEXT_PADDING;

private int mDefaultWidth = 500;

private int mCurrentIndex = 0;
private boolean mAnimation = true;

private Thumb mThumb;
private Bar mBar;

private ValueAnimator mAnimator;
private FontSliderBar.OnSliderBarChangeListener mListener;

public FontSliderBar(Context context) {
super(context);
}

public FontSliderBar(Context context, AttributeSet attrs) {
super(context, attrs);
}

public FontSliderBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, 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.AT_MOST) {
width = measureWidth;
} else if (measureWidthMode == MeasureSpec.EXACTLY) {
width = measureWidth;
} else {
width = mDefaultWidth;
}

if (measureHeightMode == MeasureSpec.AT_MOST) {
height = Math.min(getMinHeight(), measureHeight);
} else if (measureHeightMode == MeasureSpec.EXACTLY) {
height = measureHeight;
} else {
height = getMinHeight();
}
setMeasuredDimension(width, height);
}

private int getMinHeight() {
final float f = getFontHeight();
return (int) (f + mTextPadding + mThumbRadius * 2);
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
createBar();
createThumbs();
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mBar.draw(canvas);
mThumb.draw(canvas);
}

@Override
protected void onVisibilityChanged(View changedView, int visibility) {
super.onVisibilityChanged(changedView, visibility);
if (VISIBLE != visibility) {
stopAnimation();
}
}

@Override
protected void onDetachedFromWindow() {
destroyResources();
super.onDetachedFromWindow();
}

@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isEnabled() || isAnimationRunning()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
return onActionDown(event.getX(), event.getY());
case MotionEvent.ACTION_MOVE:
this.getParent().requestDisallowInterceptTouchEvent(true);
return onActionMove(event.getX());
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
this.getParent().requestDisallowInterceptTouchEvent(false);
return onActionUp(event.getX(), event.getY());
default:
return true;
}
}

public FontSliderBar setOnSliderBarChangeListener(FontSliderBar.OnSliderBarChangeListener listener) {
mListener = listener;
return FontSliderBar.this;
}

public FontSliderBar setTickCount(int tickCount) {
if (isValidTickCount(tickCount)) {
mTickCount = tickCount;
} else {
Log.e(TAG, "tickCount less than 2; invalid tickCount.");
throw new IllegalArgumentException("tickCount less than 2; invalid tickCount.");
}
return FontSliderBar.this;
}

public FontSliderBar setTickHeight(float tickHeight) {
mTickHeight = tickHeight;
return FontSliderBar.this;
}

public FontSliderBar setBarWeight(float barWeight) {
mBarWidth = barWeight;
return FontSliderBar.this;
}

public FontSliderBar setBarColor(int barColor) {
mBarColor = barColor;
return FontSliderBar.this;
}

public FontSliderBar setTextSize(int textSize) {
mTextSize = textSize;
return FontSliderBar.this;
}

public FontSliderBar setTextColor(int textColor) {
mTextColor = textColor;
return FontSliderBar.this;
}

public FontSliderBar setTextPadding(int textPadding) {
mTextPadding = textPadding;
return FontSliderBar.this;
}

public FontSliderBar setThumbRadius(float thumbRadius) {
mThumbRadius = thumbRadius;
return FontSliderBar.this;
}

public FontSliderBar setThumbColorNormal(int thumbColorNormal) {
mThumbColorNormal = thumbColorNormal;
return FontSliderBar.this;
}

public FontSliderBar setThumbColorPressed(int thumbColorPressed) {
mThumbColorPressed = thumbColorPressed;
return FontSliderBar.this;
}

public FontSliderBar setThumbIndex(int currentIndex) {
if (indexOutOfRange(currentIndex)) {
throw new IllegalArgumentException(
"A thumb index is out of bounds. Check that it is between 0 and mTickCount - 1");
} else {
if (mCurrentIndex != currentIndex) {
mCurrentIndex = currentIndex;
}
}
return FontSliderBar.this;
}

public FontSliderBar withAnimation(boolean animation) {
mAnimation = animation;
return FontSliderBar.this;
}

public void applay() {
createThumbs();
createBar();
requestLayout();
invalidate();
}

public int getCurrentIndex() {
return mCurrentIndex;
}

private void createBar() {
mBar = new Bar(getXCoordinate(), getYCoordinate(), getBarLength(), mTickCount, mTickHeight, mBarWidth,
mBarColor, mTextColor, mTextSize, mTextPadding);
}

private void createThumbs() {
float xCoordinate = getBarLength() / (mTickCount - 1) * mCurrentIndex + getXCoordinate();
mThumb = new Thumb(xCoordinate, getYCoordinate(), mThumbColorNormal, mThumbColorPressed, mThumbRadius);
}

private float getXCoordinate() {
return mThumbRadius;
}

private float getYCoordinate() {
return getHeight() - mThumbRadius;
}

private float getFontHeight() {
Paint paint = new Paint();
paint.setTextSize(mTextSize);
paint.measureText("大");
FontMetrics fontMetrics = paint.getFontMetrics();
float f = fontMetrics.descent - fontMetrics.ascent;
return f;
}

private float getBarLength() {
return getWidth() - 2 * getXCoordinate();
}

private boolean indexOutOfRange(int thumbIndex) {
return (thumbIndex < 0 || thumbIndex >= mTickCount);
}

private boolean isValidTickCount(int tickCount) {
return tickCount > 1;
}

private boolean onActionDown(float x, float y) {
if (!mThumb.isPressed() && mThumb.isInTargetZone(x, y)) {
pressThumb(mThumb);
}
return true;
}

private boolean onActionMove(float x) {
if (mThumb.isPressed()) {
moveThumb(mThumb, x);
}
return true;
}

private boolean onActionUp(float x, float y) {
if (mThumb.isPressed()) {
releaseThumb(mThumb);
}
return true;
}

private void pressThumb(Thumb thumb) {
thumb.press();
invalidate();
}

private void releaseThumb(final Thumb thumb) {
final int tempIndex = mBar.getNearestTickIndex(thumb);
if (tempIndex != mCurrentIndex) {
mCurrentIndex = tempIndex;
if (null != mListener) {
mListener.onIndexChanged(this, mCurrentIndex);
}
}

float start = thumb.getX();
float end = mBar.getNearestTickCoordinate(thumb);
if (mAnimation) {
startAnimation(thumb, start, end);
} else {
thumb.setX(end);
invalidate();
}
thumb.release();
}

private void startAnimation(final Thumb thumb, float start, float end) {
stopAnimation();
mAnimator = ValueAnimator.ofFloat(start, end);
mAnimator.setDuration(80);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
final float x = (Float) animation.getAnimatedValue();
thumb.setX(x);
invalidate();
}
});
mAnimator.start();
}

private boolean isAnimationRunning() {
if (null != mAnimator && mAnimator.isRunning()) {
return true;
}
return false;
}

private void destroyResources() {
stopAnimation();
if (null != mBar) {
mBar.destroyResources();
mBar = null;
}
if (null != mThumb) {
mThumb.destroyResources();
mThumb = null;
}
}

private void stopAnimation() {
if (null != mAnimator) {
mAnimator.cancel();
mAnimator = null;
}
}

private void moveThumb(Thumb thumb, float x) {
if (x < mBar.getLeftX() || x > mBar.getRightX()) {
// Do nothing.
} else {
thumb.setX(x);
invalidate();
}
}

public static interface OnSliderBarChangeListener {
public void onIndexChanged(FontSliderBar rangeBar, int index);
}

private static class Thumb {

private static final float MINIMUM_TARGET_RADIUS = 50;

private final float mTouchZone;
private boolean mIsPressed;

private final float mY;
private float mX;

private Paint mPaintNormal;
private Paint mPaintPressed;

private float mRadius;
private int mColorNormal;
private int mColorPressed;

public Thumb(float x, float y, int colorNormal, int colorPressed, float radius) {

mRadius = radius;
mColorNormal = colorNormal;
mColorPressed = colorPressed;

mPaintNormal = new Paint();
mPaintNormal.setColor(mColorNormal);
mPaintNormal.setAntiAlias(true);

mPaintPressed = new Paint();
mPaintPressed.setColor(mColorPressed);
mPaintPressed.setAntiAlias(true);

mTouchZone = (int) Math.max(MINIMUM_TARGET_RADIUS, radius);

mX = x;
mY = y;
}

public void setX(float x) {
mX = x;
}

public float getX() {
return mX;
}

public boolean isPressed() {
return mIsPressed;
}

public void press() {
mIsPressed = true;
}

public void release() {
mIsPressed = false;
}

public boolean isInTargetZone(float x, float y) {
if (Math.abs(x - mX) <= mTouchZone && Math.abs(y - mY) <= mTouchZone) {
return true;
}
return false;
}

public void draw(Canvas canvas) {
if (mIsPressed) {
canvas.drawCircle(mX, mY, mRadius, mPaintPressed);
} else {
canvas.drawCircle(mX, mY, mRadius, mPaintNormal);
}
}

public void destroyResources() {
if (null != mPaintNormal) {
mPaintNormal = null;
}
if (null != mPaintPressed) {
mPaintPressed = null;
}
}
}

private static class Bar {

private Paint mBarPaint;
private Paint mTextPaint;

private final float mLeftX;
private final float mRightX;
private final float mY;
private final float mPadding;

private int mSegments;
private float mTickDistance;
private final float mTickHeight;
private final float mTickStartY;
private final float mTickEndY;

public Bar(float x, float y, float width, int tickCount, float tickHeight,
float barWidth, int barColor, int textColor, int textSize, int padding) {

mLeftX = x;
mRightX = x + width;
mY = y;
mPadding = padding;

mSegments = tickCount - 1;
mTickDistance = width / mSegments;
mTickHeight = tickHeight;
mTickStartY = mY - mTickHeight / 2f;
mTickEndY = mY + mTickHeight / 2f;

mBarPaint = new Paint();
mBarPaint.setColor(barColor);
mBarPaint.setStrokeWidth(barWidth);
mBarPaint.setAntiAlias(true);

mTextPaint = new Paint();
mTextPaint.setColor(textColor);
mTextPaint.setTextSize(textSize);
mTextPaint.setAntiAlias(true);
}

public void draw(Canvas canvas) {
drawLine(canvas);
drawTicks(canvas);
}

public float getLeftX() {
return mLeftX;
}

public float getRightX() {
return mRightX;
}

public float getNearestTickCoordinate(Thumb thumb) {
final int nearestTickIndex = getNearestTickIndex(thumb);
final float nearestTickCoordinate = mLeftX + (nearestTickIndex * mTickDistance);
return nearestTickCoordinate;
}

public int getNearestTickIndex(Thumb thumb) {
return getNearestTickIndex(thumb.getX());
}

public int getNearestTickIndex(float x) {
return (int) ((x - mLeftX + mTickDistance / 2f) / mTickDistance);
}

private void drawLine(Canvas canvas) {
canvas.drawLine(mLeftX, mY, mRightX, mY, mBarPaint);
}

private void drawTicks(Canvas canvas) {
for (int i = 0; i <= mSegments; i++) {
final float x = i * mTickDistance + mLeftX;
canvas.drawLine(x, mTickStartY, x, mTickEndY, mBarPaint);
String text = 0 == i ? "小" : mSegments == i ? "大" : "";
if (!TextUtils.isEmpty(text)) {
canvas.drawText(text, x - getTextWidth(text) / 2, mTickStartY - mPadding, mTextPaint);
}
}
}

float getTextWidth(String text) {
return mTextPaint.measureText(text);
}

public void destroyResources() {
if (null != mBarPaint) {
mBarPaint = null;
}
if (null != mTextPaint) {
mTextPaint = null;
}
}
}
}
        FontSliderBar中定义了默认值和对外踢动了一系列修改属性的方法，FontSliderBar中分别重写了onMeasure()、onSizeChanged()、onDraw()、onTouchEvent()等方法。onMeasure()方法确定FontSliderBar的尺寸，onSizeChanged()方法创建Bar和Thumb对象，onTouchEvent()方法根据手指的点击来判断是否可以进行thumb的拖动。在最后定义了OnSliderBarChangeListener接口，方便在Thumb下标改变的时候做回调操作。FontSliderBar的使用也很简单，设置属性的时候可以直接链式调用，如下所示：

FontSliderBar sliderBar = (FontSliderBar) findViewById(R.id.sliderbar);
sliderBar.setTickCount(6).setTickHeight(30).setBarColor(Color.MAGENTA)
.setTextColor(Color.CYAN).setTextPadding(20).setTextSize(20)
.setThumbRadius(20).setThumbColorNormal(Color.CYAN).setThumbColorPressed(Color.GREEN)
.withAnimation(false).applay();

 
      现在看一下运行效果吧，截图如下所示：



        好了，有关FontSliderBar的讲解告一段落了，感谢收看(*^__^*) ……

       源码详见：https://github.com/llew2011/FontSliderBar