android 竖向SeekBar控件的自定义

我们都知道seekBar是个横向的拖动条，也有的的时候我们需要竖向的拖动条，有两种方式：1是自己定义控件用画笔画，这样这几的问题很多也很麻烦；2.是在seekBar基础上稍作修改。无疑是后者简单的多，我们只要改变绘制的方向就好，代码如下：

@Override
protected synchronized void onDraw(Canvas canvas) {
    canvas.rotate(90);//将画布旋转90度
    canvas.translate(0,-getWidth());//将绘制原点移至 0,-getWidth()
   super.onDraw(canvas);
 }
上面代码涉及到了画布的旋转和原点的转移如下图：



如果只是旋转画布，那么控件位置就会出现在xy的负方向，也就是画布外，导致看不到控件。这时候我们就需要canvas.translate(0,-getWidth());将绘制原点移到0,-getWidth()位置，使控件处于画布上。以上我们基本配置好了画布和原点，接下来为了不然控件显示不全我们还要处理控件的宽高。代码如下：

@Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    Log.e("1213", getWidth()+"==="+getHeight());
    //上下方向的时候控件宽高是相反的
     super.onSizeChanged(h, w, oldh, oldw);
   }
 
  private Drawable mThumb;
 
  @Override
  public void setThumb(Drawable thumb) {
   mThumb = thumb;
   super.setThumb(thumb);
  }
 
   @Override
   protected synchronized void onMeasure(int widthMeasureSpec,
     int heightMeasureSpec) {
    int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
     // 将控件宽度固定为滑动模块的高度
     setMeasuredDimension(mThumb.getIntrinsicHeight(), heightSpecSize);
   }
@Override
protected synchronized void onDraw(Canvas canvas) {
    canvas.rotate(90);//将画布旋转90度
    canvas.translate(0,-getWidth());//将绘制原点移至 0,-getWidth()
   super.onDraw(canvas);
 }

注意在布局XML里面改控件的宽高属性要按竖向的方式设置：



实现上面的代码基本上显示是没问题了，但是我们在拖动的时候发现，进度条和滑动模块明显移动的不对。这就涉及到触摸事件和进度的重新设置。代码如下：        

@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 绘制滑动模块为点击效果
setPressed(true);
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
// 绘制滑动模块为非点击效果
setPressed(false);
break;
case MotionEvent.ACTION_CANCEL:
break;
}
// 将拖动条分getMax()份，每份长
float h = getHeight() / getMax();
// 当前进度，也就是当前位置站getMax()的多少份
int progress = (int) (event.getY() / h);
setProgress(progress);
//除了默认是横向左面开始。都处理触摸事件
return true;
}
@Override
public synchronized void setProgress(int progress) {
// TODO Auto-generated method stub
super.setProgress(progress);
// 刷新滑动模块的位置重新绘制
onSizeChanged(getWidth(), getHeight(), 0, 0);
invalidate();
}

到此一个竖向的SekkBar控件就算完成了。希望能帮到你们，有问题可以留言谢谢！

点击去下载demo下载