android自定义View之刻度尺MnScaleBar

在Q群里看到有同学需要自定义刻度尺如图：

1. 需求：

1）指针固定在屏幕中间；

2）左右可以滑动直尺；

3）返回选择的刻度值；

2. 需要的知识点：

1）继承View重写onDraw()方法

2）重写onTouchEvent()方法

3）Scroller滑动帮助类

4）OnScrollListener回调方法

3. 代码如下：

package cc.mnbase.view.progress.bar;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.Scroller;

/**
 * User: 山野书生(1203596603@qq.com)
 * Date: 2015-11-30
 * Time: 14:29
 * Version 1.0
 */

public class MnScaleBar extends View {

    private Context mContext;

    private Rect mRect;

    private int max = 200; //最大刻度
    private int mCountScale; //滑动的总刻度

    private int screenWidth = 720; //默认屏幕分辨率

    private int mScaleMargin = 15; //刻度间距
    private int mScaleHeight = 20; //刻度线的高度
    private int mScaleMaxHeight = mScaleHeight*2; //整刻度线高度

    private int mRectWidth = max * mScaleMargin; //总宽度
    private int mRectHeight = 150; //高度

    private Scroller mScroller;
    private int mScrollLastX;

    private int mTempScale = screenWidth/mScaleMargin/2; //判断滑动方向
    private int mScreenMidCountScale = screenWidth/mScaleMargin/2; //中间刻度

    private OnScrollListener onScrollListener;

    private String tag = MnScaleBar.class.getSimpleName();

    public MnScaleBar(Context context) {
        this(context, null);
    }

    public MnScaleBar(Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public MnScaleBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        screenWidth = getPhoneW(mContext);

        mTempScale = screenWidth/mScaleMargin/2; //判断滑动方向
        mScreenMidCountScale = screenWidth/mScaleMargin/2; //中间刻度

        mScroller = new Scroller(mContext);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //设置LayoutParams
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(mRectWidth, mRectHeight);
        this.setLayoutParams(lp);
        //相对位置坐标
        mRect = new Rect(0, 0, mRectWidth, mRectHeight);
        //画笔
        Paint mPaint = new Paint();
        mPaint.setColor(Color.GRAY);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);


        canvas.drawRect(mRect, mPaint);

        onDrawScale(canvas); //画刻度
        onDrawPointer(canvas); //画指针

        super.onDraw(canvas);
    }

    /**
     * 画刻度
     * */
    private void onDrawScale(Canvas canvas){
        if(canvas == null) return;
        Paint mPaint = new Paint();
        mPaint.setColor(Color.GRAY);
        mPaint.setTextAlign(Paint.Align.CENTER); //文字居中
        mPaint.setTextSize(20);
        for(int i=0; i<max; i++){
            if(i!=0 && i!=max){
                if(i%10==0){ //整值
                    canvas.drawLine(i*mScaleMargin, mRectHeight, i*mScaleMargin, mRectHeight-mScaleMaxHeight, mPaint);
                    //整值文字
                    canvas.drawText(String.valueOf(i), i*mScaleMargin, mRectHeight-mScaleMaxHeight-10, mPaint);
                } else {
                    canvas.drawLine(i*mScaleMargin, mRectHeight, i*mScaleMargin, mRectHeight-mScaleHeight, mPaint);
                }
            }
        }
    }

    /**
     * 画指针
     * */
    private void onDrawPointer(Canvas canvas){
        if(canvas == null) return;
        Paint mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.setTextSize(20);
        //每一屏幕刻度的个数/2
        int countScale = screenWidth/mScaleMargin/2;
        //根据滑动的距离，计算指针的位置【指针始终位于屏幕中间】
        int finalX =  mScroller.getFinalX();
        //滑动的刻度
        int tmpCountScale = (int) Math.rint((double)finalX/(double)mScaleMargin); //四舍五入取整
        //总刻度
        mCountScale = tmpCountScale+countScale;
        if(onScrollListener!=null){ //回调方法
            onScrollListener.onScrollScale(mCountScale);
        }
        canvas.drawLine(countScale * mScaleMargin + finalX, mRectHeight,
                countScale * mScaleMargin + finalX, mRectHeight - mScaleMaxHeight, mPaint);
        canvas.drawText(String.valueOf(mCountScale), countScale * mScaleMargin + finalX, mRectHeight - mScaleMaxHeight - 10, mPaint);
    }

    @Override
    public void computeScroll() {
        if(mScroller.computeScrollOffset()){
            scrollTo(mScroller.getCurrX(), 0);
            postInvalidate();
        }
        super.computeScroll();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                if(mScroller != null && !mScroller.isFinished()){
                    mScroller.abortAnimation();
                }
                mScrollLastX = x;
                return true;
            case MotionEvent.ACTION_MOVE:
                int dataX = mScrollLastX - x;
                if(mCountScale-mTempScale<0){ //向右边滑动
                    if(mCountScale<0) {
                        if(dataX<0) //禁止继续向右滑动
                        return super.onTouchEvent(event);
                    }
                } else if(mCountScale-mTempScale>0){ //向左边滑动
                    if (mCountScale>max) {
                        if(dataX>0) //禁止继续向左滑动
                        return super.onTouchEvent(event);
                    }
                }
                smoothScrollBy(dataX, 0);
                mScrollLastX = x;
                postInvalidate();
                mTempScale = mCountScale;
                return true;
            case MotionEvent.ACTION_UP:
                if(mCountScale<0) mCountScale=0;
                if(mCountScale>max) mCountScale=max;
                int finalX = (mCountScale-mScreenMidCountScale) * mScaleMargin;
                mScroller.setFinalX(finalX); //纠正指针位置
                postInvalidate();
                return true;
        }
        return super.onTouchEvent(event);
    }


    public void smoothScrollBy(int dx, int dy){
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy);
    }

    public void smoothScrollTo(int fx, int fy){
        int dx = fx - mScroller.getFinalX();
        int dy = fy - mScroller.getFinalY();
        smoothScrollBy(dx, dy);
    }

    public void setOnScrollListener(OnScrollListener onScrollListener) {
        this.onScrollListener = onScrollListener;
    }

    public interface OnScrollListener{
        void onScrollScale(int scale);
    }

    /**
     * 获取手机分辨率--W
     * */
    public static int getPhoneW(Context context){
        DisplayMetrics dm = new DisplayMetrics();
        ((Activity)context).getWindowManager().getDefaultDisplay().getMetrics(dm);
        int disW = dm.widthPixels;
        return disW;
    }

}

布局代码：

<?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:orientation="vertical"
    >

    <cc.mnbase.view.progress.bar.MnScaleBar
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        android:id="@+id/scale_bar"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text"
        />

</LinearLayout>

Activity代码：

package cc.mnbase;

import android.os.Bundle;
import android.widget.TextView;

import cc.mn.BaseActivity;
import cc.mnbase.view.progress.bar.MnScaleBar;

/**
 * User: 山野书生(1203596603@qq.com)
 * Date: 2015-11-30
 * Time: 14:44
 * Version 1.0
 */

public class MnScaleBarActivity extends BaseActivity{

    private TextView text;
    private MnScaleBar scale_bar;

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


        scale_bar = (MnScaleBar)findViewById(R.id.scale_bar);
        text = (TextView)findViewById(R.id.text);

        scale_bar.setOnScrollListener(new MnScaleBar.OnScrollListener() {
            @Override
            public void onScrollScale(int scale) {
                text.setText("身高："+scale+"cm");
            }
        });
    }
}

运行结果如图：