Android MVVM框架搭建（六）腾讯X5WebView DrawerLayout NavigationView
- 前言
- 正文
- 一、添加依赖
- 二、使用WebView
- 三、获取新闻详情
- ① 新闻详情数据
- ② 新闻详情数据API
- ③ WebRepository
- ④ WebViewModel
- ⑤ 页面数据处理
- 四、传递新闻参数
- 五、热门视频播放
- 六、侧滑抽屉
- 七、应用退出
- 八、登录注册
- ① 建表
- ② 表操作接口
- ③ 数据库升级
- ④ 数据储存库
- ⑤ RegisterViewModel
- ⑥ 注册页面
- ⑦ 修改登录页面
- 九、源码
前言
在上一篇文章中在HomeActivity中通过装载不同的Fragment显示不同的数据，目前有新闻数据和视频数据，不过光是显示数据，看不到详细内容也不行。其次在这样的页面中要想显示个人信息的话，可以增加一个Fragment或者通过侧滑抽屉来显示，同时既然有个人信息页面，自然就要有登录和注册的关系，之前的登录是个假的，这次我就做的真一点，用一下本地数据库。
效果图
正文
首先我们先显示新闻详情信息。这里会用到WebView，Android原生的WebView好不好用，用过的就不会再用，因此我们用更加好用的WebView，就是腾讯的X5 WebView，你可以看到微信里面也是这个WebView。要使用这个WebView需要添加依赖。
一、添加依赖
在app的build.gradle中的dependencies{}闭包中添加如下代码：
代码语言：javascript复制 // 腾讯X5内核WebView
implementation 'com.tencent.tbs:tbssdk:44085'添加后，点击Sync Now，进行项目同步。
二、使用WebView
下面在Activity中新建一个WebActivity，布局是activity_web.xml，这个类用于装载WebView显示，首先改一下布局activity_web.xml，代码如下：
代码语言：javascript复制<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activity.WebActivity">
<com.tencent.smtt.sdk.WebView
android:id="@ id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
androidx.constraintlayout.widget.ConstraintLayout>
layout>然后在WebActivity中增加如下代码，用于配置WebView。
代码语言：javascript复制 private final WebViewClient client = new WebViewClient() {
/**
* 防止加载网页时调起系统浏览器
*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onReceivedHttpAuthRequest(WebView webview,
com.tencent.smtt.export.external.interfaces.HttpAuthHandler httpAuthHandlerhost, String host,
String realm) {
boolean flag = httpAuthHandlerhost.useHttpAuthUsernamePassword();
}
@Override
public void onPageFinished(WebView webView, String s) {
super.onPageFinished(webView, s);
}
@Override
public void onReceivedError(WebView webView, int i, String s, String s1) {
System.out.println("***********onReceivedError ************");
super.onReceivedError(webView, i, s, s1);
}
@Override
public void onReceivedHttpError(WebView webView, WebResourceRequest webResourceRequest, WebResourceResponse webResourceResponse) {
System.out.println("***********onReceivedHttpError ************");
super.onReceivedHttpError(webView, webResourceRequest, webResourceResponse);
}
};当前的页面是需要网络请求的，因此就会有相应的ViewModel和Repository，因为聚合给的新闻数据里面有一个uniquekey，用于查询新闻的详情信息，然后再去返回的详情信息里面找到url通过WebView去加载。当然并不是每一条新闻都能够去显示的，有一些新闻是没有详情信息的，这在我们点击新闻的时候就要做处理。
这是我们下面要做的事情，现在对于X5WebView还需要进行一个初始化，这样做是方便使用的。在BaseApplication中增加如下代码：
代码语言：javascript复制 private void initX5WebView() {
HashMap map = new HashMap(2);
map.put(TbsCoreSettings.TBS_SETTINGS_USE_SPEEDY_CLASSLOADER, true);
map.put(TbsCoreSettings.TBS_SETTINGS_USE_DEXLOADER_SERVICE, true);
QbSdk.initTbsSettings(map);
//搜集本地tbs内核信息并上报服务器，服务器返回结果决定使用哪个内核。
QbSdk.PreInitCallback cb = new QbSdk.PreInitCallback() {
@Override
public void onViewInitFinished(boolean arg0) {
//x5內核初始化完成的回调，为true表示x5内核加载成功，否则表示x5内核加载失败，会自动切换到系统内核。
Log.d("app", " onViewInitFinished is " arg0);
}
@Override
public void onCoreInitFinished() {
}
};
//x5内核初始化接口
QbSdk.initX5Environment(getApplicationContext(), cb);
}然后在onCreate中调用它。
下面关于WebView的使用就只有一步了，那就是加载url，现在还没有的，去获取它。
三、获取新闻详情
在聚合API中获取新闻详情是另一个接口，在写这个接口之前，先写一个返回的新闻详情数据。
① 新闻详情数据
在model包下新增一个NewsDetailResponse类，里面的代码如下：
代码语言：javascript复制public class NewsDetailResponse {
private String reason;
private ResultBean result;
private Integer error_code;
public String getReason() {
return reason;
}
public void setReason(String reason) {
this.reason = reason;
}
public ResultBean getResult() {
return result;
}
public void setResult(ResultBean result) {
this.result = result;
}
public Integer getError_code() {
return error_code;
}
public void setError_code(Integer error_code) {
this.error_code = error_code;
}
public static class ResultBean {
private String uniquekey;
private DetailBean detail;
private String content;
public String getUniquekey() {
return uniquekey;
}
public void setUniquekey(String uniquekey) {
this.uniquekey = uniquekey;
}
public DetailBean getDetail() {
return detail;
}
public void setDetail(DetailBean detail) {
this.detail = detail;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
public static class DetailBean {
private String title;
private String date;
private String category;
private String author_name;
private String url;
private String thumbnail_pic_s;
private String thumbnail_pic_s02;
private String thumbnail_pic_s03;
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public String getCategory() {
return category;
}
public void setCategory(String category) {
this.category = category;
}
public String getAuthor_name() {
return author_name;
}
public void setAuthor_name(String author_name) {
this.author_name = author_name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getThumbnail_pic_s() {
return thumbnail_pic_s;
}
public void setThumbnail_pic_s(String thumbnail_pic_s) {
this.thumbnail_pic_s = thumbnail_pic_s;
}
public String getThumbnail_pic_s02() {
return thumbnail_pic_s02;
}
public void setThumbnail_pic_s02(String thumbnail_pic_s02) {
this.thumbnail_pic_s02 = thumbnail_pic_s02;
}
public String getThumbnail_pic_s03() {
return thumbnail_pic_s03;
}
public void setThumbnail_pic_s03(String thumbnail_pic_s03) {
this.thumbnail_pic_s03 = thumbnail_pic_s03;
}
}
}
}② 新闻详情数据API
代码语言：javascript复制 /**
* 聚合新闻数据详情
*/
@GET("/toutiao/content?key=99d3951ed32af2930afd9b38293a08a2")
Observable<NewsDetailResponse> newsDetail(@Query("uniquekey") String uniquekey);这个接口用于请求新闻详情数据，返回值将会解析成NewsDetailResponse。
③ WebRepository
数据有了，API接口有了，下面就是去调用的地方了，在repository包下新增一个WebRepository类，里面的代码如下：
代码语言：javascript复制@SuppressLint("CheckResult")
public class WebRepository {
final MutableLiveData<NewsDetailResponse> newsDetail = new MutableLiveData<>();
public final MutableLiveData<String> failed = new MutableLiveData<>();
/**
* 获取新闻详情数据
* @param uniquekey 新闻ID
* @return newsDetail
*/
public MutableLiveData<NewsDetailResponse> getNewsDetail(String uniquekey) {
NetworkApi.createService(ApiService.class, 2).
newsDetail(uniquekey).compose(NetworkApi.applySchedulers(new BaseObserver<NewsDetailResponse>() {
@Override
public void onSuccess(NewsDetailResponse newsDetailResponse) {
if (newsDetailResponse.getError_code() == 0) {
newsDetail.setValue(newsDetailResponse);
} else {
failed.postValue(newsDetailResponse.getReason());
}
}
@Override
public void onFailure(Throwable e) {
failed.postValue("NewsDetail Error: " e.toString());
}
}));
return newsDetail;
}
}很简单的代码，和之前的地方基本上没啥差别。
④ WebViewModel
数据获取有了，下面就是通过ViewModel去关联Activity。在viewmodels包下新建一个WebViewModel，里面的代码如下：
代码语言：javascript复制public class WebViewModel extends BaseViewModel {
public LiveData<NewsDetailResponse> newsDetail;
public void getNewDetail(String uniquekey) {
WebRepository webRepository = new WebRepository();
failed = webRepository.failed;
newsDetail = webRepository.getNewsDetail(uniquekey);
}
}下面就是在WebActivity中去观察这个网络返回的数据了。
⑤ 页面数据处理
打开WebActivity，实际上我们只需要修改onCreate中的代码就可以了，代码如下：
代码语言：javascript复制 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActivityWebBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_web);
WebViewModel viewModel = new ViewModelProvider(this).get(WebViewModel.class);
binding.webView.setWebViewClient(client);
setStatusBar(true);
// 在调用TBS初始化、创建WebView之前进行如下配置
String uniquekey = getIntent().getStringExtra("uniquekey");
if (uniquekey != null) {
viewModel.getNewDetail(uniquekey);
viewModel.newsDetail.observe(context, newsDetailResponse ->
binding.webView.loadUrl(newsDetailResponse.getResult().getDetail().getUrl()));
viewModel.failed.observe(context, this::showMsg);
}
}这里的代码很常规，首先是绑定布局，然后是ViewModel，再设置webView的配置客户端，设置状态栏，然后就是获取其他页面传递过来的参数，通过这个参数去请求接口，观察返回值，最后加载返回的url。
这里都完成了，下一步就是传递这个参数了，什么时候传递呢？当然是点击的时候了。
四、传递新闻参数
在点击新闻列表中的某一项的时候传递参数到WebActivity中，在NewsAdapter类中添加如下代码：
代码语言：javascript复制 public static class ClickBinding {
public void itemClick(NewsResponse.ResultBean.DataBean dataBean, View view) {
if("1".equals(dataBean.getIs_content())){
Intent intent = new Intent(view.getContext(), WebActivity.class);
intent.putExtra("uniquekey", dataBean.getUniquekey());
view.getContext().startActivity(intent);
} else {
Toast.makeText(view.getContext(), "没有详情信息", Toast.LENGTH_SHORT).show();
}
}
}当Is_content不为1的时候就表示没有详情信息，则提示一下即可。
然后在convert方法中添加一行代码，如下图所示：
最后就是修改item_newx.xml中的代码了，改动如下图所示
由于我希望WebView可以沉浸式，因此我在AndroidManifest.xml中对这个WebActivity进行了主题设置，代码如下：
代码语言：javascript复制 <activity
android:name=".ui.activity.WebActivity"
android:theme="@style/SplashTheme" />下面就可以运行了。
下面就是点击视频item打开视频的播放地址了。
五、热门视频播放
这里首先要修改视频列表适配器中的内容，打开VideoAdapter，在里面增加如下代码：
代码语言：javascript复制 public static class ClickBinding {
public void itemClick(@NotNull VideoResponse.ResultBean resultBean, View view) {
if (resultBean.getShare_url() != null) {
view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(resultBean.getShare_url())));
} else {
Toast.makeText(view.getContext(), "视频地址为空", Toast.LENGTH_SHORT).show();
}
}
}然后convert方法中设置进去。
再修改item_video.xml的代码，如下图所示：
这里的视频链接地址实际上是抖音的视频地址，只不过聚合采集了数据，因此如果你的手机上有抖音，你点击之后会打开抖音播放这个视频，没有抖音会打开浏览器去播放这个视频，这里就不做演示了，自行去尝试。
六、侧滑抽屉
为了充分利用我们的屏幕控件，一些个人信息和设置是可以放到抽屉菜单里面的，就像QQ那样。那么怎么样做一个抽屉菜单呢？其实很简单。首先在layout下创建一个nav_header.xml布局，里面的代码如下：
代码语言：javascript复制<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="@color/purple_500">
<com.google.android.material.imageview.ShapeableImageView
android:id="@ id/iv_avatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="@drawable/logo"
app:shapeAppearanceOverlay="@style/circleImageStyle"
app:strokeColor="@color/white"
app:strokeWidth="2dp" />
<TextView
android:id="@ id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@ id/iv_avatar"
android:layout_marginTop="16dp"
android:layout_toEndOf="@ id/iv_avatar"
android:text="初学者-Study"
android:textColor="#FFF"
android:textSize="16sp" />
<TextView
android:id="@ id/tv_tip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@ id/tv_name"
android:layout_marginTop="8dp"
android:layout_toEndOf="@ id/iv_avatar"
android:text="Android | Java"
android:textColor="#FFF"
android:textSize="14sp" />
RelativeLayout>
LinearLayout>这里的图标就是我的博客头像，你可以到我的源码中去找，也可以用自己的图片。 然后在menu下创建一个nav_menu.xml，里面的代码如下：
代码语言：javascript复制<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@ id/item_setting"
android:icon="@drawable/icon_settings"
android:title="设置" />
<item
android:id="@ id/item_logout"
android:icon="@drawable/icon_logout"
android:title="退出" />
menu>然后修改activity_home.xml，将根布局改成DrawerLayout，里面的代码如下：
代码语言：javascript复制<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.drawerlayout.widget.DrawerLayout
android:id="@ id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.activity.HomeActivity">
<com.google.android.material.appbar.MaterialToolbar
android:id="@ id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/purple_500">
<com.google.android.material.imageview.ShapeableImageView
android:id="@ id/iv_avatar"
android:layout_width="36dp"
android:layout_height="36dp"
android:padding="0.5dp"
android:scaleType="centerCrop"
android:src="@drawable/logo"
app:shapeAppearanceOverlay="@style/circleImageStyle"
app:strokeColor="@color/white"
app:strokeWidth="1dp" />
<TextView
android:id="@ id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="头条新闻"
android:textColor="@color/white"
android:textSize="18sp"
android:textStyle="bold" />
com.google.android.material.appbar.MaterialToolbar>
<fragment
android:id="@ id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@ id/bottom_navigation"
android:layout_below="@ id/toolbar"
app:navGraph="@navigation/nav_graph" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@ id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:background="#FFF"
app:menu="@menu/navigation_menu" />
RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:id="@ id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:itemIconSize="24dp"
app:itemIconTint="#000"
app:itemTextColor="#000"
app:menu="@menu/nav_menu" />
androidx.drawerlayout.widget.DrawerLayout>
layout>这里主要就是通过NavigationView去加载刚才的两个布局xml，一个作为头部一个作为菜单。同时我在Toolbar上放了一个Image，当点击的时候就可以打开抽屉。
代码语言：javascript复制 <com.google.android.material.navigation.NavigationView
android:id="@ id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:itemIconSize="24dp"
app:itemIconTint="#000"
app:itemTextColor="#000"
app:menu="@menu/nav_menu" />下面我们修改HomeActivity中的代码，在initView中增加如下代码：
然后运行一下：
嗯，这里我们的侧滑抽屉就完成了，当然后面还会对这个部分增加更多的功能使用，现在里面只有一个设置和一个退出。既然说到退出了，那么就来写一下退出这个功能吧。
七、应用退出
退出这是一个需要小心的功能，因为涉及到Activity的栈，当我们从一个Activity跳转到另一个Activity时，如果之前的Activity没有销毁掉，则它就在栈里，当前跳转的Activity在栈顶。而不可能每一次跳转页面都需要销毁之前的页面。因此当应用需要退出时，首先我们应该销毁掉所有的Activity，然后再去关掉进程，这样你的程序才算是完整退出了。这里我们需要一个ActivityManager，在activity包下新建一个ActivityManager类，里面的代码如下：
代码语言：javascript复制public class ActivityManager {
//保存所有创建的Activity
private final List<Activity> activityList = new ArrayList<>();
public static ActivityManager mInstance;
public static ActivityManager getInstance() {
if (mInstance == null) {
synchronized (ActivityManager.class) {
if (mInstance == null) {
mInstance = new ActivityManager();
}
}
}
return mInstance;
}
/**
* 添加Activity
* @param activity
*/
public void addActivity(Activity activity){
if(activity != null){
activityList.add(activity);
}
}
/**
* 移除Activity
* @param activity
*/
public void removeActivity(Activity activity){
if(activity != null){
activityList.remove(activity);
}
}
/**
* 关闭所有Activity
*/
public void finishAllActivity(){
for (Activity activity : activityList) {
activity.finish();
}
}
}然后要使我们的每一个Activity在创建的时候都添加到ActivityManager中，我们需要现在BaseApplication中添加如下代码：
代码语言：javascript复制 public static ActivityManager getActivityManager() {
return ActivityManager.getInstance();
}然后在BaseActivity中的onCreate中增加如下代码即可。
代码语言：javascript复制 BaseApplication.getActivityManager().addActivity(this);然后这样有一个前提，就是你所有的Activity都要继承自BaseActivity。然后我们在HomeActivity中新增一个退出登录方法。
代码语言：javascript复制 /**
* 退出登录
*/
private void logout() {
showMsg("退出登录");
MVUtils.put(Constant.IS_LOGIN,false);
jumpActivityFinish(LoginActivity.class);
}在点击菜单的时候调用它。
然后我们会回到登录页面，在登录页面中增加一个两次返回表示退出应用的功能，在LoginActivity中增加如下代码：
代码语言：javascript复制 private long timeMillis;
/**
* Add a prompt to exit the application
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN) {
if ((System.currentTimeMillis() - timeMillis) > 2000) {
showMsg("再次按下退出应用程序");
timeMillis = System.currentTimeMillis();
} else {
exitTheProgram();
}
return false;
}
return super.onKeyDown(keyCode, event);
}这里的exitTheProgram()方法，要写在BaseAcctivity中，方法如下：
代码语言：javascript复制 protected void exitTheProgram() {
BaseApplication.getActivityManager().finishAllActivity();
}那么我们再运行一下，看看效果。
八、登录注册
你可能会很疑惑，不是已经有一个登录了吗？为啥还有登录注册？等会儿，注册？注册到哪里去？又没有服务器数据库，这里我是都使用本地数据库，也从本地数据库去做校验。也就是说，后面你使用这个软件你需要先手动去注册一个用户，然后再去登录这个用户，我这么做的目的是希望更接近实际开发中的需求设计。写代码就讲究一个真听真看真实现。所以我们先来完成一个注册的功能，只不过我们的注册只是本地有效，请注意这一点。
① 建表
既然是保存用户信息到本地数据库里，则我们需要有一个表来操作，在bean包下新建一个User类，代码如下：
代码语言：javascript复制@Entity(tableName = "user")
public class User extends BaseObservable {
@PrimaryKey
private int uid;
private String account;
private String pwd;
@Ignore
private String confirmPwd;
private String nickname;
private String introduction;
public int getUid() {
return uid;
}
public void setUid(int uid) {
this.uid = uid;
}
@Bindable
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
notifyPropertyChanged(BR.account);
}
@Bindable
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
notifyPropertyChanged(BR.pwd);
}
@Bindable
public String getConfirmPwd() {
return confirmPwd;
}
public void setConfirmPwd(String confirmPwd) {
this.confirmPwd = confirmPwd;
notifyPropertyChanged(BR.confirmPwd);
}
@Bindable
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
notifyPropertyChanged(BR.nickname);
}
@Bindable
public String getIntroduction() {
return introduction;
}
public void setIntroduction(String introduction) {
this.introduction = introduction;
notifyPropertyChanged(BR.introduction);
}
public User() {}
@Ignore
public User(int uid, String account, String pwd, String confirmPwd, String nickname, String introduction) {
this.uid = uid;
this.account = account;
this.pwd = pwd;
this.confirmPwd = confirmPwd;
this.nickname = nickname;
this.introduction = introduction;
}
}这里是一个User表，它里面有6个属性，uid可以不用管它，依次看下来就是账号，密码，确认密码，昵称，简介，其中确认密码这个字段只是用作校验的，因此不需要放入数据表中，所以我用@Ignore注解了，下面创建相关的Dao类。
② 表操作接口
在dao包下新建一个UserDao接口，里面的代码如下：
代码语言：javascript复制@Dao
public interface UserDao {
@Query("SELECT * FROM user")
Flowable<List<User>> getAll();
@Update
Completable update(User user);
@Insert(onConflict = OnConflictStrategy.REPLACE)
Completable insert(User user);
@Query("DELETE FROM user")
Completable deleteAll();
}这里没啥好说的，就是操作用户表的方法。
③ 数据库升级
之前的数据库版本是3，现在我新增了用户表，则需要对数据库进行一个升级迁移，在AppDatabase中增加如下代码：
代码语言：javascript复制 /**
* 版本升级迁移到4 新增用户表
*/
static final Migration MIGRATION_3_4 = new Migration(3, 4) {
@Override
public void migrate(SupportSQLiteDatabase database) {
//创建用户表
database.execSQL("CREATE TABLE `news` "
"(uid INTEGER NOT NULL, "
"account TEXT, "
"pwd TEXT, "
"nickname TEXT,"
"introduction TEXT,"
"PRIMARY KEY(`uid`))");
}
};新增一个抽象方法。
代码语言：javascript复制 public abstract UserDao userDao();然后如下图所示修改一下，数据库的升级迁移就完成了。
④ 数据储存库
现在关于数据库的部分就已经弄完了，接下来就是涉及到数据的保存和操作了，因为我们的用户表涉及到的页面可能不止一个，所以用户的存储库就不以页面所命名，因此在repository包下新建一个UserRepository，里面的代码如下：
代码语言：javascript复制public class UserRepository {
private static final String TAG = UserRepository.class.getSimpleName();
private final MutableLiveData<User> userMutableLiveData = new MutableLiveData<>();
public final MutableLiveData<String> failed = new MutableLiveData<>();
public MutableLiveData<User> getUser() {
Flowable<List<User>> listFlowable = BaseApplication.getDb().userDao().getAll();
CustomDisposable.addDisposable(listFlowable, users -> {
if (users.size() > 0) {
for (User user : users) {
if (user.getUid() == 1) {
userMutableLiveData.postValue(user);
break;
}
}
} else {
failed.postValue("你还没有注册过吧，去注册吧！");
}
});
return userMutableLiveData;
}
/**
* 更新用户信息
*
* @param user
*/
public void updateUser(User user) {
Completable update = BaseApplication.getDb().userDao().update(user);
CustomDisposable.addDisposable(update, () -> {
failed.postValue("200");
});
}
/**
* 保存热门壁纸数据
*/
public void saveUser(User user) {
Completable deleteAll = BaseApplication.getDb().userDao().deleteAll();
CustomDisposable.addDisposable(deleteAll, () -> {
//保存到数据库
Completable insertAll = BaseApplication.getDb().userDao().insert(user);
//RxJava处理Room数据存储
CustomDisposable.addDisposable(insertAll, () -> failed.postValue("200"));
});
}
}这里有三个方法，这是我目前所想到的，后续可能会对方法已经修改，首先我们要完成用户的注册和登录，则就会用到获取用户和保存用户。
⑤ RegisterViewModel
这里我先写对应注册页面的ViewModel，然后再去写注册页面的代码，在viewmodels包下新建一个RegisterViewModel类，代码如下：
代码语言：javascript复制public class RegisterViewModel extends BaseViewModel {
public MutableLiveData<User> user;
public MutableLiveData<User> getUser(){
if(user == null){
user = new MutableLiveData<>();
}
return user;
}
/**
* 注册
*/
public void register() {
UserRepository userRepository = new UserRepository();
failed = userRepository.failed;
user.getValue().setUid(1);
Log.d("TAG", "register: " new Gson().toJson(user.getValue()));
userRepository.saveUser(user.getValue());
}
}这里的核心功能就是注册了，这里的注册我只写了一个id，其他的数据需要从页面上去获取。
⑥ 注册页面
在activity包下新建一个RegisterActivity，对应的布局是activity_register.xml，布局的代码如下：
代码语言：javascript复制<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="register"
type="com.llw.mvvm.viewmodels.RegisterViewModel" />
data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.MaterialToolbar
android:id="@ id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/purple_500"
app:navigationIcon="@drawable/ic_back_white">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="注册"
android:textColor="@color/white"
android:textSize="18sp"
android:textStyle="bold" />
com.google.android.material.appbar.MaterialToolbar>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="24dp"
android:text="MVVM"
android:textColor="@color/purple_500"
android:textSize="48sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="32dp">
<com.google.android.material.textfield.TextInputLayout
android:id="@ id/et_account_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:id="@ id/et_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="账号"
android:text="@={register.user.account}" />
com.google.android.material.textfield.TextInputLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@ id/et_account_lay"
android:layout_alignEnd="@ id/et_account_lay"
android:layout_alignBottom="@ id/et_account_lay"
android:gravity="center"
android:text="*"
android:textColor="@color/purple_500"
android:textSize="24sp" />
<com.google.android.material.textfield.TextInputLayout
android:id="@ id/et_pwd_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@ id/et_account_lay"
android:layout_marginTop="12dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@ id/et_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="密码"
android:inputType="textPassword"
android:text="@={register.user.pwd}" />
com.google.android.material.textfield.TextInputLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@ id/et_pwd_lay"
android:layout_alignEnd="@ id/et_pwd_lay"
android:layout_alignBottom="@ id/et_pwd_lay"
android:gravity="center"
android:text="*"
android:textColor="@color/purple_500"
android:textSize="24sp" />
<com.google.android.material.textfield.TextInputLayout
android:id="@ id/et_confirm_pwd_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@ id/et_pwd_lay"
android:layout_marginTop="12dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@ id/et_confirm_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="确认密码"
android:inputType="textPassword"
android:text="@={register.user.confirmPwd}" />
com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@ id/et_nickname_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@ id/et_confirm_pwd_lay"
android:layout_marginTop="12dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@ id/et_nickname_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="用户昵称"
android:text="@={register.user.nickname}" />
com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@ id/et_introduction_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@ id/et_nickname_lay"
android:layout_marginTop="12dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@ id/et_introduction"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="用户简介"
android:text="@={register.user.introduction}" />
com.google.android.material.textfield.TextInputLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@ id/et_confirm_pwd_lay"
android:layout_alignEnd="@ id/et_confirm_pwd_lay"
android:layout_alignBottom="@ id/et_confirm_pwd_lay"
android:gravity="center"
android:text="*"
android:textColor="@color/purple_500"
android:textSize="24sp" />
<com.google.android.material.button.MaterialButton
android:id="@ id/btn_register"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_below="@ id/et_introduction_lay"
android:layout_margin="48dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="注 册"
app:cornerRadius="12dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="注册信息中 * 为必填项" />
RelativeLayout>
LinearLayout>
layout>这里的布局里面就是五个输入框一个按钮，其中有一些信息是必须要输入的，有一些信息不是必须的。下面我们修改RegisterActivity的代码，如下所示：
代码语言：javascript复制public class RegisterActivity extends BaseActivity {
private static final String TAG = RegisterActivity.class.getSimpleName();
private ActivityRegisterBinding binding;
private RegisterViewModel registerViewModel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_register);
registerViewModel = new ViewModelProvider(this).get(RegisterViewModel.class);
registerViewModel.getUser().setValue(new User(0, "", "", "", "", ""));
binding.setRegister(registerViewModel);
initView();
}
private void initView() {
back(binding.toolbar);
binding.btnRegister.setOnClickListener(v -> {
if (registerViewModel.user.getValue().getAccount().isEmpty()) {
showMsg("请输入账号");
return;
}
if (registerViewModel.user.getValue().getPwd().isEmpty()) {
showMsg("请输入密码");
return;
}
if (registerViewModel.user.getValue().getConfirmPwd().isEmpty()) {
showMsg("请确认密码");
return;
}
if (!registerViewModel.user.getValue().getPwd().equals(registerViewModel.user.getValue().getConfirmPwd())) {
showMsg("两次输入密码不一致");
return;
}
registerViewModel.register();
registerViewModel.failed.observe(this, failed -> {
showMsg("200".equals(failed) ? "注册成功" : failed);
if ("200".equals(failed)) {
finish();
}
});
});
}
}这里我们可以利用failed返回的内容作为注册成功和失败的标准，注册成功则返回之前的登录页面，虽然我们还没有在登录页面中写跳转到注册页面的代码。下面我们就来修改登录页面的代码。
⑦ 修改登录页面
首先是从布局上修改，修改activity_login.xml的代码如下：
代码语言：javascript复制<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<!--绑定数据-->
<data>
<variable
name="viewModel"
type="com.llw.mvvm.viewmodels.LoginViewModel" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/purple_500">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="登录"
android:textColor="@color/white"
android:textSize="18sp"
android:textStyle="bold" />
</com.google.android.material.appbar.MaterialToolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="32dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="24dp"
android:text="MVVM"
android:textColor="@color/purple_500"
android:textSize="48sp"
android:textStyle="bold" />
<TextView
android:id="@ id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{viewModel.user.account}"
android:visibility="gone" />
<TextView
android:id="@ id/tv_pwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="@{viewModel.user.pwd}"
android:visibility="gone" />
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:id="@ id/et_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="账号"
android:text="@={viewModel.user.account}" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@ id/et_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:hint="密码"
android:inputType="textPassword"
android:text="@={viewModel.user.pwd}" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="@ id/btn_login"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_margin="24dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="登 录"
app:cornerRadius="12dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="没有账号？去"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="注册"
android:onClick="toRegister"
android:textColor="@color/purple_500"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="UsingOnClickInXml" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</layout>然后就是修改LoginViewModel的代码了，这里要注意，之前用的是model包下的User类，现在用的是bean包下的User类，有本质的区别，修改LoginViewModel的代码如下所示：
代码语言：javascript复制public class LoginViewModel extends BaseViewModel {
public MutableLiveData<User> user;
public MutableLiveData<User> getUser(){
if(user == null){
user = new MutableLiveData<>();
}
return user;
}
public LiveData<com.llw.mvvm.db.bean.User> localUser;
public void getLocalUser(){
UserRepository userRepository = new UserRepository();
localUser = userRepository.getUser();
failed = userRepository.failed;
}
}下面修改LoginActivity，修改代码如下所示：
代码语言：javascript复制public class LoginActivity extends BaseActivity {
private ActivityLoginBinding dataBinding;
private LoginViewModel loginViewModel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//数据绑定视图
dataBinding = DataBindingUtil.setContentView(this, R.layout.activity_login);
loginViewModel = new LoginViewModel();
//Model → View
User user = new User("", "");
loginViewModel.getUser().setValue(user);
//获取观察对象
MutableLiveData<User> user1 = loginViewModel.getUser();
user1.observe(this, user2 -> {
Log.d("LoginActivity", "onCreate: " user2.getAccount());
dataBinding.setViewModel(loginViewModel);
});
dataBinding.btnLogin.setOnClickListener(v -> {
if (loginViewModel.user.getValue().getAccount().isEmpty()) {
showMsg("请输入账号");
return;
}
if (loginViewModel.user.getValue().getPwd().isEmpty()) {
showMsg("请输入密码");
return;
}
//检查输入的账户和密码是否是注册过的。
checkUser();
});
}
private void checkUser() {
loginViewModel.getLocalUser();
loginViewModel.localUser.observe(this, localUser -> {
if (!loginViewModel.user.getValue().getAccount().equals(localUser.getAccount()) ||
!loginViewModel.user.getValue().getPwd().equals(localUser.getPwd())) {
showMsg("账号或密码错误");
return;
}
//记录已经登录过
MVUtils.put(Constant.IS_LOGIN, true);
showMsg("登录成功");
jumpActivity(MainActivity.class);
});
loginViewModel.failed.observe(this, this::showMsg);
}
private long timeMillis;
/**
* Add a prompt to exit the application
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN) {
if ((System.currentTimeMillis() - timeMillis) > 2000) {
showMsg("再次按下退出应用程序");
timeMillis = System.currentTimeMillis();
} else {
exitTheProgram();
}
return false;
}
return super.onKeyDown(keyCode, event);
}
public void toRegister(View view) {
jumpActivity(RegisterActivity.class);
}
}下面就可以运行一下了。
这里在注册的时候如果是输入密码出于保护的情况下是显示黑屏的，程序没有问题，不要诧异，可以自行去测试使用，本篇文章就到这里了。山高水长，后会有期~
九、源码
GitHub：MVVM-Demo CSDN: MVVMDemo_6.rar
