Android 自定义带刻度的seekbar

自定义带刻度的seekbar

1.布局

<span style="font-family:SimHei;font-size:18px;"><com.imibaby.client.views.CustomSeekbar
android:id="@+id/myCustomSeekBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="14.33dp"
android:layout_marginRight="10.33dp" /></span>  

2.在activity中使用

<span style="font-family:SimHei;font-size:18px;">private ArrayList<String> volume_sections = new ArrayList<String>();
volume_sections.add("静音");
volume_sections.add("低");
volume_sections.add("中");
volume_sections.add("高");
customSeekBar.initData(volume_sections);
customSeekBar.setProgress(int level);
customSeekBar.setResponseOnTouch(this);//activity实现了下面的接口ResponseOnTouch，每次touch会回调onTouchResponse  

public interface ResponseOnTouch {
    public void onTouchResponse(int volume);
}</span>  

3.自定义seekbar的代码

<span style="font-family:SimHei;font-size:18px;">package com.imibaby.client.views;  

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;  

import com.imibaby.client.R;
import com.imibaby.client.interfaces.ResponseOnTouch;  

import java.util.ArrayList;  

public class CustomSeekbar extends View {
    private final String TAG = "CustomSeekbar";
    private int width;
    private int height;
    private int downX = ;
    private int downY = ;
    private int upX = ;
    private int upY = ;
    private int moveX = ;
    private int moveY = ;
    private float scale = ;
    private int perWidth = ;
    private Paint mPaint;
    private Paint mTextPaint;
    private Paint buttonPaint;
    private Canvas canvas;
    private Bitmap bitmap;
    private Bitmap thumb;
    private Bitmap spot;
    private Bitmap spot_on;
    private int hotarea = ;//点击的热区
    private int cur_sections = ;
    private ResponseOnTouch responseOnTouch;
    private int bitMapHeight = ;//第一个点的起始位置起始，图片的长宽是76，所以取一半的距离
    private int textMove = ;//字与下方点的距离，因为字体字体是40px，再加上10的间隔
    private int[] colors = new int[]{0xffdf5600,0x33000000};//进度条的橙色,进度条的灰色,字体的灰色
    private int textSize;
    private int circleRadius;
    private ArrayList<String> section_title;
    public CustomSeekbar(Context context) {
        super(context);
    }
    public CustomSeekbar(Context context, AttributeSet attrs) {
        this(context, attrs, );
    }
    public CustomSeekbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        cur_sections = ;
        bitmap = Bitmap.createBitmap(, , Bitmap.Config.ARGB_8888);
        canvas = new Canvas();
        canvas.setBitmap(bitmap);
        thumb = BitmapFactory.decodeResource(getResources(), R.drawable.set_button_0);
        spot = BitmapFactory.decodeResource(getResources(),R.drawable.spot);
        spot_on = BitmapFactory.decodeResource(getResources(),R.drawable.spot_on);
        bitMapHeight = thumb.getHeight()/;
        textMove = bitMapHeight+;
        textSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, , getResources().getDisplayMetrics());
        circleRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, , getResources().getDisplayMetrics());
        mPaint = new Paint(Paint.DITHER_FLAG);
        mPaint.setAntiAlias(true);//锯齿不显示
        mPaint.setStrokeWidth();
        mTextPaint = new Paint(Paint.DITHER_FLAG);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(textSize);
        mTextPaint.setColor(0xffb5b5b4);
        buttonPaint = new Paint(Paint.DITHER_FLAG);
        buttonPaint.setAntiAlias(true);
        //initData(null);
    }
    /**
     * 实例化后调用，设置bar的段数和文字
     */
    public void initData(ArrayList<String> section){
        if(section != null){
            section_title = section;
        }else {
            String[] str = new String[]{"低", "中", "高"};
            section_title = new ArrayList<String>();
            for (int i = ; i < str.length; i++) {
                section_title.add(str[i]);
            }
        }
    }  

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);  

        width = widthSize;
        float scaleX = widthSize / ;
        float scaleY = heightSize / ;
        scale = Math.max(scaleX,scaleY);
        //控件的高度
        //        height = 185;
        height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, , getResources().getDisplayMetrics());
        setMeasuredDimension(width, height);
        width = width-bitMapHeight/;
        perWidth = (width - section_title.size()*spot.getWidth() - thumb.getWidth()/) / (section_title.size()-);
        hotarea = perWidth/;
    }  

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAlpha();
        canvas.drawRect(, , getMeasuredWidth(), getMeasuredHeight(), mPaint);
        canvas.drawBitmap(bitmap, , , null);
        mPaint.setAlpha();
        mPaint.setColor(colors[]);
        canvas.drawLine(bitMapHeight, height *  / , width - bitMapHeight - spot_on.getWidth() / , height *  / , mPaint);
        int section = ;
        while(section < section_title.size()){
            if(section < cur_sections) {
                mPaint.setColor(colors[]);
                canvas.drawLine(thumb.getWidth()/ + section * perWidth + (section+) * spot_on.getWidth(),height *  / ,
                        thumb.getWidth()/ + section * perWidth + (section+) * spot_on.getWidth() + perWidth,height *  / ,mPaint);
                canvas.drawBitmap(spot_on, thumb.getWidth()/ + section * perWidth + section * spot_on.getWidth(),height *  /  - spot_on.getHeight()/,mPaint);
            }else{
                mPaint.setAlpha();
                if(section == section_title.size()-){
                    canvas.drawBitmap(spot,  width - spot_on.getWidth() - bitMapHeight/, height *  /  - spot.getHeight() / , mPaint);
                }else {
                    canvas.drawBitmap(spot, thumb.getWidth()/ + section * perWidth + section * spot_on.getWidth(), height *  /  - spot.getHeight() / , mPaint);
                }
            }  

            if(section == section_title.size()-) {
                canvas.drawText(section_title.get(section), width - spot_on.getWidth()- bitMapHeight/ - textSize / , height *  /  - textMove, mTextPaint);
            }else{
                canvas.drawText(section_title.get(section), thumb.getWidth()/ + section * perWidth + section * spot_on.getWidth(), height *  /  - textMove, mTextPaint);
            }
            section++;
        }
        if(cur_sections == section_title.size()-){
            canvas.drawBitmap(thumb, width - spot_on.getWidth() - bitMapHeight/ - thumb.getWidth() / ,
                    height *  /  - bitMapHeight, buttonPaint);
        }else {
            canvas.drawBitmap(thumb, thumb.getWidth()/ + cur_sections * perWidth + cur_sections * spot_on.getWidth() - thumb.getWidth()/ ,
                    height *  /  - bitMapHeight, buttonPaint);
        }
    }  

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                thumb = BitmapFactory.decodeResource(getResources(), R.drawable.set_button_1);
                downX = (int) event.getX();
                downY = (int) event.getY();
                responseTouch(downX, downY);
                break;
            case MotionEvent.ACTION_MOVE:
                thumb = BitmapFactory.decodeResource(getResources(), R.drawable.set_button_1);
                moveX = (int) event.getX();
                moveY = (int) event.getY();
                responseTouch(moveX, moveY);
                break;
            case MotionEvent.ACTION_UP:
                thumb = BitmapFactory.decodeResource(getResources(), R.drawable.set_button_0);
                upX = (int) event.getX();
                upY = (int) event.getY();
                responseTouch(upX, upY);
                responseOnTouch.onTouchResponse(cur_sections);
                break;
        }
        return true;
    }
    private void responseTouch(int x, int y){
        if(x <= width-bitMapHeight/) {
            cur_sections = (x + perWidth / ) / perWidth;
        }else{
            cur_sections = section_title.size()-;
        }
        invalidate();
    }  

    //设置监听
    public void setResponseOnTouch(ResponseOnTouch response){
        responseOnTouch = response;
    }  

    //设置进度
    public void setProgress(int progress){
        cur_sections = progress;
        invalidate();
    }
}</span>