MyFlag Step9 ：Flag功能相关的设计

引言

不知不觉，我们的创新项目实训已经过去了大半，按照我们事先商定好的计划，这周的任务主要是安卓客户端与后天有关具体的Flag的功能的相关实现，计划能顺利实施，得益于我们前期花费大量时间的讨论以及对工作量的正确的评估。本周的主要任务有：

• 客户端 ：我的好友消息和Flag详情
• 后台：DAO层的详细逻辑梳理架构

• 前端：客户端设计工作的细节调整以及界面优化

  在这里我着重介绍下前端的工作：

客户端+前端

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">    <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="friendMsgBack"        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" />    <Button        android:id="@+id/messageNextButton"        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:paddingLeft="4dp"        android:paddingRight="4dp"        android:text="下一步"        android:textColor="@color/login_button_default_blue"        android:textSize="17sp" /></RelativeLayout><TextView    android:layout_width="match_parent"    android:layout_height="60dp"    android:padding="16dp"    android:text="对方需要你填写验证信息"    android:textColor="@color/black"    android:textSize="17sp" /><EditText    android:id="@+id/messageEditText"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@color/white"    android:gravity="left|top"    android:inputType="textMultiLine"    android:minLines="6"    android:padding="8dp"    android:textColor="@color/black"    android:textSize="16sp" /></LinearLayout>

其中，核心控件ListView以及每个item的对应视图

ListView Item

相对应的Activity相关的核心实现部分为MyMessageFriendActivity
其主要功能是从服务器获取数据后的回调函数，根据请求的成功或者失败做出具体的响应。

2、Flag详情界面
设置每条Flag的点击事件，点击后进入flag详情界面，可以查看flag的详情信息，并且有些根据情景设定的功能按钮。
部分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:orientation="vertical"><RelativeLayout    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    android:background="@color/white">    <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="applySuperviseDetailBack"        android:src="?attr/homeAsUpIndicator" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="FLAG详情"        android:textColor="@color/black"        android:textSize="19sp" /></RelativeLayout><RelativeLayout    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_marginTop="20dp"    android:layout_weight="1"    android:background="@color/white"    android:gravity="bottom"    android:orientation="vertical">    <ImageView        android:id="@+id/msg_icon_img"        android:layout_width="80dp"        android:layout_height="80dp"        android:layout_centerHorizontal="true"        android:src="@drawable/head_icon_default" />    <RelativeLayout        android:id="@+id/nick_name_layout"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/msg_icon_img"        android:layout_centerHorizontal="true"        android:layout_marginBottom="15dp"        android:layout_marginTop="10dp">        <TextView            android:id="@+id/applysupervise_detail_nickName_tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:maxWidth="150dp"            android:text="nick"            android:textColor="@color/black"            android:textSize="19sp" />        <EditText            android:id="@+id/remark_edt"            android:layout_width="150dp"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:maxWidth="150dp"            android:textColor="@color/black"            android:textSize="18sp"            android:visibility="gone" />    </RelativeLayout></RelativeLayout><LinearLayout    android:layout_width="match_parent"    android:layout_height="0dp"    android:layout_weight="2"    android:background="@color/white"    android:orientation="vertical">    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="80dp"        android:layout_marginTop="15dp"        android:orientation="horizontal">        <TextView            android:id="@+id/isTeam_tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="[团体]："            android:textColor="@color/black"            android:textSize="15sp" />        <TextView            android:id="@+id/applysupervise_detail_flagName_tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="8dp"            android:text="jkl"            android:textColor="@color/text_dark_gray"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:id="@+id/supervise_mem_layout"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="80dp"        android:layout_marginTop="5dp"        android:orientation="horizontal">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="队员："            android:textColor="@color/black"            android:textSize="15sp" />        <TextView            android:id="@+id/supervise_member_tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/text_dark_gray"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="80dp"        android:layout_marginTop="5dp"        android:orientation="horizontal">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="时间："            android:textColor="@color/black"            android:textSize="15sp" />        <TextView            android:id="@+id/supervise_detail_time_tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/text_dark_gray"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="80dp"        android:layout_marginTop="5dp"        android:orientation="horizontal">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="奖励设置："            android:textColor="@color/black"            android:textSize="15sp" />        <TextView            android:id="@+id/supervise_detail_award_tv"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/text_dark_gray"            android:textSize="15sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="70dp"        android:gravity="center"        android:orientation="horizontal">        <Button            android:id="@+id/agree_apply_supervise_btn"            android:layout_width="120dp"            android:layout_height="wrap_content"            android:background="@drawable/login_button_bg"            android:onClick="agreeApply"            android:text="同意申请"            android:textColor="@color/white" />        <Button            android:id="@+id/refuse_apply_supervise_btn"            android:layout_width="120dp"            android:layout_height="wrap_content"            android:background="@drawable/login_button_bg"            android:onClick="refuseApply"            android:text="拒绝申请"            android:layout_marginLeft="20dp"            android:textColor="@color/white" />    </LinearLayout>    <TextView        android:id="@+id/agree_ornot_tv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:text="已同意"        android:textColor="@color/login_button_default_blue"        android:textSize="18sp" /></LinearLayout></LinearLayout>

显示视图如下：

根据具体的情景设定，设置点击事件等，其中SuperViseDetailActivity的Actiity是在创建后，会获取来自父界面的传入信息，判断来自哪一个界面，从而决定要显示什么按钮，进行什么交互。
代码编写完后，我们进行了代码互测，针对不同的输入信息，设计了多组测试数据，然后在真机上对每一组数据进行实际测试，检查后台返回数据是否，直到这两个功能的测试都运行无误。

MenuPath的持续改进

效果图：

点击前 点击后

总结

界面的优化过程是一个代码修改工作量小但十分浪费时间的工作过程，往往需要考虑到各方面因素，一丁点的细节虽然用户不会察觉，但是我们还是要努力的做下去。