myflag step14：打卡功能

引言

在这半周的工作中，我们小组仍然进行后台和客户端的代码编写工作，以及用户界面的优化，具体内容如下：

• 客户端 ：意见反馈及打卡设计
• 后台：打卡后台
• 界面：打卡界面

下面做一个详细的介绍。

客户端

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>

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

        <EditText
            android:id="@+id/suggest_edit_text"
            android:layout_width="0dp"
            android:layout_height="212dp"
            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、内部逻辑实现

该界面的内部逻辑不算很复杂，需要向服务器发送的消息是用户的id和反馈的意见。用户的id已经缓存在了SharedPreferences对象中，而反馈的意见则是从界面的文本输入框EditText中获取。获取信息之后，对合法性进行一些检查，向服务器发送数据，处理反馈的结果就可以了。
具体实现代码如下所示：

package com.example.sdu.myflag.activity;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;

import com.example.sdu.myflag.R;
import com.example.sdu.myflag.base.BaseActivity;
import com.example.sdu.myflag.base.BaseApplication;
import com.example.sdu.myflag.util.NetUtil;

import java.io.IOException;
import java.util.ArrayList;

import okhttp3.Response;

/**
 * 意见反馈界面
 */
public class SuggestionActivity extends BaseActivity {

    EditText suggestion_edit_text;
    String suggestion, uid;

    @Override
    public int getLayoutId() {
        return R.layout.activity_suggestion;
    }

    @Override
    public void afterCreate(Bundle savedInstanceState) {
        suggestion_edit_text = (EditText) findViewById(R.id.suggest_edit_text);
        suggestion = "";
        uid = BaseApplication.getInstance().getSharedPreferences("User", MODE_PRIVATE).getString("uid", "");
    }

    public void judgeFinishAction(View view) {
        if (uid.equals("")) {
            Toast.makeText(SuggestionActivity.this, "获取用户id失败", Toast.LENGTH_SHORT).show();
            return;
        }
        suggestion = suggestion_edit_text.getText().toString();

        if (suggestion.equals("")) {
            Toast.makeText(SuggestionActivity.this, "请输入您的意见", Toast.LENGTH_SHORT).show();
            return;
        }

        ArrayList<NetUtil.Param> params = new ArrayList<>();
        params.add(new NetUtil.Param("uid", uid));
        params.add(new NetUtil.Param("suggestion", suggestion));
        try {
            NetUtil.getResult(NetUtil.judgeSuperViseUrl, params, new SuggestionCallBack());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void superViseJudgeBack(View view) {
        this.finish();
    }

    class SuggestionCallBack implements NetUtil.CallBackForResult {
        @Override
        public void onFailure(final IOException e) {
            SuggestionActivity.this.runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Toast.makeText(SuggestionActivity.this, e.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        }

        @Override
        public void onSuccess(Response response) {
            if (response.isSuccessful()) {
                try {
                    final String res = response.body().string();
                    SuggestionActivity.this.runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            if (res.equals("1")) {
                                Toast.makeText(SuggestionActivity.this, "反馈成功", Toast.LENGTH_SHORT).show();
                                SuggestionActivity.this.finish();
                            }
                            else {
                                Toast.makeText(SuggestionActivity.this, "反馈失败", Toast.LENGTH_SHORT).show();
                            }
                        }
                    });
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

在代码编写完毕之后，进行了白盒测试。因为内部逻辑不是很复杂的原因，测试顺利通过了。

后台

我和我的团队共同探讨了打卡的功能，这让我们的app可以更进一步。
本周的主要任务是完成剩下的功能即打卡功能，打卡的功能没有太复杂，可以移植我们前一部分的flag的代码来使用，所以比较的方便。

根据myflag进行打卡，上传自己的图片和内容，让朋友们看到自己的内容。同时让好友点赞与评论， 有课前面的铺垫，这次就变得非常简单。

界面

第二阶段，打卡的素材搜集以及测试

效果图：

其中卡片的向左划和向右划分别代表了某个Flag成功与否

acticity_my.xml

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

    <com.lorentzos.flingswipe.SwipeFlingAdapterView
        android:id="@+id/frame"
        android:background="#ffeee9e2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:rotation_degrees="15.5"
        tools:context=".MyActivity" />

    <include layout="@layout/buttons" />

</merge>

Buttons.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_gravity="center_horizontal|bottom"
    android:layout_marginBottom="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/left"
        android:layout_margin="10dp"
        android:text="Left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/right"
        android:layout_margin="10dp"
        android:text="Right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Item.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_gravity="center"
    android:layout_width="250dp"
    android:layout_height="170dp">

    <TextView
        android:id="@+id/helloText"
        android:textSize="40sp"
        android:textColor="@android:color/white"
        android:background="#E339"
        android:gravity="center"
        tools:text="@string/hello_world"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <View
        android:id="@+id/item_swipe_left_indicator"
        android:alpha="0"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:background="#A5F" />

    <View
        android:id="@+id/item_swipe_right_indicator"
        android:alpha="0"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_margin="10dp"
        android:layout_gravity="right"
        android:background="#5AF" />

    <Space
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</FrameLayout>