There are pictures

Analog electronic watch clock digital display, suitable for clock, digital electronic style display and other scenarios.

It can be noted that this control restores the residual shadow effect of the digital display on the electronic watch. When displaying a specific number, the shape of the number “8” can still be vaguely seen.

This control is also a good choice as a working clock on large, full-screen phones.

First, design ideas

Simulation of real life in the ancient era electronic watch design restore. For more realistic electronic watches, also provides pixel grid drawing

Doesn’t it smell even better?

Second, implementation method

2.1 the UI and dismantling

2.1.1 Shape analysis

As you can see, the control is composed of the same base shape by placing it in different positions

2.1.2 Digital classification

All numbers are made up of the shape of the number “8”, and different parts are painted with different colors to present different numbers

2.2 the UI map

2.2.1 Draw basic shapes

Defines the global mPath variable used to draw the base shape, encapsulating a method for drawing the base shape

Private void drawUnit(Canvas Canvas, int w, int w, int w, int w, int w, int w) int h) { if (mPath == null) { mPath = new Path(); // padding int d = 5; mPath.moveTo(d, h / 2); mPath.lineTo(h / 2 + d, 0); mPath.lineTo(w - h / 2 - d, 0); mPath.lineTo(w - d, h / 2); mPath.lineTo(w - h / 2 - d, h); mPath.lineTo(h / 2 + d, h); mPath.lineTo(d, h / 2); mPath.close(); } canvas.drawPath(mPath, unitPaint); //todo: draw grid}Copy the code

2.2.2 Drawing a Number 8

In order to show the digital residual effect, all the numbers are made up of the shape of the number “8”, daub different colors in different positions to show different numbers. After drawing the basic shape, rotate and translate the basic shape to form the figure “8” shape.

/** * private void drawNum(canvas, Int num) {/ / draw the first unitPaint setColor (NumColors. GetTargetNumColors (num). Colors [0]). canvas.translate(uintH / 2, 0); drawUnit(canvas, uintW, uintH); / / draw the second unitPaint. SetColor (NumColors. GetTargetNumColors (num). Colors [1]). canvas.translate(uintW + uintH / 2, 0); canvas.rotate(90); canvas.translate(uintH / 2, 0); drawUnit(canvas, uintW, uintH); / / draw the third unitPaint. SetColor (NumColors. GetTargetNumColors (num). Colors [2]). canvas.translate(uintW, 0); drawUnit(canvas, uintW, uintH); / / draw the fourth unitPaint. SetColor (NumColors. GetTargetNumColors (num). Colors [3]). canvas.translate(uintW + uintH / 2, 0); canvas.rotate(90); canvas.translate(uintH / 2, 0); drawUnit(canvas, uintW, uintH); / / draw for the fifth unitPaint. SetColor (NumColors. GetTargetNumColors (num). Colors [4]); canvas.translate(uintW + uintH / 2, 0); canvas.rotate(90); canvas.translate(uintH / 2, 0); drawUnit(canvas, uintW, uintH); / / draw the sixth unitPaint. SetColor (NumColors. GetTargetNumColors (num). Colors [5]); canvas.translate(uintW, 0); drawUnit(canvas, uintW, uintH); / / draw the seventh unitPaint. SetColor (NumColors. GetTargetNumColors (num). Colors [6]); canvas.rotate(90); canvas.translate(uintH / 2, -uintH / 2); drawUnit(canvas, uintW, uintH); }Copy the code

2.2.3 Enumeration of numbers

With the skeleton of the number “8” shape, different numbers can be drawn by defining different enumerations of numbers. At the same time, the definition of residual color and digital display color, convenient customization expansion in the future.

/ / @colorInt public static int uintBgColor = color.parsecolor ("# e8e8E8 "); / / @colorInt public static int selectedColor = color.dkgray; UintSelectedColor, uintSelectedColor, uintSelectedColor uintSelectedColor, uintSelectedColor, uintSelectedColor, uintBgColor}), NUM_1(new int[]{uintBgColor, uintSelectedColor, uintSelectedColor, uintBgColor, uintBgColor, uintBgColor, uintBgColor}), NUM_2(new int[]{uintSelectedColor, uintSelectedColor, uintBgColor, uintSelectedColor, uintSelectedColor, uintBgColor, uintSelectedColor}), NUM_3(new int[]{uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor, uintBgColor, uintBgColor, uintSelectedColor}), NUM_4(new int[]{uintBgColor, uintSelectedColor, uintSelectedColor, uintBgColor, uintBgColor, uintSelectedColor, uintSelectedColor}), NUM_5(new int[]{uintSelectedColor, uintBgColor, uintSelectedColor, uintSelectedColor, uintBgColor, uintSelectedColor, uintSelectedColor}), NUM_6(new int[]{uintSelectedColor, uintBgColor, uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor}), NUM_7(new int[]{uintSelectedColor, uintSelectedColor, uintSelectedColor, uintBgColor, uintBgColor, uintBgColor, uintBgColor}), NUM_8(new int[]{uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor}), NUM_9(new int[]{uintSelectedColor, uintSelectedColor, uintSelectedColor, uintSelectedColor, uintBgColor, uintSelectedColor, uintSelectedColor}); /** * color array */ int colors[]; NumColors(int[] colors) { this.colors = colors; } public static NumColors getTargetNumColors(int num) { switch (num) { case 0: return NUM_0; case 1: return NUM_1; case 2: return NUM_2; case 3: return NUM_3; case 4: return NUM_4; case 5: return NUM_5; case 6: return NUM_6; case 7: return NUM_7; case 8: return NUM_8; case 9: return NUM_9; default: return NUM_0; }}}Copy the code

2.3 Grid drawing

Raster painting uses the overlay method used in Paint. The idea is to draw the basic shapes, then draw the raster on the canvas that is cropped to the basic shapes, and finally eliminate the overlapping raster content

2.3.1 Introduction to the Superposition method of Drawing

SetXfermode is set, and parameters are selected through the Porterduff. Mode enumeration.

2.3.2 Code drawing

Once the overlay mode is determined, cut out the canvas of the basic shape and draw the grid. Note that the restore method is called to facilitate the placement and drawing of other base shape positions.

If (isDrawGrid) {canvas.save(); canvas.clipPath(mPath); canvas.drawPath(mPath, unitPaint); unitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN)); canvas.drawPath(getGridPath(w, h), unitPaint); unitPaint.setXfermode(null); canvas.restore(); } else { canvas.drawPath(mPath, unitPaint); }Copy the code

Final effect

Three, afterword.

All UI interactive controls should be based on real-world abstractions and improvements, integrating usability, aesthetics, and convenience.

Control design and implementation from the industry direction. Control design may go through three phases:

The first stage: the tools in real life are abstracted to evolve into different UIs for users;

The second stage: based on the abstract derivation, add more suitable for mobile phone screen plane interaction mode;

Stage 3: Return to reality, all the controls become a part of real life, it may be on your sofa, or in your bathroom, completely integrated into real life without any obvious obtrusive.

Control address is in gitee

Dot me dot me dot me dot me

Now that I see this, it’s time to flash my official id.