第六週（2） 後臺代碼編寫、客戶端具體功能實現與界面優化

引言

在這半周的工作中，我們小組仍然主要進行後臺客戶端的代碼編寫工作以及界面的優化，在這裏，我對自己主要從事的工作，即設置頭像功能的實現，做一個重點的介紹。

設置頭像功能

1、界面編寫

設計頭像功能界面如下：

上面的titlebar設置爲一個RelativeLayout，並設置每個控件的位置。

下面的頭像選擇區域，需要對選擇之後的頭像右下角顯示一個對勾，所以在設計時，每一行爲一個LinearLayout，對於三個頭像的大小設置weight值都爲1，這樣可以讓三個頭像平均到手機屏幕上。

然後每個頭像爲一個RelativeLayout包住，在頭像左下角設置一個對勾併爲隱藏狀態，在java邏輯中根據手指點擊，對其顯示狀態進行重新設置。

具體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:gravity="center_horizontal"
    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="editIconBack"
            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>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="@color/white"
        android:orientation="horizontal"
        android:padding="15dp">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon1">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/one" />

            <ImageView
                android:id="@+id/head_icon_check1"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon2">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/two" />

            <ImageView
                android:id="@+id/head_icon_check2"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon3">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/three" />

            <ImageView
                android:id="@+id/head_icon_check3"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone"/>
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:background="@color/white"
        android:orientation="horizontal"
        android:padding="15dp">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon4">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/four" />

            <ImageView
                android:id="@+id/head_icon_check4"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon5">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/five" />

            <ImageView
                android:id="@+id/head_icon_check5"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon6">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/six" />

            <ImageView
                android:id="@+id/head_icon_check6"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone"/>
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:background="@color/white"
        android:orientation="horizontal"
        android:padding="15dp">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon7">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/seven" />

            <ImageView
                android:id="@+id/head_icon_check7"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon8">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/eight" />

            <ImageView
                android:id="@+id/head_icon_check8"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="onClick_head_icon9">

            <ImageView
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:scaleType="fitCenter"
                android:src="@drawable/nine" />

            <ImageView
                android:id="@+id/head_icon_check9"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:scaleType="fitCenter"
                android:src="@drawable/checked"
                android:visibility="gone" />
        </RelativeLayout>
    </LinearLayout>

    <Button
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="@drawable/login_button_bg"
        android:onClick="confirmChangeIcon"
        android:text="確認選擇"
        android:textColor="@color/white"
        android:textSize="15sp" />
</LinearLayout>

2、java邏輯實現

因爲每次只能選擇一個頭像，所以當選擇其中一個頭像時，要記錄選擇的頭像id，並且把其他所有頭像處的對勾全部設置爲隱藏，並且將當前選擇的頭像對勾設置爲顯示狀態，當點擊“確認選擇”按鈕，就將頭像id上傳即可。代碼如下：

package com.example.sdu.myflag.activity;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

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

/**
 * 修改頭像界面
 */
public class EditHeadIconActivity extends BaseActivity {

    int select = BaseApplication.getInstance().getSharedPreferences("User", Context.MODE_PRIVATE).getInt("photo", 0);
    ImageView head_icon_check[];

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

    @Override
    public void afterCreate(Bundle savedInstanceState) {
        head_icon_check = new ImageView[9];

        head_icon_check[0] = (ImageView) findViewById(R.id.head_icon_check1);
        head_icon_check[1] = (ImageView) findViewById(R.id.head_icon_check2);
        head_icon_check[2] = (ImageView) findViewById(R.id.head_icon_check3);
        head_icon_check[3] = (ImageView) findViewById(R.id.head_icon_check4);
        head_icon_check[4] = (ImageView) findViewById(R.id.head_icon_check5);
        head_icon_check[5] = (ImageView) findViewById(R.id.head_icon_check6);
        head_icon_check[6] = (ImageView) findViewById(R.id.head_icon_check7);
        head_icon_check[7] = (ImageView) findViewById(R.id.head_icon_check8);
        head_icon_check[8] = (ImageView) findViewById(R.id.head_icon_check9);
    }

    public void editIconBack(View view) {
        setResult(RESULT_CANCELED);
        this.finish();
    }

    // 確認修改按鈕點擊事件
    public void confirmChangeIcon(View view) {
        if(select == 0)
            Toast.makeText(EditHeadIconActivity.this, "未選擇頭像！", Toast.LENGTH_SHORT).show();
        else {
            setResult(select);
            this.finish();
        }
    }

    public void onClick_head_icon1(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 0)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 1;
    }

    public void onClick_head_icon2(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 1)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 2;
    }

    public void onClick_head_icon3(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 2)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 3;
    }

    public void onClick_head_icon4(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 3)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 4;
    }

    public void onClick_head_icon5(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 4)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 5;
    }

    public void onClick_head_icon6(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 5)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 6;
    }

    public void onClick_head_icon7(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 6)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 7;
    }

    public void onClick_head_icon8(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 7)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 8;
    }

    public void onClick_head_icon9(View view) {
        for(int i = 0; i < 9; i++){
            if(i == 8)
                head_icon_check[i].setVisibility(View.VISIBLE);
            else
                head_icon_check[i].setVisibility(View.GONE);
        }
        select = 9;
    }
}

3、測試

編碼後進行白盒測試，直到所有測試用例通過，代碼測試完畢。