火山PC从零开始学炫彩UI 第四课

作者:灰羊羊

一、本文学习内容
上一课,我们通过设计窗口的背景,以及设计按钮的三种状态。来达到美化组件美化界面的目的。您应该也发现了,我们让一个组件美化,就需要大概写六行代码。如果这个时候您的组件很多,那么代码量也会相应的增加。这对于您后期项目的维护以及代码的编写是非常不便的。所以这个时候我们就可以使用界面设计器。来减少我们的任务量。

本文使用界面设计器来实现我们在前三课中所的涉及到的界面布置,如果您还没有安装设计器,请先观看第一课的内容。

二、界面设计UI项目
首先您需要下载第一课的安装包,然后把他们解压到一个文件夹里面。如下图所示,我们点击启动点我exe,就可以启动我们的设计器了。

data М yProject msdia140.dll Userlnfo “ XCGUI Run.exe ДЕЕ .ехе ОЕ.ехе 2021/10/25 13:15 2022/2/6 13:59 2018/2/19 22:04 2022/1/28 20:16 2021/12/28 19:01 2022/1/6 12:19 2021/10/25 13:26 2021/12/28 18:57 2021/3/26 15:59 2021/3/2 23:33 Windows 1,056 кв 1 кв 1,470 кв 6,956 кв 6,363 кв 3,588 кв 2 кв 2 кв

这个是设计器的主界面。看样子图标很多,其实并不是很麻烦。左这个是解决方案,我们用不到直接给他关掉就好
G) ( 文 视 图 调 试 工 具 帮 助 项 目 视 图 尖 方 “ 示 例 . 》 炫 彩 界 面 库 一 u 》 》 炫 彩 界 面 库 一 示 例 》 炫 彩 界 面 库 一 高 级 示 例 》 炫 语 言 一 示 例 》 炫 语 言 一 高 级 示 例 沿 有 激 活 设 计 视 , 无 可 显 示 丙 容 ! 炫 语 言 一 中 文 隔 程 》 DE 〔 磊 卜 v332 Debug u 》 元 素 囗 基 诎 元 素 按 钮 下 拉 组 合 框 列 表 树 - 工 具 条 文 本 接 形 状 对 象 园 形 文 本 形 状 矩 形 [ 当 形 状 组 框 望 远 按 钮 过 具 可 瞓 为 x85 們 布 局 元 素 编 框 巳 列 表 框 列 表 视 到 莱 望 条 0 进 过 条 月 历 卡 片 囤 形 状 到 片 回 形 状 国 形 詡 形 状 表 相 多 远 钮 O 0 炫 VIDE 一 集 成 开 发 环 境 》 DE 兔 , 为 了 可 痔 摸 发 鼹 , 欢 堡 大 家 助 支 ! 你 的 助 将 用 于 免 产 品 的 开 发 和 护 丿 汲 奖 励 为 该 产 品 出 奚 出 贡 献 的 用 户 ! 免 产 品 的 升 级 户 离 不 开 您 耷 支 扌 感 谢 ! 新 葚 项 目 兆 ON POST 打 开 项 目 · http://www.xcgui.com/support.php 我 们 的 产 晁 炫 彩 》 DE { 兔 } : 兔 的 思 乊 发 环 境 炫 语 言 ( 磊 ) : 炫 彩 中 文 程 岩 言 炫 彩 引 没 计 器 ( 基 础 免 } : 可 视 化 引 没 计 器 ***.http://www.xcgui.com/doc 学 丬 裔 源 : http://www.xcgui.com/school.php 块 码 仓 厍 ( gi https://gitee.com/xcgui/modul 旱 手 : https://gitee.com/xcgui/helper 助 名 戔 2 〔 ℃ .C ℃ 〕 c 18 & 88 兀 1671 ℃ 〕 c 5555 〕 c 9.00 兀 714g00 315g1 g53 210g1057 8ggg3281 8354410g 5g2851135 8212g757 224075g2 VICtor 音 乐 静 止 家 味 /huaix 不 鰈释 M ] r 三 己 5 三 国 布 局 框 架 编 器 」 列 表 滚 训 见 图 日 滚 动 条 •-ætab* 囤 日 期 时 间 形 状 G 》 F 曰 形 状 直 线 F5 : 编 泽 和 调 试 , F7 : 编 译 , Fg : 下 断 点 . Fl 住 单 步 F11 : 步 入 T 众 & 缩 讠 , TAB + SH 《 FT : 冫 少 旨 数 参 数 愆 开 : 7 . : 注 释 / 取 消 注 释 , Ctrl + G : 跳 转 至 身 旨 定 行 Ctrl 十 F : 索 和 替 , F12 : 跳 转 到 过 叟 Ctrl+ 回 车 : 恶 开 收 缩 , 表 相 内 叵 车 : 收 ESC. 淺 鼹 开 入 门 程 : 吉 00 共 旱 [ 视 频 致 程 卜 岿 言 小 苎 扫 盲 快 速 入 冂 g 结 , 旧 E 带 例 子 , 及 隔 程 手 册 尖 方 : 一 亇 多 个 [ 项 引 容 器 入 项 目 : 可 直 动 项 目 文 件 夹 到 [ 项 目 视 認 1 入 项 目 : 动 项 目 文 件 夹 到 [ 项 目 视 認 1 可 以 批 量 荨 入 多 顿 目 到 框 定 [ 分 文 件 夹 1 环 境 设 岩 : [ 炫 岩 叾 1 单 独 下 [ VC 环 境 刨 , 方 法 适 》 DE 目 录 帜 明 文 件 ] 文 牛 式 · 解 决 方 项 目 文 proj , 源 件 : 亥 艹 适 垡 性 名 称 〔 中 文 交 )„ 氵 殳 有 远 § 当 彐 可 对 象 , 无 可 显 示 层 性 ! 数 列 表 局 部 变 量 断 点 列 表 示 : 无 监 视 帮 助 调 试 0 ± 调 用 嵫 戋 调 出 索 和 替 换 查 找 引 用 背 昱 英 · , 導 團 蓄

在左边解决方案,这里您可以直接右键,然后选择移除项目全部或者清理项目全部。这两种方式都可以,如果是移除的话,只是在这里不显示了。磁盘上还有这些个东西如果,如果是清理的话就删掉了。因为这部分东西对于我们做界面用处不大,所以说我们可以不用看这个。您跟着我往下做就可以了。

下面我们来新建一个自己的布局。我们左键点击文件,选择新建项目,在弹出的界面中选择界面设计,美化无代码文件。然后输入您要保存项目目名称以及位置。点击确定就可以了。同时这里您要注意,这里要选择不使用解决方案。因为我们只做界面,用不到解决方案。

文 件 视 到 调 试 新 过 文 添 文 入 项 目 保 存 文 保 存 所 有 文 TN 帮 助 强 制 保 存 兰 前 文 关 文 关 项 目

打 开 项 目 F7 : 编 译 , Fg : 下 断 } 《 + SH 《 FT : 冫 少 表 相 内 叵 车 4 艹 [ 视 频 致 1 引 容 器 目 文 件 夹 页 目 文 件 夹 到 [ 项 目 ; 下 n"C- . cs , 项 目 文 件 我 们 的 产 晁 新 肄 项 目 界 面 设 计 美 化 一 无 代 码 文 件 界 面 设 计 姜 化 ( GU 》 〕 , 不 包 含 代 码 , 适 甲 所 有 隔 程 语 言 囗 程 孛 一 炫 语 言 形 户 界 面 〔 GU 就 到 二 程 序 控 斋 」 台 程 孛 一 炫 语 言 控 制 台 程 序 〔 0 令 行 〕 , 无 界 面 动 态 底 一 炫 语 言 助 名 戔 714g00 315g1g53 210g1057 8ggg3281 8354410g 5g28511 引 8212g757 224075g2 名 称 : 位 : 0 } 态 库 项 目 〔 DLL 〕 , 编 译 DLL 供 其 他 程 序 调 , 发 布 程 序 要 附 帝 DLL 文 态 底 一 炫 语 言 静 态 库 山 b 〕 , 编 译 文 仁 供 早 他 程 序 调 , 发 布 程 序 不 宗 要 地 帝 DLL 文 仁 0 火 山 零 基 诎 玄 彩 课 程 些 课 0 \ Users \ m 玳 D 泛 t 。 p \ 炫 彩 ] DE 一 土 1 . 1 一 ( 2021-10-25)\MyProject 尖 方 : O 创 建 新 的 尖 方 尖 方 名 称 : 囗 在 新 的 》 DE 中 打 开 proj , 源 件 : 亥 艹 O 添 加 到 当 前 尖 方 @不傅凭鹹尖方鐾 囗 创 建 分 文 夹 从 椏 板 远 择 确 定
这里是我们创建好的项目。首先看main.xml。这个是界面的布局,res后缀是资源文件。资源文件里保存着一些图片,字体等内容。最后一个css这个是样式文件,我们先用不到。

文 视 图 调 试 工 具 帮 助 一 火 山 零 基 础 彩 课 程 些 课 n13 》 n 到 —O 0 已 远 块 一 . windowUl [ 0 ] G) 底 0 . 起 始 页 炫 彩 界 面 库 一 我 的 窗 囗 名 0

下面我们需要把我们的素材文件,导进来,素材文件在第三课的末尾附下载链接
右键点击项目,选择打开所在文件夹

文 件 视 图 试 工 具 帮 助 一 火 山 零 基 彩 课 程 四 课 0. 耔 建 分 交 芙 目 〕 理 項 目 移 項 目 理 項 目 - 全 移 涂 項 目 - 全 始 页 耔 項 目 步 磁 中 項 目 丈 結 ) 存 为 目

找到项目存放的文件夹。在这里面把我们的素材文件夹复制过来。
卓 面 菪 彩 》 DE . 1 . 1 . 〔 2021 . 10 . 25 〕 ><br /> 修 改 凸 期<br /> 2022 / 2 / 814 巧 1<br /> 2022 / 2 / 814 : 47<br /> 2022 / 2 / 814 : 47<br /> 2022 / 2 / 814 : 47<br /> 2022 / 2 / 814 : 47<br /> MyPr0Ject ><br /> XMLZE<br /> 火 」 零 基 诎 彩 溧 程 匹 溧<br /> 名 称<br /> 0<br /> 囗 火 」 零 基 诎 彩 《 鬟 程 匹 课 艹 pre 」<br /> Compiled R 巳 so 山<br /> CSS%#<br /> XCPROJ 交 , #<br /> 1 KB<br /> 1 KB<br /> 0 KB<br /> 1 KB

. 10 . 25 〕 > MyProJect > 火 」 零 基 诎 彩 溧 程 匹 溧<br /> [ 下 ng<br /> 3 正 思 ng<br /> 7 中 窟 ng<br /> 用 户 中 心<br /> 1 1 按 下 ng<br /> 14 正 思 ng<br /> 卓 面<br /> 0 中 窟 ng<br /> 0 影 幔 焉 区<br /> 4 按 下 ng<br /> 7 正 思 ng<br /> . 中 心<br /> 1 1 中 窟 ng<br /> 菪 彩 》 DE . 1 . 1 . 〔 2021<br /> 0 正 思 ng<br /> 影 皚 焉 区<br /> 4 中 窟 ng<br /> 8 按 下 ng<br /> 厍 中 心<br /> 正 思 ng<br /> 16.png<br /> 1 按 下 ng<br /> 影 焉 区<br /> 4 正 思 ng<br /> 过 0 序 的 首<br /> 8 中 窟 ng<br /> 12 按 下 ng<br /> 17 ng<br /> 1 €a.png<br /> 5 按 下 ng<br /> 8 正 思 ng<br /> 12 窟 ng<br /> 右 0 底 到 ng<br /> 0 》 亍 0 蔗<br /> 正 思 ng<br /> 01 司 以<br /> 5 中 窟 ng<br /> 下 .png<br /> 12 正 思 ng<br /> 尷 彩 材<br /> 不 、 而 0 冂<br /> 2 按 下 ng<br /> 01 0 闷 以<br /> 5 正 ng<br /> 1 芒<br /> g€mpng<br /> 1 3 按 下 ng<br /> 2 窟 ng<br /> { 2 刷 斷 内 0<br /> 6 按 下 ng<br /> 《 司 庭 芒 垤<br /> 1 彐 中 窟 ng<br /> C<br /> 不 、 而 0 冂<br /> 2 正 思 ng<br /> { 2 虱 新 内 孬<br /> 6 中 窟 ng<br /> 所 中 心<br /> 1 [ 下 ng<br /> 1 3 正 思 ng<br /> , 0 树 炫 彩 材 .<br /> 台 专<br /> 3 按 下 ng<br /> { 2 虱 斷 内 孬<br /> 6 正 思 ng<br /> 所 地 中 心<br /> 10 中 窟 ng<br /> 14 按 下 ng<br /> 彐 中 窟 ng<br /> 7 按 下 ng<br /> 所 满 中 心<br /> 10 正 思 ng<br /> 14 中 窟 ng
然后我们在左侧项目中选择resource.res。点击它,在右边的窗口中。选择同步。

( 文 件 视 图 调 试 工 具 帮 助 @ 底 炫 语 言 一 中 文 隔 程 》 DE 〔 磊 卜 v3 起 始 页 main.xml 火 山 零 基 诎 彩 课 程 些 课 索 启 动 匹 配 满 0 入 内 雪 “ 添 加 除 设 首 司 步 n13 》 n 到 0 根 目 录 ><br /> 名 称<br /> 力 L 我 方 式 绘 嵝 型 尺 寸<br /> 0 已 远 块<br /> 字 灏 色 背 昱 资 源 E 映 射 表<br /> 沿 有 激 活 设 计 视 , 无 可 显 示 丙 容 !
在弹出的窗口中选择您刚才复制的素材文件夹,点击同步

起 始 页 main.xml 索 启 动 匹 配 满 0 入 内 雪 “ 添 加 除 设 首 司 步 根 目 录 ><br /> 名 称<br /> 力 」 我 方 式 绘 嵝 型 尺 寸<br /> 旧 字 色 背 昱 资 源<br /> 同 步 片 资 源<br /> 关 訐 戈 夹 :<br /> 庀 t 。 p \ 炫 彩 旧 E 一 土 1 . 1 一 ( 2021 一 10 一 25 八 Myproject\)l 〔 山 零 基 础 彩 课 程 些 课 \ 彩 素 材 . ,<br /> 设 置 关 訐 夹 , 将 文 仁 夹 中 的 片 固 步 到 资 源 中 , 目 0 建 立 分 支 文 仁 夹 ;<br /> 氵 芏 意 不 衽 录 中 的 片 资 源 将 褫 空 .<br /> 固 步

资源同步完成之后,它会在这里显示这样子,我们就把素材做好了,面我们开始做窗口。

( 文 件 视 图 调 试 工 具 帮 助 @ 底 0 , , 炫 语 言 一 中 文 隔 程 》 DE 〔 磊 卜 v332 @ × 起 始 页 main.xml 项 目 视 图 一 火 山 零 基 诎 玄 彩 课 程 些 课 索 启 动 匹 配 满 0 入 内 雪 “ 添 加 除 设 首 司 步 n13 》 n 到 根 目 录 ><br /> 名 称<br /> 力 L 我 方 式 绘 嵝 型<br /> 尺 寸<br /> 0 已 远 块<br /> 炫 彩 素 材 \ 〔 下 · png<br /> 〔鞍 下 .png<br /> 默 认 居 中<br /> 0 巧 0 KB<br /> 30 x 30<br /> 炫 彩 素 材 \ 0 正 png<br /> 默 认 居 中<br /> 053 KB<br /> 30 x 30<br /> 炫 彩 素 材 \ 0 点 窟 · png<br /> O,äZ.png<br /> 默 认 居 中<br /> 058 KB<br /> 30 x 30<br /> 炫 彩 素 材 \ 1 〔 下 · png<br /> 1 〔 下 · png<br /> 默 认 居 中<br /> 1 巧 0 KB<br /> 135 x 40<br /> 字 灏 色 背 昱 资 源 E 映 射 表<br /> 炫 彩 素 材 \ 10 正 png<br /> 10 正 png<br /> 默 认 居 中<br /> 1.11 KB<br /> 135 x 40<br /> 炫 彩 素 材 \ 10 点 窟 · png<br /> 10 点 窟 · png<br /> 默 认 居 中<br /> 0 8K8<br /> 135 x 40<br /> 炫 彩 素 材 \ 11 按 下 · png<br /> 11 按 下 · png<br /> 默 认 居 中<br /> 233 KB<br /> 135 x 40<br /> 炫 彩 素 材 \ 11 正 png<br /> 11 正 png<br /> 默 认 居 中<br /> 1.29KB<br /> 135 x 40<br /> 尸 0 《<br /> 炫 彩 素 材 \ 11 点 窟 · png<br /> 11 点 窟 · png<br /> 默 认 居 中<br /> L12K8<br /> 135 x 40<br /> 炫 彩 素 材 \ 12 按 下 · png<br /> 12 按 下 · png<br /> 默 认 居 中<br /> 0 月 3 KB<br /> 135 x 40<br /> 沿 有 激 活 设 计 视 , 无 可 显 示 丙 容 !<br /> 炫 彩 素 材 \ 12 正 png<br /> 12 正 png<br /> 默 认 居 中<br /> 0 月 gKB<br /> 135 x 40<br /> 炫 彩 素 材 \ 12 点 窟 · png<br /> 12 点 窟 · png<br /> 默 认 居 中<br /> 88 KB<br /> 135 x 40<br /> 0<br /> 炫 彩 素 材 \ 13按 下 .png<br /> 13按 下 .png<br /> 默 认 居 中<br /> 032 KB<br /> 24 x 24
回到我们最开始的窗口。
G) ( 文 视 图 调 试 工 具 帮 助 项 目 视 图 一 火 山 零 基 诎 玄 彩 课 程 些 课 n13 》 n n —O 0 已 远 块 一 . windowUl [ 0 ] ; 起 始 页 炫 彩 界 面 库 一 我 的 窗 囗 名 0

在窗口的空白地方右键点击,选择背景编辑器。这里就是和我们代码里面的背景管理器是一样的功能。
炫 彩 界 面 库 一 我 的 到 囗 名 步 层 性 添 加 为 巨 定 《 象 跳 转 至 《 代 码 〔 生 成 代 码 ) 定 E 〔 修 改 喽 E )

首先进入背景编辑器之后。点击下面这个图标所示的增加符号
分 列 汞 的 象 列 汞 短 制 状 态 : 无 0 T E*%*(windowUl) 1 草 」 宽 过 : 3g5 0 模 拟 高 度 : 281 不 逶 明 度 · 的 象 性 水 平 居 中 《 二 I 《 二 I · 255 垂 百 苦 中 颜 色 设 岩 R = 255 G = 0 旧 = 0 适 0 大 小 修 改 : Ctrl + S, 退 ± : Esc

在弹出的窗口选择整个窗口背景。因为我们要将背景图片覆盖整个窗口。

添 加 状 态 组 ( 绢 合 状 态 〕 一 窗 囗 布 局 位 选 择 一 (windowUI) D 》 V 状 态 @翳个窗囗背昱 O 布 局 一 中 O 布 局 一 上 确 定

左键点击整个窗口,选中这个状态。然后在右边点击图片图标,在空白的编辑处释放它。如下图三所示。最后将这个点击铺满,铺满整个编辑窗口。

分 列 汞 的 象 列 汞 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 E*%*(windowUl)* 1 草 」 宽 过 : 3g5 1 草 高 度 : 281 1 25 的 象 性 水 平 居 中 125 垂 百 苦 中 颜 色 设 岩 铺 满 适 0 大 小 寬 过 : 100 1 [ ℃ 蒙 〔 作 为 蒙 ) 修 改 : Ctrl + S, 退 ± : Esc

然后在右面点击图片右侧的三个,来选择我们需要到的图片
分 列 汞 的 象 列 汞 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 T E*%*(windowUl)* 1 草 」 宽 过 : 3g5 模 拟 高 度 : 281 的 象 性 水 平 居 中 垂 百 苦 中 颜 色 设 岩 适 0 大 小 蒙 〔 作 为 蒙 ) 修 改 : Ctrl + S, 退 ± : Esc

和原来一样,我们的15这是一个背景图,我们选中他。点确定。
E*%*(windowUl)* 分 列 汞 选 资 源 一 片 远 择 资 源 艾 : resource•res 等 分 : 确 定 索 启 动 匹 配 满 0 入 内 雪 “ 添 加 除 设 首 司 步 根 目 录 ><br /> 颜 色 设 岩<br /> 名 称<br /> 14 按 下 · png<br /> 的 象 列 汞<br /> 14 正 png<br /> 0<br /> 14 点 窟 · png<br /> 的 象 性<br /> 默 认 , 居 中<br /> 15.png<br /> 850 x 550<br /> 然@到 乍@到 〔@] 蚜<br /> 默 认 居 中<br /> 16.png<br /> 64 x 64<br /> 默 认 居 中<br /> 22 x 22<br /> 1按 下 .png<br /> 默 认 居 中<br /> 135 x 40<br /> 《 9 定 位 2<br /> 默 认 居 中<br /> 135 x 40<br /> 蒙 〔 作 为 蒙 )<br /> I,äZ.png<br /> 默 认 居 中<br /> 135 x 40<br /> 默 认 居 中<br /> 135 x 40<br /> 状 态 . 绑 定 文 本 色<br /> 短 制 状 态 : 无<br /> 修 改 : Ctrl + S, 退 ± : Esc

做完了这一系列操作之后,需要点修改。不然的话,您的操作不会被保存下来。
分 列 汞 的 象 列 汞 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 T E*%*(windowUl)* 1 草 」 宽 过 : 3g5 1 草 高 度 : 281 的 象 性 水 平 居 中 垂 百 苦 中 颜 色 设 岩 适 0 大 小 @15.png 蒙 〔 作 为 蒙 ) 修 改 : Ctrl + S, 退 ± : Esc

修改之后,这个编辑窗口他不会自己关不闭。需要您手动把它关闭。然后看到我们的界面背景是不是换成了我们刚才的图片?记得将窗口的尺寸修改下,改成850*550。这里原来窗口的图标还带着。我们下面来把它去掉。

起 始 页 in.xml* 0 然 曰 u 》 元 素 囗 基 诎 元 素 编 框 」 列 表 - 工 具 条 0 进 过 条 「 刨 日 期 时 們 布 局 元 素 编 器 列 表 树 莱 望 条 •-ætab* 国 布 局 框 架 下 拉 组 合 框 列 表 视 到 日 滚 动 条 文 本 接 还 具 箱 事 1 亍 为 适 葒 人 性 名 称 〔 中 文 E-mname) 名 称 射 表 内 容 窗 囗 名 窗 囗 逶 明 窗 囗 型 逶 明 度 逶 明 色 窗 囗 桂 式 左 边 上 边 № p ) R*(width) E*(height) 标 外 间 距 ( 0000 ) > 布 局 一 项<br /> > 布 局 一 自 子<br /> 外 观<br /> 炫 彩 界 面 库 一 我 的 窗 囗 名

首先选中窗口。在窗口右边的窗口,点击齿轮符号。在弹出的窗口中,我们只要居中、拖动、边框。其他的都不要
E-mname) 设 置 囗 棰 名 称 射 表 通 窗 囗 一 简 单 通 窗 囗 . 彈 ± 椏 态 窗 囗 . 默 认 椏 态 窗 囗 一 简 望 无 通 窗 囗 . 默 认 内 容 炫 彩 界 面 库 一 我 的 窗 囗 名 图 标 窗 囗 名 边 框 只 留 下 托 动 , 居 中 , 边 框 窗 囗 逶 明 居 中 控 ] 按 钮 一 最 小 化 窗 囗 型 其 他 都 不 要 逶 明 度 拖 动 边 框 控 ] 按 钮 一 次 化 逶 明 色 控 钮 一 关 闭 囗 拖 动 窗 囗 窗 囗 桂 式 允 许 次 化 左 边 确 定 上 边 № p ) 标 外 间 距 ( 0000 ) > 布 局 一 项<br /> > 布 局 一 自 子<br /> 英 . , 團 蓄

