Android客户端之“微服私访”App的系统学习(二)TextInputLayout实现登录界面和LitePal初始化本地数据库
2017-07-09 15:39
796 查看
前言
上一篇文章介绍了有关于搭建微服私访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数据库高手秘籍系列文章
相关文章推荐
- Android客户端之“微服私访”App的系统学习(七)XRecyclerView快速实现列表界面+自定义Search输入框,软键盘搜索按钮监听+TextView部分样式改变
- Android基础学习总结(六)——TextInputLayout+EditText 轻松实现登录界面
- Android客户端之“微服私访”App的系统学习(一) 本地服务端环境的搭建和部署
- Android客户端之“微服私访”App的系统学习(五)使用Picasso实现轮播图以及使用自定义View实现个人中心页面
- Android客户端之“微服私访”App的系统学习(四)使用ViewPager+Fragment实现Tab
- Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果
- Android客户端之“微服私访”App的系统学习(六)RecyclerView 展现复杂数据列表以及水波纹效果+CardView显示头像
- 快速开发android应用2-使用TextInputLayout实现用户登录及验证
- TextInputLayout实现登录界面
- Android客户端之“微服私访”App的系统学习(三)基于 OkHttp和Gson 快速获取解析服务数据
- Android客户端之“微服私访”App的系统学习(八)调用系统摄像头拍照并管理照片并使用Okhttp上传文件至后台
- JSP系统开发学习之四关于用户登录界面的补充——通过request页面传值&wel.jsp的MVC的实现
- 【Android UI】使用RelativeLayout与TableLayout实现登录界面
- Android TextInputLayout实现注册布局
- Android进阶UI之使用TextInputLayout创建一个登陆界面
- Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)
- Android实战简易教程-第三十二枪(自定义View登录注册界面EditText-实现一键清空)
- Android 使用TextInputLayout创建一个登陆界面
- Android网络编程之——Android登录系统模块的实现(客户端+服务器端Servlet+MySQL)
- 食物库App Android客户端主界面的实现