Android Split Wheel Series The method of writing Verification code control _android

Objective

First look at the effect

What's the good? Don't worry, I'll teach you step-by-step.

Summary of the knowledge points used:

The use of 1.Canvas and pint, we use it to draw dots, lines, words

Basic usage of 2.View

In fact, to do this thing is still very simple, the overall thinking steps are as follows:

1. Prepare a canvas.

2. Draw a few slashes inside the canvas.

3. Draw 100 dots inside the canvas.

4. Randomly generate 4 digits, then draw in canvas.

It's so simple, it's nothing profound.

Start writing code

1. First we have to rewrite the view

Now that we're going to draw the captcha, we need to prepare the brush (paint) and artboard (canvas) code as follows:

/** * Created by Yuyuanda on 2016-10-10. * * public class Checkview extends View implements view.onclicklistener{private context mcontext; private Paint mpaint; /Brush public Checkview (context, AttributeSet attrs) {Super (context, attrs); mcontext = context; Initpaint ();//Set point
Hit time, when itself receives clicks should update the number (that is, re-change the authentication code number) Setonclicklistener (this); }/** * Initialize Paint (brush)/private void Initpaint () {mpaint = new Paint (); Mpaint.setantialias (true);/Plus anti-aliasing Mpaint.settextsi
Ze (config.text_size);//Set Font size mpaint.setstrokewidth (3); line width mpaint.setcolor (config.textcolor);//Set Font color color//Set bold font
typeface font = Typeface.create (Typeface.sans_serif, typeface.bold);
Mpaint.settypeface (font); @Override public void OnClick (View v) {//update in this area, changing a set of Authenticode characters} @Override protected void OnDraw (Canvas Canvas) {canvas.dr 
Awcolor (Config.color)//First draw a background color}}/** * Configuration field */class config{//DOT set public static final int point_num = 100;//number of segments set
public static final int line_num = 2; Set Authenticode background color public static final int color =Color.rgb (247,230,220);
Random character length length public static int text_length = 4;
Set Authenticode font size public static int text_size = 40;
Verify code font color public static final int textcolor = COLOR.RGB (255,101,1); }

Well, in the code above, we customize a Checkview class and prepare the following materials:

1. In order to update the data we set the Click event Setonclicklistener (this);

The 2.Config class is for us to prepare the configuration information,

3.new out a paint (brush) and add related parameters.

4. The artboard canvas (in the OnDraw () method) is prepared, and we will draw something in the OnDraw () method below.

2. Next we begin to draw lines, dots, and words.

The drawing line code is as follows:

