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数据库高手秘籍系列文章