耳朵(七)安静的登录界面

tags: 耳朵_android

---

先附上效果图:

接着我们到布局文件中简单布下局, 这里用到了GifView 及 MaterialEditText, 下面是布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:att="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/login">

    <pl.droidsonroids.gif.GifImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/login"/>

    <View
        android:id="@+id/center"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:layout_centerInParent="true"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/center"
        android:layout_margin="40dp">

        <com.rengwuxian.materialedittext.MaterialEditText
            android:id="@+id/ed_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入耳朵账号"
            android:singleLine="true"
            android:textSize="16sp"
            att:met_baseColor="#ffffff"
            att:met_clearButton="true"
            att:met_floatingLabel="highlight"
            att:met_floatingLabelText="账号"
            att:met_floatingLabelTextColor="@color/colorPrimary"
            att:met_iconLeft="@drawable/icon_id"
            att:met_primaryColor="@color/colorPrimary"
            att:met_textColorHint="#c0c0c0"
            att:met_underlineColor="@color/colorPrimary"/>

        <com.rengwuxian.materialedittext.MaterialEditText
            android:id="@+id/ed_pwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ed_id"
            android:hint="请输入密码"
            android:password="true"
            android:singleLine="true"
            android:textSize="16sp"
            att:met_baseColor="#ffffff"
            att:met_floatingLabel="highlight"
            att:met_floatingLabelText="密码"
            att:met_floatingLabelTextColor="@color/colorPrimary"
            att:met_iconLeft="@drawable/icon_pwd"
            att:met_primaryColor="@color/colorPrimary"
            att:met_textColorHint="#c0c0c0"
            att:met_underlineColor="@color/colorPrimary"/>

        <com.gc.materialdesign.views.ButtonRectangle
            android:id="@+id/btn_login"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_below="@+id/ed_pwd"
            android:layout_marginTop="10dp"
            android:background="@color/colorPrimary"
            android:text="登录"/>

        <com.gc.materialdesign.views.ButtonFlat
            android:id="@+id/btn_forget"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_below="@+id/btn_login"
            android:layout_marginTop="10dp"
            android:background="@color/colorPrimary"
            android:text="忘记密码"/>

        <com.gc.materialdesign.views.ButtonFlat
            android:id="@+id/btn_reg"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/btn_login"
            android:layout_marginTop="10dp"
            android:background="@color/colorPrimary"
            android:text="注册新用户"/>
    </RelativeLayout>
</RelativeLayout>

最后出来的效果图是这样的:

到现在为止我们还没写任何代码呢, 但如果你运行起来的话, 已经可以看到非常不错的效果了,

然后回到Activity中为按钮实现功能:
首先是对id和pwd进行检验, 这里暂时只检查了是否为空:

    btn_login.onClick {
        val username = ed_id.text.trim().toString()
        val password = ed_pwd.text.toString()

        if (!TextUtils.isEmpty(username) && !TextUtils.isEmpty(password)) {
            showLoading()

            val params = HashMap<String, Any>()
            params.put("json", "user/generate_auth_cookie")
            params.put("username", username)
            params.put("password", password)

            //这里如果登录失败时需要提示用户, 所以将needCallBack设置为true
            HMRequest.go<CookieModel>(params = params, needCallBack = true) {
                cancelLoading()

                if (it == null) {
                    showTips(TipType.Error, "账号或密码错误")
                } else {
                    //登录成功, 可在本地缓存cookie, 并更新HMRequest中默认的params
                    showToast(it.cookie)
                }
            }
        } else {
            showTips(TipType.Warning, "账号密码呢?")
        }

OK, 运行看一下, 效果还OK的.

github: https://github.com/bxcx/ear
本节分支: https://github.com/bxcx/ear/tree/login