Android MVVM框架搭建六腾讯X5WebView + DrawerLayout + NavigationView

前言

效果图

正文

  首先我们先显示新闻详情信息。这里会用到WebView，Android原生的WebView好不好用，用过的就不会再用，因此我们用更加好用的WebView，就是腾讯的X5 WebView，你可以看到微信里面也是这个WebView。要使用这个WebView需要添加依赖。

一、添加依赖

在app的build.gradle中的dependencies{}闭包中添加如下代码：

	// 腾讯X5内核WebView
    implementation 'com.tencent.tbs:tbssdk:44085'

添加后，点击Sync Now，进行项目同步。然后需要在AndroidManifest.xml中进行网络权限配置

	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

二、使用WebView

下面在Activity中新建一个WebActivity，布局是activity_web.xml，这个类用于装载WebView显示，首先改一下布局activity_web.xml，代码如下：

<?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">

    <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。

	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中增加如下代码：

	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类，里面的代码如下：

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

	/**
     * 聚合新闻数据详情
     */
    @GET("/toutiao/content?key=99d3951ed32af2930afd9b38293a08a2")
    Observable<NewsDetailResponse> newsDetail(@Query("uniquekey") String uniquekey);

这个接口用于请求新闻详情数据，返回值将会解析成NewsDetailResponse。

③ WebRepository

  数据有了，API接口有了，下面就是去调用的地方了，在repository包下新增一个WebRepository类，里面的代码如下：

@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，里面的代码如下：

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中的代码就可以了，代码如下：

	@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类中添加如下代码：

	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进行了主题设置，代码如下：

		<activity
            android:name=".ui.activity.WebActivity"
            android:theme="@style/SplashTheme" />

下面就可以运行了。

下面就是点击视频item打开视频的播放地址了。

五、热门视频播放

  这里首先要修改视频列表适配器中的内容，打开VideoAdapter，在里面增加如下代码：

	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布局，里面的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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.谷歌.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，里面的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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，里面的代码如下：

<?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">

    <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.谷歌.android.material.appbar.MaterialToolbar
                android:id="@ id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/purple_500">

                <!--圆形图片-->
                <com.谷歌.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.谷歌.android.material.appbar.MaterialToolbar>
            <!--NavHost-->
            <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.谷歌.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.谷歌.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，当点击的时候就可以打开抽屉。

		<!--滑动导航视图-->
        <com.谷歌.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类，里面的代码如下：

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中添加如下代码：

	public static ActivityManager getActivityManager() {
        return ActivityManager.getInstance();
    }

然后在BaseActivity中的onCreate中增加如下代码即可。

	BaseApplication.getActivityManager().addActivity(this);

然后这样有一个前提，就是你所有的Activity都要继承自BaseActivity。然后我们在HomeActivity中新增一个退出登录方法。

	/**
     * 退出登录
     */
    private void logout() {
        showMsg("退出登录");
        MVUtils.put(Constant.IS_LOGIN,false);
        jumpActivityFinish(LoginActivity.class);
    }

在点击菜单的时候调用它。

然后我们会回到登录页面，在登录页面中增加一个两次返回表示退出应用的功能，在LoginActivity中增加如下代码：

	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中，方法如下：

	protected void exitTheProgram() {
        BaseApplication.getActivityManager().finishAllActivity();
    }

那么我们再运行一下，看看效果。

八、登录注册

  你可能会很疑惑，不是已经有一个登录了吗？为啥还有登录注册？等会儿，注册？注册到哪里去？又没有服务器数据库，这里我是都使用本地数据库，也从本地数据库去做校验。也就是说，后面你使用这个软件你需要先手动去注册一个用户，然后再去登录这个用户，我这么做的目的是希望更接近实际开发中的需求设计。写代码就讲究一个真听真看真实现。所以我们先来完成一个注册的功能，只不过我们的注册只是本地有效，请注意这一点。

① 建表

  既然是保存用户信息到本地数据库里，则我们需要有一个表来操作，在bean包下新建一个User类，代码如下：

@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接口，里面的代码如下：

@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中增加如下代码：

	/**
     * 版本升级迁移到4 新增用户表
     */
    static final Migration MIGRATION_3_4 = new Migration(3, 4) {
        @Override
        public void migrate(SupportSQLiteDatabase database) {
            //创建用户表
            database.execSQL("CREATE TABLE `user` "  
                    "(uid INTEGER NOT NULL, "  
                    "account TEXT, "  
                    "pwd TEXT, "  
                    "nickname TEXT,"  
                    "introduction TEXT,"  
                    "PRIMARY KEY(`uid`))");
        }
    };

新增一个抽象方法。

	public abstract UserDao userDao();

然后如下图所示修改一下，数据库的升级迁移就完成了。

④ 数据储存库

  现在关于数据库的部分就已经弄完了，接下来就是涉及到数据的保存和操作了，因为我们的用户表涉及到的页面可能不止一个，所以用户的存储库就不以页面所命名，因此在repository包下新建一个UserRepository，里面的代码如下：

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类，代码如下：

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，布局的代码如下：

<?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="register"
            type="com.llw.mvvm.viewmodels.RegisterViewModel" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.谷歌.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.谷歌.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.谷歌.android.material.textfield.TextInputLayout
                android:id="@ id/et_account_lay"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.谷歌.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.谷歌.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.谷歌.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.谷歌.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.谷歌.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.谷歌.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.谷歌.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.谷歌.android.material.textfield.TextInputLayout>

            <com.谷歌.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.谷歌.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.谷歌.android.material.textfield.TextInputLayout>

            <com.谷歌.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.谷歌.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.谷歌.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.谷歌.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的代码，如下所示：

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的代码如下：

<?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.谷歌.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.谷歌.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.谷歌.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.谷歌.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.谷歌.android.material.textfield.TextInputLayout>

            <com.谷歌.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp">

                <com.谷歌.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.谷歌.android.material.textfield.TextInputLayout>

            <com.谷歌.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的代码如下所示：

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，修改代码如下所示：

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);
    }

}

九、源码

这篇好文章是转载于：学新通技术网