第三週（1） app頁面初步設計與代碼編寫

引言

本週我們主要進行進行頁面設計與代碼編寫，在前兩天的工作中我們主要進行了以下工作：

• 頁面的初步設計與邏輯交互設計
• 客戶端代碼編寫
• 後臺代碼編寫

接下來我針對客戶端代碼的編寫中我工作的部分：註冊功能進行介紹：

註冊功能

1、界面編寫

註冊界面如圖所示：

界面實現起來十分簡單了，對於每一個條目，首先是一個ImageView控件顯示圖標，然後是TextView顯示文字，最後是一個EditText輸入框，接受用戶輸入，將每一個條目設置爲水平居中，下面的完成按鈕是一個Button控件，使用自定義的style爲其定義顏色、樣式、點擊效果，界面的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: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="backTo"
            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>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/activity_bg_gray"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/transparent"
                android:orientation="vertical"
                android:paddingTop="25dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_vertical">

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/login_userid_icon" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="8dp"
                            android:text="暱稱"
                            android:textColor="@color/black"
                            android:textSize="16sp" />
                    </LinearLayout>

                    <EditText
                        android:id="@+id/registerNameEditText"
                        android:layout_width="0dp"
                        android:layout_height="28dp"
                        android:layout_weight="2"
                        android:background="@drawable/edittext_blue_bord_bg"
                        android:paddingLeft="12dp"
                        android:paddingRight="12dp"
                        android:textColor="@color/black"
                        android:textSize="14sp" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_vertical">

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/password_icon" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="8dp"
                            android:text="密碼"
                            android:textColor="@color/black"
                            android:textSize="16sp" />
                    </LinearLayout>

                    <EditText
                        android:id="@+id/registerPasswordEditText"
                        android:layout_width="0dp"
                        android:layout_height="28dp"
                        android:layout_weight="2"
                        android:background="@drawable/edittext_blue_bord_bg"
                        android:inputType="textPassword"
                        android:paddingLeft="12dp"
                        android:paddingRight="12dp"
                        android:textColor="@color/black"
                        android:textSize="14sp" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_vertical">

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/password_icon" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="8dp"
                            android:text="確認密碼"
                            android:textColor="@color/black"
                            android:textSize="16sp" />
                    </LinearLayout>

                    <EditText
                        android:id="@+id/registerPasswordAgainEditText"
                        android:layout_width="0dp"
                        android:layout_height="28dp"
                        android:layout_weight="2"
                        android:background="@drawable/edittext_blue_bord_bg"
                        android:inputType="textPassword"
                        android:paddingLeft="12dp"
                        android:paddingRight="12dp"
                        android:textColor="@color/black"
                        android:textSize="14sp" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_vertical">

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/phone_num_icon" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="8dp"
                            android:text="手機號"
                            android:textColor="@color/black"
                            android:textSize="16sp" />
                    </LinearLayout>

                    <EditText
                        android:id="@+id/registerPhoneNumberEditText"
                        android:layout_width="0dp"
                        android:layout_height="28dp"
                        android:layout_weight="2"
                        android:background="@drawable/edittext_blue_bord_bg"
                        android:paddingLeft="12dp"
                        android:paddingRight="12dp"
                        android:textColor="@color/black"
                        android:textSize="14sp" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_vertical">

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/email_num_icon" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="8dp"
                            android:text="郵箱"
                            android:textColor="@color/black"
                            android:textSize="16sp" />
                    </LinearLayout>

                    <EditText
                        android:id="@+id/registerEmailEditText"
                        android:layout_width="0dp"
                        android:layout_height="28dp"
                        android:layout_weight="2"
                        android:background="@drawable/edittext_blue_bord_bg"
                        android:paddingLeft="12dp"
                        android:paddingRight="12dp"
                        android:textColor="@color/black"
                        android:textSize="14sp" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center_vertical">

                        <ImageView
                            android:layout_width="16dp"
                            android:layout_height="16dp"
                            android:src="@drawable/personal_info_icon" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="8dp"
                            android:text="個人信息"
                            android:textColor="@color/black"
                            android:textSize="16sp" />
                    </LinearLayout>

                    <EditText
                        android:id="@+id/registerPersonalInformationEditText"
                        android:layout_width="0dp"
                        android:layout_height="28dp"
                        android:layout_weight="2"
                        android:background="@drawable/edittext_blue_bord_bg"
                        android:hint="選填"
                        android:paddingLeft="12dp"
                        android:paddingRight="12dp"
                        android:textColor="@color/black"
                        android:textColorHint="@color/text_hint_gray"
                        android:textSize="14sp" />
                </LinearLayout>

            </LinearLayout>

            <Button
                android:id="@+id/registerCompleteButton"
                android:layout_width="240dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginBottom="60dp"
                android:layout_marginTop="60dp"
                android:background="@drawable/login_button_bg"
                android:text="完成"
                android:textColor="@color/white"
                android:textSize="16sp" />
        </LinearLayout>
    </ScrollView>
