2018-08-29 android如何编写登录界面

作者: 仲夏之雪梦旅人 | 来源:发表于2018-09-01 16:05 被阅读0次

思路，每个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.第三方登录
转载https://www.jianshu.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内容可以看https://www.jianshu.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之间的连接.

这样，我们的登录界面就算是完成了，感谢大家的阅读。

2018-08-29 android如何编写登录界面

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读