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

来源:转载

tags: 耳朵_android


先附上效果图:




上一回完成了文章详情及评论的加载, 不过评论暂时还是用的别的列表样式来填充的, 因为这是一个新站点, 目前评论很少, 甚至可以说几乎没有... 打个广告,各位喜欢纯音乐白噪音的朋友, 去http://ear.life 玩一玩呗, 又不要钱 -):


好了, 我们需要展示评论的话, 现在有两个方法, 一是先到web端去评论, 再回到移动端来显示; 二是在移动端实现登录, 登录后有token就可以回复了, 早做晚做都是要做, 既然如此, 我们今天就来做一个安静的登录界面吧!


一样的老规矩, 新建一个Activity, 继承自BaseActivity, 将immersedStatusbar设置为true, 这样将启动沉浸式状态栏的效果, 如果没有这个属性, 请将HMLibrary的版本升级到最新版本.




接着我们到布局文件中简单布下局, 这里用到了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




分享给朋友:
您可能感兴趣的文章:
随机阅读: