验证码颜色字母数字线条圆点位置都随机，点击切换验证码

Posted 2020-08-21 oooohuhu

才刚刚开始写这种自定义控件，但是发现验证码完全可以不用自定义控件，自定义控件好像麻烦点，下面就来介绍了使用bitmap的形式显示验证码

这个起初我也不会，都是看大神们弄的， 我也就添了点东西，让验证码更多样，哈哈，废话不多说，上交代码了

第一步 ，创建一个类

  1 public class CodeBitmap {
  2 
  3 
  4     //随机数数组
  5     private static final char[] CHARS = {
  6             \'2\', \'3\', \'4\', \'5\', \'6\', \'7\', \'8\', \'9\',
  7             \'a\', \'b\', \'c\', \'d\', \'e\', \'f\', \'g\', \'h\', \'j\', \'k\', \'m\',
  8             \'n\', \'p\', \'q\', \'r\', \'s\', \'t\', \'u\', \'v\', \'w\', \'x\', \'y\', \'z\',
  9             \'A\', \'B\', \'C\', \'D\', \'E\', \'F\', \'G\', \'H\', \'I\', \'J\', \'K\', \'L\', \'M\',
 10             \'N\', \'P\', \'Q\', \'R\', \'S\', \'T\', \'U\', \'V\', \'W\', \'X\', \'Y\', \'Z\'
 11     };
 12     //padding值
 13     private static final int BASE_PADDING_LEFT = 10, RANGE_PADDING_LEFT = 15, BASE_PADDING_TOP = 30, RANGE_PADDING_TOP = 20;
 14     //random word space and pading_top
 15     private int base_padding_left = BASE_PADDING_LEFT, range_padding_left = RANGE_PADDING_LEFT,
 16             base_padding_top = BASE_PADDING_TOP, range_padding_top = RANGE_PADDING_TOP;
 17     private Random random = new Random();
 18     private String returncode;
 19     private int painsize=40;
 20 //线条数
 21     int line_number=5;
 22     private int padding_left, padding_top;
 23     private static CodeBitmap bmpCode;
 24     public static CodeBitmap getInstance() {
 25         if(bmpCode == null)
 26             bmpCode = new CodeBitmap();
 27         return bmpCode;
 28     }
 29     //验证码图片
 30     public Bitmap cratebitmap(int width,int height) {
 31         padding_left = 0;
 32         Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
 33         Canvas canvas = new Canvas(bitmap);
 34         //创建验证码
 35         returncode = crateCode();
 36         canvas.drawColor(Color.WHITE);
 37 
 38         Paint paint=new Paint();
 39         paint.setAntiAlias(true);
 40         paint.setTextSize(painsize);
 41 
 42         //画验证码
 43         for (int i=0;i<returncode.length();i++) {
 44             randomTextStyle(paint);
 45             randomPadding();
 46             canvas.drawText(returncode.charAt(i) + "", padding_left, padding_top, paint);
 47         }
 48         //画线条
 49         for (int i = 0; i < line_number; i++) {
 50             drawLine(canvas, paint,width,height);
 51         }
 52 
 53         //画小圆点
 54         for (int i=0;i<20;i++){
 55            drawpoint(canvas,paint,width,height);
 56         }
 57         canvas.save( Canvas.ALL_SAVE_FLAG );//保存
 58         canvas.restore();//
 59         return bitmap;
 60     }
 61 
 62     //画干扰线
 63     private void drawLine(Canvas canvas, Paint paint,int width,int height) {
 64         int color = randomColor();
 65         int startX = random.nextInt(width);
 66         int startY = random.nextInt(height);
 67         int stopX = random.nextInt(width);
 68         int stopY = random.nextInt(height);
 69         paint.setStrokeWidth(1);
 70         paint.setColor(color);
 71         canvas.drawLine(startX, startY, stopX, stopY, paint);
 72     }
 73     //画圆dian
 74     private void drawpoint(Canvas canvas, Paint paint,int width,int height){
 75         int color = randomColor();
 76         paint.setStrokeWidth(1);
 77         paint.setColor(color);
 78         int[] rang=getPoint(height,width);
 79         canvas.drawCircle(rang[0], rang[1],random.nextInt(5),paint);
 80     }
 81     // 随机产生点的圆心点坐标
 82     public static int[] getPoint(int height, int width) {
 83         int[] tempCheckNum = { 0, 0, 0, 0 };
 84         tempCheckNum[0] = (int) (Math.random() * width);
 85         tempCheckNum[1] = (int) (Math.random() * height);
 86         return tempCheckNum;
 87     }
 88     //随机生成文字样式，颜色，粗细，倾斜度
 89     private void randomTextStyle(Paint paint) {
 90         int color = randomColor();
 91         paint.setColor(color);
 92         paint.setFakeBoldText(random.nextBoolean());  //true为粗体，false为非粗体
 93         float skewX = random.nextInt(11) / 10;
 94         skewX = random.nextBoolean() ? skewX : -skewX;
 95         paint.setTextSkewX(skewX); //float类型参数，负数表示右斜，整数左斜
 96         //paint.setUnderlineText(true); //true为下划线，false为非下划线
 97         //paint.setStrikeThruText(true); //true为删除线，false为非删除线
 98     }
 99     //随机生成颜色
100     private int randomColor() {
101         return randomColor(1);
102     }
103 
104     private int randomColor(int rate) {
105         int red = random.nextInt(256) / rate;
106         int green = random.nextInt(256) / rate;
107         int blue = random.nextInt(256) / rate;
108         return Color.rgb(red, green, blue);
109     }
110     //随机生成padding值
111     private void randomPadding() {
112         padding_left += base_padding_left + random.nextInt(range_padding_left);
113         padding_top = base_padding_top + random.nextInt(range_padding_top);
114     }
115     //生成验证码
116     private String crateCode() {
117         StringBuffer returnbf = new StringBuffer();
118         for (int i = 0; i < 4; i++) {
119             returnbf.append(CHARS[random.nextInt(CHARS.length)]);
120         }
121         return returnbf.toString();
122     }
123 
124     //获取验证码的值
125     public String getcode(){
126         return returncode;
127     }
128 }

