編寫微信聊天機器人11《聊天精靈WeChatGenius》：加入關於頁面

上節加入了登錄頁面，鏈接：https://blog.csdn.net/weixin_42127613/article/details/81876229

本節索性再把關於頁面加入進去，完善一下UI界面，看上去更飽滿。

本節內容與主業務關係不大，也可以跳過。關於頁面的最終實現效果如下圖所示。

登錄頁面，在右上角和底部，加上了關於的文本鏈接和圖標鏈接。如下圖所示。

雖然只是增加了關於頁面，但是在頁面的功能上，增加了當前APP版本號獲取、剪貼板複製、訪問網址、QMUIGroupListView列表項的點擊批量處理等功能。

1、新增AboutActivity頁面。修改佈局文件activity_about.xml

<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=".ui.AboutActivity">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical">
            <!--LOGO-->
            <com.qmuiteam.qmui.widget.QMUIRadiusImageView
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="@dimen/qmui_content_padding_horizontal"
                android:padding="@dimen/common_content_spacing"
                android:src="@mipmap/logo"
                app:qmui_border_color="?attr/qmui_config_color_gray_6"
                app:qmui_border_width="1px"
                app:qmui_corner_radius="15dp" />
            <!--版本名稱-->
            <TextView
                android:id="@+id/version"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:textColor="?attr/qmui_config_color_gray_3"
                android:textSize="16sp" />

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

            <Space
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

            <TextView
                android:id="@+id/copyright"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="25dp"
                android:gravity="center_horizontal"
                android:textColor="?attr/qmui_config_color_gray_7" />
        </LinearLayout>

    </ScrollView>
</LinearLayout>

2、AboutActivity類文件。列表項的初始化。

    //初始化QMUIGroupListView
    private void initAboutList() {
        //初始化LOGO下面的名稱和版本號
        mVersionTextView.setText(String.format("%s V%s", getResources().getString(R.string.activity_title_main),
                AppUtils.getVersionName(this)));

        //作者
        QMUICommonListItemView itemAuthor = mAboutGroupListView.createItemView("作者");
        itemAuthor.setDetailText("大路");
        //微信
        QMUICommonListItemView itemWechat = mAboutGroupListView.createItemView("微信");
        itemWechat.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_CHEVRON);
        itemWechat.setDetailText("dalu2048");
        itemWechat.setTag(R.id.listitem_tag_1);
        //QQ
        QMUICommonListItemView itemQQ = mAboutGroupListView.createItemView("QQ");
        itemQQ.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_CHEVRON);
        itemQQ.setDetailText("1801099979");
        itemQQ.setTag(R.id.listitem_tag_2);
        //GitHub主頁
        QMUICommonListItemView itemGitHub = mAboutGroupListView.createItemView("GitHub主頁");
        itemGitHub.setOrientation(QMUICommonListItemView.VERTICAL);
        itemGitHub.setDetailText("https://github.com/dalu2048/WeChatGenius");
        itemGitHub.setAccessoryType(QMUICommonListItemView.ACCESSORY_TYPE_CHEVRON);
        itemGitHub.setTag(R.id.listitem_tag_3);
        QMUIGroupListView.newSection(this)
                .setDescription(getString(R.string.about_description))
                .addItemView(itemAuthor, null)
                .addItemView(itemWechat, mOnClickListenerListItem)
                .addItemView(itemQQ, mOnClickListenerListItem)
                .addItemView(itemGitHub, mOnClickListenerListItem)
                .addTo(mAboutGroupListView);

        //初始化頁面底部的版權
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy", Locale.CHINA);
        String currentYear = dateFormat.format(new java.util.Date());
        mCopyrightTextView.setText(String.format(getResources().getString(R.string.about_copyright), currentYear));

    }

對QMUIGroupListView點擊事件的批量處理，通過關聯tag數據進行識別。

    //列表項點擊事件處理
    View.OnClickListener mOnClickListenerListItem = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            //region 列表項點擊事件
            QMUICommonListItemView listItemView = (QMUICommonListItemView) view;
            int tag = (int) listItemView.getTag();
            Intent intent;

            switch (tag) {
                case R.id.listitem_tag_1:  //複製微信
                    copyToClipboard("微信", listItemView.getDetailText().toString());
                    break;
                case R.id.listitem_tag_2:  //複製QQ
                    copyToClipboard("QQ", listItemView.getDetailText().toString());
                    break;
                case R.id.listitem_tag_3:  //訪問GitHub網址
                    openWebsite(listItemView.getDetailText().toString());
                    break;
            }
            //endregion
        }
    };

修改res裏面values文件夾下的ids.xml文件，增加對id的定義。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="qmuidemo" type="id"/>
    <item name="main_container" type="id"/>

    <item name="empty_button" type="id"/>

    <item name="topbar_right_about_button" type="id"/>
    <item name="topbar_right_change_button" type="id"/>

    <item name="layout_for_test" type="id"/>

    <!--GroupList的ListItem項目關聯Tag值-->
    <item name="listitem_tag_1" type="id" />
    <item name="listitem_tag_2" type="id" />
    <item name="listitem_tag_3" type="id" />
    <item name="listitem_tag_4" type="id" />
    <item name="listitem_tag_5" type="id" />
    <item name="listitem_tag_6" type="id" />
    <item name="listitem_tag_7" type="id" />
    <item name="listitem_tag_8" type="id" />
    <item name="listitem_tag_9" type="id" />
    <item name="listitem_tag_10" type="id" />
    <item name="listitem_tag_11" type="id" />
    <item name="listitem_tag_12" type="id" />
    <item name="listitem_tag_13" type="id" />
    <item name="listitem_tag_14" type="id" />
    <item name="listitem_tag_15" type="id" />
    <item name="listitem_tag_16" type="id" />
    <item name="listitem_tag_17" type="id" />
    <item name="listitem_tag_18" type="id" />
    <item name="listitem_tag_19" type="id" />
    <item name="listitem_tag_20" type="id" />
</resources>

其他代碼，就不再貼出。可以下載源碼進行查看。

源碼已提交GitHub：https://github.com/dalu2048/WeChatGenius