第六周（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、测试

编码后进行白盒测试，直到所有测试用例通过，代码测试完毕。