Android在登入界面實作幹擾線驗證碼

畢設項目總算是告一段落，之前，有想過在登入界面添加驗證碼圖檔，但是，後來結合實際想了想，現在手機登入普遍追求的是簡潔，圖檔驗證碼會顯得多此一舉。是以，在我整個項目中并沒有用到圖檔驗證碼，但還是有必要知道怎麼在手機端實作圖檔驗證碼的。

首先，我們先來看看效果圖：

這個效果圖是最初寫登入界面時用的，我的畢設是做一個四川工商學院的畢業設計管理系統，是以用到了四川工商學院的圖示，設計風格也是根據圖示色系來的。當然，後面并沒有用到。。。

不多說廢話了，直奔主題，實作步驟如下：

1. login.xml布局檔案

這裡并沒有做過多的優化，是以代碼看上去會比較備援，大家可以自行定義style，優化代碼。

<?xml version="1.0" encoding="utf-8"?>
<!--登入界面,用LinearLayout-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--标題欄-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:orientation="vertical">
        <!--顯示頭像，記得加入id iv_head -->
        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="15dp"
            android:background="@drawable/logo_icon" />

        <TextView
            android:id="@+id/bs_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_gravity="bottom"
            android:padding="10dp"
            android:text="畢業論文管理系統"
            android:textColor="#b4594c"
            android:textSize="14sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="35dp"
        android:layout_marginRight="35dp"
        android:orientation="vertical">
        <!--輸入框-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_marginTop="35dp">

            <ImageView
                android:id="@+id/img_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:src="@drawable/username_icon" />

            <EditText
                android:id="@+id/et_user_name"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_gravity="center_horizontal"
                android:layout_toRightOf="@+id/img_username"
                android:gravity="center_vertical"
                android:hint="請輸入賬号"
                android:paddingLeft="8dp"
                android:singleLine="true"
                android:textColor="#000000"
                android:textColorHint="#a3a3a3"
                android:textSize="14sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/img_password"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:src="@drawable/password_icon" />

            <!--輸入框-->
            <EditText
                android:id="@+id/et_psw"
                android:layout_width="fill_parent"
                android:layout_height="48dp"
                android:layout_gravity="center_horizontal"
                android:layout_toRightOf="@+id/img_password"
                android:paddingLeft="8dp"
                android:gravity="center_vertical"
                android:hint="請輸入密碼"
                android:inputType="textPassword"
                android:singleLine="true"
                android:textColor="#000000"
                android:textColorHint="#a3a3a3"
                android:textSize="14sp"/>
        </LinearLayout>

        <!--按鈕-->
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="45dp"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/img_checkcode"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:src="@drawable/checkcode_icon" />

            <EditText
                android:id="@+id/et_phoneCodes"
                android:layout_width="34dp"
                android:layout_height="match_parent"
                android:layout_marginRight="10dp"
                android:layout_weight="1"
                android:background="@drawable/edit_bg_border"
                android:hint="請輸入右側驗證碼"
                android:padding="8dp"
                android:textSize="14sp" />
            <!--layout_weight="1" layout_width="0dp"實作均分效果-->
            <ImageView
                android:id="@+id/image"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_marginLeft="10dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:paddingLeft="8dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal">
            <CheckBox
                android:id="@+id/remember_password"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="記住密碼"
                android:textColor="#8B7355"
                />

            <TextView
                android:id="@+id/forget_password"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="5dp"
                android:text="忘記密碼"
                android:textColor="#4876FF"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="15dp">
            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="55dp"
                android:layout_marginLeft="8dp"
                android:layout_gravity="center_horizontal"
                android:text="登 錄"
                android:textColor="@android:color/white"
                android:background="@drawable/login_button_selector"
                android:textSize="18sp"/>
        </LinearLayout>
    </LinearLayout>

    <!--layout_weight="1" layout_width="0dp"實作均分效果-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/bs_info"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_gravity="bottom"
            android:padding="8dp"
            android:text="西華大學  版權所有"
            android:textColor="#a7a7a7"
            android:textSize="10sp" />
    </LinearLayout>
</LinearLayout>

還有，就是賬号、密碼和驗證碼的圖示，需要放在如題所示的檔案夾裡：

Android在登入界面實作幹擾線驗證碼

至于圖示，我是直接在阿裡巴巴矢量圖示庫裡面下載下傳的，需要的小夥伴自行去下載下傳，然後命名就好啦！

2. MainActivity.java

在MainActivity裡，首先是加載布局，然後調用工具類CodeUtils:

public class MainActivity extends AppCompatActivity {

