实战 Walker 之注册界面

一、 界面效果图

二、注册界面的布局

1、activity_regist.xml
Step1:首先准备好图片资源和所需要的文字资源，如下所示：

<span style="font-size:18px;"><string name="app_name">Walkers</string>    <string name="action_settings">Settings</string>    <string name="hello_world">Hello world!</string>    <string name="etAccontrHint">账号</string>    <string name="etNickHint">昵称</string>    <string name="etPasswordHint">密码</string>    <string name="etMotto">座右铭（不多于八个字）</string>    <string name="etEmail">邮箱</string>    <string name="etCity">城市</string>    <string name="etStep">步长（cm）</string>    <string name="etHeight">身高（cm）</string>    <string name="etWeight">体重（kg）</string>    <string name="etExceptSteps">期望运动量（步/日）</string>    <string name="etRegistFinish">哎，终于填完资料了，真不容易，谢谢亲的支持，么么哒</string>    <string name="title_activity_regist">RegistActivity</string></span>

Step2:使用 Eclipse 自动生成 RegistActivity 及其对应的布局文件 activity_regist.xml 文件。

1由于注册界面内容很多，一屏幕显示不下，所以最外层使用 ScrollView 控件，当控件显
示不开时会出现垂直方向的滚动条。ScrollView 里面嵌入 LinearLayout 容器，第一个控件是
使用了一个开源框架静态圆角图片， 首先需要导入开源框架项目 roundimageview， 右击该项
目，选择 Build path->config build path->Android。发现该项目是作为 Library 存在的

2接下里右击当前的项目， 选择 Build path->config build path->Android->Add， 添加刚刚导
入的开源框架库。

3通 过 以 上 两 步 后 ， 进 入 布 局 视 图 界 面 ， 点 击 Custom & Library Views 组 中 的控件，使用方法同其它组件。
RoundedImageView 组件中的 Refresh 按钮，就会发现多了一个自定义的 RoundedImageView

<span style="font-size:18px;"><com.makeramen.roundedimageview.RoundedImageView 　　　xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/roundImage_head"android:layout_width="80dp"android:layout_height="80dp"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:onClick="changePhoto"android:src="@drawable/test_photo"app:riv_border_color="#333333"app:riv_border_width="3dip"app:riv_corner_radius="10dip"app:riv_mutate_background="true"app:riv_oval="true" /></span>

4接下来均是能够录入常规信息的 EditText 控件。

常规信息下面的横线如何生成的呢？

<span style="font-size:18px;"><Viewandroid:layout_width="match_parent"android:layout_height="2dp"android:background="@android:color/darker_gray" /></span>

5最后注册按钮为了点击时具有水滴效果，在应用包下建立 util 子包，加入一个工具类
RevealLayout，具体代码有兴趣的同学可以仔细研读。其实这些类多搜集整理，有需要的时
候直接拿来用哈，它同样是作为自定义组件可以直接拖过来用。

<span style="font-size:18px;"><cn.edu.bztc.walkersimulate.util.RevealLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" >    <Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"        android:background="@drawable/btn_select"android:layout_marginTop="5dp"android:text="@string/btnRegiste" ></Button></span>

<span style="font-size:18px;"></cn.edu.bztc.walkersimulate.util.RevealLayout></span>

完整代码布局如下：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/login_regist_bg"android:orientation="vertical" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/login_regist_bg"android:orientation="vertical"android:padding="10dp"tools:context=".RegistActivity" ><com.makeramen.roundedimageview.RoundedImageViewxmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/roundImage_head"android:layout_width="80dp"android:layout_height="80dp"android:layout_gravity="center_horizontal"android:gravity="center_horizontal"android:onClick="changePhoto"android:src="@drawable/test_photo"app:riv_border_color="#333333"app:riv_border_width="3dip"app:riv_corner_radius="10dip"app:riv_mutate_background="true"app:riv_oval="true" /><EditTextandroid:id="@+id/etAccount "android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etaccount"android:ems="10"android:hint="@string/etAccountrHint" ></EditText><EditTextandroid:id="@+id/etNick"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etnick"android:ems="10"android:hint="@string/etNickHint" /><EditTextandroid:id="@+id/etPassword"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etpassword"android:ems="10"android:hint="@string/etPasswordHint"android:inputType="textPassword" ></EditText><EditTextandroid:id="@+id/etMotto"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etmotto"android:ems="10"android:hint="@string/etMotto" ></EditText><EditTextandroid:id="@+id/etEmail"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etemail"android:ems="10"android:hint="@string/etEmail"android:inputType="textEmailAddress" ></EditText><EditTextandroid:id="@+id/etCity"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etcity"android:ems="10"android:hint="@string/etCity" ></EditText><Viewandroid:layout_width="match_parent"android:layout_height="2dp"android:background="@android:color/darker_gray" /><EditTextandroid:id="@+id/etfoot"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etfoot"android:ems="10"android:hint="@string/etStep"android:inputType="number" ></EditText><EditTextandroid:id="@+id/etHeight"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etheight"android:ems="10"android:hint="@string/etHeight"android:inputType="number" ></EditText><EditTextandroid:id="@+id/etWeight"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etweight"android:ems="10"android:hint="@string/etWeight"android:inputType="number" ></EditText><EditTextandroid:id="@+id/etExceptSteps"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:background="@android:drawable/edit_text"android:drawableLeft="@drawable/etexceptsteps"android:ems="10"android:hint="@string/etExceptSteps"android:inputType="number" ></EditText><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:text="@string/tvRegistFinish" ></TextView><cn.edu.bztc.walkersimulate.util.RevealLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content" ><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:background="@drawable/btn_select"android:layout_marginTop="5dp"android:text="@string/btnRegiste" ></Button></cn.edu.bztc.walkersimulate.util.RevealLayout></LinearLayout></ScrollView>

2、RegistActivity 的实现

public class RegistActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);//取消标题栏setContentView(R.layout.activity_regist);}}