自定义垂直的SeekBar并用图片做滑块和背景

谷歌原生并没有提供垂直的SeekBar 所以需要对横向的SeekBar进行旋转和移动的操作

我们可以通过一些旋转、平移等操作让它竖起来

自定义View

public class VerticalSeekBar extends SeekBar {
private ProgressChangedListener progressChangedListener;
public VerticalSeekBar(Context context) {
super(context);
}
public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public VerticalSeekBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(h, w, oldh, oldw);
}
@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, widthMeasureSpec);
setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
}
protected void onDraw(Canvas c) {
//将SeekBar转转90度
c.rotate(-90);
//将旋转后的视图移动回来
c.translate(-getHeight(), 0);
super.onDraw(c);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
int i = 0;
//获取滑动的距离
i = getMax() - (int) (getMax() * event.getY() / getHeight());
//设置进度
setProgress(i);
if (progressChangedListener != null) {
progressChangedListener.onProgressChanged(getProgress());
}
onSizeChanged(getWidth(), getHeight(), 0, 0);
break;
case MotionEvent.ACTION_CANCEL:
break;
}
return true;
}
public void setOnProgressChanged(ProgressChangedListener progressChangedListener) {
this.progressChangedListener = progressChangedListener;
}
public interface ProgressChangedListener {
void onProgressChanged(int progress);
}
}

布局文件中使用

<com.robosea.robofish.view.VerticalSeekBar
android:id="@+id/mDeep"
android:layout_width="wrap_content"
android:layout_height="548px"
android:max="100"
android:maxWidth="36px"
android:minWidth="36px"
android:progress="55"
android:progressDrawable="@drawable/progress_holo_light"
android:thumb="@drawable/free_slider_control_btn" />

progress_holo_light.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="10dip" />
<solid
android:color="#8000145e"/>
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="10dip" />
<solid
android:color="#0078FF"/>
</shape>
</clip>
</item>
</layer-list>

还有一点，如果你使用SeekBar设置进度条（progressDrawable）和滑块（thumb）换成图片的话，有可能会遇到progressDrawable被撑大，撑到图片那么宽/高，解决的办法就是设置maxHeight或者maxWidth（根据不同情况）属性来限制。