第四周（2） 申请监督消息处理功能

引言

本周的后两天，我的主要工作是编写客户端的“申请监督消息处理”的功能，监督消息就是别人邀请我来监督他的flag的消息，要对这些消息进行分类和提供处理方法，下面介绍下我这两天的工作。

申请监督消息处理

申请监督消息查看可以通过主界面下的tab点击“我”，跳转到“我”界面，然后点击“申请监督消息”按钮，即可查看所有的申请让我监督的flag消息，我可以查看具体的消息，并且同意或者拒绝。

1、界面设计

所有的消息界面xml视图代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/activity_bg_gray"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        android:padding="0dp">

        <ImageButton
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize"
            android:layout_alignParentLeft="true"
            android:background="@drawable/toolbar_back_bg"
            android:onClick="myMessageSuperviseBack"
            android:src="?attr/homeAsUpIndicator" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="\@我的消息"
            android:textColor="@color/black"
            android:textSize="19sp" />
    </RelativeLayout>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/supervise_swipe_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp">

        <ListView
            android:id="@+id/myMessageSuperViseListView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="20dp"
            android:background="@color/white" />
    </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

这个界面中，只有一个用SwipeRefreshLayout包住的ListView控件，因为消息是在listView中显示的，所以要为ListView设置item布局，用SwipeRefreshLayout包住可以对ListView进行下拉刷新操作。

界面如图：

ListVIew 的item布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/toolbar_back_bg"
    android:padding="15dp">

    <ImageView
        android:id="@+id/head_icon_msg"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerVertical="true"
        android:src="@drawable/head_icon_default" />

    <ImageView
        android:id="@+id/unread_red_img"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/unread_red_bg" />

    <TextView
        android:id="@+id/message_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="8dp"
        android:layout_toLeftOf="@+id/read_tv"
        android:layout_toRightOf="@+id/head_icon_msg"
        android:ellipsize="middle"
        android:lines="1"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <ImageView
        android:id="@+id/right_arrow"
        android:layout_width="15dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:scaleType="fitCenter"
        android:src="@drawable/ahead_arrow" />

    <TextView
        android:id="@+id/read_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginRight="10dp"
        android:layout_toLeftOf="@+id/right_arrow"
        android:text="[未读]"
        android:textColor="@color/text_hint_gray"
        android:textSize="16sp" />
</RelativeLayout>

界面如图所示：

每一条消息都用这个界面为模板，通过网络请求到的数据来为每一条消息显示相关数据。

2、逻辑代码编写

监督消息界面的逻辑如下：

• 判断网络是否可用
• 若可用，则根据服务器要求拟定相关参数值，发送请求到相应的url获取数据
• 判断是否获取成功
• 若成功，则抽取每条数据
• 根据每条数据的头像id，监督内容，是否已读来创建item
• 所有数据处理好后，将item置入ListView并显示
• 为每个item设置点击事件，点击跳转到具体的消息界面

这里贴出请求回掉函数代码，这段代码是在网络请求操作后根据返回值回掉的代码：

class SuperViseMsgCallBack implements NetUtil.CallBackForResult {

        private ArrayList<SuperviseBean> mList;

        public SuperViseMsgCallBack(){
            mList = new ArrayList<>();
        }

        @Override
        public void onFailure(final IOException e) {
            MyMessageSuperViseActivity.this.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(MyMessageSuperViseActivity.this, e.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        }

        @Override
        public void onSuccess(Response response) {
            if (response.isSuccessful()) {
                try {
                    String res = response.body().string();
                    JSONObject jo = new JSONObject(res);
                    JSONArray jsonArray = jo.getJSONArray("request");

                    int size = jsonArray.length();
                    for (int i = 0; i < size; i++) {
                        JSONObject jsonObject = jsonArray.getJSONObject(i);
                        String uid = jsonObject.optString("uid");
                        String agree = jsonObject.optString("agree");
                        String fid = jsonObject.optString("fid");
                        String nickname = jsonObject.optString("nickname");
                        int iconId = jsonObject.optInt("photo");
                        SuperviseBean superviseBean = new SuperviseBean(fid, agree, uid);
                        superviseBean.iconId = iconId;
                        superviseBean.nickname = nickname;
                        mList.add(superviseBean);
                    }
                    MyMessageSuperViseActivity.this.runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            adapter = new SuperViseMsgAdapter(MyMessageSuperViseActivity.this, mList);
                            listView.setAdapter(adapter);
                        }
                    });
                } catch (JSONException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

3、测试

在朱宏完成社区功能后，我们进行了测试，最后经过了测试数据的测试后，在真机上运行界面如图所示所示：在目前的测试中，没有发现问题。

总结

后两天除了对新功能的编写，我还对前两天工作的界面进行了修改完善，总体来说不错的完成了这周的任务，目前APP的模样已经基本明了，我们也十分期待APP的最终成型，我们会继续努力。