前言
这几天闲的没事的时候去QQ官网看了看,发现还没有QQ的鸿蒙版本
鸿蒙能是这么没牌面的系统吗,正好前几天看了看鸿蒙系统UI的开发文档,那我们来给他做一个QQ for Harmony的软件
的登录页面吧
实现思路
先看下Android版本的QQ登录页面
我们来思考下咋搞出来这个,为了方便制作,我还是想把这个页面分为三块,然后逐步击破,分块如下图
这样的布局我觉得最简单的就是使用DirectionalLayout布局,看看这官方示意图,简直和我划分的一模一样
很明显第一块就是一张图片,一张图片放上去就完事了。
第二块稍微复杂一点,主要就在于下图这个内容可能需要布局的嵌套
当然也可以采用其他方式,但布局嵌套最简单,不过就是排列方向要改成水平,然后头像图片和账号和按钮的权重设置为1 4 1即可。
第三块就是几行字,加上就行,这样大概分析完了,我们就可以尝试来做了
具体代码
第一块的布局
就是放一张照片,没啥说的
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="horizontal_center"
ohos:orientation="vertical"
ohos:top_margin="100vp"
ohos:weight="1">
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_margin="0vp"
ohos:image_src="$media:head"
ohos:left_margin="80vp"
ohos:right_margin="80vp"></Image>
</DirectionalLayout>
第二块的布局
主要就在于布局里套了一层布局,具体解释在代码中
<!--注意这里第一层布局是垂直分布-->
<DirectionalLayout
ohos:height="0"
ohos:width="match_parent"
ohos:alignment="horizontal_center"
ohos:orientation="vertical"
ohos:top_padding="20vp"
ohos:bottom_padding="20vp"
ohos:weight="3">
<!--第二层布局是水平分布,为了使得头像图片,账号和按钮在一行上-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$graphic:textfield"
ohos:focus_border_enable="true"
ohos:left_margin="50vp"
ohos:left_padding="5vp"
ohos:right_padding="5vp"
ohos:bottom_padding="5vp"
ohos:orientation="horizontal"
ohos:right_margin="50vp"
ohos:weight="1">
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:avatar"
ohos:scale_mode="inside"
ohos:image_src="$media:avatar"
ohos:weight="1"></Image>
<TextField
ohos:height="match_parent"
ohos:width="match_content"
ohos:text="123123123"
ohos:text_alignment="center"
ohos:text_size="20vp"
ohos:weight="4"></TextField>
<Button
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text="▼"
ohos:text_size="20vp"
ohos:text_color="#A9A9A9"
ohos:weight="1">
</Button>
</DirectionalLayout>
<TextField
ohos:left_padding="5vp"
ohos:right_padding="5vp"
ohos:background_element="$graphic:textfield"
ohos:height="match_content"
ohos:width="match_parent"
ohos:layout_alignment="horizontal_center"
ohos:left_margin="50vp"
ohos:right_margin="50vp"
ohos:text="password"
ohos:text_alignment="center"
ohos:text_size="20vp"
ohos:top_margin="5vp"
ohos:weight="1"></TextField>
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="horizontal_center"
ohos:weight="2">
<Button
ohos:top_margin="20vp"
ohos:id="$+id:button"
ohos:width="70vp"
ohos:height="70vp"
ohos:text_size="27fp"
ohos:background_element="$graphic:circle_button_element"
ohos:text_color="#FFFFFF"
ohos:text="→"
/>
</DirectionalLayout>
</DirectionalLayout>
第三块布局
就是三个Text框
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="bottom"
ohos:orientation="horizontal"
ohos:left_margin="80vp"
ohos:right_margin="80vp"
ohos:weight="3">
<TextField
ohos:height="match_content"
ohos:width="match_parent"
ohos:text_alignment="center"
ohos:bottom_margin="50vp"
ohos:text="手机号登录"
ohos:text_size="13vp"
ohos:weight="1"></TextField>
<TextField
ohos:text_alignment="center"
ohos:height="match_content"
ohos:width="match_parent"
ohos:bottom_margin="50vp"
ohos:text="找回密码"
ohos:text_size="13vp"
ohos:weight="1"></TextField>
<TextField
ohos:height="match_content"
ohos:text_alignment="center"
ohos:width="match_parent"
ohos:text_size="13vp"
ohos:bottom_margin="50vp"
ohos:text="新用户注册"
ohos:weight="1"></TextField>
</DirectionalLayout>
那么现在整个页面就让我们搭好了,向下翻一下看一下成果吧。
成果
最终的成品图,还是长得蛮像的哈
总结
按照官方文档制作的一个小页面,没有写后端程序,如果文章有人看的话,到时候再写下后端程序。放张图片结束了