最近项目有用到价格标图,就自已定义了一个,现在分享出来,供大家学习了解,好了废话不多说,直接看图吧!

gif_anime.gif

源代码请看:

    package single.electronic.sz.com.pircetagdemo;

    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.util.Log;
    import android.view.MotionEvent;
    import android.view.View;



    /**
     * Created by men on 2017/11/30.
     * 邮箱：mensheng1990@163.com
     */

    public class SlidingPriceBarView extends View {

private Bitmap gray_bg;//灰色价格标
private Bitmap green_bg;//绿色价格标
private Bitmap greatRound;//大圆
private Bitmap priceNumber;//左侧价格底图
private int price_h;//高价
private int price_d;//低价
//价格区间
private final int price_0 = 0;
private final int price_200 = 200;
private final int price_500 = 500;
private final int price_1000 = 1000;
private final int price_10000 = 10000;
private int bg_width;
private int bg_height;
private float scale;//压缩比例
private int danHeight;//分成四段的长度
private float half_round;
private Paint mPaint;
private float greatRoundX;
private float y_h;
private float y_d;
private int PRICE_PADDING = 15;
private float bg_x;
private boolean isUpTouched=false;
private boolean isDownTouched=false;

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

private void init(Context context, AttributeSet attrs) {
    gray_bg = BitmapFactory.decodeResource(getResources(), R.drawable.axis_before);
    green_bg = BitmapFactory.decodeResource(getResources(), R.drawable.axis_after);
    greatRound = BitmapFactory.decodeResource(getResources(), R.drawable.btn);
    priceNumber = BitmapFactory.decodeResource(getResources(), R.drawable.bg_number);
    //得到自定义价格
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SlidingPriceBarView);
    price_h = typedArray.getInteger(R.styleable.SlidingPriceBarView_price_h, 1000);
    price_d = typedArray.getInteger(R.styleable.SlidingPriceBarView_price_d, 200);
    mPaint = new Paint();
    mPaint.setColor(Color.BLACK);

    typedArray.recycle();

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    bg_width = gray_bg.getWidth();
    bg_height = gray_bg.getHeight();
    //根据父类给出的尺寸测量出
    int measureHeight = (heightMode == MeasureSpec.EXACTLY) ? heightSize : bg_height;
    measureHeight = Math.max(measureHeight, heightSize);
    int measureWidth = measureHeight * 2 / 3;
    scale = measureHeight / (float) bg_height;
    //分成四段的长度
    danHeight = (bg_height - bg_width) / 4;
    //小圆的半径
    half_round = bg_height * (1 - 0.95f) / 2;
    //设置自己测量的宽高
    setMeasuredDimension(measureWidth, measureHeight);

}


/**
 * @param canvas
 */
@Override
protected void onDraw(Canvas canvas) {
    //保存当前的画布
    canvas.save();
    //对画布进行缩放
    canvas.scale(scale, scale);
    //绘制灰色底图
    bg_x = (this.getWidth() / scale - gray_bg.getWidth()) / 2;
    canvas.drawBitmap(gray_bg, bg_x, 0, mPaint);
    //绘制右侧的数字
    mPaint.setTextSize(20 / scale);
    String[] number = new String[]{
            "不限",
            String.valueOf(price_1000),
            String.valueOf(price_500),
            String.valueOf(price_200),
            String.valueOf(price_0)
    };
    for (int i = 0; i < number.length; i++) {
        int startX = (int) (bg_x * 5 / 4);
        int endX = (int) (i * danHeight + bg_width / 2 - (mPaint.ascent() + mPaint.descent()) / 2);
        canvas.drawText(number[i].toString(), startX, endX, mPaint);
    }
    //画大圆(上下圆)
    greatRoundX = (this.getWidth() / scale - greatRound.getWidth()) / 2;
    y_h = getBtnYLocationByPrice(price_h);
    canvas.drawBitmap(greatRound,greatRoundX,y_h-greatRound.getHeight()/2,mPaint);
    y_d = getBtnYLocationByPrice(price_d);
   canvas.drawBitmap(greatRound,greatRoundX,y_d-greatRound.getHeight()/2,mPaint);
    //画中间的绿色部分
    Rect src=new Rect(0,(int)(y_h+greatRound.getHeight()/2),(int)green_bg.getWidth(),(int)y_d-greatRound.getHeight()/2);
    Rect dst=new Rect((int) bg_x,(int)y_h+greatRound.getHeight()/2,(int)(bg_x +green_bg.getWidth()),(int)y_d-greatRound.getHeight()/2);
    canvas.drawBitmap(green_bg,src,dst,mPaint);


    //画左侧的图标
    Rect rect_h= getRectByMidLine(y_h);
    canvas.drawBitmap(priceNumber,null,rect_h,mPaint);
    Rect rect_d= getRectByMidLine(y_d);
    canvas.drawBitmap(priceNumber,null,rect_d,mPaint);
    //画左侧的数字
    //上边文本坐标
    float text_u_x = (3*rect_h.width()/4 - mPaint.measureText(String.valueOf(price_h)))/2;
    float text_u_y = rect_h.top - mPaint.ascent() + PRICE_PADDING;
    //下边文字坐标
    float text_d_x = (3*rect_d.width()/4 - mPaint.measureText(String.valueOf(price_d)))/2;
    float text_d_y = rect_d.top - mPaint.ascent() + PRICE_PADDING;
    canvas.drawText(String.valueOf(price_h), text_u_x, text_u_y, mPaint);
    canvas.drawText(String.valueOf(price_d), text_d_x, text_d_y, mPaint);
    //恢复之前的保存的画布
    canvas.restore();


    super.onDraw(canvas);
}

