編寫微信聊天機器人6《聊天精靈WeChatGenius》：使用QMUI Android架構美化UI主界面。

接上篇，測試文本消息自動回複功能：https://blog.csdn.net/weixin_42127613/article/details/81841099

聊天機器人的核心技術都已解決，從現在開始做的功能，是為了使其更像一個産品。

作為一個程式員，很容易隻注重功能，而忽視UI。但作為使用者，則很容易隻注重UI，而忽視功能。使用者看到你産品界面的第一眼，可能就決定了他對你的産品的感覺，或者他覺得你的産品夠不夠檔次。

咱不是設計出身，也沒有專業的美工設計團隊，咋辦呢？那隻能用别人的UI架構了。

UI界面，我用QMUI_Android架構。為啥？隻因我隻會這個。

1、引入庫。在Gradle中打開build.gradle檔案，注意是Module.app。加入引用：

注意：我們之前建立activity時，沒有啟用向後相容，但是這個QMUI Android架構1.1.6的版本，是需要相容包，是以我們還是要把appcompat的包加進去。否則，編譯會報錯。我之前使用的是1.1.3的版本，不需要相容包引用。

    //QMUI架構1.1.6要依賴這個appcompat

    implementation 'com.android.support:appcompat-v7:28.0.0-rc01'

    //QMUI架構

    implementation 'com.qmuiteam:qmui:1.1.6'

如下圖所示。

2、拷貝檔案。

下載下傳QMUI Android架構。

QMUI Android架構官網：http://www.qmuiteam.com/android

QMUI Android源碼位址：https://github.com/QMUI/QMUI_Android

我們主要複制源碼中res裡面的檔案，關于顔色、屬性等的定義檔案。要拷貝的檔案其實也不多，如下圖所示。綠色檔案名的都是新增的檔案，藍色則是有修改變動的檔案。主要是color、drawable、values裡面的檔案，以後如果需要用到圖示，還可以拷貝mipmap裡面的檔案。

3、修改主界面。

引入庫和拷貝檔案都做了，那麼現在就可以使用了。我們去修改首頁面吧。

首先修改布局檔案：activity_main.xml

将布局修改為LinearLayout，其次，加入QMUI架構的狀态欄和QMUIGroupListView，修改後的布局檔案，如下所示。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/app_primary_color"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.qmuiteam.qmui.widget.QMUITopBar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/qmui_topbar_height" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/qmui_config_color_background">

        <com.qmuiteam.qmui.widget.grouplist.QMUIGroupListView
            android:id="@+id/groupListView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </ScrollView>

</LinearLayout>
           

再去修改首頁面代碼檔案：MainActivity

我們要在gradle中加入新的依賴編譯：

    //注釋編譯

    implementation 'com.jakewharton:butterknife:8.8.1'

    annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

修改後的MainActivity檔案類代碼如下：

public class MainActivity extends Activity {
    @BindView(R.id.topbar) QMUITopBar mTopBar;
    @BindView(R.id.groupListView) QMUIGroupListView mGroupListView;
    private final String TAG = getClass().getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 沉浸式狀态欄
        QMUIStatusBarHelper.translucent(this);
        View root = LayoutInflater.from(this).inflate(R.layout.activity_main, null);
        ButterKnife.bind(this, root);
        //初始化狀态欄
        initTopBar();
        //設定view
        setContentView(root);
    }
    //初始化狀态欄
    private void initTopBar() {
        mTopBar.setTitle(getResources().getString(R.string.activity_title_main));
    }
}
           

OK。代碼工作完畢，現在運作看看效果。主界面就出現如下圖所示的樣子，沉浸式狀态欄，藍色風格效果。

好了，本節到此。就可以正常的使用QMUI Android這個UI架構了，下節實作Xposed子產品是否激活的判斷。

代碼已送出GitHub：https://github.com/dalu2048/WeChatGenius

下節：判斷Xposed是否安裝，以及子產品是否激活

連結：https://blog.csdn.net/weixin_42127613/article/details/81868440