当前位置: 首页 > article >正文

完成UI界面的绘制

绘制UI

接上文,在Order90Canvas下创建Image子物体,图片资源ui_fish_lv1,设置锚点(CountdownPanelImg同理),命名为LvPanelImg,创建Text子物体,边框宽高各50,

,重名为LvText,其他组件数值如下:

复制一个LvText,重命名LvNameText,调整位置宽度,文本内容为“大师”,在LvPanelImg下创建slider子物体,删除Handle Slide Area,对background,Fill Area调整锚点,Slider的value值拉满。

点击Fill,调整Slider下子物体大小,至三个子物体大小相等,将Slider的value值调回0。将background背景换成ui_fish_encyclope,Fill的图片资源为ui_fish_lv2,在Slider下将Image组件做如下处理:

(由于背景图图片并不完全契合,将Fill Area与Background大小对齐),将Slider命名为expSlider,调整位置及大小。层级面板布局如图所示:

在Order90Canvas下创建Image子物体,图片资源为ui_fish_accoun,设置原生大小,置于整个背景左下角,命名为GoldPanelImg,创建Image子物体,图片资源为ui_fish_cupfinish5,调整位置及大小,命名为GoldIconImg,在GoldPanelImg下创建Text子物体,命名为GoldNumText,调整位置及大小,文本内容“$999999”,Text组件数值如下:

在GoldPanelImg下创建一个Text子物体,命名为RewardTimerText,调整锚点,调整大小和位置,文本内容“  0  0”,字体颜色白色(例如),调整效果如下所示。

整个层级面板布局及整个UI布置如图所示:

本栏目为网络课程学习笔记,仅供学习参考使用。 


http://www.kler.cn/a/326353.html

相关文章:

  • 号卡分销系统,号卡系统,物联网卡系统源码安装教程
  • React Native 全栈开发实战班 -原生功能集成之相机与图片
  • ssm129办公用品管理系统开发与设计+jsp(论文+源码)_kaic
  • 计算机组成与原理(2) basic of computer architecture
  • 李秀贤主演警匪片《蓝色霹雳火》
  • 计算机组成原理笔记----基础篇
  • DRF实操学习——购物车及订单生成
  • 【Redis 源码】1下载与源码编译
  • 使用CAPTCHA对反爬虫有优势吗
  • java 解析excel (网络资源)
  • Matlab|计及需求响应消纳风电的电热综合能源系统经济调度
  • 防火墙的区域划分+来自公网、内网的ip欺骗攻击+防御
  • 24.9.25学习笔记
  • 语音识别控制(软件、硬件)
  • 【Pytorch图像+序列双输入网络源代码】
  • mac 触控板 三指拖动
  • 【软件工程】模块化思想概述
  • 线性模型到神经网络
  • PyCharm开发工具的安装和基础使用
  • JVM(HotSpot):字符串常量池(StringTable)
  • DK5V100R20ST1直插TO220F功率12V 3A同步整流芯片
  • 解决目标主机showmount -e信息泄露(CVE-1999-0554)
  • 开创远程就可以监测宠物健康新篇章
  • C++ | Leetcode C++题解之第432题全O(1)的数据结构
  • Centos 8安装VNC及多用户配置详细教程
  • java socket bio 改造为 netty nio