Android开发日常-编写一个登录界面
看完这篇文章你可以学到什么知识呢？
- 自定义组合控件
- 封装view，只暴露接口，模块独立，设计思想。
- 会用到正则表达式
- 如何禁止EditText在获取到焦点的时候拉起键盘
- 学会登录中获取验证码的倒计时效果
- EditText的内容添加与删除
效果图
分析
我们为了做得好一点，首先需要分析一下！其实对于UI来说，也是可以封装起来的，比如说，我们这里面涉及到了手机号码的检查
涉及到验证码的检查，涉及到是否同意协议来控制按钮是否可用，这些动作我们都可以隐藏起来。把这些所有看得见的，都当成一个View，这个View具备这些功能。
然后适用者暴露接口：1、获取验证码按钮被点击了；2、协议内容被点击了；3、登录按钮被点击了。
除此之外，应该没有其他动作给使用者使用了。
问题点：
1、因为这个界面是平板的界面，我们自己写了一个键盘输入，所以当我们的输入框获取到焦点的时候，不弹出键盘出来
2、做一个倒计时的效果
3、获取到焦点的edittext内容输入
实现
我们要实现这个类，要用一个很大的坑来填充这些内容，所以我们要写一个LoginUiView，继承自RelativeLayout。这个时候，需要实现一些方法:
有没有注意到，前两个构造函数都是this，表示调用自己的构造函数。不同的参数而已。这样子就可以确保不管是哪种方式创建这个类的，都会进入第三个类，也就是同一个入口。
这个类的全部代码如下：
package cn.com.sunofbeaches.loginkeypaddemo;
import android.content.Context;
import android.text.Editable;
import android.text.InputType;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.lang.reflect.Method;
public class LoginUiView extends RelativeLayout implements LoginKeyboard.KeyPadActionListener {
//手机号码的规则
public static final String REGEX_MOBILE_EXACT = "^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$";
//输入框
private EditText mPhoneNumInputBox;
//验证码输入框
private EditText mVerifyCodeBox;
//登录键盘
private LoginKeyboard mInputKeypad;
//服务条款的文字
private TextView mItemTextView;
//同意协议的选择框
private CheckBox mAgreeCheckBox;
//确定按钮
private TextView mCommitBtn;
private ViewActionCallback mViewActionCallback = null;
private TextView mGetVerifyCodeBtn;
private boolean isVerifyCodeOk = false;
private boolean isPhoneNumberOk = false;
//默认已经选中的
private boolean isItemAgreementOk = true;
public LoginUiView(Context context) {
this(context, null);
}
public LoginUiView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoginUiView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
LayoutInflater.from(context).inflate(R.layout.login_view, this, true);
initView();
disableShowInput();
initListener();
}
/**
* 设置监听
*/
private void initListener() {
mInputKeypad.setKeyPadActionListener(this);
mItemTextView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
//这个是跳转到协议部分
mViewActionCallback.onItemTipsClick();
}
});
/**
* 选择框的点击
*/
mAgreeCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
//如果是没有选中，确定按钮
mCommitBtn.setEnabled(b);
isItemAgreementOk = b;
updateCommitBtnState();
}
});
/**
* 提交数据，登录
*/
mCommitBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
if (mViewActionCallback != null) {
String phoneNum = mPhoneNumInputBox.getText().toString().trim();
String verifyCode = mVerifyCodeBox.getText().toString().trim();
mViewActionCallback.onCommitClick(phoneNum, verifyCode);
}
}
});
mPhoneNumInputBox.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
//当内容改变的时候，如果手机号码不正确，获取验证码不能点击
//对数据进行检查
String phoneNum = mPhoneNumInputBox.getText().toString().trim();
boolean isMatch = phoneNum.matches(REGEX_MOBILE_EXACT);
mGetVerifyCodeBtn.setEnabled(isMatch);
isPhoneNumberOk = isMatch;
updateCommitBtnState();
}
@Override
public void afterTextChanged(Editable editable) {
}
});
/**
* 设置验证码输入框的内容变化监听
*/
mVerifyCodeBox.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
@Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
//当这个输入以后，去检查登录按钮是否可以点击
if (mVerifyCodeBox.getText().toString().length() >= 4) {
isVerifyCodeOk = true;
} else {
isVerifyCodeOk = false;
}
updateCommitBtnState();
}
@Override
public void afterTextChanged(Editable editable) {
}
});
/**
* 获取验证码
*/
mGetVerifyCodeBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
//点击以后，直接不能点，然后开始倒计时，倒计时完成以后
// 要判断手机号码是否正确，如果不正确，则不能点击
mGetVerifyCodeBtn.setEnabled(false);
mSecond = 60;
mVerifyCodeBox.requestFocus();
startVerifyCodeBtnTextUpdate();
if (mViewActionCallback != null) {
mViewActionCallback.onGetVerifyCodeClick();
}
}
});
}
/**
* 这个方法处理获取验证码的倒计时。
*/
private int mSecond;
private void startVerifyCodeBtnTextUpdate() {
post(new Runnable() {
@Override
public void run() {
if (mSecond >= 0) {
mGetVerifyCodeBtn.setText(mSecond + "S");
mSecond--;
postDelayed(this, 1000);
} else {
String phoneNumber = mPhoneNumInputBox.getText().toString().trim();
boolean matches = phoneNumber.matches(REGEX_MOBILE_EXACT);
mGetVerifyCodeBtn.setText(R.string.get_verify_code_text);
mGetVerifyCodeBtn.setEnabled(matches);
mSecond = 60;
}
}
});
}
private void updateCommitBtnState() {
//满足三个条件，这个按钮才可以适用
//1、手机号码匹配
//2、验证码匹配
//3、协议已经勾选同意
mCommitBtn.setEnabled(isPhoneNumberOk && isVerifyCodeOk && isItemAgreementOk);
}
private void initView() {
mAgreeCheckBox = (CheckBox) this.findViewById(R.id.agree_check_box);
isItemAgreementOk = mAgreeCheckBox.isChecked();
mPhoneNumInputBox = (EditText) this.findViewById(R.id.phone_number_input_box);
mVerifyCodeBox = (EditText) this.findViewById(R.id.verify_code_input_box);
mInputKeypad = (LoginKeyboard) this.findViewById(R.id.input_keypad_view);
mItemTextView = (TextView) this.findViewById(R.id.use_tips_text);
mCommitBtn = (TextView) this.findViewById(R.id.commit_button);
mGetVerifyCodeBtn = (TextView) this.findViewById(R.id.get_verify_code_btn);
}
private void disableShowInput() {
if (android.os.Build.VERSION.SDK_INT <= 10) {
mPhoneNumInputBox.setInputType(InputType.TYPE_NULL);
mVerifyCodeBox.setInputType(InputType.TYPE_NULL);
} else {
Class<EditText> cls = EditText.class;
Method method;
try {
method = cls.getMethod("setShowSoftInputOnFocus", boolean.class);
method.setAccessible(true);
method.invoke(mPhoneNumInputBox, false);
method.invoke(mVerifyCodeBox, false);
} catch (Exception e) {
e.printStackTrace();
}
try {
method = cls.getMethod("setSoftInputShownOnFocus", boolean.class);
method.setAccessible(true);
method.invoke(mPhoneNumInputBox, false);
method.invoke(mVerifyCodeBox, false);
} catch (Exception e) {
e.printStackTrace();
}
}
}
@Override
public void onNumberClick(View view, String number) {
//数字键盘被点击了
if (getFocusEditTextView() != null) {
int index = getFocusEditTextView().getSelectionStart();
Editable editable = getFocusEditTextView().getText();
editable.insert(index, number);
}
}
private EditText getFocusEditTextView() {
View focusView = findFocus();
if (focusView instanceof EditText) {
return (EditText) focusView;
}
return null;
}
@Override
public void onDelClick(View view) {
deleteContent();
}
/**
* 删除内容..
*/
private void deleteContent() {
if (getFocusEditTextView() != null) {
int index = getFocusEditTextView().getSelectionStart();
if (index > 0) {
Editable editable = getFocusEditTextView().getText();
editable.delete(index - 1, index);
}
}
}
@Override
public boolean onDelLongPress(View view) {
//循环删除
post(new Runnable() {
@Override
public void run() {
deleteContent();
if (getFocusEditTextView() != null && getFocusEditTextView().getSelectionStart() > 0) {
postDelayed(this, 50);
}
}
});
return true;
}
public void setViewActionCallback(ViewActionCallback callback) {
this.mViewActionCallback = callback;
}
/**
* 界面的操作动作
*/
public interface ViewActionCallback {
//确定按钮被点击了
void onCommitClick(String phoneNum, String verifyCode);
//获取验证码被点击了
void onGetVerifyCodeClick();
//打开协议文档被点击了
void onItemTipsClick();
}
}
代码讲解：
一开始，我们把view绑定到这个坑里头，也就是这句代码：
LayoutInflater.from(context).inflate(R.layout.auto_map_login_view, this, true);
inflate，后面两个是重点，this，表示当前这个容器，也就是我们创建的LoginUiView，true表示绑定到这个容器里。所以，这行代码的意思是把这个布局文件里的内容，加载进来，放到这个viewGrop里面，也就是放到LoginUiView里面。
键盘的输入等会再说，接着我们是初始化事件：
我们有什么事件呢？
1、监听两个输入框内容的变化，第一个输入框，只有匹配了手机号码的规则，获取验证码才可以适用，否则是disable，也就是不能点击，除非手机号码是对的；监听第二个框框是用于判断有没有输入验证码，如果没有输入，那么，登录按钮不可以点击。
2、获取验证码这个按钮，点击以后要disable，并且开始倒计时，调用暴露的接口。
3、checkbox这个被点击以后，更新登录按钮是否可以点击，其实登录按钮要满足三个条件才可以点击：手机号码是对的，验证码有输入，同意适用协议。
4、登录按钮不需要做太多的动作，因为前面的动作已经做了相关的检查了。
布局文件的代码如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/login_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="42px"
android:orientation="horizontal">
<ImageView
android:layout_width="50px"
android:layout_height="50px"
android:src="@mipmap/icon_user"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="26px"
android:gravity="center_vertical"
android:text="@string/sunofbeach_account_login_text"
android:textColor="#FD7541"
android:textSize="32px"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/login_title"
android:layout_marginTop="50px"
android:orientation="horizontal"
android:paddingLeft="40px">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="@+id/phone_number_input_box"
android:layout_width="430px"
android:layout_height="60px"
android:background="@drawable/shape_login_input_bg"
android:drawableLeft="@mipmap/icon_phone_number"
android:drawablePadding="14px"
android:hint="@string/phone_number_input_hint_text"
android:maxLength="11"
android:paddingLeft="34px"
android:textColor="@color/white"
android:textSize="22px"/>
<RelativeLayout
android:layout_width="430px"
android:layout_height="60px"
android:layout_marginTop="16px">
<EditText
android:id="@+id/verify_code_input_box"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/shape_login_input_bg"
android:drawableLeft="@mipmap/icon_password"
android:drawablePadding="14px"
android:hint="@string/please_input_verify_code_text"
android:maxLength="8"
android:paddingLeft="34px"
android:textColor="@color/white"
android:textSize="22px"/>
<TextView
android:id="@+id/get_verify_code_btn"
android:layout_width="110px"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="34px"
android:enabled="false"
android:gravity="center"
android:text="@string/get_verify_code_text"
android:textColor="@drawable/selector_text_state_color"
android:textSize="22px"/>
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_marginBottom="10px"
android:layout_marginRight="9px"
android:layout_marginTop="10dp"
android:layout_toLeftOf="@id/get_verify_code_btn"
android:background="@drawable/line_bg"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="44px"
android:gravity="center_vertical">
<CheckBox
android:id="@+id/agree_check_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="22px"
android:button="@drawable/selector_checkbox_button"
android:checked="true"
android:padding="2px"/>
<TextView
android:id="@+id/use_tips_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10px"
android:text="@string/user_tbox_text"
android:textColor="#FD7541"
android:textSize="20px"/>
</LinearLayout>
<TextView
android:id="@+id/commit_button"
android:layout_width="match_parent"
android:layout_height="60px"
android:layout_marginTop="18px"
android:background="@drawable/selector_commit_button_bg"
android:enabled="false"
android:gravity="center"
android:text="@string/commit_text"
android:textColor="@color/white"
android:textSize="24px"/>
</LinearLayout>
<cn.com.sunofbeaches.loginkeypaddemo.LoginKeyboard
android:id="@+id/input_keypad_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="42px"/>
</LinearLayout>
</RelativeLayout>
效果是这样子的：
这里面有一个键盘，它的代码其实是个view来的，跟上面一个，编写一个组合控件。
代码如下：
package cn.com.sunofbeaches.loginkeypaddemo;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class LoginKeyboard extends LinearLayout implements View.OnClickListener {
private ImageView mDelBtn;
private KeyPadActionListener mKeyPadActionListener = null;
public LoginKeyboard(Context context) {
this(context, null);
}
public LoginKeyboard(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoginKeyboard(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
View.inflate(context, R.layout.include_login_keyboard, this);
initView();
initListener();
}
/**
* 找到各个控件
*/
private void initView() {
this.findViewById(R.id.key_pad_number_1).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_2).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_3).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_4).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_5).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_6).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_7).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_8).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_9).setOnClickListener(this);
this.findViewById(R.id.key_pad_number_0).setOnClickListener(this);
mDelBtn = (ImageView) this.findViewById(R.id.key_pad_delete);
}
private void initListener() {
mDelBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
//把这个回调出去
if (mKeyPadActionListener != null) {
//处理删除按钮被点击了
mKeyPadActionListener.onDelClick(view);
}
}
});
mDelBtn.setOnLongClickListener(new OnLongClickListener() {
@Override
public boolean onLongClick(View view) {
//这个是删除按钮被长按了
if (mKeyPadActionListener != null) {
//处理删除按钮被点击了
return mKeyPadActionListener.onDelLongPress(view);
}
return false;
}
});
}
@Override
public void onClick(View view) {
//数字按钮被点击了,把所点击的内容传到外面去
if (mKeyPadActionListener != null) {
String number = ((TextView) view).getText().toString();
mKeyPadActionListener.onNumberClick(view, number);
}
}
/**
* 设置按钮的点击事件
*
* @param listener
*/
public void setKeyPadActionListener(KeyPadActionListener listener) {
this.mKeyPadActionListener = listener;
}
/**
* 这个接口用于通知点击事件
* 包括数字键盘被点击了，删除键盘被点击了
* 删除按钮被长按了。
*/
public interface KeyPadActionListener {
void onNumberClick(View view, String number);
void onDelClick(View view);
boolean onDelLongPress(View view);
}
}
其他的drawable文件：
从压缩包里下载吧，这里面就不在给大看这些不太重要的文件了。
使用
使用很简单，直接把登录的View的全路径名称，复制到要适用的地方即可。
接着，我们在Activity的代码里找到这个View，给它设置相关的接口实现即可。
package cn.com.sunofbeaches.loginkeypaddemo;
import android.app.Activity;
import android.os.Bundle;
public class LoginActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
LoginUiView loginView = this.findViewById(R.id.login_view);
loginView.setViewActionCallback(new LoginUiView.ViewActionCallback() {
@Override
public void onCommitClick(String phoneNum, String verifyCode) {
}
@Override
public void onGetVerifyCodeClick() {
}
@Override
public void onItemTipsClick() {
}
});
}
}
到此代码结束，有问题到网站里发帖子吧！
测试
测试，手机号码的正确性，这个由测试人员来完成了，不过我们简单地使用一下。如果手机号码正确，才可以点击获取验证码！
总结
点击获取验证码把号码给到外面即可。
点击确定以后，把所输入的号码和验证码告诉外面即可。
其他的号码校验，按键处理，内容检查内部处理好。
这就是自定义组合控件，把别人不关心的封装起来，把别人关心的暴露出去。
拉大锯 回复 @墨客 
