rendering





RulerViewGif.gif

Properties that can be set

<attr name="rulerHeight" format="dimension" /> <! <attr name="rulerToResultgap" format="dimension" /> <! <attr name="scaleGap" format="dimension" /> <! --> <attr name="scaleCount" format="integer" /> <! - the number of scale - > < attr name = "firstScale format =" float "/" > <! Attr name="maxScale" format=" INTEGER "/> <! --> <attr name="minScale" format="integer" /> <! - minimum scale - > < attr name = "bgColor format =" "color" / > <! <attr name="smallScaleColor" format="color" /> <! <attr name="midScaleColor" format="color" /> <! <attr name="largeScaleColor" format="color" /> <! <attr name="scaleNumColor" format="color" /> <! <attr name="resultNumColor" format="color" /> <! - the font color - > < attr name = "unit" format = "string" / > <! - unit -- -- > < attr name = "unitColor format =" "color" / > <! <attr name="smallScaleStroke" format="dimension" /> <! <attr name="midScaleStroke" format="dimension" /> <! Attr name="largeScaleStroke" format="dimension" /> <! <attr name="resultNumTextSize" format="dimension" /> <! <attr name="scaleNumTextSize" format="dimension" /> <! <attr name="unitTextSize" format="dimension" /> <! <attr name="showScaleResult" format=" Boolean "/> <! <attr name="isBgRoundRect" format=" Boolean "/> <! -- Background rounded -->Copy the code

use

The compile ‘com. Making. SuperSp: RulerView: v1.2’

The source address

Implementation approach

  • Initialize the brush and any other parameters required
  • rewriteonMeasuer()Determine the size of the ruler
  • rewriteonDraw()Draw the static ruler and set some parameters to variables that need to be changed when sliding
  • rewriteonTouchEvent()Handle slide, add slide rate monitorVelocityTrackerAs well as inertial sliding and lifting the finger to land on the scale of the required property animationValueAnimator

The implementation process

measurement

Control height = the height of the ruler + the height of the result value + the height of the ruler from the result value Control width = screen width or fixed width

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

        switch (heightModule) {
            case MeasureSpec.AT_MOST:
                height = rulerHeight + (showScaleResult ? resultNumRect.height() : 0) + rulerToResultgap * 2 + getPaddingTop() + getPaddingBottom();
                break;
            case MeasureSpec.UNSPECIFIED:
            case MeasureSpec.EXACTLY:
                height = heightSize + getPaddingTop() + getPaddingBottom();
                break;
        }

        width = widthSize + getPaddingLeft() + getPaddingRight();

        setMeasuredDimension(width, height);

    }
Copy the code

Draw a static ruler

  • Draw the background

    drawRect()
  • Drawing the ruler is the most complex step in drawing controls. You need to consider how to select the initial scale by default, where to slide the ruler when you lift your finger, calculate the current scale and so on.

When drawing a sliding view, the original idea is to draw the entire content at once and then use Canasp.cliprect () to cut out the invisible area. However, if the content area is large, such as drawing 1000 content, the for loop will be executed 1000 times without sliding once. Therefore, another way of thinking, only draw the current screen visible area content, sliding, through continuous refresh to simulate sliding, so as to achieve the effect of fake…

rulerRight = 0; While (rulerRight < width) {if (num1 % scaleCount == 0) {if ((moveX >= 0 && rulerRight < moveX-scaleGap) | | width / 2 - rulerRight < = getWhichScalMovex (maxScale + 1) - moveX) {/ / remove the border around} else {canvas. DrawLine (0, 0, 0, midScaleHeight, midScalePaint); scaleNumPaint.getTextBounds(num1 / scaleGap + minScale + "", 0, (num1 / scaleGap + minScale + "").length(), scaleNumRect); canvas.drawText(num1 / scaleCount + minScale + "", -scaleNumRect.width() / 2, lagScaleHeight + (rulerHeight - lagScaleHeight) / 2 + scaleNumRect.height(), scaleNumPaint); } } else { if ((moveX >= 0 && rulerRight < moveX) || width / 2 - rulerRight < getWhichScalMovex(maxScale) - moveX) { Else {canvas. DrawLine (0, 0, 0, smallScaleHeight, smallScalePaint); } } ++num1; rulerRight += scaleGap; canvas.translate(scaleGap, 0); } canvas.restore(); canvas.drawLine(width / 2, 0, width / 2, lagScaleHeight, lagScalePaint);Copy the code

Draw the result

drawText()

Add result callback

One is the scale that falls when the finger is lifted, and one is the scale that is continuously produced when the finger is slid

public interface OnChooseResulterListener {
        void onEndResult(String result);
        void onScrollResult(String result);
    }
Copy the code

Finally, post the usage and address

The compile ‘com. Making. SuperSp: RulerView: v1.2’

The source address

HenCoder “copy write cool interface” activity — the original is also see here feeling and write…