private Rect getRectByMidLine(float y) {
    Rect mRect =new Rect();
    mRect.left=0;
    mRect.right=(int)greatRoundX;
    float text_h = mPaint.descent() - mPaint.ascent();
    mRect.top = (int)(y-text_h/2) - PRICE_PADDING ;
    mRect.bottom = (int)(y+text_h/2) + PRICE_PADDING ;
    return mRect;
}


private float getBtnYLocationByPrice(int price) {
    Log.i("ms","price:"+price);
    float y=0;
    if (price < price_0) {
        price = price_0;
    }
    if (price>price_10000){
        price=price_10000;
    }
    if (price>=price_0&&price<price_200){//0-200
        y=bg_height-danHeight*(price)/(price_200-price_0)-half_round;
    }else if (price>=price_200&&price<price_500){//200-500
     y=bg_height-danHeight*(price-price_200)/(price_500-price_200)-danHeight-half_round;
    }else if(price>=price_500&&price<price_1000){//500-1000
     y=bg_height-danHeight*(price-price_500)/(price_1000-price_500)-2*danHeight-half_round;
    }else{//1000-10000
    y=danHeight*(price_10000-price)/(price_10000-price_1000)+half_round;
    }
    return y;
}

private int getPriceByPosition(float y) {

    float half_height = this.getHeight()*(1-0.95f)/2;
    int price;
    if(y<half_height){
        //y>10000
        price = price_10000;
    }else if(y>=half_height&&y<half_height+danHeight){
        //1000~10000
        price = (int) (price_10000 - (price_10000-price_1000)*(y-half_height)/danHeight);
    }else if(y>half_height+danHeight&&y<half_height+2*danHeight){
        //500~1000
        price = (int) (price_1000 - (price_1000-price_500)*(y-half_height-danHeight)/danHeight);
    }else if(y>half_height+2*danHeight&&y<half_height+3*danHeight){
        //200~500
        price = (int) (price_500 - (price_500-price_200)*(y-half_height-2*danHeight)/danHeight);
    }else{
        //0~200
        price = (int) (price_200 - (price_200-price_0)*(y-half_height-3*danHeight)/danHeight);
    }
    if(price<price_0){
        price = price_0;
    }
    return price;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:
            float downX=event.getX()/scale;
            float downY=event.getY()/scale;
            if (downX>greatRoundX&&downX<greatRoundX+greatRound.getWidth()){
                if (downY>y_h-greatRound.getHeight()/2&&downY<=y_h+greatRound.getHeight()/2){
                    isUpTouched = true;
                    isDownTouched = false;
                }
                if (downY>y_d-greatRound.getHeight()/2&& downY<=y_d+greatRound.getHeight()/2){
                    isUpTouched = false;
                    isDownTouched = true;
                }

            }
            break;
        case MotionEvent.ACTION_MOVE:
            float y2=event.getY()/scale;
            if (isUpTouched){
                price_h=getPriceByPosition(y2);
                if (price_h<=price_d){
                    price_h=price_d;
                }
            }
            if (isDownTouched){
                price_d=getPriceByPosition(y2);
                if (isDownTouched){
                    if (price_d>price_h){
                        price_d=price_h;
                    }
                }
            }
            //开始重新绘制
        invalidate();


            break;
        case MotionEvent.ACTION_UP:
            isDownTouched=false;
            isUpTouched=false;
            break;
    }

    return true;
}

}

从上面的源代码可以看出,重写的onMeasure方法,测量子类的宽高,然后就是绘制,关键的地方我都写了注释,一看就明白!

本人做android开发多年,以后会陆续更新关于android高级UI,NDK开发,性能优化等文章,更多请关注我的微信公众号:谢谢!

android的那点事.jpg