Android 自定义UI-垂直方向的SeekBar-阿里云开发者社区

Android 自定义UI-垂直方向的SeekBar

2014-03-06 3817

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

系统自带的SeekBar样式是水平的，如果需求一个垂直方向的效果就需要自定义了。原理很简单，即定义一个类继承于SeekBar，并在OnDraw方法里面旋转一下视图。

代码如下：

[java]view plaincopy 
   
 package android.widget;   
    
 import android.content.Context;   
 import android.graphics.Canvas;   
 import android.util.AttributeSet;   
 import android.util.Log;   
 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) {   
         //将SeekBar转转90度   
         c.rotate(-90);   
         //将旋转后的视图移动回来   
         c.translate(-getHeight(),0);   
         Log.i("getHeight()",getHeight()+"");   
         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()+"");   
                 //每次拖动SeekBar都会调用   
                 onSizeChanged(getWidth(), getHeight(), 0, 0);   
                 Log.i("getWidth()",getWidth()+"");   
                 Log.i("getHeight()",getHeight()+"");   
                 break;   
    
             case MotionEvent.ACTION_CANCEL:   
                 break;   
         }   
         return true;   
     }   
        
 }   

xml布局文件：

[html]view plaincopy 
   
 <?xml version="1.0" encoding="utf-8"?>   
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
     android:layout_width="fill_parent"   
     android:layout_height="fill_parent"   
     android:gravity="center"   
     android:background="@android:color/white"   
     android:orientation="horizontal" >   
    
     <android.widget.VerticalSeekBar_Reverse   
         android:id="@+id/seekbar_reverse"   
         android:layout_width="wrap_content"   
         android:layout_height="450dip"   
         android:layout_marginRight="30dip" />   
    
     <TextView   
         android:id="@+id/reverse_sb_progresstext"   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:layout_below="@+id/seekbar_reverse"   
         android:gravity="center" />   
    
     <android.widget.VerticalSeekBar   
         android:id="@+id/vertical_Seekbar"   
         android:layout_width="wrap_content"   
         android:layout_height="450dip"   
         android:layout_toRightOf="@+id/seekbar_reverse" />   
    
     <TextView   
         android:id="@+id/vertical_sb_progresstext"   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:layout_below="@+id/vertical_Seekbar"   
         android:layout_toRightOf="@+id/seekbar_reverse"   
         android:gravity="center" />   
    
 </RelativeLayout>   

代码下载

Android 自定义UI-垂直方向的SeekBar

热门文章

最新文章

相关课程

相关电子书