第六周（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/whi
4000
te"
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、测试

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