如何在 Android 中获得可用的垂直 SeekBar？

Question

我已经在此处实现了常见的 VerticalSeekBar 帖子。实际上，SeekBar 的运行方式有点古怪。下面是我对该示例稍加修改的 onTouchEvent()：

public boolean onTouchEvent(MotionEvent event)
    {
            xPos = event.getX();
            yPos = event.getY();
            oOffset = this.getThumbOffset();
            oProgress = this.getProgress();

            //Code from example - Not working
            //this.setThumbOffset( progress * (this.getBottom()-this.getTop()) );

            this.setProgress((int)(29*yPos/this.getBottom()));
            return true;
    }

我成功实现了一个 VerticalSeekBar，其中进度按预期更新并且功能齐全，但拇指不跟随。这只是一个图形故障，所以我现在忽略它。但是，如果能够实现这一点就太好了。此 SeekBar 的 max = 20 。

但是，我尝试使用 max = 1000 实现另一个 VerticalSeekBar。显然，它使用相同的代码，因此您会假设相同的行为。即使我的手指滑过 SeekBar 并最终离开屏幕，我也只能取得 0~35 的进度。如果我只是点击进度条末尾附近（应该是进度 ~ 900），它会返回大约 35 的进度，黄色进度条通过停留来反映该值靠近顶部。

我的问题是：是否有人有一个可用的垂直 SeekBar 的链接，或知道如何适应这个特定的示例？

Answer 1

我寻找的不是 SeekBar，而是 Vertical Slider。这是我在 Kotlin 中实现的垂直滑块。

import android.content.Context
import android.graphics.Canvas
import android.util.AttributeSet
import android.view.MotionEvent
import com.google.android.material.slider.Slider

class MySlider : Slider {

    constructor(context: Context) : super(context)
    constructor (context: Context, attrs: AttributeSet?) : super(context, attrs) 

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(h, w, oldh, oldw)
    }

    @Synchronized
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec)
        setMeasuredDimension(measuredHeight, measuredWidth)
    }

    override fun setValue(value: Float) {
        super.setValue(value)
        onSizeChanged(width, height, 0, 0)
    }

    override fun onDraw(canvas: Canvas) {
        canvas.rotate(-90f)
        canvas.translate(-height * 1f, 0f)
        super.onDraw(canvas)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (!isEnabled) {
            return false
        }
        when (event.action) {
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE, MotionEvent.ACTION_UP -> {
                setValue((valueTo - (valueTo * event.y / height)).coerceIn(valueFrom, valueTo))
                onSizeChanged(width, height, 0, 0)
            }

            MotionEvent.ACTION_CANCEL -> {}
        }
        return true
    }
}

Answer 2

这是一个有效的 VerticalSeekBar 实现：

package android.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class VerticalSeekBar extends SeekBar {

    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) {
        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:
                setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;

            case MotionEvent.ACTION_CANCEL:
                break;
        }
        return true;
    }
}

要实现它，请在项目中创建一个新类，选择正确的包：

在那里，粘贴代码并保存。现在在您的 XML 布局中使用它：

<android.widget.VerticalSeekBar
  android:id="@+id/seekBar1"
  android:layout_width="wrap_content"
  android:layout_height="200dp"
  />

Answer 3

接受的答案中给出的代码没有拦截 onStartTrackingTouch 和 onStopTrackingTouch 事件，因此我对其进行了修改以更好地控制这两个事件。

这是我的代码：

public class VerticalSeekBar extends SeekBar {

private OnSeekBarChangeListener myListener;
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());
}

@Override
public void setOnSeekBarChangeListener(OnSeekBarChangeListener mListener){
    this.myListener = mListener;
}

protected void onDraw(Canvas c) {
    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:
            if(myListener!=null)
                myListener.onStartTrackingTouch(this);
            break;
        case MotionEvent.ACTION_MOVE:
            setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
            onSizeChanged(getWidth(), getHeight(), 0, 0);
            myListener.onProgressChanged(this, getMax() - (int) (getMax() * event.getY() / getHeight()), true);
            break;
        case MotionEvent.ACTION_UP:
            myListener.onStopTrackingTouch(this);
            break;

        case MotionEvent.ACTION_CANCEL:
            break;
    }
    return true;
}
}

Answer 4

我在将这段代码与 setProgress 方法一起使用时遇到了问题。为了解决这些问题，我建议重写 setProgress 并向其添加 onSizeChanged 调用。

Answer 5

我在将这段代码与 setProgress 方法一起使用时遇到问题。为了解决这些问题，我建议重写 setProgress 并添加 onSizeChanged 调用。此处添加了代码..

   private int x,y,z,w;
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldh, oldw);
        this.x=w;
        this.y=h;
        this.z=oldw;
        this.w=oldh;
    }
        @Override
        public synchronized void setProgress(int progress) {

            super.setProgress(progress);

                onSizeChanged(x, y, z, w);

        }

通过添加以下代码来执行选定的悬停操作：

