> 文档中心 > 鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

文章目录

  • 登录页面
    • 开发步骤
      • 背景
      • “欢迎”文字
      • 输入框
      • ”显示密码文字“
      • 按钮
      • 底部栏目
    • 查看效果方式
  • 注册页面和忘记密码页面
  • 页面完整代码
    • 登录页面
    • 注册页面
    • 忘记密码页面
    • 其他文件代码
      • graphic 文件夹下
      • element 文件夹下
  • 进度
  • 声明

登录注册模块一共包含三个页面(登录、注册、忘记密码),这篇文章主要讲述页面的构建。逻辑将在后续逐步展开。

登录页面

先展示结果,便于对照开发。

完整代码放在最后避免阅读不顺畅

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

开发步骤

首先,在 layout 目录下新建 ability_login 文件,作为登录页面。

在 layout 文件夹上右键点击 --> New --> New Layout Resource File

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

根据 结果图片(这里应该是原型图),就拿上面的图当原型图吧。

背景

整体页面的背景是带渐变效果的,在 graphic 目录下新建一个 XML 文件,名为 background_blue_white_gradient ,作为渐变背景样式。

新建文件的就不用说了吧,上面的图渐变比较生硬,这是截图压缩图片才变成这样的。

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

background_blue_white_gradient.xml内容如下:

<shape    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:shape="rectangle">    <gradient ohos:shader_type="linear_gradient" />    <solid ohos:colors="#FFE4EFFF,#FFFFFFFF" /></shape>

随后在主界面引用,并且设置整体内容为 垂直排布orientation 属性值为 vertical

ability_login.xml 的内容如下:

<DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="$graphic:background_blue_white_gradient"    ohos:orientation="vertical"></DirectionalLayout>

“欢迎”文字

这个就比较简单了,图片中的文字字体是我当时手机更换了字体导致的,默认字体也很好看滴,直接上代码:

<Text ohos:id="$+id:login_text" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text="欢迎" ohos:text_color="#FF556569" ohos:text_size="35vp" ohos:top_margin="100vp" />
  • height、width:宽高设置为 match_content 和内容大小相匹配,内容就是 “欢迎” 二字。(无引号)
  • layout_alignment:此属性可设置组件位置,属性值看名字很容易就知道,horizontal_center,水平居中。
  • text_size:建议用 fp 为单位的字体大小, vp 也行哈,这里先用个 vp,换 fp 的话,记得更换数字。

输入框

输入框的提醒文字,需要在 hint 属性中指定,可直接写文字,也可匹配资源。这里用的是匹配资源模式。

需要在 下图中三个地方添加内容,前两个内容相同,默认的语言都是英文,最后一个是中文的字符,需要修改内容为中文。别忘了逗号。

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

elementen.element 中的string,json 添加内容:

{    "name": "reminder_text_phone",    "value": "Enter mobile number"}

zh.element 中要添加的内容:

{    "name": "reminder_text_phone",    "value": "请输入手机号"}

这样手机切换语言,这里的内容也会切换,其他的文字性内容都是一样的操作,在这个教程中为了方便,软件中并非全部都是这样做。

再准备输入框的样式,和之前一样,在 graphic 中新建 XML 样式,名为 textfield_rounded_blue

textfield_rounded_corner_blue 内容如下:

<shape    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:shape="rectangle">        <corners ohos:radius="90"/>        <stroke ohos:color="#FF9CB4DE" ohos:width="3vp" /></shape>

准备完以上内容,就可以在登录页面中添加输入框了:

<TextField ohos:id="$+id:login_account" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="100vp" ohos:layout_alignment="horizontal_center" ohos:hint="$string:reminder_text_phone" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" ohos:text_input_type="pattern_number" />
  • hint 是显示的提示文字,内容为空的时候显示,用户一旦输入就会消失,这使用的是引用 element 文件夹下 string.json 中的内容。
  • start_padding 是左边的 padding,效果和 left_padding 相同,建议搭配使用,start 和 end 搭配,left 和 right 搭配,当然,编译器也会提醒。
  • text_input_type 设置为 pattern_number,点击之后的输入法就直接是数字面板啦,比较方便。TextField的共有XML属性继承自:Text,所以具体可以看 Text 的 XML 属性,见官方文档:Text-常用组件开发指导-Java UI框架-UI-开发-HarmonyOS应用开发 【善用 CTRL + F】

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

完成上面几个步骤,即可得到:

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