修改完这些会发现这个界面好像没有变化,然后我们可以先点保存,再点预览,它就会刷新。

の 、 匡 0 、 マ X 程 些 爍 起 始 交 炫 治 言 - 中 文 程 丨 DE ( 兔 壗 ト W32 0 イ % 日
下面我们开始添加按钮。在右面这个工具箱里面找到按钮。在窗口上点击放下。我们把按钮的尺寸改为135×40。您拖动这个按钮,把它放到合适的位置上。
x85 韧 0 0 炫 语 言 一 中 文 隔 程 》 DE 〔 磊 卜 32 Debug 起 始 页 0 u 》 元 素 国 布 局 框 架 囗 基 诎 元 素 按 钮 們 布 局 元 素 下 拉 组 合 框 巳 列 表 框 编 框 编 器 」 列 表 列 表 视 图 滚 见 图 列 表 树 日 滚 动 条 莱 望 条 - 工 具 条 8 u 能 0 n 文 本 接 月 历 卡 片 0 进 过 条 •-ætab* 「 刨 日 期 时 工 具 0 瞓 为 适 入 性 名 称 〔 中 交 交 )„ E-mname) 名 称 射 表 逶 明 度 工 具 示 纟 郛 定 且 on 组 》 D 左 边 上 边 ( 忆 p ) 0 英 . , 導 團 蓄 135 E*(height)
我们先做一个退出按钮。您可以直接把上面的按钮复制一份,然后放到合适的位置。

