投稿
  1. 极客之音首页
  2. 技术随笔

[Android开发练习2] 手写用户注册页面

小半 • • 技术随笔 • 阅读 109

导读：本篇文章讲解 [Android开发练习2] 手写用户注册页面，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

[Android开发练习2] 手写用户注册页面

 前言

        本题的重点在于熟练使用RelativeLayout相对布局方式，将常见的界面控件熟练使用，按照设计图一比一还原，颜色可以使用取色器来拾色，由于仅仅是仿写页面并没有加上事件响应代码，所以基本没有难度。另外，加强对代码复用技巧的使用，本题中很多控件的样式是相同的，要学会在style.xml中定义公共样式，在界面布局文件中调用。

文章目录

 Layout文件

values文件

运行效果

 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>

运行效果

[Android开发练习2] 手写用户注册页面

注：页面中的右箭头可自行去阿里巴巴矢量图标库下载放到drawable文件夹下面

宝藏网站之阿里巴巴矢量图标库icon-default.png?t=MBR7https://www.iconfont.cn/

 END.

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/93429.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！