输入密码也可以这样,这里就不这么繁琐了,直接写文字就好,但不便于维护哦,建议同上。输入密码部分的 xml 如下:

<TextField ohos:text_input_type="pattern_password" ohos:id="$+id:login_password" ohos:background_element="$graphic:textfield_rounded_corner_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="40vp" ohos:layout_alignment="horizontal_center" ohos:hint="请输入密码" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" />

”显示密码文字“

这部分主要是展示颜色色值的设置。在 element 文件夹中新建文件 color.json,将软件所需要的颜色放在这里便于管理和重复使用。

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

color.json 内容如下:

{  "color": [    {      "name": "gray",      "value": "#FF676565"    }  ]}

设置一个灰色的颜色色值,然后就可以在登录页面创建文字组件了,内容如下:

<Text ohos:id="$+id:login_show_password" ohos:height="match_content" ohos:width="match_content" ohos:text="显示密码" ohos:text_color="$color:gray" ohos:text_size="15vp" ohos:layout_alignment="right" ohos:top_margin="10vp" ohos:start_margin="0vp" ohos:end_margin="60vp" />
  • text_color 这里引用的就是上面创建的 name 为 gray 的色值。后续的颜色都可以这么做,但是教程中有些为了方便就直接写色值啦。

按钮

新建按钮样式:在 graphic 下新建 XML,名为 button_rounded_dark_blue ,内容如下:

<shape    xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    <corners ohos:radius="90"/>    <solid ohos:color="#FF9CB4DE"/></shape>

再在登录界面直接引用就好啦,按钮代码如下:

    <Button ohos:id="$+id:LoginButton" ohos:height="60vp" ohos:width="300vp" ohos:text="登录" ohos:text_size="18fp" ohos:background_element="$graphic:button_rounded_dark_blue" ohos:top_margin="40vp" ohos:layout_alignment="horizontal_center" />

底部栏目

忘记密码和注册新账号部分:

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

由于整体是垂直向下,所以这部分需要单独的横向布局,准备这部分需要两个颜色,先在 elementcolor.json 中添加两个颜色,黑色和浅灰色,添加的代码如下:

{      "name": "light_gray",      "value": "#FFE9EAEC"    },    {      "name": "black",      "value": "#FF000000"    }

目前,整体的 color.json 如下:

{  "color": [    {      "name": "gray",      "value": "#FF676565"    },    {      "name": "light_gray",      "value": "#FFE9EAEC"    },    {      "name": "black",      "value": "#FF000000"    }  ]}

颜色准备完了,就可以添加这部分的代码了。

<DirectionalLayout    ohos:height="match_content"    ohos:width="match_parent"    ohos:top_margin="35vp"    ohos:alignment="horizontal_center"    ohos:orientation="horizontal">    <Text ohos:id="$+id:forgetPassword" ohos:height="match_content" ohos:width="match_content" ohos:text="忘记密码" ohos:text_size="16fp" ohos:start_margin="0vp" ohos:end_margin="20vp" /><Component    ohos:height="match_parent" ohos:width="1vp" ohos:background_element="$color:light_gray" ohos:start_margin="10vp" ohos:end_margin="0vp" />    <Button ohos:id="$+id:loginToRegister" ohos:height="match_content" ohos:width="match_content" ohos:text="注册新账号" ohos:text_size="16fp" ohos:start_margin="20vp" ohos:end_margin="0vp" ohos:layout_alignment="horizontal_center" ohos:text_color="$color:black"     /></DirectionalLayout>

再下面就是黑色横线:

<Component ohos:height="1vp" ohos:width="230vp" ohos:top_margin="10vp" ohos:layout_alignment="horizontal_center" ohos:background_element="$color:black" />

最后的两行字

<Text ohos:height="match_content" ohos:width="300vp" ohos:text="请注意,登录即代表您同意我们的" ohos:text_alignment="center" ohos:multiple_lines="true" ohos:top_margin="20fp" ohos:text_size="15fp" ohos:layout_alignment="horizontal_center" />    <Text ohos:id="$+id:login_private" ohos:height="match_content" ohos:width="match_content" ohos:text="《隐私条款》" ohos:text_color="blue" ohos:layout_alignment="center" ohos:text_size="15fp" />

查看效果方式

打开对应的页面的 XML 代码后,在编译器的右侧,可以看见 previewer 按钮,还有个小眼睛,点一下就能看见,不够更改了内容需要自己手动刷新,暂时不需要运行代码,如果想运行查看在手机的效果,可以更改 MainAbilitySlice 所对应的页面,具体如下:

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

