第三周（1） app页面初步设计与代码编写

来源：互联网发布：映客直播源码编辑：程序博客网时间：2024/05/19 16:49

引言

本周我们主要进行进行页面设计与代码编写，在前两天的工作中我们主要进行了以下工作：

页面的初步设计与逻辑交互设计
客户端代码编写
后台代码编写

接下来我针对客户端代码的编写中我工作的部分：注册功能进行介绍：

注册功能

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、逻辑编写

注册功能的逻辑如下：

检查网络是否可用，不可用跳转到9
检查用户信息是否输入合法，不合法跳转到9
检查两次密码输入是否一致，不一致跳转到9
建立链表，将所有注册信息存入其中
调用网络工具类的相应接口，等待返回结果
判断返回结果是否成功，不成功跳转到9
验证返回的json数据是否正确，不正确跳转到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、测试

我与朱宏针对我们两个开发的登录与注册进行了互测，针对逻辑流程的每一步设置多组测试用例，来测试每一步逻辑的正确性，最终测试通过，完成功能代码编写。

总结

这两天工作很顺利，接下来的几天我要进行添加好友功能的编写，我会继续努力。

阅读全文

0 0