rendering
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
- rewrite
onMeasuer()
Determine the size of the ruler - rewrite
onDraw()
Draw the static ruler and set some parameters to variables that need to be changed when sliding - rewrite
onTouchEvent()
Handle slide, add slide rate monitorVelocityTracker
As 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…