在下面这个按钮上右键点击背景管理器。
8 u 能 0 n 步 层 性 添 加 为 巨 定 《 象 跳 转 } 代 码 〔 生 成 代 码 ) 定 E 〔 修 改 喽 E ) 过 成 垡 •ndowUl

进入背景编辑界面。和上面操作窗口的方式一样,我们先添加状态。我们要选择三态。
分 列 汞 的 象 列 汞 短 制 状 态 : 无 0 E*%*(buttonUl) 添 加 状 态 组 ( 绢 合 状 态 ) 一 (buttonUl) D 》 V 状 态 O 元 素 一 离 开 0 @按钮3态僑开 停 按 下 ) O 按 钮 4 态 ( 奢 开 停 按 下 远 中 ) 0 不 逶 明 度 . 的 象 性 · 255 颜 色 设 岩 R = 255 G = 0 旧 = 0 适 0 大 小 O 按 钮 6 态 , 耒 远 中 开 停 按 下 ), 远 中 开 停 按 下 ) 水 平 居 中 《 二 I 《 二 I 确 定 垂 百 苦 中 修 改 : Ctrl 十 S, 退 ± : Esc

我们先添加离开状态下的样子。首先鼠标选中离开。然后在右面。用操作窗口同样的方式,先点击图片。放入空白编辑处,铺满。再选择图片

