让我们来设计一个更漂亮的登录界面

avatar 2019年6月29日11:13:53 评论 2,195

加入VIP,可以享受无广告视频播放!更可享受教程提前看!详情猛戳:VIP介绍

本例程相对于day7的例程有了较大的改进。主要是界面的设计改进。

本例的设计参考的界面为【学习强国】app的登录界面,参考图在顶目本例的文件夹下morebeautifulwindow_day8/src/image文件夹下。

1. 告诉了我们一个比较精美的UI要如何来进行设计,当然大家看到最后呈现的效果是我经过好多好多次不断调试查看结果再调整的效果。

一个app总共拥有的界面数量其实也不算多,所以在UI设计上多花一些功夫我认为是应该的。当然我希望今后我能用更短的时间来完成界面设计调试。

同时也吐槽一个确实不太方便的点,那就是界面设计完成,基本需要靠自己的想象最后呈现是怎么样的,直到调试到机器上才能看出呈现的效果。

2. 除了界面设计之外,我们这里在设计完成后也使用了大量的组件的自带属性来定义一些精确的值来美化最终呈现的界面。以下一一说明。

3. 整个界面的大小的控件,本例为线性布局器,可以设置背景色属性,作为整个窗口的背景色调,颜色值可以用颜色类里的常量来调用,其他也是一样。

如果要设置图片作为背景可以使用背景图属性。

4. 文本框可以设置文本颜色,文本字体属性,如果需要文本框的内容支持单击事件,就一定要设置支持单击属性为真。

5. 编辑框可以设置提示文本属性,用来在没有输入任何内容的时候做提示文本用,提示文本颜色属性可设定颜色。还可以设置单行模式属性,用来禁止多行输入,比如登录窗口时。还可以设置文本颜色、内容水平对齐方式等属性。其中需要介绍一下背景图属性,这个属性可以支持xml格式的值,可以使用背景图片制作来进行制作编辑框样式或按钮样式,会有神奇的不一样的效果,也可以放图啦。如果是密码输入的编辑框,可以使用常用输入类型属性限定加密显示密码内容。

6. 桉钮也可以有背景图、文本颜色、文本字体等属性,背景图属性同样支持xml格式值,可以使用背景图片制作器来制作。

7. 最后我们添加了一个文本框被单击事件的响应内容,用来判定单击是否有效成功。

 

【背景图片制作器】来源于网络,我会附带到源码路径给大家。

 

最后呈现的效果如图所示:

让我们来设计一个更漂亮的登录界面

相比上节课来说,是不是精美了许多?一个好的界面UI设计能充分的留住用户。

 

最后再补充说一个目前版本飞扬15发现的bug。就是注释复制的问题。在类定义和方法定义之间写注释,如果单行进行复制,可以在外部程序粘贴出来。如果你同时选中了多行,复制的话在外部程序无法粘贴出内容来。往今后的版本进行修复。

 

最后附上咱们的源码下载地址:

内容已经隐藏,请注册为本站会员后查看
avatar

发表评论

您必须才能发表评论!