自定义竖向SeekBar ,横向SeekBar 样式

效果图

竖向SeekBar 背景宽了，是因为，progress 的图片两边有透明留白。导致两个图片颜色区不一样宽。

贴代码：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/radio_volume_value"
        android:layout_width="46px"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30px"
        android:layout_marginTop="30px"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:textSize="22px" />

    <com.tan.seekbaractivity.view.VerticalSeekBar1
        android:id="@+id/verticalSeekBar"
        android:layout_width="36px"
        android:layout_height="230px"
        android:layout_marginLeft="36px"
        android:layout_marginTop="10px" />

    <SeekBar
        android:id="@+id/sb_progress"
        android:layout_width="400px"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100px"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:maxHeight="2px"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar_po_sound"
        android:thumb="@drawable/slide_selected"
        android:thumbOffset="16px" />

</LinearLayout>

drawable

seekbar_po_sound.xml

<?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/slide_bg">
      
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#00000000" />
            </shape>
        </clip>
    </item>
    
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/slide_content" >
            
        </clip>
    </item> -->
    
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="6px" />

            <solid android:color="#19ffffff" />

            <size
                android:height="5px"
                android:width="245px" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#00000000" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="6px" />

                <gradient
                    android:angle="0"
                    android:startColor="#a1f5c587" 
                    android:centerColor="#fdf4b5"
                    android:endColor="#fffde0"/>

                <size
                    android:height="5px"
                    android:width="245px" />
            </shape>
        </clip>
    </item>

</layer-list>

MainActivity.java

package com.tan.seekbaractivity;


import com.tan.seekbaractivity.view.VerticalSeekBar1;
import com.tan.seekbaractivity.view.VerticalSeekBar1.Callback;

import android.os.Bundle;
import android.app.ActionBar;
import android.app.Activity;
import android.view.Menu;
import android.widget.TextView;

public class MainActivity extends Activity {

	private VerticalSeekBar1 VerticalSeekBar;
	private TextView radio_volume_value;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 隐藏标题栏
		ActionBar actionBar = getActionBar();
		actionBar.hide();

		initView();
		setListener();

	}

	private void initView() {

		VerticalSeekBar = (VerticalSeekBar1) this.findViewById(R.id.verticalSeekBar);
		radio_volume_value = (TextView) this.findViewById(R.id.radio_volume_value);
	}

	private void setListener() {
		VerticalSeekBar.setMax(40);
		VerticalSeekBar.setProgress(0);
		VerticalSeekBar.setCallback(new Callback() {

			@Override
			public void changed(int mProgress) {
				radio_volume_value.setText(String.valueOf(mProgress));
			}
		});

	}

}

View

VerticalSeekBar.java

package com.tan.seekbaractivity.view;



import com.tan.seekbaractivity.R;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;


public class VerticalSeekBar1 extends RelativeLayout implements OnTouchListener {

	public VerticalSeekBar1(Context context) {
		super(context);
		init(context);
	}