</LinearLayout>

2、邏輯編寫

註冊功能的邏輯如下：

1. 檢查網絡是否可用，不可用跳轉到9
2. 檢查用戶信息是否輸入合法，不合法跳轉到9
3. 檢查兩次密碼輸入是否一致，不一致跳轉到9
4. 建立鏈表，將所有註冊信息存入其中
5. 調用網絡工具類的相應接口，等待返回結果
6. 判斷返回結果是否成功，不成功跳轉到9
7. 驗證返回的json數據是否正確，不正確跳轉到9
8. 註冊成功，跳轉到登錄界面
9. 註冊失敗

在RegisterActivity類中實現註冊邏輯，代碼如下：

package com.example.sdu.myflag.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.widget.*;

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

import org.json.JSONException;
import org.json.JSONObject;

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

import okhttp3.Response;

/**
 * Created by Administrator on 2016/8/17.
 */
public class RegisterActivity extends BaseActivity {
    private EditText nameEditText, passwordEditText, passwordAgainEditText, phoneNumberEditText, emailEditText, personalInformationEditText;
    private String name, password, passwordAgain, phoneNumber, email, personalInformation;
    private Button completeButton;

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

    @Override
    public void afterCreate(Bundle savedInstanceState) {
        //獲取各組件id
        nameEditText = (EditText) findViewById(R.id.registerNameEditText);
        passwordEditText = (EditText) findViewById(R.id.registerPasswordEditText);
        passwordAgainEditText = (EditText) findViewById(R.id.registerPasswordAgainEditText);
        phoneNumberEditText = (EditText) findViewById(R.id.registerPhoneNumberEditText);
        emailEditText = (EditText) findViewById(R.id.registerEmailEditText);
        personalInformationEditText = (EditText) findViewById(R.id.registerPersonalInformationEditText);

        completeButton = (Button) findViewById(R.id.registerCompleteButton);

        //設置“完成 ”按鈕事件監聽
        completeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (getText()) {
                    List<NetUtil.Param> params = new ArrayList<>();
                    params.add(new NetUtil.Param("nickname", name));
                    params.add(new NetUtil.Param("password", password));
                    params.add(new NetUtil.Param("phone", phoneNumber));
                    params.add(new NetUtil.Param("email", email));
                    params.add(new NetUtil.Param("information", personalInformation));
                    RegisterResult registerResult = new RegisterResult();
                    try {
                        NetUtil.getResult(NetUtil.registerUrl, params, registerResult);
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        });
    }

    public void backTo(View v) {
        RegisterActivity.this.finish();
    }


    //獲取各EditText中的值，並進行合法性校驗,合法返回true
    //不合法返回false，並用Toast進行提醒
    private boolean getText() {
        name = nameEditText.getText().toString();
        password = passwordEditText.getText().toString();
        passwordAgain = passwordAgainEditText.getText().toString();
        phoneNumber = phoneNumberEditText.getText().toString();
        email = emailEditText.getText().toString();
        personalInformation = personalInformationEditText.getText().toString();

        if (!BaseTools.isNetworkAvailable(RegisterActivity.this)) {
            Toast.makeText(this, "當前網絡不可用！", Toast.LENGTH_SHORT).show();
            return false;
        } else if (name.isEmpty() || password.isEmpty() || passwordAgain.isEmpty() || phoneNumber.isEmpty() || email.isEmpty()) {
            Toast.makeText(this, "信息不完整！", Toast.LENGTH_SHORT).show();
            return false;
        } else if (!password.equals(passwordAgain)) {
            Toast.makeText(this, "兩次密碼輸入不一致！", Toast.LENGTH_SHORT).show();
            return false;
        } else if (phoneNumber.length() != 11) {
            Toast.makeText(this, "手機號應爲11位！", Toast.LENGTH_SHORT).show();
            return false;
        } else {
            for (int i = 0; i < phoneNumber.length(); i++) {
                char c = phoneNumber.charAt(i);
                if (c < '0' || c > '9') {
                    Toast.makeText(this, "手機號應爲純數字！", Toast.LENGTH_SHORT).show();
                    return false;
                }
            }
        }

        return true;
    }

    private class RegisterResult implements NetUtil.CallBackForResult {

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

        @Override
        public void onSuccess(Response response) {
            if (response.isSuccessful()) {
                try {
                    JSONObject jsonObject = new JSONObject(response.body().string());
                    RegisterActivity.this.runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Toast.makeText(RegisterActivity.this, "註冊成功", Toast.LENGTH_LONG).show();
                        }
                    });
                    RegisterActivity.this.finish();
                } catch (IOException e) {
                    e.printStackTrace();
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

3、測試

我與朱宏針對我們兩個開發的登錄與註冊進行了互測，針對邏輯流程的每一步設置多組測試用例，來測試每一步邏輯的正確性，最終測試通過，完成功能代碼編寫。

總結

這兩天工作很順利，接下來的幾天我要進行添加好友功能的編寫，我會繼續努力。