自定义view，垂直seekbar

话不多说，公司接到的项目中有个效果是上下拉的窗帘，本来是用seekbar旋转90°做的，但是seekbar的属性太多，而且seekbar的滑块会直接显示最底层的颜色（我也不知道为什么）， 所有就写了一个自定义view，其实就是一个垂直的seekbar，实现一些简单的操作，例如设置进度，设置前景色和背景色、滑块图片。

首先先看看这个最终效果是什么样的：

然后我们再分析一下这个效果的构成：

1.最底层是白色的。

2.上一层是绿色的（管他什么绿，反正就是绿）。

    3.在上层颜色的底部中间有一个滑块。

分析之后，我们就可以开始考虑怎么写了，下面直接上代码。

<declare-styleable name="WindowBarView">

        <!--bgcolor:背景颜色-->
        <!--cendiagram:中心原点的图片-->
        <!--foreground:前景颜色-->
        <!--maxprogress:最大进度-->
        <!--nowrogress:当前进度-->

        <attr name="bgcolor" format="color" />
        <attr name="cendiagram" format="color|reference" />
        <attr name="foreground" format="color" />
        <attr name="maxprogress" format="integer" />
        <attr name="nowrogress" format="integer" />

    </declare-styleable>

因为需要给控件设置一些属性，我们就先在attrs文件中加入属性（没有这个文件就先创建一个）。

然后就是java文件了，我们让这个自定义view集成自view，代码是酱婶儿的。

public class WindowBarView extends View {

    private int progress = 0;
    private int maxprogress = 0;
    private int nowrogress = 0;
    private int bgcolor = 0;
    private int Foreground = 0;     //窗帘下拉的覆盖的颜色
    private Paint paint;
    private Paint foregrodpaint;
    private Drawable cendiagram = null;     //中心圆点的图片
    private Bitmap cendiagrambp = null;

    // 获得图片的宽高
    int widthbm = 0;
    int heightbm = 0;
    // 取得想要缩放的matrix参数
    Matrix matrix;
    Bitmap newbm;

    private float mPreX, mPreY;

    int width, height;
    Rect rect;
    Rect rectforegroud;

    public setonBarTouthnListener touthnListener = null;

    public interface setonBarTouthnListener {
        public void GetProgress(int progress);
    }

    public void getonBarProgressListener(setonBarTouthnListener touthnListener) {
        this.touthnListener = touthnListener;
    }

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

