如何在Android中获得有效的垂直SeekBar?

Sna*_*ler 52 android seekbar

我已经实现了共同指向的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;
    }
Run Code Online (Sandbox Code Playgroud)

我已经设法实现了一个VerticalSeekBar,其中进度按预期更新并且功能齐全,但拇指并没有效仿.这只是一个图形故障,所以我现在忽略它.但是,让它工作很好.这个SeekBar有max = 20.

但是,我尝试用另一个VerticalSeekBar实现max = 1000.显然,它使用相同的代码,因此您将采用相同的行为.即使我的手指滑过SeekBar并最终离开屏幕,我也只能达到0~35的进度.如果我只是在进度条的末尾(应该progress ~ 900)附近点击它会返回大约35的进度,黄色进度条通过保持靠近顶部来反映该值.

我的问题是:有没有人有一个工作垂直SeekBar的链接,知道如何适应这个特定的例子?

Pau*_*off 143

这是一个有效的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;
    }
}
Run Code Online (Sandbox Code Playgroud)

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

在那里,粘贴代码并保存.现在在XML布局中使用它:

<android.widget.VerticalSeekBar
  android:id="@+id/seekBar1"
  android:layout_width="wrap_content"
  android:layout_height="200dp"
  />
Run Code Online (Sandbox Code Playgroud)

  • 覆盖`setProgress`以从类外部调用它.@Override public synchronized void setProgress(int progress){super.setProgress(progress); onSizeChanged(getWidth(),getHeight(),0,0); }` (14认同)
  • @ Galarzaa90我现在没有足够的时间来测试它,但我认为c.rotate(90)就足够了; 而不是-90,删除c.translate(...),并删除onTouchEvent中的"getMax() - ". (2认同)

小智 30

接受的答案中给出的代码没有拦截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;
}
}
Run Code Online (Sandbox Code Playgroud)


小智 13

使用此代码与setProgress方法时遇到问题.要解决这些问题,我建议覆盖setProgress并添加onSizeChanged调用.

  • 添加到类:@Override public synchronized void setProgress(int progress){super.setProgress(progress); onSizeChanged(getWidth(),getHeight(),0,0); } (7认同)
  • @FeatureCreep非常感谢,这非常有帮助 (2认同)

Ram*_*ula 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);

        }
Run Code Online (Sandbox Code Playgroud)

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

1.setPressed(true); setSelected(true); //在ACTION_DOWN中添加它

2.setPressed(false); setSelected(false); //在ACTION_UP中添加它

并在ur 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>
Run Code Online (Sandbox Code Playgroud)

这对我有用......


Ada*_*ler 8

感谢Paul Tsupikoff,Fatal1ty2787和Ramesh这个优秀的代码.

就个人而言,我想要一个垂直滑块,与给定的代码相比,它是颠倒的.换句话说,拇指越低,值越大,而不是越小.改变四条线似乎已经解决了这个问题.

首先,我改变了onDraw()Paul最初给出的方法.该rotate()translate()电话现在有这些参数:

c.rotate(90);
c.translate(0, -getWidth());
Run Code Online (Sandbox Code Playgroud)

然后我对Fatal1ty2787给出的ACTION_MOVE案例做了两处修改onTouchEvent().setProgress()现在的调用看起来像这样:

setProgress((int) (getMax() * event.getY() / getHeight()));
Run Code Online (Sandbox Code Playgroud)

最后,调用onProgressChanged()看起来像这样:

myListener.onProgressChanged(this, (int) (getMax() * event.getY() / getHeight()), true);
Run Code Online (Sandbox Code Playgroud)

现在,如果只有谷歌分享我们对此功能的兴趣....


Xar*_*mer 7

对于API 11 and later,可以使用seekbar's XML attributes(android:rotation="270")进行垂直效果.

<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="270"/>
Run Code Online (Sandbox Code Playgroud)

对于较旧的API级别(例如API10),请使用:https: //github.com/AndroSelva/Vertical-SeekBar-Android

  • 这是该问题最相关和最简单的解决方案。唯一的问题是它似乎没有准确反映在 Android Studio 的“设计”视图中。(栏在设计视图中保持水平,即使它在最终产品中变为垂直) (2认同)