背 景 辑 器 〔 button 引 严 分 列 汞 0 1 草 」 宽 过 : 135 40 颜 色 设 岩 0 退 出 的 象 列 汞 的 象 性 水 平 居 中 垂 直 苦 中 铺 满 讠 过 0 大 小 0 到 片 · @12E*.png 蒙 〔 作 为 蒙 ) 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 修 改 : Ctrl 十 S, 退 ± : Esc
其他几个状态也是这样子操作。到最后我们修改保存

背 景 辑 器 〔 button 引 严 分 列 汞 0 出 、 0 . T 模 拟 宽 过 : 135 模 拟 高 度 : 40 颜 色 设 岩 退 出 的 象 列 汞 的 象 性 然@到 廡@到 〔@〕 蚜 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 修 改 : Ctrl 十 S, 退 ± : Esc
保存之后发现这个按钮的上面还有文字,显得比较花。

我们选中这个按钮,在右边找到它的文本,也就是按钮标题。把他的文本去掉就好了。

- - normal - ButtoA - - normal - - normal - - normal - - normal - Eiü(left)
我们可以用同样的方法再添加几个按钮然后给,然后给他们设计状态。我们素材里面有很多,您可以随便添加几个。

背景綞辑器 〔 buttonU 刂 分 列 汞 0 衾 权 0 权 0 权 結 、 0 . T 1 草 」 宽 过 : 135 会 员 权 益 的 象 列 汞