注册页面和忘记密码页面

这两个页面和上面一样,相信贴了代码都能够懂,元素都是一样的啦。

页面完整代码

如有报错,就看上面的开发步骤,检查完整代码,看看有什么遗漏的。

代码结构:

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

登录页面

ability_login.xml

<DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="$graphic:background_blue_white_gradient"    ohos:orientation="vertical">    <Text ohos:id="$+id:login_text" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text="欢迎" ohos:text_color="#FF556569" ohos:text_size="35vp" ohos:top_margin="100vp" />    <TextField ohos:id="$+id:login_account" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="100vp" ohos:layout_alignment="horizontal_center" ohos:hint="$string:reminder_text_phone" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" ohos:text_input_type="pattern_number" />    <TextField ohos:text_input_type="pattern_password" ohos:id="$+id:login_password" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="40vp" ohos:layout_alignment="horizontal_center" ohos:hint="请输入密码" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" />    <Text ohos:id="$+id:login_show_password" ohos:height="match_content" ohos:width="match_content" ohos:text="显示密码" ohos:text_color="$color:gray" ohos:text_size="15vp" ohos:layout_alignment="right" ohos:top_margin="10vp" ohos:start_margin="0vp" ohos:end_margin="60vp" />    <Button ohos:id="$+id:LoginButton" ohos:height="60vp" ohos:width="300vp" ohos:text="登录" ohos:text_size="18fp" ohos:background_element="$graphic:button_rounded_dark_blue" ohos:top_margin="40vp" ohos:layout_alignment="horizontal_center" />    <DirectionalLayout ohos:height="match_content" ohos:width="match_parent" ohos:top_margin="35vp" ohos:alignment="horizontal_center" ohos:orientation="horizontal"> <Text     ohos:id="$+id:forgetPassword"     ohos:height="match_content"     ohos:width="match_content"     ohos:text="忘记密码"     ohos:text_size="16fp"     ohos:start_margin="0vp"     ohos:end_margin="20vp"     /> <Component     ohos:height="match_parent"     ohos:width="1vp"     ohos:background_element="$color:light_gray"     ohos:start_margin="10vp"     ohos:end_margin="0vp"     /> <Button     ohos:id="$+id:loginToRegister"     ohos:height="match_content"     ohos:width="match_content"     ohos:text="注册新账号"     ohos:text_size="16fp"     ohos:start_margin="20vp"     ohos:end_margin="0vp"     ohos:layout_alignment="horizontal_center"     ohos:text_color="$color:black"     />    </DirectionalLayout>    <Component ohos:height="1vp" ohos:width="230vp" ohos:top_margin="10vp" ohos:layout_alignment="horizontal_center" ohos:background_element="$color:black" />    <Text ohos:height="match_content" ohos:width="300vp" ohos:text="请注意,登录即代表您同意我们的" ohos:text_alignment="center" ohos:multiple_lines="true" ohos:top_margin="20fp" ohos:text_size="15fp" ohos:layout_alignment="horizontal_center" />    <Text ohos:id="$+id:login_private" ohos:height="match_content" ohos:width="match_content" ohos:text="《隐私条款》" ohos:text_color="blue" ohos:layout_alignment="center" ohos:text_size="15fp" /></DirectionalLayout>

注册页面

ability_register.xml

<DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="$graphic:background_blue_white_gradient"    ohos:orientation="vertical">    <Text ohos:id="$+id:register_text" ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text="注册" ohos:text_color="#FF556569" ohos:text_size="35vp" ohos:top_margin="100vp" />    <TextField ohos:id="$+id:register_account_phone" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="100vp" ohos:layout_alignment="horizontal_center" ohos:hint="请输入手机号" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" ohos:text_input_type="pattern_number" />    <TextField ohos:id="$+id:register_password_pwd" ohos:text_input_type="pattern_password" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="40vp" ohos:layout_alignment="horizontal_center" ohos:hint="请输入密码" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" />    <Text ohos:id="$+id:register_show_password" ohos:height="match_content" ohos:width="match_content" ohos:text="显示密码" ohos:text_color="$color:gray" ohos:text_size="15vp" ohos:layout_alignment="right" ohos:top_margin="10vp" ohos:start_margin="0vp" ohos:end_margin="60vp" />    <Button ohos:id="$+id:register_button" ohos:height="60vp" ohos:width="300vp" ohos:text="注册" ohos:text_size="18fp" ohos:background_element="$graphic:button_rounded_dark_blue" ohos:top_margin="80vp" ohos:layout_alignment="horizontal_center" />    <Text ohos:height="match_content" ohos:width="300vp" ohos:text="请注意,注册即代表您同意我们的" ohos:text_alignment="center" ohos:multiple_lines="true" ohos:top_margin="30fp" ohos:text_size="15fp" ohos:layout_alignment="horizontal_center" />    <Text ohos:id="$+id:register_private" ohos:height="match_content" ohos:width="match_content" ohos:text="《隐私条款》" ohos:text_color="blue" ohos:layout_alignment="center" ohos:text_size="15fp" /></DirectionalLayout>

