UI组件----SeekBar

项目中最近用到的seekbar来控制地图的缩放级别，但是发现原生的seekbar是横着的

<SeekBar 
           android:layout_marginLeft="@dimen/sport_marginLeft"
             android:id="@android:id/progress"  
         android:layout_width="300dp"  
        android:layout_height="wrap_content"
         android:maxHeight="20dp"  
        android:progressDrawable="@drawable/prograssbar" 

        android:thumb="@drawable/prograssbarthumb" //设置拖动块的样式 在drawable中
         style="?android:attr/progressBarStyleHorizontal" />

设置拖动块样式代码：

 <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">

      <!--  滑块未压下时 -->
     <item
         android:state_pressed="false"
          android:drawable="@drawable/thumb_grey"    >     
      </item>

     <!-- 滑块压下时 -->
    <item
        android:state_pressed="true"
         android:drawable="@drawable/thumb_green"    >     
    </item>

 </selector>

如图

但是项目中需要实现的是竖着的效果，于是在网上找了一些资料，发现了seekbar竖着的代码，如下：

package com.cn.aecmcd.zdy;

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

public class MySeekBar extends SeekBar{

    public MySeekBar(Context context) {  
        super(context);  
    }  

    public MySeekBar(Context context, AttributeSet attrs, int defStyle) {  
        super(context, attrs, defStyle);  
    }  

    public MySeekBar(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 synchronized void setProgress(int progress) {  
        super.setProgress(progress);  
        onSizeChanged(getWidth(), getHeight(), 0, 0);  
    }  

    @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布局文件

<com.cn.aecmcd.zdy.MySeekBar
      android:visibility="gone"
      android:layout_marginLeft="10dp"
      android:layout_centerVertical="true"
      android:layout_gravity="center_vertical"
        android:id="@+id/seekBar_map01"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="@dimen/map01_seekbar_height"
        android:progressDrawable="@drawable/seekbar_bg"
        android:max="23"
        android:progress="10"


      />

效果如下
自定义了seekbar的背景
自定义背景代码如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 未选中 -->
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekar_nomal"/>
    <!-- 中 -->
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/seekbar_press"/>
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/seekbar_press"/>

</layer-list>

本来以为这样就可以了，但是产品说觉得进度条太宽，让变细一些
于是修改xml布局文件

<com.cn.aecmcd.zdy.MySeekBar
      android:visibility="gone"
      android:layout_marginLeft="10dp"
      android:layout_centerVertical="true"
      android:layout_gravity="center_vertical"
        android:id="@+id/seekBar_map01"
        android:layout_width="20dp"
        android:layout_weight="1"
        android:layout_height="@dimen/map01_seekbar_height"
        android:progressDrawable="@drawable/seekbar_bg"
        android:max="23"
        android:progress="10"
      />

修改了seekbar的宽度 改为20dp，之前是包裹内容
效果如下
发现拖动块显示不全

于是改为30dp，拖动块倒是能显示全了，如图
但是还是有些宽
最后自己试了seekbar的一些属性发现 设置width的同时设置一下maxHeight属性就可以了，这样既能保证拖动块显示全，又能设置拖动条的宽度

  android:layout_width="30dp"
   android:maxHeight="5dp"

xml布局代码最终为：

<com.cn.aecmcd.zdy.MySeekBar
      android:visibility="gone"
      android:layout_marginLeft="10dp"
      android:layout_centerVertical="true"
      android:layout_gravity="center_vertical"
        android:id="@+id/seekBar_map01"
        android:layout_width="30dp"
        android:layout_weight="1"
        android:layout_height="@dimen/map01_seekbar_height"
        android:progressDrawable="@drawable/seekbar_bg"
        android:max="23"
        android:progress="10"
        android:maxHeight="5dp"
      />

效果图如下：