第二步，调取类中cratebitmap的方法，显示图片就可以啦

先看mainactivity布局

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="match_parent"
 4     android:orientation="vertical" >
 5 
 6     <LinearLayout
 7         android:layout_width="match_parent"
 8         android:layout_height="wrap_content"
 9         android:layout_marginLeft="15dp"
10         android:layout_marginRight="15dp"
11         android:layout_marginTop="20dp"
12         android:orientation="horizontal" >
13         <LinearLayout
14             android:layout_width="wrap_content"
15             android:layout_height="40dp"
16             >
17             <EditText
18                 android:id="@+id/et_phoneCodes"
19                 android:layout_width="match_parent"
20                 android:layout_height="match_parent"
21                 android:layout_marginLeft="10dp"
22                 android:layout_marginRight="10dp"
23                 android:background="@null"
24                 android:hint="请输入右侧验证码" />
25         </LinearLayout>
26 
27         <ImageView
28             android:id="@+id/iv_showCode"
29             android:layout_width="120dp"
30             android:layout_marginLeft="10dp"
31             android:layout_height="60dp" />
32 
33     </LinearLayout>
34 
35     <Button
36         android:id="@+id/but_forgetpass_toSetCodes"
37         android:layout_width="match_parent"
38         android:layout_height="wrap_content"
39         android:layout_margin="20dp"
40         android:text="验        证"
41       />
42 
43 </LinearLayout>

 

再看看mainActivity

 1 public class MainActivity extends AppCompatActivity {
 2 
 3     private Button button;
 4     private EditText dode;
 5     private ImageView iv_showCode;
 6     private String realcode;
 7     //设置图片大小
 8     private static final int DEFAULT_WIDTH = 120, DEFAULT_HEIGHT = 60;
 9     private int width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT;
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.activity_main);
14         initview();
15     }
16     private void initview(){
17         button = (Button) findViewById(R.id.but_forgetpass_toSetCodes);
18         dode = (EditText)findViewById(R.id.et_phoneCodes);
19         iv_showCode = (ImageView)findViewById(R.id.iv_showCode);
20         iv_showCode.setImageBitmap(CodeBitmap.getInstance().cratebitmap(width,height));
21         realcode = CodeBitmap.getInstance().getcode().toLowerCase();
22         iv_showCode.setOnClickListener(new View.OnClickListener() {
23             @Override
24             public void onClick(View v) {
25                 iv_showCode.setImageBitmap(CodeBitmap.getInstance().cratebitmap(width,height));
26                 realcode = CodeBitmap.getInstance().getcode().toLowerCase();
27             }
28         });
29         button.setOnClickListener(new View.OnClickListener() {
30             @Override
31             public void onClick(View v) {
32                 String editcode=dode.getText().toString().trim();
33                 if (editcode.equals(realcode)){
34                     Toast.makeText(MainActivity.this,"验证码输入正确！",Toast.LENGTH_SHORT).show();
35                 }else {
36                     Toast.makeText(MainActivity.this,"验证码错误，请重新输入！",Toast.LENGTH_SHORT).show();
37                 }
38             }
39         });
40     }
41 }