忘记密码页面

ability_forget_password.xml

<DirectionalLayout    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="$graphic:background_blue_white_gradient"    ohos:orientation="vertical">    <Text ohos:height="match_content" ohos:width="match_content" ohos:layout_alignment="horizontal_center" ohos:text="忘记密码" ohos:text_color="#FF556569" ohos:text_size="35vp" ohos:top_margin="100vp" />    <TextField ohos:id="$+id:forget_user_id" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="30vp" ohos:layout_alignment="horizontal_center" ohos:hint="输入用户ID" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" ohos:text_input_type="pattern_number" />    <TextField ohos:id="$+id:forget_user_phone" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="20vp" ohos:layout_alignment="horizontal_center" ohos:hint="输入手机号" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" ohos:text_input_type="pattern_number" />    <TextField ohos:id="$+id:forget_new_password" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="20vp" ohos:layout_alignment="horizontal_center" ohos:hint="输入新密码" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" ohos:text_input_type="pattern_password" />    <TextField ohos:id="$+id:forget_new_password_again" ohos:background_element="$graphic:textfield_rounded_blue" ohos:height="60vp" ohos:width="300vp" ohos:top_margin="20vp" ohos:layout_alignment="horizontal_center" ohos:hint="再次输入新密码" ohos:text_alignment="vertical_center" ohos:text_size="18fp" ohos:start_padding="20fp" ohos:end_padding="20fp" ohos:text_input_type="pattern_password" />    <Text ohos:id="$+id:forget_show_password" ohos:height="match_content" ohos:width="match_content" ohos:text="显示密码" ohos:text_color="$color:gray" ohos:text_size="15vp" ohos:layout_alignment="right" ohos:top_margin="10vp" ohos:start_margin="0vp" ohos:end_margin="60vp" />    <Button ohos:id="$+id:forget_confirm_btn" ohos:height="60vp" ohos:width="300vp" ohos:text="确认" ohos:text_size="18fp" ohos:background_element="$graphic:button_rounded_dark_blue" ohos:top_margin="40vp" ohos:layout_alignment="horizontal_center" /></DirectionalLayout>

其他文件代码

graphic 文件夹下

background_blue_white_gradient.xml

<shape    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:shape="rectangle">    <gradient ohos:shader_type="linear_gradient" />    <solid ohos:colors="#FFE4EFFF,#FFFFFFFF" /></shape>

button_rounded_dark_blue.xml

<shape    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:shape="rectangle">    <corners ohos:radius="90"/>    <solid ohos:color="#FF9CB4DE"/></shape>

textfield_rounded_dark_blue.xml

<shape    xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:shape="rectangle">    <corners ohos:radius="90"/>    <stroke ohos:color="#FF9CB4DE" ohos:width="3vp" /></shape>

element 文件夹下

color.json

{  "color": [    {      "name": "gray",      "value": "#FF676565"    },    {      "name": "light_gray",      "value": "#FFE9EAEC"    },    {      "name": "black",      "value": "#FF000000"    }  ]}

string.json

{  "string": [    {      "name": "entry_MainAbility",      "value": "entry_MainAbility"    },    {      "name": "mainability_description",      "value": "Java_Empty Ability"    },    {      "name": "mainability_HelloWorld",      "value": "Hello World"    },    {      "name": "reminder_text_phone",      "value": "Enter mobile number"    }  ]}

进度

鸿蒙应用项目分享:我的鸿蒙毕设:基于HarmonyOS的任务看板平台【四】:登录注册模块页面

声明

HELLO,EVERYONE:

这里分享我自己的毕业设计构建过程,除软件内使用的个别图标以外,部分界面参考出处和图标出处会在文末标出,本文全部内容仅为学习使用。


精益求精 – FelixCai / FelixCJY