	public VerticalSeekBar1(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);
	}

	public VerticalSeekBar1(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		init(context);
	}

	public interface Callback {
		public void changed(int mProgress);
	}

	private Callback mCallback;

	public void setCallback(Callback c) {
		mCallback = c;
	}

	private ImageView backgroundView;
	private ImageView mthumb;
	private ImageView progressView;

	private void init(Context context) {
		backgroundView = new ImageView(context);
		this.addView(backgroundView);
		progressView = new ImageView(context);
		this.addView(progressView);
		mthumb = new ImageView(context);
		this.addView(mthumb);
		setResource(this.getResources().getDrawable(R.drawable.radio_volume_progress_thumb), this.getResources()
				.getDrawable(R.drawable.radio_volume_progress_nomal),
				this.getResources().getDrawable(R.drawable.radio_volume_progress_press));
		this.setOnTouchListener(this);
		// mthumb.setOnTouchListener(this);
	}

	private void setResource(Drawable thumb, Drawable background, Drawable progress) {
		backgroundView.setBackgroundDrawable(background);
		progressView.setBackgroundDrawable(progress);
		mthumb.setImageDrawable(thumb);
	}

	private int offsetThumb = 18;

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		super.onLayout(changed, l, t, r, b);
		int width = this.getWidth();
		int height = this.getHeight();

		step = (height - 36) / (mMax);
		int backgroundwidt = backgroundView.getWidth();
		backgroundView.layout((width - backgroundwidt) / 2, offsetThumb, (width - backgroundwidt) / 2 + backgroundwidt,
				height - offsetThumb);
		int progressViewwidth = progressView.getWidth();


		progressView.layout((width - progressViewwidth) / 2, offsetThumb, (width - progressViewwidth) / 2
				+ progressViewwidth, height - offsetThumb);
		mthumb.layout(0, 0, mthumb.getWidth(), mthumb.getHeight());

		setProgress(progress);
	}

	public void setProgress(int p) {
		if (p > mMax || p < 0) {
			return;
		}
		progress = p;
		int currentY = (int) (step * p);
		lastY = currentY;

		int y = 230 - 18 - currentY;

//		if (y > 18 && y < step) {
//			y = 18;
//			progress = (int) mMax;
//		}

		mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);

		int width = VerticalSeekBar1.this.getWidth();
		int height = VerticalSeekBar1.this.getHeight();
		int progressViewwidth = progressView.getWidth();
		progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
				+ progressViewwidth, height - offsetThumb);

		VerticalSeekBar1.this.invalidate();
	}

	private float mMax;
	private float step;
	private int lastY;
	private int progress;

	public void setMax(int max) {
		mMax = max;
	}

	private Handler handler = new Handler() {

		@Override
		public void handleMessage(Message msg) {
			super.handleMessage(msg);
			int y = msg.arg1;
			if (y - 18 < 0) {
				y = 18;
			}

			if (y > VerticalSeekBar1.this.getHeight() - 18) {
				y = VerticalSeekBar1.this.getHeight() - 18;
			}

			if (y == VerticalSeekBar1.this.getHeight() - 18) {
				progress = 0;
			} else if (y == 18||(y > 18 && y < step+18)) {
				progress = (int) mMax;
			} else {
				int tempY = Math.abs(y-212);
				
				
				
				//int tempY = Math.abs(y - (230 - 18));
				int number = (int) (tempY / step);
				progress = number;
				int currentY = (int) (step * number);
				if (currentY == lastY) {
					return;
				}
				lastY = currentY;

				y = 230 - 18 - currentY;
//
//				if (y > 18 && y < step) {
//					y = 18;
//					progress = (int) mMax;
//				}
			}

			mthumb.layout(0, y - 18, mthumb.getWidth(), y + 18);

			int width = VerticalSeekBar1.this.getWidth();
			int height = VerticalSeekBar1.this.getHeight();
			int progressViewwidth = progressView.getWidth();
			progressView.layout((width - progressViewwidth) / 2, offsetThumb + y - 18, (width - progressViewwidth) / 2
					+ progressViewwidth, height - offsetThumb);

			VerticalSeekBar1.this.invalidate();
			if (mCallback != null) {
				mCallback.changed(progress);
			}
		}

	};
	private boolean isTouchDown = false;

	public boolean isTouchDown() {
		return isTouchDown;
	}

	@Override
	public boolean onTouch(View view, MotionEvent event) {

		int y = 0;
		switch (event.getAction())// 根据动作来执行代码
		{
		case MotionEvent.ACTION_MOVE:// 滑动
			isTouchDown = true;
			y = (int) event.getY();
			handler.sendMessage(handler.obtainMessage(0, y, 0));
			break;
		case MotionEvent.ACTION_DOWN:// 按下
			isTouchDown = true;
			y = (int) event.getY();
			handler.sendMessage(handler.obtainMessage(0, y, 0));
			break;
		case MotionEvent.ACTION_UP:// 松开
		case MotionEvent.ACTION_CANCEL:// 松开
			isTouchDown = false;
			y = (int) event.getY();
			handler.sendMessage(handler.obtainMessage(0, y, 0));
			break;
		default:
		}
		return true;

	}

}

横向SeekBar 样式：

    <SeekBar
        android:id="@+id/sb_progress"
        android:layout_width="400px"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100px"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:maxHeight="2px"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar_po_sound"
        android:thumb="@drawable/slide_selected"
        android:thumbOffset="16px" />

一般SeekBar 轨道（Track） 和 拖动按钮（Thumb） 是等高的

当遇到设计图，Track 比Thumb  高度小很多时，就不好处理 。

1.利用android:maxHeight="2px"  限制Track  的高度，控件的高度wrap_content , 就是Thumb 高度。

2。android:thumbOffset="16px"   用来控制Thumb 的偏移大小，就是Thumb 拖动范围比Track 长度大。避免Thumb出现拖不到头的情况。

3. 利用   android:progressDrawable="@drawable/seekbar_po_sound"

控制进度条的样式。

注意：遇到这种情况，尽量不要用图片做Track 。会出现，Track 高度不可控，并且会使Thumb 不居中。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="6px" />

            <solid android:color="#19ffffff" />

            <size
                android:height="5px"
                android:width="245px" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#00000000" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="6px" />

                <gradient
                    android:angle="0"
                    android:startColor="#a1f5c587" 
                    android:centerColor="#fdf4b5"
                    android:endColor="#fffde0"/>

                <size
                    android:height="5px"
                    android:width="245px" />
            </shape>
        </clip>
    </item>

</layer-list>

这里采用的是利用shape绘制 背景图和拖动条。

第一个item   @android:id/background  就是最底层的灰色条

第二个Item  一般用不到，@android:id/secondaryProgress 。这里设置成透明

第三个item  @android:id/progress   当前的进度。

注意使用   clip  属性 ，并用shape 绘制了渐变色。

第二和第三的区别使用场景

想想视频播放器，在线缓存播放。

第二条就是 当前缓存下载的进度

第三条  就是  正在播放视频的进度

自定义竖向SeekBar

就是自定义一个相对布局，控制拖动条和Thumb 的显示位置。

通过onLayout 方法重新绘制

目前这个空间没有自定义attrs 属性，坐标值是写死的，有待改进。

介绍，拖动块  Thumb  , 大小是 36X36

控件 的大小是 36X 230

Thumb   的 thumbOffset  = 18

代码中的数字都是暂时写死的。

具体绘制思路如图：