    public WindowBarView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    public WindowBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    public WindowBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        paint = new Paint();
        foregrodpaint = new Paint();
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.WindowBarView);
        Foreground = array.getInteger(R.styleable.WindowBarView_foreground, Color.WHITE);
        cendiagram = array.getDrawable(R.styleable.WindowBarView_cendiagram);
        maxprogress = array.getInteger(R.styleable.WindowBarView_maxprogress, 100);
        nowrogress = array.getInteger(R.styleable.WindowBarView_nowrogress, 0);
        bgcolor = array.getInteger(R.styleable.WindowBarView_bgcolor, Color.WHITE);
        setProgress(array.getInteger(R.styleable.WindowBarView_nowrogress, nowrogress));
        array.recycle();
        cendiagrambp = drawableToBitmap(cendiagram);

        // 获得图片的宽高
        widthbm = cendiagrambp.getWidth();
        heightbm = cendiagrambp.getHeight();
        // 设置想要的大小
        int newWidth = 100;
        int newHeight = 100;
        // 计算缩放比例
        float scaleWidth = ((float) newWidth) / widthbm;
        float scaleHeight = ((float) newHeight) / heightbm;
        // 取得想要缩放的matrix参数
        matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        // 得到新的图片
        newbm = Bitmap.createBitmap(cendiagrambp, 0,
                0, widthbm, heightbm, matrix, true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int wideSize = MeasureSpec.getSize(widthMeasureSpec);
        int wideMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (wideMode == MeasureSpec.EXACTLY) { //精确值 或matchParent
            width = wideSize;
        } else {
            width = getPaddingLeft() + getPaddingRight();
            if (wideMode == MeasureSpec.AT_MOST) {
                width = Math.min(width, wideSize);
            }

        }

        if (heightMode == MeasureSpec.EXACTLY) { //精确值 或matchParent
            height = heightSize;
        } else {
            height = getPaddingTop() + getPaddingBottom();
            if (heightMode == MeasureSpec.AT_MOST) {
                height = Math.min(height, heightSize);
            }

        }
        setMeasuredDimension(width, height);
        rect = new Rect(0, 0, width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        rectforegroud = new Rect(0, 0, width, (int) mPreY);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(bgcolor);
        paint.setAntiAlias(true);
        canvas.drawRect(rect, paint);
        foregrodpaint.setStyle(Paint.Style.FILL);
        foregrodpaint.setAntiAlias(true);
        foregrodpaint.setColor(Foreground);
        canvas.drawRect(rectforegroud, foregrodpaint);
        canvas.drawBitmap(newbm, width / 2 - newbm.getWidth() / 2, (int) mPreY - newbm.getHeight() / 2, paint);     //绘制滑块
    }

    /**
     * 获取当前位置
     */
    public int getProgress() {
        if(mPreY==0){
            progress = (int) ((float) nowrogress / (float) maxprogress * 100);  //当前进度
        }else{
            progress = Math.round(mPreY / height*(float) maxprogress);  //当前进度
        }
        return progress;
    }

    /**
     * 设置当前进度
     */
    public synchronized void setProgress(final int nowrogress) {
        if(height != 0){
            mPreY = ((int) ((float) nowrogress / (float) maxprogress * height));
            invalidate();
        }else{
            new Thread() {
                @Override
                public void run() {
                    super.run();
                    try {
                        Thread.sleep(100);
                        if (height != 0) {
                            mPreY = ((int) ((float) nowrogress / (float) maxprogress * height));
                            postInvalidate();
                        }
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }.start();
        }
    }

    /**
     * 判断，如果滑动的位置大于控件的高度，说明此事滑块已经滑到下面
     * 如果小于0说明在上面
     *
     * @param event
     * @return
     */

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPreX = event.getX();
                mPreY = event.getY();
                touthnListener.GetProgress((int) (mPreY / height * maxprogress));
                invalidate();
                return true;
            case MotionEvent.ACTION_MOVE:
                mPreY = event.getY();
                if (mPreY < 0) {
                    mPreY = 0;
                } else if (mPreY > height) {
                    mPreY = height;
                } else {
                    mPreY = event.getY() + 8;
                }
                touthnListener.GetProgress((int) (mPreY / height * maxprogress));
                invalidate();
                break;
        }
        return super.onTouchEvent(event);
    }

    /**
     * drawable转bitmap
     *
     * @param drawable
     * @return
     */
    public static Bitmap drawableToBitmap(Drawable drawable) {

        Bitmap bitmap = Bitmap.createBitmap(

                drawable.getIntrinsicWidth(),

                drawable.getIntrinsicHeight(),

                drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888

                        : Bitmap.Config.RGB_565);

        Canvas canvas = new Canvas(bitmap);

        //canvas.setBitmap(bitmap);

        drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

        drawable.draw(canvas);

        return bitmap;

    }
}

主要就是onDraw中的内容。

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        rectforegroud = new Rect(0, 0, width, (int) mPreY);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(bgcolor);
        paint.setAntiAlias(true);
        canvas.drawRect(rect, paint);
        foregrodpaint.setStyle(Paint.Style.FILL);
        foregrodpaint.setAntiAlias(true);
        foregrodpaint.setColor(Foreground);
        canvas.drawRect(rectforegroud, foregrodpaint);
        canvas.drawBitmap(newbm, width / 2 - newbm.getWidth() / 2, (int) mPreY - newbm.getHeight() / 2, paint);     //绘制滑块
    }

这个控件我将它分为了三层，这样我就需要在画布上画三次，第一次，绘制最底层颜色，第二次，绘制上一层颜色，第三次绘制滑块，这样才能得到想要的效果。

下面就是使用方法。

<com.tianer.dooya.weight.WindowBarView
                    android:id="@+id/timeline"
                    android:layout_width="200dp"
                    android:layout_height="300dp"
                    app:bgcolor="@color/white"
                    app:foreground="@color/windowbar"
                    app:cendiagram="@drawable/bgg"
                    app:maxprogress="100"/>

最后，上个效果图。

上个源码地址

https://github.com/dzghxs/WindowBarView点击打开链接