    private Bitmap bitmap;
    private String code;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.login);

        //擷取需要展示圖檔驗證碼的ImageView
        final ImageView image = (ImageView) findViewById(R.id.image);
        //擷取工具類生成的圖檔驗證碼對象
        bitmap = CodeUtils.getInstance().createBitmap();
        //擷取目前圖檔驗證碼的對應内容用于校驗
        code = CodeUtils.getInstance().getCode();

        image.setImageBitmap(bitmap);
        image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bitmap = CodeUtils.getInstance().createBitmap();
                code = CodeUtils.getInstance().getCode();
                image.setImageBitmap(bitmap);
                Toast.makeText(MainActivity.this, code, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

3. CodeUtils工具類

public class CodeUtils {

    //随機碼集
    private static final char[] CHARS = {
            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
            'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
            'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    };

    private static CodeUtils mCodeUtils;
    private int mPaddingLeft, mPaddingTop;
    private StringBuilder mBuilder = new StringBuilder();
    private Random mRandom = new Random();

    //Default Settings
    private static final int DEFAULT_CODE_LENGTH = 4;//驗證碼的長度  這裡是4位
    private static final int DEFAULT_FONT_SIZE = 60;//字型大小
    private static final int DEFAULT_LINE_NUMBER = 3;//多少條幹擾線
    private static final int BASE_PADDING_LEFT = 20; //左邊距
    private static final int RANGE_PADDING_LEFT = 30;//左邊距範圍值
    private static final int BASE_PADDING_TOP = 70;//上邊距
    private static final int RANGE_PADDING_TOP = 15;//上邊距範圍值
    private static final int DEFAULT_WIDTH = 200;//預設寬度.圖檔的總寬
    private static final int DEFAULT_HEIGHT = 100;//預設高度.圖檔的總高
    private static final int DEFAULT_COLOR = Color.rgb(0xee, 0xee, 0xee);//預設背景顔色值

    private String code;

    public static CodeUtils getInstance() {
        if (mCodeUtils == null) {
            mCodeUtils = new CodeUtils();
        }
        return mCodeUtils;
    }

    //生成驗證碼圖檔
    public Bitmap createBitmap() {
        mPaddingLeft = 0; //每次生成驗證碼圖檔時初始化
        mPaddingTop = 0;

        Bitmap bitmap = Bitmap.createBitmap(DEFAULT_WIDTH, DEFAULT_HEIGHT, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        code = createCode();
        canvas.drawARGB(0, 0, 0, 0);
        canvas.drawColor(DEFAULT_COLOR);
        Paint paint = new Paint();
        paint.setTextSize(DEFAULT_FONT_SIZE);

        for (int i = 0; i < code.length(); i++) {
            randomTextStyle(paint);
            randomPadding();
            canvas.drawText(code.charAt(i) + "", mPaddingLeft, mPaddingTop, paint);
        }

        //幹擾線
        for (int i = 0; i < DEFAULT_LINE_NUMBER; i++) {
            drawLine(canvas, paint);
        }

        canvas.save();//儲存
        canvas.restore();
        return bitmap;
    }

    /**
     * 得到圖檔中的驗證碼字元串
     *
     * @return
     */
    public String getCode() {
        return code;
    }

    //生成驗證碼
    public String createCode() {
        mBuilder.delete(0, mBuilder.length()); //使用之前首先清空内容
        for (int i = 0; i < DEFAULT_CODE_LENGTH; i++) {
            mBuilder.append(CHARS[mRandom.nextInt(CHARS.length)]);
        }
        return mBuilder.toString();
    }

    //生成幹擾線
    private void drawLine(Canvas canvas, Paint paint) {
        int color = randomColor();
        int startX = mRandom.nextInt(DEFAULT_WIDTH);
        int startY = mRandom.nextInt(DEFAULT_HEIGHT);
        int stopX = mRandom.nextInt(DEFAULT_WIDTH);
        int stopY = mRandom.nextInt(DEFAULT_HEIGHT);
        paint.setStrokeWidth(1);
        paint.setColor(color);
        canvas.drawLine(startX, startY, stopX, stopY, paint);
    }

    //随機顔色
    private int randomColor() {
        mBuilder.delete(0, mBuilder.length()); //使用之前首先清空内容
        String haxString;
        for (int i = 0; i < 3; i++) {
            haxString = Integer.toHexString(mRandom.nextInt(0xEE));
            if (haxString.length() == 1) {
                haxString = "0" + haxString;
            }
            mBuilder.append(haxString);
        }
        return Color.parseColor("#" + mBuilder.toString());
    }

    //随機文本樣式
    private void randomTextStyle(Paint paint) {
        int color = randomColor();
        paint.setColor(color);
        paint.setFakeBoldText(mRandom.nextBoolean());  //true為粗體，false為非粗體
        float skewX = mRandom.nextInt(11) / 10;
        skewX = mRandom.nextBoolean() ? skewX : -skewX;
        paint.setTextSkewX(skewX); //float類型參數，負數表示右斜，整數左斜
        paint.setUnderlineText(mRandom.nextBoolean()); //true為下劃線，false為非下劃線
        paint.setStrikeThruText(mRandom.nextBoolean()); //true為删除線，false為非删除線
    }

    //随機間距
    private void randomPadding() {
        mPaddingLeft += BASE_PADDING_LEFT + mRandom.nextInt(RANGE_PADDING_LEFT);
        mPaddingTop = BASE_PADDING_TOP + mRandom.nextInt(RANGE_PADDING_TOP);
    }
}

到這裡，基本上也就實作了幹擾線驗證碼的效果，點選這裡也可下載下傳源碼哦！

Android在登入界面實作幹擾線驗證碼

繼續閱讀

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

新聞 | Mapbox 牽手阿裡，飛豬旅行上線六大城市地圖功能

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

[轉]iOS微信小視訊優化心得

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

android 主線程的相關問題

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