android手机号直接登录demo 安卓手机如何登录

转载

mob64ca13f83523 2024-06-08 15:20:43

文章标签 android手机号直接登录demo harmonyos 华为 Text xml 文章分类 Android 移动开发

注册和登录是所有应用服务的一个基本功能模块，HarmonyOS基于设备的FA是通过统一调用华为的账户进行注册登录。那么其它独立的应用服务呢？我们觉得可能需要有自己的注册登录模块，所以就进行了初步的尝试。具体包括了注册、登录、登录后界面的策划设计。
注册包括用户名，密码，确认密码三个流程，密码现在是明码显示的方式，其中设置了确认密码正确与密码出错的情况。登录包括了用户名，密码两个流程，其中设置了密码错误提示和密码正确登录到一个指定的页面两种情况。还有很多未完善的，欢迎大家来指正。

android手机号直接登录demo 安卓手机如何登录_harmonyos

开发过程与要点说明
首先我们创建一个项目

设置项目的名称和存储路径

我们可以通过修改config.json中的icon里面的路径，放上自己想展示的图片用来当做APP的小图标，如下图所示，以及展示效果。

接下里我们在xml文件中进行布局，这里我使用的是“DirectionalLayout”
布局方式进行布局。
DirectionalLayout中可以设置height，width，属性分为两种，一种是填充满整个父类（match_parent），一个是填充满整个内容（match_content），在这里还可以设置布局格式的布局方向，分为水平方向（horizontal）还是垂直方向（vertical），下面我们使用这个布局来进行登录页面的设置吧，代码如下。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="#87CEEB">
    <Component ohos:height="300px"/>
    <Text
          ohos:height="match_content"
          ohos:width="850px"
          ohos:text="鸿蒙应用服务登录"
          ohos:text_color="#000000"
          ohos:layout_alignment="horizontal_center"
          ohos:text_size="32fp"
          ohos:left_margin="32px"
        />
    <Text

        ohos:text="用户名："
        ohos:height="match_content"
        ohos:width="250px"
        ohos:text_size="24fp"
        ohos:top_margin="100px"
        ohos:left_margin="80px"
        />
    <TextField
        ohos:height="match_content"
        ohos:width="600px"
        ohos:hint="请输入用户名..."
        ohos:background_element="#EAEDED"
        ohos:layout_alignment="horizontal_center"
        ohos:text_color="#708090"
        ohos:text_size="18fp"
        ohos:padding="30px"
        ohos:top_margin="-95px"
        ohos:left_margin="100px"
        />

    <Text

        ohos:text="密    码："
        ohos:height="match_content"
        ohos:width="250px"
        ohos:text_size="24fp"
        ohos:top_margin="100px"
        ohos:left_margin="80px"
        />

    <TextField
        ohos:height="match_content"
        ohos:width="600px"
        ohos:hint="请输入密码..."
        ohos:background_element="#EAEDED"
        ohos:layout_alignment="horizontal_center"
        ohos:text_color="#708090"
        ohos:text_size="18fp"
        ohos:padding="30px"
        ohos:top_margin="-95px"
        ohos:left_margin="100px"
        />
    
    <DirectionalLayout
        ohos:width="match_content"
        ohos:height="match_content"
        ohos:orientation="horizontal"
        ohos:left_margin="330px">
        <Button
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="登录"
            ohos:text_size="20fp"
            ohos:padding="10vp"
            ohos:text_color="#FFFFFF"
            ohos:background_element="#0EAB8D"
            ohos:layout_alignment="horizontal_center"/>

        <Button
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="注册"
            ohos:text_size="20fp"
            ohos:padding="10vp"
            ohos:text_color="#FFFFFF"
            ohos:background_element="#0EAB8D"
            ohos:layout_alignment="horizontal_center"
            ohos:left_margin="160px"/>
    </DirectionalLayout>

</DirectionalLayout>

界面展示效果如图所示：

android手机号直接登录demo 安卓手机如何登录_android手机号直接登录demo_02

接下里我们设置注册界面，代码如下。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="#87CEEB">

    
    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <Text
            ohos:text="鸿蒙应用服务注册"
            ohos:width="match_parent"
            ohos:height="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:text_size="32fp"
            ohos:text_color="#000000"
           ohos:text_alignment="center"
            />
    </DirectionalLayout>



    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="vertical">

        <Text
            ohos:text="用  户  名："
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="24fp"
            ohos:left_margin="60px"
            />

        <TextField
            ohos:height="match_content"
            ohos:width="600px"
            ohos:hint="请输入用户名..."
            ohos:background_element="#EAEDED"
            ohos:layout_alignment="horizontal_center"
            ohos:text_color="#708090"
            ohos:text_size="18fp"
            ohos:padding="30px"
            ohos:top_margin="-110px"
            ohos:left_margin="160px"
            />

    </DirectionalLayout>

  

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="vertical">

        <Text
            ohos:text="密        码："
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="24fp"
            ohos:left_margin="60px"
            />

        <TextField
            ohos:height="match_content"
            ohos:width="600px"
            ohos:hint="请输入密码..."
            ohos:background_element="#EAEDED"
            ohos:layout_alignment="horizontal_center"
            ohos:text_color="#708090"
            ohos:text_size="18fp"
            ohos:padding="30px"
            ohos:top_margin="-110px"
            ohos:left_margin="160px"
            />

    </DirectionalLayout>



    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:orientation="vertical">

        <Text
            ohos:text="确认密码："
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="24fp"
            ohos:left_margin="60px"
            />

        <TextField
            ohos:height="match_content"
            ohos:width="600px"
            ohos:hint="请再次输入密码..."
            ohos:background_element="#EAEDED"
            ohos:layout_alignment="horizontal_center"
            ohos:text_color="#708090"
            ohos:text_size="18fp"
            ohos:padding="30px"
            ohos:top_margin="-110px"
            ohos:left_margin="160px"
            />
    </DirectionalLayout>

    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="horizontal"
        ohos:left_margin="330px">

        <Button
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="立即注册"
            ohos:text_size="20fp"
            ohos:padding="10vp"
            ohos:text_color="#FFFFFF"
            ohos:background_element="#0EAB8D"
            ohos:layout_alignment="horizontal_center"
            ohos:left_margin="160px"/>
    </DirectionalLayout>

</DirectionalLayout>

首页的设置代码如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:background_element="#87CEEB">

    <Text
        ohos:width="350vp"
        ohos:height="match_parent"
        ohos:text="欢迎来到
                   鸿蒙时代
                   与鸿蒙世界，
                   开启分布式、全场景
                   应用服务新纪元！"
        ohos:text_size="28fp"
        ohos:text_color="#0000FF"
        ohos:italic="true"
        ohos:text_weight="700"
        ohos:text_font="serif"
        ohos:multiple_lines="true"
        ohos:max_text_lines="3"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        />

界面展示效果如图所示。

android手机号直接登录demo 安卓手机如何登录_android手机号直接登录demo_03