private void DrawLine (Canvas Canvas) {
for (int i = 0; i < Config.line_num; i++) {//According to the number of lines in Line_num, you can configure
/underline
int[] line = Getline (GetHeight (), getwidth ());
Canvas.drawline (Line[0], line[1], line[2], line[3], mpaint);
}
public static int[] getline (int height, int width) {
int[] Tempchecknum = {0, 0, 0, 0};
for (int i = 0; i < 4; i + 2) {
tempchecknum[i] = (int) (Math.random () * width);
Tempchecknum[i + 1] = (int) (Math.random () * height);
}
return tempchecknum;
}

Now let's talk about the Canvas.drawline () method. First look at the source code:

public void DrawLine (float startx, float starty, float stopx, float stopy, Paint Paint) {
}

Parameter description:

StartX: The x-coordinate of the starting endpoint.

Starty: The y-coordinate of the starting endpoint.

STOPX: Terminates the X coordinate of the endpoint.

Stopy: Terminates the y-coordinate of the endpoint.

Paint: The brush used to draw a line

See, in fact, the line will need to paint and 2 starting point. In the Getline () method, the For loop actually loops 2 times, and the Math.random () value range is: 0.0~1.0, so it can be seen that math.random () * Width/heigth randomly takes 4 points in view as the 2-point value, Then Canvas.drawline () draw it.

The point code is as follows:

private void Drawcircle (Canvas Canvas) {
//Draw small dot
int[] point;
for (int i = 0; i < Config.point_num i++) {//depending on the number of point_num points, you can configure
/Draw Point
= GetPoint (GetHeight (), Getwi DTH ());
Canvas.drawcircle (Point[0], point[1], 1, mpaint);
}
/**
* Random generating point of the center point coordinates
* @param height of the incoming Checkview value
* @param width of the values passed into Checkview
* @return *
* Public
Static int[] GetPoint (int height, int width) {
int[] Tempchecknum = {0, 0, 0, 0};
TEMPCHECKNUM[0] = (int) (Math.random () * width);
TEMPCHECKNUM[1] = (int) (Math.random () * height);
return tempchecknum;
}

Now let's talk about the Canvas.drawcircle () method

Basic syntax

public void Drawcircle (float cx, float CY, float radius, Paint Paint)

Parameter description

CX: The x-coordinate of the center of the circle.

Cy: the y-coordinate of the center.

Radius: The radius of the circle.

Paint: The brush that is used when drawing.

Read the basic grammar above, we should understand that the circle only need to draw the center, radius and paint on the line. In the GetPoint () method, we still use the Math.random () * Width/height method to randomly take 2 dots in the view as the center of the circle.

Draw the text code as follows:

Let's say the last step of the text. This is a bit more troublesome, we step by step, first draw text need to prepare the following things:

1. Take 4 digit digit code, this say with Math.random () *10 can

2. How to draw the y-coordinate of each text (you have to control the y-coordinate, if the painting view outside, it is embarrassing)

3. Each text must have a corresponding interval (that is, the x-coordinate of each text)

One for me to implement:

Take 4 digit code:

/**
* Generates random numbers
/public static int[] Getchecknum () {
int[] tempchecknum = new int[config.text_length];// Text_length is generated by several numbers for
(int i = 0; i < config.text_length; i++) {
tempchecknum[i] = (int) (Math.random () * 10); I don't say you understand.
}
return tempchecknum;//generates 4 digits in the array returns
}

Control y-coordinate:

/**
* Calculation of the plot Y-point of the verification code *
@param height value of incoming checkview
* @return
/public
static int Getypos (int Height) {
int temppositoin = (int) (Math.random () * height);
Can't let it draw too much, if the Y coordinate <config.text_size, the words will be covered if
(Temppositoin < config.text_size) {
Temppositoin + = Config.text_size;
} else if (Temppositoin > (height-config.text_size)) {//certainly cannot be drawn too temppositoin-
= config.text_size;
} 
return temppositoin;
}

Control the x-coordinate of each text

Looking at the graph, we divide the view flat into 5 points, then the X coordinate of the first word is: getwidth ()/5; The X coordinate of the second word is getwidth ()/5+getwidth ()/5; So, is this the 4 word that is divided equally in this view? All right, all right. Start writing the code as follows:

private void Drawnum (Canvas Canvas) {
int dx = getwidth ()/5;
for (int i = 0; i < 4; i++) {//Draw the text on the validation control
canvas.drawtext ("" + checknum[i], DX, Getpositon (GetHeight ()), mpaint); C19/>DX + = GetWidth ()/5;
}
}

Let's explain the basic usage of the Canvas.drawtext () method:

DrawText (String text, float x, floaty, Paint Paint)

Argument one: String type of text,
Parameter two: x coordinates,
Parameter three: y coordinates,
Parameter four: Paint object.

3. Click Refresh Problem

Congratulations, you see here, we have the last question, how to click the Refresh UI? Simply refresh the captcha and UI in the OnClick () method, and the code is as follows:

@Override public
void OnClick (View v) {
checknum = Checkutil.getchecknum ();//checknum to pay the initial value
//update in this area, Re-changing a set of Captcha character
invalidate ();
}

4. The last Seal of evil

Okay, so here we are, we're nearing the end, this code looks very messy, so we need to write a tool class that encapsulates these methods with the tool class Checkview workpiece:

Public int[] Getchecknum ();
Public int[] Getlinepos (int height, int width);
Public int[] Getcirclepoint (int height, int width);
public int Getpositon (int height);

The above is a small set up to introduce the Android series of the code to remove the control method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!