在本章中，您将学习如何使用轴继电器和内部框架框架来创建AppleSymbol图标网站。
在我们开发iOS应用程序过程中，图标按钮经常使用图标按钮。苹果提供了官方网站的一组图标。开发人员可以直接使用Apple的官方网站图标来快速开发应用程序。
但不幸的是，当前的AppleSymbol图书馆当前仅下载和安装了DMG，对于非苹果开发人员和MacBook的低存储用户来说，这是非常不友好的。
结果，让我们看看我们是否可以成为Applesymbol图标库的在线版本，该版本包括常用的图标供用户直接使用。
去做就对了。
首先，创建一个名为AppleSymbol的新项目。
让我们分析Applesymbol图标网站的结构。它由侧导航栏和内容显示区域组成。当我们单击侧面导航栏的菜单时，正确的内容区域将显示不同的内容。
我们在这里使用的组件是：动态面板，内部关节框架和中继，并实现侧面导航栏，内容区域和侧面的内容显示。
第一个是侧导航栏。我们拖入左侧的动态面板。在样式工具栏中，位置为0,0，大小为256*955，动态面板的背景颜色为＃001529。
为了让侧面导航栏在左侧，我们需要修复侧导航栏的动态面板。
我们在样式工具栏中设置“固定到浏览器”的“固定到浏览器”，将级别固定为“左”，垂直固定为“顶部”。
接下来完成内容。
我们将动态面板仔细检查到动态面板的内部，然后拖入矩形1组件。在样式工具栏中，其位置的位置为（13，20），大小为230*52，填充颜色是透明的，线段的宽度为0；
双击矩形1，输入文本“导航菜单”，字体大小为14，字体颜色为#ffffff。
下面，我们添加了一种交互式样式。
在交互式工具栏中，我们单击“新通信互连”，选择“在单击”时选择“设置选择”，选择目标“当前”，值为“ true”。
在下面的“交互式样式”列中，“鼠标悬挂”的相互作用设置为检查“填充颜色”，并将颜色设置为＃1890ff。
以同样的方式设置“组件选择样式”，检查“填充颜色”，然后将颜色设置为＃1890ff。
我们复制六个“导航菜单”的矩形，文本包含文本“ common函数”，“添加，删除和充值”，“上下，左右”，“最喜欢的赞美”，“消息提醒”，和“硬件设备”。
矩形与10个间距对齐，该间距可以调节矩形之间的距离。
为了实现单个选择的效果，我们需要选择一个侧面导航列菜单，选择一个。
在这里，引用了“选项组”的概念。在选项组中，互动是唯一的。
当我们为每个菜单设置选择时，我们只需要将所有导航菜单组合在一个选项组中即可实现单个选择和相互选择的效果。
选择所有导航菜单和正确的单击“选项组”。
选项组命名为“导航菜单”。
这样，我们可以实现侧导航栏的单个选择效果。
我们单击以预览效果。
下面，我们设计内容区域。
我们在这里使用的组件称为“内联合框架”。它可以链接到显示外部地址网站或链接内部创建的页面。
我们在这里有7个菜单，我们首先在“页面”工具栏中创建7页。
然后在AppleSymbol页面上，将其拖入“内部联合框架”组件中，将其放在侧面导航栏的右侧，并将大小设置为1350*955。
顺便说一句，设置其样式，检查“隐藏边框”，然后将滚动模式设置为“永不滚动”。
我们希望当您单击侧面导航栏中的不同菜单时，内部关节框架显示不同的内容，并且内部关节框架可以绑定我们创建的页面。
下面，我们完成了这种逻辑绑定。
示例：当我们单击侧面导航栏中的“导航菜单”时，内容区域的“内联合框架”应显示“导航菜单”页面。
我们将侧面导航栏拨打到内页面，选择“导航菜单”，然后在“交互式”工具栏中，单击“单击”下的“添加运动”，选择“打开框架中的链接”，选择目标“内联合框架，选择“导航菜单”页面的链接。
以同样的方式，我们将此菜单设置为这样，因此当我们单击单个菜单时，内部关节框架将打开相应的页面。
同时，我们提供第一个菜单，即“导航菜单”，添加“加载“交互”，选择“设置选择”，目标是“当前”，值为“ true”。
这样，每次加载页面时，系统都会默认选择第一个菜单。同时，“内部框架”页面打开与第一个菜单相对应的页面。
此外，内部关节框架还需要设置默认目标页面。
选择内部联合框架。在“样式”工具栏中，设置“添加框架目标”，然后选择链接目标作为“导航菜单”页面。
我们在浏览器中预览效果。
设置框架后，我们来完成单个页面的图标显示。
首先，我们需要下载Apple官方网站上所需的所有图标。目前，符号3图标具有3000+。实际上，我们在这里不能使用太多，因此我们可以选择一些常用的使用。
我们单击“页面”工具栏以打开“导航菜单”页面，然后将页面的背景颜色设置为＃f0f2f5。
拖入“矩形1”组件中，名为“名称”。
设置尺寸为150*150，填充颜色为白色#ffffff，线段为0，圆角为8，并且边框设置为左右10，最多为100和2。
双击输入文本为“图标名称”，将字体颜色设置为＃666666，字体大小为14。
拖入“图片”组件并命名为“图像”。
设置60*60的大小。将图片组件放在矩形组件的中间。
这样，我们完成了图标卡的生产。
接下来，我们可以使用“继电器”组件，该组件等效于列表+foreach周期来穿越一堆图标卡。
拖入“ realayr”组件，剪切上面的名称矩形和图像图片，双击“ realayr”组件到其内页中，删除“ relayr”组件中的矩形，然后添加。名称矩形和图像图片粘贴了。
在“继电器”的内页上，必须保证组件的位置（0，0）。
接下来，我们在“交互”工具栏中设置交互。
在中继交互中，将交互作用为“每个负载”，选择“设置文本”，目标是定义我们先前定义名称的“名称”矩形，设置为“文本”，值为“ text”。
这是分配继电器的方式。
然后，单击下面的“添加运动”。
选择“设置图片”，目标是前面命名的图像图片，设置类型为“值”，已分配。
然后，我们选择“样式”工具栏。
在“数据”列中，我们将数据列表的头名更改为名称和图像。您只能在此处使用英语，至少可以使用当前版本。
然后，我们以“名称”列进入房屋，以便我们可以将第一张图片卡的名称分配给房屋。
然后在图像列下方，右键单击，选择“导入图片”，然后选择本地图片，例如下载的applesymbol图标中的房屋图片。
以同样的方式，我们添加更多名称并导入更多图片。这个过程很麻烦。
添加之后，我们可以关闭“ Relayr”并返回外层以查看遍历后的效果。
以同样的方式，我们在其他页面上执行此操作。
当然，我们可以将此页面的继电器直接复制到其他页面，然后只需要更改继电器的数据部分即可。
我们得到了Applesymbol图标库的原型。
最后，由于一个页面上有2个组件（动态面板，内部耦合框架）的原因，我们返回到applesymbol页面，什么也不选择。将页面排列调整为“对齐左侧”。
我们在浏览器中预览效果。
哈哈哈，效果很好！
为了允许本网站公开访问它，我们可以生成HTML文件，然后在Github或Gitee中发布它们，以便我们可以与朋友共享该网站。
苹果系统图标库：http：//ricardowesley.gitee.io/symbol
快来尝试！
如果此专栏对您有帮助，您可能希望喜欢，评论和关注?
原始：https：//juejin.cn/post/709479597888823710