Android 垂直seekbar

原创 2016年06月01日 23:58:43

android系统自带的拖动条(seekbar)只有横向,这里分享一个垂直的seekbar。

原理很简单:

(1)在测量控件大小(包括发现控件大小改变时)时,把宽度和高度互换

(2)在绘制时将画布顺时针旋转90度,即将拖动条逆时针旋转90度,为了保证从画布的原点开始绘制需要将画布上移视图高度

(3)自定义触摸事件,根据触摸的相对位置来修改progress变量的值。


代码分享如下(这个代码是很久以前网上找的,老外写的):

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
import android.view.ViewParent;
import android.widget.SeekBar;

/**
 * 竖向拖动条
 */
public class VerticalSeekBar extends SeekBar {
    private boolean mIsDragging;
    private float mTouchDownY;
    private int mScaledTouchSlop;
    private boolean isInScrollingContainer = false;

    public boolean isInScrollingContainer() {
        return isInScrollingContainer;
    }

    public void setInScrollingContainer(boolean isInScrollingContainer) {
        this.isInScrollingContainer = isInScrollingContainer;
    }

    /**
     * On touch, this offset plus the scaled value from the position of the
     * touch will form the progress value. Usually 0.
     */
    float mTouchProgressOffset;

    public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mScaledTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }

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

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

    @Override
    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());
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        canvas.rotate(90);
        canvas.translate(0, -getWidth());
        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (isInScrollingContainer()) {
                mTouchDownY = event.getY();
            } else {
                setPressed(true);
                invalidate();
                onStartTrackingTouch();
                trackTouchEvent(event);
                attemptClaimDrag();
                onSizeChanged(getWidth(), getHeight(), 0, 0);
            }
            break;
        case MotionEvent.ACTION_MOVE:
            if (mIsDragging) {
                trackTouchEvent(event);
            } else {
                final float y = event.getY();
                if (Math.abs(y - mTouchDownY) > mScaledTouchSlop) {
                    setPressed(true);
                    invalidate();
                    onStartTrackingTouch();
                    trackTouchEvent(event);
                    attemptClaimDrag();
                }
            }
            onSizeChanged(getWidth(), getHeight(), 0, 0);
            break;
        case MotionEvent.ACTION_UP:
            if (mIsDragging) {
                trackTouchEvent(event);
                onStopTrackingTouch();
                setPressed(false);
            } else {
                // Touch up when we never crossed the touch slop threshold
                // should
                // be interpreted as a tap-seek to that location.
                onStartTrackingTouch();
                trackTouchEvent(event);
                onStopTrackingTouch();
            }
            onSizeChanged(getWidth(), getHeight(), 0, 0);
            // ProgressBar doesn't know to repaint the thumb drawable
            // in its inactive state when the touch stops (because the
            // value has not apparently changed)
            invalidate();
            break;
        }
        return true;
    }


    private void trackTouchEvent(MotionEvent event) {
        final int height = getHeight();
        final int top = getPaddingTop();
        final int bottom = getPaddingBottom();
        final int available = height - top - bottom;
        int y = (int) event.getY();
        float scale;
        float progress = 0;
        if (y > height - bottom) {
            scale = 0.0f;
        } else if (y < top) {
            scale = 1.0f;
        } else {
            scale = (float) (available - y + top) / (float) available;
            progress = mTouchProgressOffset;
        }
        final int max = getMax();
        // progress += scale * max;
        progress = Math.round(max * (1 - scale) - progress);
        setProgress((int) progress);
    }

    /**
     * This is called when the user has started touching this widget.
     */
    void onStartTrackingTouch() {
        mIsDragging = true;
    }

    /**
     * This is called when the user either releases his touch or the touch is
     * canceled.
     */
    void onStopTrackingTouch() {
        mIsDragging = false;
    }

    private void attemptClaimDrag() {
        ViewParent p = getParent();
        if (p != null) {
            p.requestDisallowInterceptTouchEvent(true);
        }
    }

    @Override
    public synchronized void setProgress(int progress) {
        super.setProgress(progress);
        onSizeChanged(getWidth(), getHeight(), 0, 0);
    }
}


版权声明:转载请注明出处——http://blog.csdn.net/chy555chy/article

Android 自定义UI-垂直方向的SeekBar

系统自带的SeekBar样式是水平的,如果需求一个垂直方向的效果就需要自定义了。原理很简单,即定义一个类继承于SeekBar,并在OnDraw方法里面旋转一下视图。代码如下:package andro...
  • wangjinyu501
  • wangjinyu501
  • 2014年03月04日 14:14
  • 12466

垂直的SeekBar以及自定义布局

public class VerticalSeekBar extends SeekBar { public VerticalSeekBar (Context context) { ...
  • My_GTH
  • My_GTH
  • 2017年03月18日 10:43
  • 690

垂直进度条VerticalSeekBar

水平的进度条见多了,总会想见个垂直的进度条开开眼。今天咱就试试。 要说原理也简单,就是把宽高倒置,其他的理论上都不需要动,发现问题再补补也就行了。官方提供官方是提供了垂直进度条的例子源码的,位置在a...
  • ifmylove2011
  • ifmylove2011
  • 2016年07月23日 23:54
  • 2158

垂直的SeekBar:VerticalSeekBar

这是我找到的一个比较好用的垂直的SeekBar代码: public class VerticalSeekBar extends AbsSeekBar { private Drawable mT...
  • ueryueryuery
  • ueryueryuery
  • 2014年03月06日 09:51
  • 7204

android 垂直拖动条seekbar

借鉴了网友的代码,东拼西凑出我想要的效果.   大致思路: 重写Android 的seekbar 中的 draw 方法, 和 重写 setThumb方法 ; 分别为了实现seekbar的垂直效果和bi...
  • aikongmeng
  • aikongmeng
  • 2014年12月24日 10:37
  • 2051

带文字的水平垂直seekbar,也可当普通seekbar使用,可以解决垂直滑动冲突。

1.先来看效果图 2.直接贴代码 package cn.funny.main; import android.content.Context; import android.graphi...
  • SXH_Android
  • SXH_Android
  • 2016年09月23日 17:08
  • 1097

VerticalSeekBar 竖直滑动条

VerticalSeekBar 竖直滑动条
  • gongziwushuang
  • gongziwushuang
  • 2017年04月20日 11:31
  • 1031

android 打造变化多端的SeekBar(垂直和水平)

SeekBar相信用的人不是很多,一般都是用水平SeekBar就可以了。但是之前项目中考虑使用垂直的SeekBar,就要继承重写SeekBar才能用。而垂直SeekBar在百度搜了一下,关于这方面文章...
  • qq_16064871
  • qq_16064871
  • 2016年02月27日 09:50
  • 4517

Android自定义竖直方向SeekBar

写在前面因为有这样的一个场景,需要实现竖直方向的多色进度条,然后在网上也找了下,没看到符合需要的,于是自定义了一个,效果如下: 具体实现本来想定义水平的,然后旋转一下,后来发现还不如直接定义竖直方向...
  • ForeverSunshine
  • ForeverSunshine
  • 2016年10月21日 23:28
  • 3421

Android—seekbar可拖动进度条

SeekBar通过滑块的位置来标识数值 允许用户通过拖动滑块来改变进度值的大小 控件:SeekBar            两个TextView 显示状态 实现SeekBar.OnSeekBar...
  • xushunag
  • xushunag
  • 2018年01月18日 16:36
  • 30
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 垂直seekbar
举报原因:
原因补充:

(最多只允许输入30个字)