前言
本题的重点在于熟练使用RelativeLayout相对布局方式,将常见的界面控件熟练使用,按照设计图一比一还原,颜色可以使用取色器来拾色,由于仅仅是仿写页面并没有加上事件响应代码,所以基本没有难度。另外,加强对代码复用技巧的使用,本题中很多控件的样式是相同的,要学会在style.xml中定义公共样式,在界面布局文件中调用。
文章目录
Layout文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f2f2f4">
<!-- 顶部标题-->
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#2965ab"
android:gravity="center"
android:padding="18dp"
android:text="个人用户注册"
android:textColor="@color/white"
android:textSize="20sp">
</TextView>
<!--证件类型-->
<RelativeLayout
android:id="@+id/rlCertiType"
android:layout_below="@+id/title"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="证件类型"
android:id="@+id/txtCertiType"
style="@style/reg_label"/>
<TextView
android:text="A居民身份证"
android:id="@+id/txtChooseCertiType"
android:layout_toRightOf="@id/txtCertiType"
style="@style/reg_content"/>
<ImageView
android:src="@drawable/right"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:layout_width="20dp"
android:layout_height="20dp"/>
<Spinner
android:id="@+id/spnCertitype"
android:visibility="invisible"
android:layout_toRightOf="@id/txtCertiType"
android:prompt="@string/certi_type_choose_prompt"
android:entries="@array/ary_certi_type"
android:spinnerMode="dialog"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp"/>
</RelativeLayout>
<!--证件号码-->
<RelativeLayout
android:id="@+id/rlCertiNo"
android:layout_below="@id/rlCertiType"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--分割线-->
<View
style="@style/line"/>
<TextView
android:id="@+id/txtCertiNo"
android:text="证件号码"
style="@style/reg_label"/>
<EditText
android:layout_toRightOf="@id/txtCertiNo"
android:hint="请输入证件号码"
android:inputType="number"
android:background="@null"
style="@style/reg_content"/>
</RelativeLayout>
<!--姓名-->
<RelativeLayout
android:id="@+id/rlCertiName"
android:layout_below="@id/rlCertiNo"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
style="@style/line"/>
<TextView
android:id="@+id/txtCertiName"
android:text="姓 名"
style="@style/reg_label"/>
<EditText
android:layout_toRightOf="@id/txtCertiName"
android:hint="请输入真实姓名"
android:inputType="text"
android:background="@null"
style="@style/reg_content"/>
</RelativeLayout>
<!--手机号码-->
<RelativeLayout
android:id="@+id/rlCertiTel"
android:layout_below="@id/rlCertiName"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
style="@style/line"/>
<TextView
android:id="@+id/txtCertiTel"
android:text="手机号码"
style="@style/reg_label"/>
<EditText
android:layout_toRightOf="@id/txtCertiTel"
android:hint="请输入手机号码"
android:inputType="phone"
android:background="@null"
style="@style/reg_content"/>
</RelativeLayout>
<!--注册省市-->
<RelativeLayout
android:id="@+id/rlCertiCity"
android:layout_below="@+id/rlCertiTel"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
style="@style/line"/>
<TextView
android:text="注册省市"
android:id="@+id/txtCertiCity"
style="@style/reg_label"/>
<TextView
android:text="上海市"
android:id="@+id/txtChooseCertiCity"
android:layout_toRightOf="@id/txtCertiCity"
style="@style/reg_content"/>
<ImageView
android:src="@drawable/right"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="30dp"
android:layout_width="20dp"
android:layout_height="20dp"/>
<Spinner
android:id="@+id/spnCertiCity"
android:visibility="invisible"
android:entries="@array/ary_certi_city"
android:prompt="@string/certi_city_choose_prompt"
android:spinnerMode="dialog"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp"/>
</RelativeLayout>
<!--登录密码-->
<RelativeLayout
android:id="@+id/rlCertiPassWord"
android:layout_below="@id/rlCertiCity"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
style="@style/line"/>
<TextView
android:id="@+id/txtCertiPassword"
android:text="登录密码"
style="@style/reg_label"/>
<EditText
android:id="@+id/edtPassWord"
android:layout_toRightOf="@id/txtCertiPassword"
android:hint="长度不能小于6位"
android:inputType="textPassword"
android:background="@null"
style="@style/reg_content"/>
<LinearLayout
android:id="@+id/llPassStrength"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:text="弱"
android:tag="l"
style="@style/reg_pass_strength"/>
<TextView
android:text="中"
android:tag="m"
style="@style/reg_pass_strength"/>
<TextView
android:text="强"
android:tag="h"
style="@style/reg_pass_strength"/>
</LinearLayout>
</RelativeLayout>
<!--确认密码-->
<RelativeLayout
android:id="@+id/rlCertiPassWord2"
android:layout_below="@id/rlCertiPassWord"
android:background="@color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
style="@style/line"/>
<TextView
android:id="@+id/txtCertiPassword2"
android:text="确认密码"
style="@style/reg_label"/>
<EditText
android:id="@+id/edtPassWord2"
android:layout_toRightOf="@id/txtCertiPassword2"
android:hint="请再次输入密码"
android:inputType="textPassword"
android:background="@null"
style="@style/reg_content"/>
</RelativeLayout>
<!-- 同意协议-->
<RelativeLayout
android:id="@+id/rlAgree"
android:layout_marginLeft="10dp"
android:layout_below="@id/rlCertiPassWord2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<CheckBox
android:id="@+id/ckAgree"
android:text="我同意"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_toRightOf="@id/ckAgree"
android:text="《交通安全综合服务管理平台服务协议》"
android:textColor="#0174CF"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
<TextView
android:layout_below="@id/rlAgree"
android:layout_centerHorizontal="true"
android:text="同意协议并继续"
android:textSize="20dp"
android:textColor="@color/white"
android:background="#2965ab"
android:gravity="center"
android:layout_margin="20dp"
android:padding="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
values文件
style.xml
<resources>
<style name="country_flag">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">220dp</item>
<item name="android:layout_weight">1</item>
</style>
<style name="reg_label">
<item name="android:layout_margin">13dp</item>
<item name="android:textSize">18dp</item>
<item name="android:textColor">@color/black</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="reg_content">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginLeft">30dp</item>
<item name="android:layout_centerVertical">true</item>
<item name="android:textColor">#888888</item>
<item name="android:textSize">16dp</item>
</style>
<style name="reg_pass_strength">
<item name="android:background">#8C8989</item>
<item name="android:textColor">@color/white</item>
<item name="android:padding">5dp</item>
<item name="android:textSize">15dp</item>
<item name="android:layout_margin">2dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="line">
<item name="android:background">#f5f5f5</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
</style>
<style name="season_img">
<item name="android:scaleType">fitXY</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
</style>
</resources>
strings.xml
<resources>
<string name="app_name">MyApp</string>
<string name="certi_type_choose_prompt">请选择证件类型</string>
<string name="certi_city_choose_prompt">请选择所在城市</string>
</resources>
arrays.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="ary_certi_type">
<item>A居民身份证</item>
<item>B士官证</item>
<item>C学生证</item>
<item>D驾驶证</item>
<item>E护照</item>
<item>F港澳通行证</item>
</string-array>
<string-array name="ary_certi_city">
<item>苏州</item>
<item>无锡</item>
<item>常州</item>
<item>镇江</item>
<item>南京</item>
<item>泰州</item>
<item>徐州</item>
<item>扬州</item>
<item>南通</item>
<item>宿迁</item>
<item>盐城</item>
<item>淮安</item>
<item>连云港</item>
</string-array>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="red">#cf010b</color>
<color name="dark_blue">#002153</color>
<color name="green">#009246</color>
</resources>
运行效果
注:页面中的右箭头可自行去阿里巴巴矢量图标库下载放到drawable文件夹下面
宝藏网站之阿里巴巴矢量图标库https://www.iconfont.cn/
END.