如何在Android中创build一个垂直的SeekBar？

一个seekbar可以垂直吗？ 我不是很擅长UIdevise，所以如何让seekbar更美观，请给我一些模板和例子。

Answer 1

这是一个很好的垂直seekbar的实现。 看一看。

http://560b.sakura.ne.jp/android/VerticalSlidebarExample.zip

这里是我自己的实现垂直和倒置的Seekbar的基础上

https://github.com/AndroSelva/Vertical-SeekBar-Android

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: int i=0; i=getMax() - (int) (getMax() * event.getY() / getHeight()); setProgress(i); Log.i("Progress",getProgress()+""); onSizeChanged(getWidth(), getHeight(), 0, 0); break; case MotionEvent.ACTION_CANCEL: break; } return true; } 

Answer 2

1. 对于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"/> 

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

Answer 3

工作示例

 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 public synchronized void setProgress(int progress) // it is necessary for calling setProgress on click of a button { super.setProgress(progress); onSizeChanged(getWidth(), getHeight(), 0, 0); } @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" /> 

确保创build一个包android.widget并在这个包下创buildVerticalSeekBar.java

Answer 4

尝试：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <SeekBar android:id="@+id/seekBar1" android:layout_width="match_parent" android:layout_height="wrap_content" android:rotation="270" /> </RelativeLayout> 

Answer 5

我使用Selva的解决scheme，但有两种问题：

• OnSeekbarChangeListener无法正常工作
• 以编程方式设置进度无法正常工作。

我解决了这两个问题。 你可以find解决scheme（在我自己的项目包）在

https://github.com/jeisfeld/Augendiagnose/blob/master/AugendiagnoseIdea/augendiagnoseLib/src/main/java/de/jeisfeld/augendiagnoselib/components/VerticalSeekBar.java

Answer 6

请注意，在我看来，如果您更改宽度拇指宽度不会正确更改。 我没有花时间修复它，我只是为我的情况而定。 这是我做的。 无法弄清楚如何联系原创者。

 public void setThumb(Drawable thumb) { if (thumb != null) { thumb.setCallback(this); // Assuming the thumb drawable is symmetric, set the thumb offset // such that the thumb will hang halfway off either edge of the // progress bar. //This was orginally divided by 2, seems you have to adjust here when you adjust width. mThumbOffset = (int)thumb.getIntrinsicHeight(); } 

Answer 7

我们通过使用android:rotation="270"来制作一个垂直的SeekBar：

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <SurfaceView android:id="@+id/camera_sv_preview" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/camera_lv_expose" android:layout_width="32dp" android:layout_height="200dp" android:layout_centerVertical="true" android:layout_alignParentRight="true" android:layout_marginRight="15dp" android:orientation="vertical"> <TextView android:id="@+id/camera_tv_expose" android:layout_width="32dp" android:layout_height="20dp" android:textColor="#FFFFFF" android:textSize="15sp" android:gravity="center"/> <FrameLayout android:layout_width="32dp" android:layout_height="180dp" android:orientation="vertical"> <SeekBar android:id="@+id/camera_sb_expose" android:layout_width="180dp" android:layout_height="32dp" android:layout_gravity="center" android:rotation="270"/> </FrameLayout> </LinearLayout> <TextView android:id="@+id/camera_tv_help" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:layout_marginBottom="20dp" android:text="@string/camera_tv" android:textColor="#FFFFFF" /> </RelativeLayout> 

相机曝光补偿的屏幕截图：

Answer 8

当用EditText移动缩略图时，垂直Seekbar setProgress可能不起作用。 以下代码可以帮助：

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

这段代码在这里find： https : //stackoverflow.com/a/33064140/2447726

Answer 9

这对我来说，只是把它放到你想要的任何布局。

 <FrameLayout android:layout_width="32dp" android:layout_height="192dp"> <SeekBar android:layout_width="192dp" android:layout_height="32dp" android:layout_gravity="center" android:rotation="270" /> </FrameLayout> 

Answer 10

入门

将这些行添加到build.gradle。

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

用法

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

布局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:splitTrack="false" N +需要android:splitTrack="false" 。