1.setPressed(true);setSelected(true);//在 ACTION_DOWN 中添加此代码

2. setPressed(false);setSelected(false);//将其添加到 ACTION_UP 中

，并在 xml 中为选定的悬停选项编写代码。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:state_window_focused="true"
          android:drawable="@drawable/thumb_h" />
    <item android:state_selected="true"
          android:state_window_focused="true"
          android:drawable="@drawable/thumb_h" />
    <item android:drawable="@drawable/thumb" />
</selector>

这对我有用......

Answer 6

感谢 Paul Tsupikoff、Fatal1ty2787 和 Ramesh 提供了这段出色的代码。

就我个人而言，我想要一个与给定代码相比是颠倒的垂直滑块。换句话说，拇指越低，该值就会增加而不是减少。改变四行似乎已经解决了这个问题。

首先，我更改了 Paul 最初给出的 onDraw() 方法。 rotate() 和 translate() 调用现在具有以下参数：

c.rotate(90);
c.translate(0, -getWidth());

然后，我对 onTouchEvent( ） 由 Fatal1ty2787 给出。对 setProgress() 的调用现在如下所示：

setProgress((int) (getMax() * event.getY() / getHeight()));

最后，对 onProgressChanged() 的调用如下所示：

myListener.onProgressChanged(this, (int) (getMax() * event.getY() / getHeight()), true);

现在，如果 Google 能分享我们对此功能的兴趣就好了…… ..

Answer 7

对于API 11及更高版本，可以使用seekbar的XML属性(android:rotation="270")来实现垂直效果。

<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="270"/>

对于较旧的 API 级别（例如 API10），请使用：
https://github.com/AndroSelva/Vertical-SeekBar-Android

Answer 8

另一个想法可能是更改 MotionEvent 的 X 和 Y 坐标并将它们传递给超级实现：

public class VerticalSeekBar extends SeekBar {

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);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (!isEnabled()) {
        return false;
    }
    float x = (getHeight() - event.getY()) * getWidth() / getHeight();
    float y = event.getX();
    MotionEvent verticalEvent = MotionEvent
            .obtain(event.getDownTime(), event.getEventTime(), event.getAction(), x, y,
                    event.getPressure(), event.getSize(), event.getMetaState(),
                    event.getYPrecision(), event.getXPrecision(), event.getDeviceId(),
                    event.getEdgeFlags());
    return super.onTouchEvent(verticalEvent);
}

protected void onDraw(Canvas c) {
    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());
}

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(h, w, oldh, oldw);
}
}

在这种情况下，无需调用 setProgress(int) 方法，因此您可以使用布尔标志“fromUser”在 OnSeekBarChangeListener.onProgressChanged() 中确定查找是否由用户交互产生。

Answer 9

根据 Paul Tsupikoff 的回答，这里是 AppCompatVerticalSeekBar：

package com.my.apppackage;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;

import androidx.appcompat.widget.AppCompatSeekBar;

public class AppCompatVerticalSeekBar extends AppCompatSeekBar {
    public AppCompatVerticalSeekBar(Context context) {
        super(context);
    }

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

    public AppCompatVerticalSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @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(-getHeight(), 0);
        super.onDraw(canvas);
    }

    @SuppressLint("ClickableViewAccessibility")
    @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: {
                setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            }
            case MotionEvent.ACTION_CANCEL: {
                break;
            }
        }
        return true;
    }
}

在布局文件中使用它：

<com.my.apppackage.AppCompatVerticalSeekBar
    android:id="@+id/verticalSeekBar1"
    android:layout_width="wrap_content"
    android:layout_height="200dp" />

Answer 10

目标平台

Android 2.3.x (Gingerbread) 的
到 Android 7.x (Nougat)

入门

该库发布在 jCenter 上。只需将这些行添加到 build.gradle 中即可。

dependencies {
    compile 'com.h6ah4i.android.widget.verticalseekbar:verticalseekbar:0.7.2'
}

用法

布局 XML

<!-- This library requires pair of the VerticalSeekBar and VerticalSeekBarWrapper classes -->
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
    android:layout_width="wrap_content"
    android:layout_height="150dp">
    <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
        android:id="@+id/mySeekBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:max="100"
        android:progress="0"
        android:splitTrack="false"
        app:seekBarRotation="CW90" /> <!-- Rotation: CW90 or CW270 -->
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

注意：Android N+ 需要 android:splitTrack="false"。

Java代码

public class TestVerticalSeekbar extends AppCompatActivity {
    private SeekBar volumeControl = null;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_vertical_seekbar);

        volumeControl = (SeekBar) findViewById(R.id.mySeekBar);

        volumeControl.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            int progressChanged = 0;

            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                progressChanged = progress;
            }

            public void onStartTrackingTouch(SeekBar seekBar) {
                // TODO Auto-generated method stub
            }

            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(getApplicationContext(), "seek bar progress:" + progressChanged,
                        Toast.LENGTH_SHORT).show();
            }
        });
    }

}