分 列 汞 模 拟 宽 过 : 135 模 拟 高 用 户 中 心 的 象 列 汞

这里我随便添加了几个按钮,最终的样子,如下图所示。
0 用 F 中 心 会 员 权 益 @ 定 位 功 能 应 用 中 心 0 退 出
预览一下


我们在前面给窗口加了个边框,现在我们在设计器里面也添加边框
右键点击窗口,选择背景编辑器。
选中整个窗口,然后在窗口上面。按照下图所示添加一个矩形,铺满

分 列 汞 的 象 列 汞 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 T E*%*(windowUl)* 1 1 5 模 拟 宽 过 : 850 模 拟 高 度 : 550 颜 色 设 岩 R = O,G = 0 旧 = 255 不 逶 明 度 . · 255 的 象 性 然@到 乍@到 〔@] 蚜 1 16 国 大 小 : 寬 过 : 1 閬 高 度 : 1 閬 修 改 : Ctrl + S, 退 ± : Esc

箭头指的地方,这里是边框色。另一个您可以理解为是前景色。

模 拟 宽 过 : 850 这 里 是 边 框 0 模 拟 高 度 : 550 的 象 性 水 平 居 中 垂 百 苦 中 @15.png 颜 色 设 岩 适 0 大 小 0 蒙 〔 作 为 蒙 ) 修 改 : Ctrl + S, 退 ± . Esc
我们给边框的颜色选个红色,线宽为1。这样子,蓝色旁边存在一个红色边框

