思路，每个APP都会有一个登录界面，用来注册用户那么数据会保存在哪里呢？肯定是在服务端的数据库上，那么就需要OKHttp3去访问数据库得到我们想要的数据，这里就不演示了，用简单的sharedpreferences去存储，代替数据库的功能。废话不多说，下面开始
1.首先是XML的布局文件，我这个登录和注册时通用的，只需要改变下布局，就能实现登录，和注册界面。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/White"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/user_icon_logo_circle" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/Relayout_PhoneNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp">
<LinearLayout
android:id="@+id/linear_userPhone_line"
android:layout_width="310dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/user_icon_phone_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="20dp"
android:scaleType="center"
android:src="@drawable/user_icon_phone_login" />
<EditText
android:id="@+id/Ed_uerPhoneNumber"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginStart="20dp"
android:layout_weight="8"
android:background="@color/White"
android:editable="false"
android:hint="@string/pleaseIntoPhoneNumber"
android:inputType="phone"
android:maxLength="13"
android:numeric="integer"
android:singleLine="true"
android:textColor="@color/Black"
android:textColorHint="@color/colorGray696969"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="@+id/icon_PhoneNumber_clean"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_toEndOf="@+id/linear_userPhone_line"
android:src="@drawable/user_icon_circle_clear"
android:visibility="invisible" />
<View
android:id="@+id/view_phoneNumber_line"
android:layout_width="wrap_content"
android:layout_height="0.5dp"
android:layout_below="@+id/linear_userPhone_line"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="@color/colorGoldFFC125" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/Relayout_PhonePassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/Relayout_PhoneNumber"
android:layout_marginTop="20dp"
android:visibility="gone">
<LinearLayout
android:id="@+id/linear_userPassword_line"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/user_icon_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="20dp"
android:scaleType="center"
android:src="@drawable/user_icon_password" />
<EditText
android:id="@+id/Ed_uerPassword"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginStart="20dp"
android:layout_weight="8"
android:background="@color/White"
android:editable="false"
android:hint="@string/pleaseIntoPhonePassword"
android:inputType="textPassword"
android:maxLength="30"
android:singleLine="true"
android:textColor="@color/Black"
android:textColorHint="@color/colorGray696969"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="@+id/icon_Password_clean"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_toEndOf="@+id/linear_userPassword_line"
android:src="@drawable/user_icon_circle_clear"
android:visibility="invisible" />
<ImageView
android:id="@+id/icon_eye_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_toEndOf="@id/icon_Password_clean"
android:src="@drawable/user_icon_eye_close_blue" />
<View
android:id="@+id/view_phonePassword_line"
android:layout_width="wrap_content"
android:layout_height="0.5dp"
android:layout_below="@+id/linear_userPassword_line"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="@color/colorGrayE8E8E8" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:id="@+id/Tv_registered_msg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:text="@string/registered_msg1"
android:textColor="@color/colorYellofbe328"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_user_losePassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="1"
android:gravity="end"
android:text="@string/losePassword"
android:textColor="@color/colorYellofbe328"
android:textSize="12sp" />
</LinearLayout>
<Button
android:id="@+id/btn_registered_login"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:background="@drawable/shape_btn_khakil_bg"
android:text="@string/btn_registered_msg1"
android:textColor="@color/colorGray696969"
android:textSize="16sp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:id="@+id/linear_message_line"
android:layout_width="match_parent"
android:layout_height="30dp"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:background="@color/colorGray696969" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:gravity="center"
android:text="@string/other_login_message"
android:textColor="@color/colorGray696969"
android:textSize="14sp" />
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:background="@color/colorGray696969" />
</LinearLayout>
<ImageView
android:id="@+id/user_icon_qq"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_below="@id/linear_message_line"
android:layout_marginStart="100dp"
android:layout_marginTop="20dp"
android:src="@drawable/user_icon_qq" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/user_icon_qq"
android:layout_marginStart="114dp"
android:layout_marginTop="10dp"
android:text="@string/Tencent"
android:textColor="@color/colorGray707061"
android:textSize="12sp" />
<ImageView
android:id="@+id/user_icon_wechat_login"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentEnd="true"
android:layout_below="@id/linear_message_line"
android:layout_marginEnd="100dp"
android:layout_marginTop="20dp"
android:src="@drawable/user_icon_wechat_login" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="@id/user_icon_wechat_login"
android:layout_marginEnd="110dp"
android:layout_marginTop="10dp"
android:text="@string/WeChat"
android:textColor="@color/colorGray707061"
android:textSize="12sp" />
</RelativeLayout>
</LinearLayout>
代码看似很多，实际上也就是要实现这两张图效果
Screenshot_20180829-115910.png
Screenshot_20180829-115913.png
重点在于如何实现手机登录格式为3-4-4和切换界面布局 以及第三方登录和存储用户信息.
1.实现手机格式3-4-4，是目前主流的格式输入，实现思想是通过对Edtext的监听，以及去修改TextWatcher()等一系列回调函数来实现的
private void edittextlistener() {
//账号输入框事件监听
muserPNEdtext.addTextChangedListener(new TextWatcher() {
//这个方法被调用，说明在S字符串中，从start位置开始的count个字符即将被长度为after的新文本
//所取代，在这个方法里面改变s,会报错.
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
//这个方法被调用，说明在s字符串中，从start位置开始的count个字符取代了长度为before的旧文本，
//在这个方法里改变s,会报错。
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
StringBuffer stringBuffer = new StringBuffer(s);
if (before > 0) {
if (stringBuffer.length() == 4 || stringBuffer.length() == 9) {
stringBuffer.deleteCharAt(stringBuffer.length() - 1);
muserPNEdtext.setText(stringBuffer.toString());
muserPNEdtext.setSelection(stringBuffer.length());
}
}
}
//这个方法被调用，说明s字符串位置已经改变
@Override
public void afterTextChanged(Editable s) {
/**
* 判断是否显示删除图标
*/
if (s.toString().length() == 0) {
mIv_PhoneNumber_clean.setVisibility(View.INVISIBLE);
} else {
mIv_PhoneNumber_clean.setVisibility(View.VISIBLE);
}
StringBuffer stringBuffer = new StringBuffer(s);
if (s.length() >= 4) {
char[] chars = s.toString().toCharArray();
if (chars[3] != ' ') {
stringBuffer.insert(3, ' ');
muserPNEdtext.setText(stringBuffer.toString());
muserPNEdtext.setSelection(stringBuffer.length());
}
}
if (s.length() >= 9) {
char[] chars = s.toString().toCharArray();
if (chars[8] != ' ') {
stringBuffer.insert(8, ' ');
muserPNEdtext.setText(stringBuffer.toString());
muserPNEdtext.setSelection(stringBuffer.length());
}
}
}
});
这段代码我写来一个方法private void edittextlistener()去实现对EditText的监听
主要方法EditText.addTextChangedListener();里面传入new TextWatcher(),会回调三个函数，三个函数的具体作用我也在代码中写明，剩下的就改写public void afterTextChanged(Editable s){}这个函数就行了，注意，使用此方法一定要将Edittext文本设置为不可编辑，因为我还是无法解决Selection的位置问题，如果不设置的话，可能在操作的时候会光标错乱。
2.切换界面布局，这个问题比较简单，首先我们要获取可以改变布局控件的点击次数然后对2取余就行了
private int mEyesType = 0;//设置点击计数器，判断当前密码状态
private int layoutChange = 0;//设置点击计数器，判断当前布局状态
private Handler mHandler = new Handler(new Handler.Callback() {
@Override
public boolean handleMessage(Message msg) {
switch (msg.what) {
case 0x01://获取输入框焦点时，让下划线背景颜色改变
mView_phonebg_line.setBackgroundResource(R.color.colorGoldFFC125);
mView_password_line.setBackgroundResource(R.color.colorGrayE8E8E8);
break;
case 0x02://获取密码框焦点时，让下划线背景颜色改变
mView_phonebg_line.setBackgroundResource(R.color.colorGrayE8E8E8);
mView_password_line.setBackgroundResource(R.color.colorGoldFFC125);
break;
case 0x03:
mEduserPhoneGetFocus();//点击手机图标也能让输入框获取到焦点
break;
case 0x04:
mEduserPasswordGetFocus();//点击密码图标也能让输入框获取到焦点
break;
case 0x05://通过点击次数判断是否显示密码，此时不显示
mIv_eyes_type.setImageResource(R.drawable.user_icon_eye_close_blue);
muserPAPEdtext.setTransformationMethod(PasswordTransformationMethod.getInstance());
break;
case 0x06://通过点击次数判断是否显示密码，此时显示
mIv_eyes_type.setImageResource(R.drawable.user_icon_eye_open_blue);
muserPAPEdtext.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
break;
case 0x07://通过点击次数判断是否改变格局，此时不改变
muserpasswordRelayout.setVisibility(View.VISIBLE);
mTv_Choose_type.setText(R.string.registered_msg2);
mLogin_btn.setText(R.string.btn_registered_msg2);
mLogin_btn.setBackground(getResources().getDrawable(R.drawable.shape_btn_light_yellow_bg));
break;
case 0x08://通过点击次数判断是否改变格局，此时改变
muserpasswordRelayout.setVisibility(View.GONE);
mTv_Choose_type.setText(R.string.registered_msg1);
mLogin_btn.setText(R.string.btn_registered_msg1);
mLogin_btn.setBackground(getResources().getDrawable(R.drawable.shape_btn_khakil_bg));
break;
default:
break;
}
return false;
}
});
/**
* 通过点击判断布局格式
*/
private void LayoutChange() {
if (layoutChange % 2 == 0) {
Message message = mHandler.obtainMessage(0x07);
mHandler.sendMessage(message);
} else {
Message message = mHandler.obtainMessage(0x08);
mHandler.sendMessage(message);
}
layoutChange++;
}
这段代码首先获取layoutChange的被点击次数，然后对2取余判断当前应该显示界面的状态，然后将变更状态交由handler去异步处理，UI的操作我是尽量能用异步就用异步，这样不会给主线程带来卡顿.实现效果就是点击 改变界面状态，上面图片已经显示了，我就不再举例了.
3.第三方登录
转载//www.greatytc.com/p/133d84042483 大家可以先看看第三方登录的介绍
4.储存用户信息
//储存用户信息
pref = PreferenceManager.getDefaultSharedPreferences(mContext);
editor = pref.edit();
editor.putString("phoneNumber", "187 **** 5216");
editor.putString("password", "123456");
editor.apply();
//取出用户信息
userPhoneNumber = pref.getString("phoneNumber", null);
PhonePassword = pref.getString("password", null);
muserPNEdtext.setText(userPhoneNumber);
muserPNEdtext.setSelection(userPhoneNumber.length());
这里是使用SharedPreference去储存了一个用户手机号和输入密码，当然，在实际操作中不可能这样去操作，实际操作首先要验证用户手机号码是否存在，如果存在，只有登录成功后，才能去存储用户的手机号码，而且，密码是不存储的，为了用户的信息安全。
如果要了解更多SharedPreferencene内容可以看//www.greatytc.com/p/ca3a8476edd4这篇文章
经过上面的代码，这个登录界面基本上就算成型了，接下来是业务逻辑内容。假设用户输入了手机号码，可是，我们怎么能判断是手机号码，而且，我们如何判断用户是否是正确输入手机号码，用户输入手机号码是正确之后，我们还需要对应当前界面进行不同的逻辑操作，下面，让我们跟随代码一起来理清这些逻辑。
public class PhoneUtil {
//判断是否符合电话号码
/**
* 判断电话号码是否符合格式.
*
* @param inputText the input text
* @return true, if is phone
*/
public static boolean isPhone(String inputText) {
Pattern p = Pattern.compile("^((14[0-9])|(13[0-9])|(15[0-9])|(18[0-9])|(17[0-9]))\\d{8}$");
Matcher m = p.matcher(inputText);
return m.matches();
}
}
这里给大家介绍一个工具类，用来判断是否是手机号码，具体为什么能实现，我也不是很清楚。
case 0x07://通过点击次数判断是否改变格局，此时不改变
muserpasswordRelayout.setVisibility(View.VISIBLE);
isViewRegisteredType = true;//是登录界面
mTv_Choose_type.setText(R.string.registered_msg2);
mLogin_btn.setText(R.string.btn_registered_msg2);
mLogin_btn.setBackground(getResources().getDrawable(R.drawable.shape_btn_light_yellow_bg));
break;
case 0x08://通过点击次数判断是否改变格局，此时改变
muserpasswordRelayout.setVisibility(View.GONE);
isViewRegisteredType = false;//是注册界面
mTv_Choose_type.setText(R.string.registered_msg1);
mLogin_btn.setText(R.string.btn_registered_msg1);
mLogin_btn.setBackground(getResources().getDrawable(R.drawable.shape_btn_khakil_bg));
break;
这段代码，我使用了布尔值isViewRegisteredType作为我判断当前界面的标准，当然，这段代码这是根据点击事件来控制的，如果没有点击事件的话，isViewRegisteredType就必须有一个默认的布尔值，至于是默认值是是什么，就根据当前你进入的页面去决定，这个也不难
private void checklogin() {//登录时对手机号码的判断
String number = muserPNEdtext.getText().toString();
String phonePassword = muserPAPEdtext.getText().toString();
String phonenumber = number.replace(" ", "");
String password = muserPAPEdtext.toString();
Toast toast = ToastUtil.setMyToast(mContext, ToastUtil.PROMPT,
"手机号码格式不对", Toast.LENGTH_SHORT);
Toast toast1 = ToastUtil.setMyToast(mContext, ToastUtil.WARING,
"这不是手机号码", Toast.LENGTH_SHORT);
Toast toast2 = ToastUtil.setMyToast(mContext, ToastUtil.ERROR,
"请输入密码，长度在6-20之间", Toast.LENGTH_SHORT);
Toast toast3 = ToastUtil.setMyToast(mContext, ToastUtil.PROMPT,
"用户不存在", Toast.LENGTH_SHORT);
if (isViewRegisteredType) {//判断是什么界面，true为登录界面，false为注册界面
if (isUserPhoneCheck) {//判断手机号是否是13位
if (PhoneUtil.isPhone(phonenumber)) {//判断手机号是否是手机号
if (isPasswordinit) {//判断密码是否输入且位数是否在6-20之间
if (number.equals(userPhoneNumber)) {//判断账户是否存在
if (phonePassword.equals(PhonePassword)) {
Toast.makeText(mContext, "成功", Toast.LENGTH_SHORT).show();
} else {
aReturn.onCheckResultReturn();
}
} else {
toast3.show();
}
} else {
toast2.show();
}
} else {
toast1.show();
}
} else {
toast.show();
}
} else {
if (isUserPhoneCheck) {//判断手机号是否有13位
if (PhoneUtil.isPhone(phonenumber)) {
if (number.equals(userPhoneNumber)) {//判断账户是否存在
ToastUtil.setToastNormal(mContext, "下一步", Toast.LENGTH_SHORT);
} else {
toast3.show();
}
} else {
toast1.show();
}
} else {
toast.show();
}
}
}
这样当我们获取到了当前界面状态时候，就能进一步判断用户的输入状态，进而可以判断密码是否正确，这里又有一个问题，当用户密码和账户完全正确时，我们肯定要跳转Activity，但是我这里是用的Fragment，那么Fragment如何去跳转Activity呢？我们知道，普通的跳转是用Intent,这里，推荐大家去看这篇文章https://blog.csdn.net/androidkwd/article/details/52670520
因为我是用Fragment写的，所以会有点麻烦，大体思路是用接口实现回调方法，Fragment具体要实现的方法，可以回调给Fragment所在的Activity里面去执行，这样，可以很完美的实现Activity和Fragment之间的连接.
这样，我们的登录界面就算是完成了，感谢大家的阅读。
