SeekBar

作者: 就爱烫卷发 | 来源:发表于2019-04-21 00:09 被阅读0次

    看小米手机音量调节的控件不错,决定写个玩玩,所以拿个SeekBar研究一下。

    SeekBar简单用法

        <SeekBar
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:maxHeight="10dp"
           android:max="100"
           android:progressDrawable="@drawable/bg_seekbar"
           android:id="@+id/seekbar"
      />
    

    1.属性介绍
            android:maxHeight="10dp"android:minHeight="10dp"代表seekBar可滑动区域的宽度为max 和min 不跟控件的height一样,如若没有则按照seekBar的高度一样的可滑区域。
    android:progressDrawable="@drawable/bg_seekbar"这个设置的是seekBar的样式 分为三个如:

       <item android:id="@android:id/background">
          <shape>
              <solid android:color="#30000000" />
              <corners android:radius="20dip"/>
          </shape>
      </item>
         <item android:id="@android:id/secondaryProgress">
        <item android:id="@android:id/progress">
    

           分别代表的是Process的总背景 缓存背景,当前进度状态。 其中corners可以来画边缘的圆角,android:thumb="@null"表示的是滑动的块的样式,null为不显示。
    2.垂直的seekBar
           垂直的seekBar 网上有很多例子,这里就贴一下代码加自己的注释。及主要思想,最后做成小米的那个用相对布局把喇叭嵌套进去,也可以在onDraw()中将喇叭画进去

    public class VerticalSeekbar extends        android.support.v7.widget.AppCompatSeekBar {
    public interface OnSeekBarChangeListener {
        void onProgressChanged(VerticalSeekbar VerticalSeekBar, int progress, boolean fromUser);
        void onStartTrackingTouch(VerticalSeekbar VerticalSeekBar);
        void onStopTrackingTouch(VerticalSeekbar VerticalSeekBar);
    }
    private OnSeekBarChangeListener mOnSeekBarChangeListener;
    public VerticalSeekbar(Context context) {
        this(context, null);
    }
    public VerticalSeekbar(Context context, AttributeSet attrs) {
        this(context, attrs, android.R.attr.seekBarStyle);
    }
    public VerticalSeekbar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    public void setOnSeekBarChangeListener(OnSeekBarChangeListener l) {
        mOnSeekBarChangeListener = l;
    }
    void onStartTrackingTouch() {
        if (mOnSeekBarChangeListener != null) {
            mOnSeekBarChangeListener.onStartTrackingTouch(this);
        }
    }
    void onStopTrackingTouch() {
        if (mOnSeekBarChangeListener != null) {
            mOnSeekBarChangeListener.onStopTrackingTouch(this);
        }
    }
    void onProgressRefresh(float scale, boolean fromUser) {
        if (mOnSeekBarChangeListener != null) {
            mOnSeekBarChangeListener.onProgressChanged(this, getProgress(), fromUser);
        }
    }
    
    @Override
    
    protected void onDraw(Canvas c) {
        //旋转90 逆时针
        c.rotate(-90);
        //将旋转之后的图像移动到我们当前的页面
        c.translate(-getHeight(), 0);
        super.onDraw(c);
    }
    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        //宽高颠倒
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
    }
    @Override
    public void setThumb(Drawable thumb) {
        //这里设置成NULL
        super.setThumb(null);
    }
    @Override
    //measure之后调用
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldw, oldh);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                onStartTrackingTouch();
                trackTouchEvent(event);
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            case MotionEvent.ACTION_MOVE:
                trackTouchEvent(event);
                attemptClaimDrag();
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            case MotionEvent.ACTION_UP:
                trackTouchEvent(event);
                onStopTrackingTouch();
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            case MotionEvent.ACTION_CANCEL:
                onStopTrackingTouch();
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
        }
        return true;
    }
    
    
    
    private void trackTouchEvent(MotionEvent event) {
        //获取高度
        final int Height = getHeight();
        //获取可以触摸的高度 即seekbar的调整范围
        final int available = Height - getPaddingBottom() - getPaddingTop();
        //获取按下的位置
        int Y = (int) event.getY();
        //占的百分比
        float scale;
        //进度
        float progress = 0;
        //根据业务逻辑process确定
        if (Y > Height - getPaddingBottom()) {
            scale = 0.0f;
        } else if (Y < getPaddingTop()) {
            scale = 1.0f;
        } else {
            scale = (float) (Height - getPaddingBottom() - Y) / (float) available;
        }
        final int max = getMax();
        progress = scale * max;
        setProgress((int) progress);
    }
    
    
    //防止与父控件进行滑动冲突
    private void attemptClaimDrag() {
        if (getParent() != null) {
            getParent().requestDisallowInterceptTouchEvent(true);
        }
    }
    

           最后设置成圆角,监听process 改变喇叭的图标就ok。
    借鉴于:https://blog.csdn.net/wangjinyu501/article/details/20456761
                :https://github.com/h6ah4i/android-verticalseekbar/blob/master/library/src/main/java/com/h6ah4i/android/widget/verticalseekbar/VerticalSeekBar.java

    相关文章

      网友评论

          本文标题:SeekBar

          本文链接:https://www.haomeiwen.com/subject/thgqgqtx.html