Android客户端之“微服私访”App的系统学习（二）TextInputLayout实现登录界面和LitePal初始化本地数据库

前言

上一篇文章介绍了有关于搭建微服私访APP的后台服务,还没有了解的小伙伴可以点击 本地服务端环境的搭建和部署 进行查看。今天这篇文章要向大家介绍的是使用TextInputLayout来优雅地实现APP的登录界面、登录验证以及使用LitePal来实现本地数据库的初始化操作，首先让我们看一下预览效果吧。

一、TextInputLayout实现登录页面及验证

在TextInputLayout官方文档API中描述了它是一种继承自LinearLayout的控件,使用时里面只能包含一个EditText或者其子类的控件,该布局可以通过设置hint和Error显示浮动标签，来达到良好的用户体验效果。

1.添加依赖

注：TextInputLayout是Material Design中的,添加依赖的时候需要根据自己项目中的appcompat版本号来对应添加相应版本号的design包，

compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:design:25.3.1'

2.使用TextInputLayout搭建登录UI界面

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/login_btn_text"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<ImageView
android:layout_marginTop="60dp"
android:background="@mipmap/loginguide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.design.widget.TextInputLayout
android:id="@+id/user_txt_input_lay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="@color/login_hint_text"
android:layout_marginTop="50dp"
>
<EditText
android:id="@+id/userName_et"
android:layout_marginLeft="55dp"
android:textSize="14sp"
android:textColor="@color/login_text"
android:hint="@string/userName_hint"
android:layout_marginRight="55dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/pass_txt_input_lay"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/pass_et"
android:textSize="14sp"
android:textColorHint="@color/login_hint_text"
android:textColor="@color/login_text"
android:hint="@string/password_hint"
android:inputType="textPassword"
android:layout_marginLeft="55dp"
android:layout_marginRight="55dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/login_btn"
android:text="@string/login_btn_text"
android:textSize="14sp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="24dp"
android:textColor="@color/login_btn_text"
android:background="@mipmap/login_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>

3.登录验证

private boolean checkData() {
mUserName = mEtName.getText().toString().trim();
mPassWord = mEtPassword.getText().toString().trim();
if (TextUtils.isEmpty(mUserName.trim())) {
mEtName_design.setError("用户名不能为空");
return false;
}
if (mUserName.trim().length() < 0 || mUserName.trim().length() > 6) {
mEtName_design.setError("请输入6位数以内的用户名");
return false;
}
if (TextUtils.isEmpty(mPassWord)) {
mEtPassword_design.setError("密码不能为空");
return false;
}
return true;
}

二、 ButterKnife的使用

为了节省开发时间，本项目中一律采用 ButterKnife这个专注于Android系统的View、Resource、Action注入框架来初始化控件操作，具体介绍请看Butterknife库。

1.添加ButterKnife依赖

compile 'com.jakewharton:butterknife:8.4.0'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'

2.安装Android ButterKnife Zelezny插件

3.代码中绑定ButterKnife并一键式生成初始化控件代码

三、LitePal数据库框架的集成

LitePal是一款开源的Android数据库框架，采用了对象关系映射(ORM)的模式，将平时开发时最常用的一些数据库功能进行了封装，使得开发者不用编写一行SQL语句就可以完成各种建表、増删改查的操作。

使用教程请参照：郭霖Android数据库高手秘籍系列文章

这里我就简单的介绍一下如何在项目中集成Litepal框架，并创建User表:

1.引入LitePal jar包

将下载好的Litepal jar包添加到项目的libs文件夹下，并添加到Library库中（Add as Library）

2.配置litepal.xml

在项目的assets目录下创建litepal.xml文件，将以下代码粘贴进去

<?xml version="1.0" encoding="utf-8"?>
<litepal>
<dbname value="visitshop" ></dbname>
<version value="1" ></version>
<list>
</list>
</litepal>

3.配置LitePalApplication

由于操作数据库时需要用到Context，而我们显然不希望在每个接口中都去传一遍这个参数，那样操作数据库就显得太繁琐了。因此，LitePal使用了一个方法来简化掉Context这个参数，只需要在AndroidManifest.xml中配置一下LitePalApplication，所有的数据库操作就都不用再传Context了，如下所示：

<application
android:name=".application.MyApplication"

此处的MyApplication继承与LitePalApplication

public class MyApplication extends LitePalApplication {
private MyApplication app;
public MyApplication initApplication(){
app = new MyApplication();
return app;
}
@Override
public void onCreate() {
super.onCreate();
}
}

4.建立数据模型，添加到映射列表中

创建User实体类，并在litepal.xml中添加映射，即可生成表结构

<litepal>
<dbname value="visitshop" ></dbname>
<version value="1" ></version>
<list>
<mapping class="com.example.yuchao.visitshop.bean.User"></mapping>
</list>
</litepal>

完成以上工作，执行

SQLiteDatabase db = Connector.getDatabase();

即可创建User表。

运行一下程序，接着在Avdroid Device Moniror中，file explore/data/data/下，项目下的databases目录下导出visitshop.db文件



接着使用SQlite工具查看导出的数据库文件,如下图所示，即初始化数据库成功



到这里“微服私访”App的登陆界面和本地数据库的搭建就完成了，小伙伴们是不是觉得so easy?那就赶紧自己动手实现吧~

下载资料源码，请戳这里~

参考资料：

TextInputLayout官方文档API

Butterknife库

郭霖Android数据库高手秘籍系列文章