分 列 汞 的 象 列 汞 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 T E*%*(windowUl)* 模 拟 宽 过 : 850 模 拟 高 度 : 550 颜 色 设 岩 R = 255 G = 0 旧 = 0 不 逶 明 度 : 255 的 象 性 然@到 乍@到 〔@Ill犟蚜下 修 改 : Ctrl 十 S, 退 ± : Esc
我们做边框肯定不能带着这么多蓝色就保存,我们西安选择前景色。然后将前景色的颜色改为透明色。透明色的位置,看下图。这样子一个边框就做好了,我们用到的是两个图层。

分 列 汞 的 象 列 汞 状 态 . 绑 定 文 本 色 短 制 状 态 : 无 T E*%*(windowUl)* 模 拟 宽 过 : 850 模 拟 高 度 : 550 的 象 性 水 平 居 中 大 小 : 透 明 色 颜 色 设 岩 修 改 : Ctrl 十 S, 退 ± : Esc
预览一下
0 用 户 中 心 会 员 权 益 @ 定 位 功 能 = 用 中 心 0 退 出

三、本文到此结束。

1. 本站鼓励用户发布原创内容,但并不保证每个人都遵守这一点,若内容侵犯了你的权益可联系管理员删除!
2. 本站资源,除文章特别指明外,均限定付费者本人使用,禁止二次 转载 传播 分发!
3. 本站资源多为第三方用户投稿 定价由资源提供者设定 收益人为资源提供者大家下载资源前仔细甄别需求与其描述是否可达预期 除非较明显的与说明不符资源外的纠纷尽量与作者点对点直接解决
4. 资源提供者发布作品请提供作品详细说明 与 截图 源码作品若引用了 其它模块或依赖请诚实说明 明细与版本!以及依赖是否开源。尽量做到资源下载后 可以直接使用与运行
5. 本站资源会员享受折扣开一个吧只有这个才是站长能拿到手的

炫彩商城 » 火山PC从零开始学炫彩UI 第四课

发表评论