编写微信聊天机器人11《聊天精灵WeChatGenius》：加入关于页面

版权声明：允许转载，请注明来源。 https://blog.csdn.net/weixin_42127613/article/details/81876492

上节加入了登录页面，链接：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