logo标签列表

如何在Android中获得一个可工作的竖向SeekBar？

androidseekbar
54

我实现了常见的VerticalSeekBar post 这里。目前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的进度。如果我只是在进度条的末端轻点一下（理应是progress ~ 900），它会返回大约35的进度，并且黄色进度条会保持在靠近顶部的位置反映该值。
我的问题是：有没有人有一个可用的VerticalSeekBar链接，或者知道如何调整这个特定的例子？
1
请点击以下链接：垂直滑动条。 - Vicky Kapadia
9个回答
154

这里有一个可用的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"
  />
1
这个程序完全正确。唯一需要提到的是，如果你选择了LinearLayout布局，那么布局的方向会影响你看到的状态栏的位置，因此getMeasuredHeight()和width的位置也会改变setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth()); 如果有人需要我提到的示例，我可以提供完整的样例代码。 - Nikola Despotoski
15
重写setProgress方法以便从类外部调用它。@Override public synchronized void setProgress(int progress){ super.setProgress(progress); onSizeChanged(getWidth(), getHeight(), 0, 0); } - Xavi Gil
1
如果您在使用此功能时使用填充，则需要更改onTouchEvent，否则setProgress会表现出意外行为。这是修复后的版本switch（event.getAction（））{case MotionEvent.ACTION_DOWN：case MotionEvent.ACTION_MOVE：case MotionEvent.ACTION_UP：setProgress（getMax（） -（int）（getMax（）*（event.getY（）- getPaddingRight（））/（getHeight（）- getPaddingRight（）- getPaddingLeft（））））; onSizeChanged（getWidth（），getHeight（），0，0）; break;} - user65721
2
@Galarzaa90 我现在没有足够的时间来测试它，但我认为只需要将c.rotate(90); 替换为-90，删除c.translate(...)，并在onTouchEvent中删除“getMax() -”即可。 - Paul Tsupikoff
1
为什么我的Thumb与水平SeekBar不同？ - jaiserpe
显示剩余11条评论
31

采纳答案中给出的代码没有截取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;
}
}
1
我有一个小疑问，如何从上面的代码更改seekbar拇指的悬停图像。实际上，我尝试过了，但没有成功。但是我观察到在我的应用程序中，当seekbar获得焦点时，代码可以完美地工作。 - Ramesh Akula
@Fatal1ty2787 非常感谢 :) - Mahmoud Farahat
你还应该在 MotionEvent.ACTION_DOWN: 和 MotionEvent.ACTION_UP: 中调用 setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));. - Mahmoud Farahat
你已经通过一个监听器拦截了行为，我们能不能只是重写 onStartTrackingTouch 和 onStopTrackingTouch 事件呢？ - Ankit Srivastava
太棒了！！ - tahsinRupam
谢谢。我之前一直卡在 onStartTouch 和 onStopTouch 上，因为它们一直没有起作用，直到现在。 - MadMax
13

在使用setProgress方法时，我遇到了一些问题。为了解决这些问题，我建议覆盖setProgress并将onSizeChanged调用添加到其中。

7
添加到类中：@Override public synchronized void setProgress(int progress) { super.setProgress(progress); onSizeChanged(getWidth(), getHeight(), 0, 0); } - FeatureCreep
11

在使用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>

这对我正在起作用...

9
API 11及以上版本可使用seekbar的XML属性（android:rotation="270"）来实现竖向效果。请注意，需使用正确的XML格式，并检查代码中是否存在拼写错误等语法问题。
<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

这是一个垂直拖动条的库，可用于在Android应用程序中创建垂直进度条。

3
这是最相关和简单的解决方案。唯一的问题是，在Android Studio“设计”视图中似乎没有准确反映出来。（在设计视图中，该条变成了水平条，即使在最终产品中它是垂直的） - TheIronKnuckle
9
感谢Paul Tsupikoff、Fatal1ty2787和Ramesh提供的优秀代码。
个人而言，我需要一个与给定代码相反的倾斜垂直滑块。换句话说，拇指越低，值就越高。改变四行代码似乎已经解决了这个问题。
首先，我按照Paul最初提供的方法更改了onDraw()方法。现在，rotate()和translate()调用具有以下参数:
c.rotate(90);
c.translate(0, -getWidth());

然后我按照Fatal1ty2787的建议，在onTouchEvent()中对情况做了两个更改。现在调用setProgress()的方式如下：

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

最后，调用onProgressChanged()的代码如下：
myListener.onProgressChanged(this, (int) (getMax() * event.getY() / getHeight()), true);

现在，只要 Google 与我们一样对此功能感兴趣就好了...
谢谢，我也需要那个版本！ - Matan Dahan
2

另一个想法是更改 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)方法，因此您可以使用OnSeekBarChangeListener.onProgressChanged()中的布尔标志“fromUser”来确定是否是用户交互导致的寻求。
我喜欢你的解决方案，但似乎它不能正常工作。你需要重写setProgress并在那里调用onSizeChanged才能使其正常工作。 - user1991679
2

基于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" />
0

目标平台

从Android 2.3.x（姜饼）到Android 7.x（牛轧糖）

入门指南

此库已发布在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();
            }
        });
    }

}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接