最近項(xiàng)目有用到價(jià)格標(biāo)圖,就自已定義了一個(gè),現(xiàn)在分享出來,供大家學(xué)習(xí)了解,好了廢話不多說,直接看圖吧!

gif_anime.gif

源代碼請(qǐng)看:

    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;//灰色價(jià)格標(biāo)
private Bitmap green_bg;//綠色價(jià)格標(biāo)
private Bitmap greatRound;//大圓
private Bitmap priceNumber;//左側(cè)價(jià)格底圖
private int price_h;//高價(jià)
private int price_d;//低價(jià)
//價(jià)格區(qū)間
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;//分成四段的長(zhǎng)度
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);
    //得到自定義價(jià)格
    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();
    //根據(jù)父類給出的尺寸測(cè)量出
    int measureHeight = (heightMode == MeasureSpec.EXACTLY) ? heightSize : bg_height;
    measureHeight = Math.max(measureHeight, heightSize);
    int measureWidth = measureHeight * 2 / 3;
    scale = measureHeight / (float) bg_height;
    //分成四段的長(zhǎng)度
    danHeight = (bg_height - bg_width) / 4;
    //小圓的半徑
    half_round = bg_height * (1 - 0.95f) / 2;
    //設(shè)置自己測(cè)量的寬高
    setMeasuredDimension(measureWidth, measureHeight);

}


/**
 * @param canvas
 */
@Override
protected void onDraw(Canvas canvas) {
    //保存當(dāng)前的畫布
    canvas.save();
    //對(duì)畫布進(jìn)行縮放
    canvas.scale(scale, scale);
    //繪制灰色底圖
    bg_x = (this.getWidth() / scale - gray_bg.getWidth()) / 2;
    canvas.drawBitmap(gray_bg, bg_x, 0, mPaint);
    //繪制右側(cè)的數(shù)字
    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);


    //畫左側(cè)的圖標(biāo)
    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);
    //畫左側(cè)的數(shù)字
    //上邊文本坐標(biāo)
    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;
    //下邊文字坐標(biāo)
    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);
    //恢復(fù)之前的保存的畫布
    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方法,測(cè)量子類的寬高,然后就是繪制,關(guān)鍵的地方我都寫了注釋,一看就明白!

本人做android開發(fā)多年,以后會(huì)陸續(xù)更新關(guān)于android高級(jí)UI,NDK開發(fā),性能優(yōu)化等文章,更多請(qǐng)關(guān)注我的微信公眾號(hào):謝謝!

android的那點(diǎn)事.jpg