android 打造不同的Seekbar详解手机开发

最近项目需要用到双向的seekbar，网上找了好多野不能达到要求，偶然一次机会看到了大众点评的例子，然后我最他做了优化，并对常用的seekbar做了总结.

向上两张图：

比如双向seekbar

public class SimpleRangeSeekBar extends View { 
private int lineWidth = 5; 
private int textSize = 25; 
private int inRangeColor = 0xff26b5f5; 
private int outRangeColor = 0xffC2C2C2; 
private int textColor = 0xff0000ff; 
private int textMarginBottom = 10; 
private int lowerCenterX; 
private int upperCenterX; 
private int bmpWidth; 
private int bmpHeight; 
private Bitmap lowerBmp; 
private Bitmap upperBmp; 
private boolean isLowerMoving = false; 
private boolean isUpperMoving = false; 
private OnRangeChangedListener onRangeChangedListener; 
private int paddingLeft = 50; 
private int paddingRight = 50; 
private int paddingTop = 10; 
private int paddingBottom = 10; 
private int lineHeight=20; 
private int lineLength = Utils.getScreenWidth(getContext())-paddingLeft-paddingRight-50; 
private int lineStart = paddingLeft; 
private int lineEnd = lineLength + paddingLeft; 
private int smallRange = 0; 
private int maxRange = 100; 
private int textHeight; 
public SimpleRangeSeekBar(Context context, AttributeSet attrs) { 
this(context, attrs,-1); 
} 
public SimpleRangeSeekBar(Context context, AttributeSet attrs, int defStyle) { 
super(context, attrs, defStyle); 
init(context, attrs, defStyle); 
} 
private void init(Context context, AttributeSet attrs, int defStyle) { 
initAttr(context, attrs, defStyle); 
initView(); 
} 
private void initView() { 
lowerBmp = BitmapFactory.decodeResource(getResources(), 
R.drawable.seekbar_n); 
upperBmp = BitmapFactory.decodeResource(getResources(), 
R.drawable.seekbar_n); 
bmpWidth = upperBmp.getWidth(); 
bmpHeight = upperBmp.getHeight(); 
lowerCenterX = lineStart; 
upperCenterX = lineEnd; 
lineHeight = getHeight() - paddingBottom - lowerBmp.getHeight() / 2; 
textHeight = lineHeight + lowerBmp.getHeight() / 2 + 10; 
} 
private void initAttr(Context context, AttributeSet attrs, int defStyle) { 
TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.RangeSeekBar, defStyle, 0); 
//        lineWidth = typedArray.getDimensionPixelSize(R.styleable.RangeSeekBar_layout_width, UIUtils.getScreenWidth(getContext())-paddingLeft-paddingRight-50); 
//        lineHeight=typedArray.getDimensionPixelSize(R.styleable.RangeSeekBar_layout_height,15); 
paddingLeft = typedArray.getDimensionPixelSize(R.styleable.RangeSeekBar_paddingLeft, 50); 
paddingRight= typedArray.getDimensionPixelSize(R.styleable.RangeSeekBar_paddingRight, 50); 
paddingTop= typedArray.getDimensionPixelSize(R.styleable.RangeSeekBar_paddingTop, 30); 
paddingBottom= typedArray.getDimensionPixelSize(R.styleable.RangeSeekBar_paddingBottom, 20); 
smallRange = typedArray.getInt(R.styleable.RangeSeekBar_line_small_range,0); 
maxRange = typedArray.getInt(R.styleable.RangeSeekBar_line_max_range,100); 
typedArray.recycle(); 
} 
private int measureWidth(int measureSpec) { 
int result = 0; 
int specMode = MeasureSpec.getMode(measureSpec); 
int specSize = MeasureSpec.getSize(measureSpec); 
if (specMode == MeasureSpec.EXACTLY) { 
result = specSize; 
} else { 
result = paddingLeft + paddingRight + bmpWidth * 2; 
if (specMode == MeasureSpec.AT_MOST) { 
result = Math.min(result, specSize); 
} 
} 
return result; 
} 
private int measureHeight(int measureHeight) { 
int result = 0; 
int specMode = MeasureSpec.getMode(measureHeight); 
int specSize = MeasureSpec.getSize(measureHeight); 
if (specMode == MeasureSpec.EXACTLY) { 
result = bmpHeight * 2; 
} else { 
result = bmpHeight + paddingTop; 
if (specMode == MeasureSpec.AT_MOST) { 
result = Math.min(result, specSize); 
} 
} 
return result; 
} 
@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
widthMeasureSpec = measureWidth(widthMeasureSpec); 
heightMeasureSpec = measureHeight(heightMeasureSpec); 
setMeasuredDimension(widthMeasureSpec, heightMeasureSpec); 
} 
@Override 
protected void onDraw(Canvas canvas) { 
super.onDraw(canvas); 
bmpWidth = upperBmp.getWidth(); 
bmpHeight = upperBmp.getHeight(); 
lineHeight = getHeight() - paddingBottom - lowerBmp.getHeight() / 2; 
textHeight = lineHeight - bmpHeight / 2 - textMarginBottom; 
// 画线 
Paint linePaint = new Paint(); 
linePaint.setAntiAlias(true); 
linePaint.setStrokeWidth(lineWidth); 
// 绘制处于图片滑块之间线段 
linePaint.setColor(inRangeColor); 
canvas.drawLine(lowerCenterX, lineHeight, upperCenterX, lineHeight, 
linePaint); 
// 绘制处于图片滑块两端的线段 
linePaint.setColor(outRangeColor); 
canvas.drawLine(lineStart, lineHeight, lowerCenterX, lineHeight, 
linePaint); 
canvas.drawLine(upperCenterX, lineHeight, lineEnd, lineHeight, 
linePaint); 
// 画图片滑块 
Paint bmpPaint = new Paint(); 
canvas.drawBitmap(lowerBmp, lowerCenterX - bmpWidth / 2, lineHeight 
- bmpHeight / 2, bmpPaint); 
canvas.drawBitmap(lowerBmp, upperCenterX - bmpWidth / 2, lineHeight 
- bmpHeight / 2, bmpPaint); 
// 画范围文字 
drawText(canvas); 
} 
private void drawText(Canvas canvas) { 
Paint textPaint = new Paint(); 
textPaint.setColor(textColor); 
textPaint.setTextSize(textSize); 
textPaint.setAntiAlias(true); 
textPaint.setStrokeWidth(lineWidth); 
canvas.drawText(String.valueOf(smallRange), lowerCenterX 
- bmpWidth / 2, textHeight, textPaint); 
canvas.drawText(String.valueOf(maxRange), upperCenterX 
- bmpWidth / 2, textHeight, textPaint); 
} 
@Override 
public boolean onTouchEvent(MotionEvent event) { 
super.onTouchEvent(event); 
float xPos = event.getX(); 
switch (event.getAction()) { 
case MotionEvent.ACTION_DOWN: 
// 如果按下的位置在垂直方向没有与图片接触，则不会滑动滑块 
float yPos = event.getY(); 
if (Math.abs(yPos - lineHeight) > bmpHeight / 2) { 
return false; 
} 
// 表示当前按下的滑块是左边的滑块 
if (Math.abs(xPos - lowerCenterX) < bmpWidth / 2) { 
isLowerMoving = true; 
} 
// //表示当前按下的滑块是右边的滑块 
if (Math.abs(xPos - upperCenterX) < bmpWidth / 2) { 
isUpperMoving = true; 
} 
// 单击左边滑块的左边线条时，左边滑块滑动到对应的位置 
if (xPos >= lineStart && xPos <= lowerCenterX - bmpWidth / 2) { 
lowerCenterX = (int) xPos; 
updateRange(); 
postInvalidate(); 
} 
// 单击右边滑块的右边线条时， 右边滑块滑动到对应的位置 
if (xPos <= lineEnd && xPos >= upperCenterX + bmpWidth / 2) { 
upperCenterX = (int) xPos; 
updateRange(); 
postInvalidate(); 
} 
break; 
case MotionEvent.ACTION_MOVE: 
if (isLowerMoving) { 
if (xPos >= lineStart && xPos < upperCenterX - bmpWidth) { 
lowerCenterX = (int) xPos; 
updateRange(); 
postInvalidate(); 
} 
} 
if (isUpperMoving) { 
if (xPos > lowerCenterX + bmpWidth && xPos < lineEnd) { 
upperCenterX = (int) xPos; 
updateRange(); 
postInvalidate(); 
} 
} 
break; 
case MotionEvent.ACTION_UP: 
isLowerMoving = false; 
isUpperMoving = false; 
break; 
default: 
break; 
} 
return true; 
} 
private int computeRange(int range) { 
return (range - lineStart) * (maxRange - smallRange) / lineLength 
+ smallRange; 
} 
private void updateRange() { 
smallRange = computeRange(lowerCenterX); 
maxRange = computeRange(upperCenterX); 
if (null != onRangeChangedListener) { 
onRangeChangedListener.onRangeChanged(smallRange, maxRange); 
} 
} 
public void setOnRangeChangedListener( 
OnRangeChangedListener onRangeChangedListener) { 
this.onRangeChangedListener = onRangeChangedListener; 
} 
public interface OnRangeChangedListener { 
void onRangeChanged(int lowRange, int maxRange); 
} 
}

为了方便大家使用我使用了
自定义属性方便大家配置。

大家有兴趣还是去我的链接下载吧

http://download.csdn.net/detail/xiangzhihong8/9578539