MyFlag Step10：后台代码解耦与客户端具体功能实现

引言

本周恰巧是开发周期的中期，我们按部就班有条不紊的按照原计划进行开发，这一阶段我们主要的任务有以下几个方面：

• DAO层的代码重写与解耦
• 评论功能+我的消息

在这里，我对自己主要从事的工作，即发表评论和查看评论这两个比较密切的功能的实现，做一个详细的介绍。

一、界面编写

1、发表评论

通过分析之前的详细设计，发现该界面比较简单。在最外层使用一个纵向的LinearLayout，内部再嵌套若干个横向LinearLayout或RelativeLayout，再布置各种控件就可以实现。

根据代码生成的预览效果如下所示：

源代码如下所示：

<?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:id="@+id/back_btn"            android:layout_width="?attr/actionBarSize"            android:layout_height="?attr/actionBarSize"            android:layout_alignParentLeft="true"            android:background="@drawable/toolbar_back_bg"            android:onClick="superViseJudgeBack"            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" />        <TextView            android:id="@+id/judge_finish_btn"            android:layout_width="wrap_content"            android:layout_height="?attr/actionBarSize"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"            android:background="@drawable/toolbar_back_bg"            android:gravity="center"            android:onClick="judgeFinishAction"            android:padding="5dp"            android:text="评价"            android:textColor="@color/login_button_default_blue"            android:textSize="19sp" />    </RelativeLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="20dp"        android:background="@color/white"        android:gravity="center_vertical"        android:orientation="horizontal">        <TextView            android:layout_width="0dp"            android:layout_height="50dp"            android:layout_weight="1"            android:gravity="center"            android:text="是否完成"            android:textColor="@color/black"            android:textSize="15sp" />        <carbon.widget.RadioGroup            android:id="@+id/judge_radio_group"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="3"            android:gravity="center"            android:orientation="horizontal">            <carbon.widget.RadioButton                android:id="@+id/judge_radio_ok"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="是" />            <carbon.widget.RadioButton                android:id="@+id/judge_radio_not"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_marginLeft="20dp"                android:text="否" />        </carbon.widget.RadioGroup>    </LinearLayout>    <View        android:layout_width="match_parent"        android:layout_height="2dp"        android:background="@color/activity_bg_gray" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="20dp"        android:background="@color/white"        android:gravity="center_vertical"        android:orientation="horizontal">        <TextView            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_marginTop="8dp"            android:layout_weight="1"            android:gravity="center_horizontal"            android:text="评语"            android:textColor="@color/black"            android:textSize="15sp" />        <View            android:layout_width="1dp"            android:layout_height="match_parent"            android:layout_marginBottom="5dp"            android:layout_marginTop="5dp"            android:background="@color/activity_bg_gray" />        <EditText            android:id="@+id/judge_edit_text"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="3"            android:background="@null"            android:gravity="start"            android:minLines="5"            android:padding="8dp"            android:textColor="@color/text_dark_gray"            android:textSize="14sp" />    </LinearLayout></LinearLayout>

2、查看评论界面

通过分析之前的详细设计，发现该界面也比较简单。在最外层使用一个纵向的LinearLayout，内部嵌套一个RelativeLayout，再嵌套一个ListView就可以实现。

根据代码生成的预览效果如下所示，在实际运行之中，Item字样会被实际的用户昵称、头像、评论信息等所替代。

实现该界面的源代码如下所示：

<?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: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="CommentBack"            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>    <ListView        android:id="@+id/comment_lv"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

二、内部逻辑的代码编写

1、发表评论

发表评论的界面是用户选中一个Flag进行评论时跳转过来的，在跳转前已经将该Flag的id，即fid存入了Intent中，故可以直接获取，而用户的uid则是一直存储在SharedPreferences中的，获取也很方便。除此之外，只需要获取用户在界面上输入的内容，将这些内容都放入链表中，调用NetUtil类的相应方法，并处理返回结果，即在界面上呈现给用户就可以了。具体实现代码如下所示：

public class SuperViseJudgeActivity extends BaseActivity {    EditText judge_edit_text;    RadioGroup judge_radio_group;    String isFinish, evaluate, fid, uid;    @Override    public int getLayoutId() {        return R.layout.activity_supervise_judge;    }    @Override    public void afterCreate(Bundle savedInstanceState) {        judge_radio_group = (RadioGroup) findViewById(R.id.judge_radio_group);        judge_edit_text = (EditText) findViewById(R.id.judge_edit_text);        isFinish = "1";        evaluate = "";        fid = getIntent().getStringExtra("fid");        uid = BaseApplication.getInstance().getSharedPreferences("User", MODE_PRIVATE).getString("uid", "");        judge_radio_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup group, int checkedId) {                switch (checkedId) {                    case R.id.judge_radio_ok:                        isFinish = "2";                        break;                    case R.id.judge_radio_not:                        isFinish = "1";                        break;                }            }        });    }    public void judgeFinishAction(View view) {        if (uid.equals("")) {            Toast.makeText(SuperViseJudgeActivity.this, "获取用户id失败", Toast.LENGTH_SHORT).show();            return;        }        evaluate = judge_edit_text.getText().toString();        ArrayList<NetUtil.Param> params = new ArrayList<>();        params.add(new NetUtil.Param("fid", fid));        params.add(new NetUtil.Param("uid", uid));        params.add(new NetUtil.Param("achieve", isFinish));        params.add(new NetUtil.Param("evaluate", evaluate));        try {            NetUtil.getResult(NetUtil.judgeSuperViseUrl, params, new JudgeCallBack());        } catch (IOException e) {            e.printStackTrace();        }    }    public void superViseJudgeBack(View view) {        this.finish();    }    class JudgeCallBack implements NetUtil.CallBackForResult {        @Override        public void onFailure(final IOException e) {            SuperViseJudgeActivity.this.runOnUiThread(new Runnable() {                @Override                public void run() {                    Toast.makeText(SuperViseJudgeActivity.this, e.getMessage(), Toast.LENGTH_SHORT).show();                }            });        }        @Override        public void onSuccess(Response response) {            if (response.isSuccessful()) {                try {                    final String res = response.body().string();                    SuperViseJudgeActivity.this.runOnUiThread(new Runnable() {                        @Override                        public void run() {                            if (res.equals("1")) {                                Toast.makeText(SuperViseJudgeActivity.this, "评论成功", Toast.LENGTH_SHORT).show();                                SuperViseJudgeActivity.this.finish();                            }                            else if(res.equals("2")){                                Toast.makeText(SuperViseJudgeActivity.this, "你已评价过该FLAG，无法重复评价", Toast.LENGTH_SHORT).show();                                SuperViseJudgeActivity.this.finish();                            }                            else {                                Toast.makeText(SuperViseJudgeActivity.this, "评论失败", Toast.LENGTH_SHORT).show();                            }                        }                    });                } catch (IOException e) {                    e.printStackTrace();                }            }        }    }}

