自定义发送验证码按钮(没有实现发送验证码业务 只有UI效果)

自定义发送验证码按钮(没有实现发送验证码业务 只有UI效果)

大家都知道在一个项目的开发中，发送短信验证码是必不可少的业务，接下来给大家讲的就是如何自定义发送短信验证码的按钮。

第一步：新建一个java类:GetCode.java

package com.wj.imchatclient.commonmodle.view;import android.content.Context;import android.content.res.TypedArray;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.EditText;import android.widget.TextView;import com.wj.imchatclient.R;import com.wj.imchatclient.commonmodle.utils.L;import com.wj.imchatclient.commonmodle.utils.T;import com.wj.imchatclient.commonmodle.utils.ValueUtils;/** * 发送验证码的按钮 * Created by WJ on 2016/7/31. */public class GetCode extends TextView {    private final String TAG = "GetCode";//标签    private final int UPDATE_TEXT = 1;//更新文本内容的what    private final int UPDATE_STATUS = 2;//更新状态    private boolean canClick = false;//是否可以点击    private int delay_time = 10;//一次倒计时的总数s    private int time = delay_time;//正在倒计时的s    private OnGetCodeListener onGetCodeListener;    public void setOnGetCodeListener(OnGetCodeListener onGetCodeListener) {        this.onGetCodeListener = onGetCodeListener;    }    public interface OnGetCodeListener {        EditText getInput();        boolean getPhone();        void getCode();    }    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            if (msg.what == UPDATE_TEXT) {                //更新内容                setText(ValueUtils.getString(R.string.get_code) + "(" + time + ")");            } else if (msg.what == UPDATE_STATUS) {                //更新状态                setEnabled(canClick);                setText(ValueUtils.getString(R.string.get_code));            }        }    };    public GetCode(Context context) {        super(context);    }    public GetCode(Context context, AttributeSet attrs) {        super(context, attrs);        initData(context, attrs);    }    public GetCode(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initData(context, attrs);    }    public GetCode(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {        super(context, attrs, defStyleAttr, defStyleRes);        initData(context, attrs);    }    public void initData(Context context, AttributeSet attrs) {        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.GetCode);        delay_time = typedArray.getInteger(R.styleable.GetCode_delay_time, delay_time);        time = delay_time;        L.e(TAG, "正在加载属性=" + delay_time);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        L.e(TAG, "onTouchEvent==" + event.getAction());        if (event.getAction() == MotionEvent.ACTION_UP) {            //按下去了            if (onGetCodeListener != null) {                boolean isPhone = onGetCodeListener.getPhone();//发送验证码                L.e(TAG, "是不是手机号呢？" + isPhone);                if (isPhone) {                    //是手机号                    canClick = true;                } else {                    canClick = false;                    //设置input的焦点                    onGetCodeListener.getInput().setFocusable(true);                    onGetCodeListener.getInput().setFocusableInTouchMode(true);                    onGetCodeListener.getInput().requestFocus();                    onGetCodeListener.getInput().requestFocusFromTouch();                }            }            if (canClick) {                canClick = false;                setEnabled(canClick);                startTimeThread();//启动倒计时                if (onGetCodeListener != null) {                    onGetCodeListener.getCode();                }            } else {                T.show(getContext(), "请输入正确的手机号");            }            L.e(TAG, "canClick==" + canClick);        }        return super.onTouchEvent(event);    }    @Override    protected void onWindowVisibilityChanged(int visibility) {        super.onWindowVisibilityChanged(visibility);        L.e(TAG, "onWindowVisibilityChanged==" + visibility + "===" + (visibility == GONE));        if (visibility == GONE) {            //内容没了 停止线程减少不必要的资源            canClick = true;            setEnabled(canClick);        }    }    /**     * 倒计时线程     */    private void startTimeThread() {        new Thread(new Runnable() {            @Override            public void run() {                while (canClick == false) {                    time--;                    L.e(TAG, Thread.currentThread().getName() + "线程还在运行中======" + time);                    if (time == 0) {                        time = delay_time;                        canClick = true;                        handler.sendEmptyMessage(UPDATE_STATUS);                    } else {                        handler.sendEmptyMessage(UPDATE_TEXT);                    }                    try {                        Thread.sleep(1000);                    } catch (InterruptedException e) {                        e.printStackTrace();                    }                }            }        }).start();    }}

第二步：注意在以上的自定义View中使用了自定义的属性，所以需要在res/values/atts.xml中添加以下内容:

<declare-styleable name="GetCode">        <attr name="delay_time" format="integer"/></declare-styleable>

添加这个的作用是可以在布局中自定义倒计时的时间(单位:s)

第三步：在布局xml中使用GetCode自定义View(注意:笔者在这没有使用Button，而是使用了TextView 所以需要设置宽高来改变TextView的外观 具体为什么不用Button就是笔者习惯使用TextView了。)

<com.wj.imchatclient.commonmodle.view.GetCode            android:id="@+id/v_getcode"            android:layout_width="@dimen/dp100"            android:layout_height="@dimen/dp30"            android:layout_gravity="center_vertical"            android:layout_marginLeft="@dimen/dp5"            android:layout_marginRight="@dimen/dp5"            android:background="@drawable/bg_get_code"            android:clickable="true"            android:gravity="center"            android:text="@string/get_code"            android:textColor="@android:color/white"            app:delay_time="60"             />

以上属性笔者只讲一下

app:delay_time="60"android:background="@drawable/bg_get_code"

app:delay_time：就是刚刚说的自定义属性了 60表示倒计时长为60s

android:background：这里引用了drawable对象选择器,需要在res/drawable下新建一个xml命名为:bg_get_code

1新建 .bg_get_code.xml 代码如下： 选择器

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="false" android:drawable="@drawable/bg_get_code_false"/>    <item android:state_enabled="true" android:drawable="@drawable/bg_get_code_true"/></selector>

2.新建 bg_get_code_true.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="@dimen/dp5"/>    <solid android:color="@color/colorAccent"/></shape>

3.新建 bg_get_code_false.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="@dimen/dp5" />    <solid android:color="@color/c_9B9DB1" /></shape>

第四步：在Activity中获取GetCode实例 设置监听

  GetCode getCode= (GetCode) findViewById(R.id.v_getcode);  getCode.setOnGetCodeListener(this);

    @Override    public EditText getInput() {        return etMobile;    }    @Override    public boolean getPhone() {        return RegularUtils.phone(etMobile.getText().toString());    }    @Override    public void getCode() {        //发送验证码        T.show(this, "正在发送验证码到-" + etMobile.getText().toString());    }

getInput：返回输入框的实例EditText。

getPhone：作用是返回一个是不是手机号的boolean值，true是手机号 会调用getCode方法去实现发送验证码业务，false不是手机号 不会调用getCode方法。

getCode：实现发送验证码业务。