2、查看评论

根据之前的详细设计，跳转到该界面的上一个界面已经从服务器获取了好友对该Flag的全部评价，放入了ArrayList中了。因为一个评价包含了用户uid，用户昵称，评价本身等多个内容，故自定义了类SuperViseBriefBean，代码如下所示，这符合面向对象的设计思想。

public class SuperViseBriefBean implements Serializable{    public String uid;    public String nickname;    public String achieve;    public String evaluate;    public int iconId;    public SuperViseBriefBean(String uid, String nickname, String achieve, String evaluate, int iconId){        this.uid = uid;        this.nickname = nickname;        this.achieve = achieve;        this.evaluate = evaluate;        this.iconId = iconId;    }}

为了界面更为美观，我们设计界面不但要显示评论本身的内容，而且还要显示用户的昵称，头像等内容。一般的ListView可以显示复杂的内容，但需要自定义适配器adapter，以明确所需要显示的内容，我自定义了类CommentListAdapter作为适配器，代码如下所示：

package com.example.sdu.myflag.adapter;import android.content.Context;import android.graphics.LightingColorFilter;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;import com.example.sdu.myflag.R;import com.example.sdu.myflag.base.BaseApplication;import com.example.sdu.myflag.bean.SuperViseBriefBean;import java.util.ArrayList;/** * Created by Administrator on 2016/9/23. */public class CommentListAdapter extends BaseAdapter {    private ArrayList<SuperViseBriefBean> SuperViseBriefList;    private Context context;    public CommentListAdapter(Context context, ArrayList<SuperViseBriefBean> SuperViseBriefList){        this.context = context;        this.SuperViseBriefList = SuperViseBriefList;    }    @Override    public int getCount() {        return SuperViseBriefList.size();    }    @Override    public Object getItem(int position) {        return SuperViseBriefList.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        convertView = LayoutInflater.from(context).inflate(R.layout.item_comment, null);        TextView nicknameTv = (TextView) convertView.findViewById(R.id.comment_nickname);        TextView commentText = (TextView) convertView.findViewById(R.id.comment_text);        ImageView comment_icon = (ImageView) convertView.findViewById(R.id.comment_icon);        comment_icon.setImageDrawable(context.getResources().getDrawable(BaseApplication.HeadIcon[SuperViseBriefList.get(position).iconId]));        nicknameTv.setText(SuperViseBriefList.get(position).nickname);        commentText.setText(SuperViseBriefList.get(position).evaluate);        return convertView;    }}

在上述工作都完成之后，该Activity本身就十分简单了，只需要从Intent中获取保存评论的ArrayList，应用适配器进行适配，显示在界面的ListView中就可以了。唯一的事件处理是左上角的返回按钮，只需要一行代码就可以实现。我定义该类为CommentActivity，具体的代码如下所示。

package com.example.sdu.myflag.activity;import android.content.Intent;import android.os.Bundle;import android.support.v4.widget.SwipeRefreshLayout;import android.view.View;import android.widget.ListView;import com.example.sdu.myflag.R;import com.example.sdu.myflag.adapter.CommentListAdapter;import com.example.sdu.myflag.base.BaseActivity;import com.example.sdu.myflag.bean.SuperViseBriefBean;import java.util.ArrayList;/** * 评论界面 */public class CommentActivity extends BaseActivity {    private ListView comment_lv;    private ArrayList<SuperViseBriefBean> SuperViseBriefList;    private CommentListAdapter adapter;    @Override    public int getLayoutId() {        return R.layout.activity_comment;    }    @Override    public void afterCreate(Bundle savedInstanceState) {        comment_lv = (ListView) findViewById(R.id.comment_lv);        Intent intent = getIntent();        SuperViseBriefList = (ArrayList<SuperViseBriefBean>) intent.getExtras().get("briefBean");        adapter = new CommentListAdapter(this, SuperViseBriefList);        comment_lv.setAdapter(adapter);    }    public void CommentBack(View view) {        CommentActivity.this.finish();    }}

三、总结

在这半周中，我实现了两个功能。之所以放在一起实现，是因为这两个功能关系比较密切，全部实现了才便于测试。虽然都不是很复杂，但工作量还是有一点的。不过代码编写比较顺利，测试也顺利通过，还是很令人高兴的。总体来说，目前的进度还是不错的，但是还需要继续的努力。