zoukankan      html  css  js  c++  java
  • [Swift通天遁地]九、拔剑吧-(5)创建Tab图标具有多种样式的Tab动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
    ➤微信公众号:山青咏芝(shanqingyongzhi)
    ➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/
    ➤GitHub地址:https://github.com/strengthen/LeetCode
    ➤原文地址:https://www.cnblogs.com/strengthen/p/10356231.html 
    ➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
    ➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

    目录:[Swift]通天遁地Swift

    本文将演示创建动画样式的底部标签条的切换效果。

    Github项目地址:【animated-tab-bar】,下载项目,解压成文件夹窗口。

    将第三方类库的标签控制器文件夹【RAMAnimatedTabBarConroller】拖动到项目中。

    在弹出的文件导入确认窗口中,点击【Finish】完成按钮,确认文件的导入。

    在左侧的项目导航区打开视图控制器的代码文件【Main.storyboard】

    选择故事板中的视图控制器。依次点击:

    【Editor】编辑- >【Embed In】植入- >【Tab Bar Controller】标签控制器

    将选择的视图控制器,植入标签控制器。使用快捷键【Command】+【D】复制最初的视图控制器。

    将复制后的视图控制器,拖动到和第一个视图控制器对齐的位置。

    在故事板上点击鼠标右键,弹出右键菜单。选择【Zoom  to 25%】缩小故事板的显示比例。

    使用快捷键【Command】+【D】复制当前的视图控制器,并将它移动到适当的位置。

    使用相同的方法,继续复制并放置两个新的视图控制器。在故事板上点击鼠标右键,弹出右键菜单。

    选择【Zoom  to 100%】故事板的显示比例恢复至原始显示比例。

    现在开始将其他四个子视图控制器,和标签控制器做连接,将它们置入标签控制器。

    将标签控制器的上方,按下鼠标右键,然后拖动到第一个子控制器。

    在弹出的选项菜单中,选择【view controllers】视图控制器选项,

    以建立两个控制器之间的从属关系。使用相同的方式,将标签控制器和另外二个子控制器,建立从属关系。

    在弹出的选项菜单中,选择【view controllers】视图控制器选项,

    以建立两个控制器之间的从属关系。在标签控制器的上方,按下鼠标右键,然后拖动到第三个子控制器。

    在弹出的选项菜单中,选择【view controllers】视图控制器选项,

    以建立两个控制器之间的从属关系。

    点击故事板右侧的垂直滚动条,显示五个子视图控制器。

    然后选择第一个控制器标签。点击属性检查器图标,进入属性设置面板。

    输入标签的文字内容,

    【Titile】:User

    【Image】:icon_user

    选择控制器的根视图,设置根视图的背景颜色。

    点击背景颜色右侧的下拉箭头,弹出颜色预设面板。

    在弹出的系统颜色预设面板中, 选择一种颜色作为视图的背景颜色。

    选择第二个控制器的标签,输入标签的文字内容,

    【Titile】:Settings

    【Image】:Settings

    选择控制器的根视图,设置根视图的背景颜色。

    选择第三个控制器的标签,输入标签的文字内容,

    【Titile】:Location

    【Image】:icon_pin

    选择控制器的根视图,设置根视图的背景颜色。

    选择第四个控制器的标签,输入标签的文字内容,

    【Titile】:Drop

    【Image】:drop

    选择控制器的根视图,设置根视图的背景颜色。

    选择第五个控制器的标签,输入标签的文字内容,

    【Titile】:Frame

    【Image】:Tools_00028

    选择控制器的根视图,设置根视图的背景颜色。

    接着将五个视图控制器的标签控件,绑定到由第三方类库提供的自定义标签类。

    使它们具有动画的属性,首先选择第五个视图控制器标签。

    然后点击身份检查器图标,进入身份设置面板。

    【Class】:RAMAnimatedTabBarItem

    选择第四个视图控制器标签

    【Class】:RAMAnimatedTabBarItem

    选择第三个视图控制器标签

    【Class】:RAMAnimatedTabBarItem

    选择第二个视图控制器标签

    【Class】:RAMAnimatedTabBarItem

    选择第一个视图控制器标签

    【Class】:RAMAnimatedTabBarItem

    给每个标签指定不同的动画类型,

    首先需要给标签控制器,绑定一个自定义的类文件。

    选择标签控制器,在类名输入框,输入由第三方类库提供的自定义类。

    【Class】:RAMAnimatedTabBarController

    现在开始给每个视图控制器,设置不同的标签动画样式。

    首先点击控件库右侧的垂直滚动条,跳转到对象控件所在的位置。

    将【Object】对象控件拖动到第一个视图控制器。

    点击身份检查器图标,进入身份设置面板。

    【Class】:RAMRotationAnimation

    给控制器的标签控件设置一个跳跃动画,

    点击属性检查器图标。进入属性设置面板。

    在动画时长输入框内,【Duration】0.8,作为跳跃动画的时长。

    【Text Selected】:设置当标签处于焦点状态时,标签的文字颜色。

    同样对第二个第三个第四个视图控制器进行相同的处理。

    在此给第五个标签控件,添加了一个帧动画,

    点击属性检查器图标,进入属性设置面板。

    点击次数的下拉箭头,设置标签是否允许播放取消选择时的动画。

    设置列表中的激活选项,当标签取消选择时,也会播放动画。

    【Images Path】:ToolsIsAnimation

    点击【显示辅助编辑器】图标,打开辅助编辑器。

    选择故事板中的标签控制器,

    在动画属性左侧的连接图标上按下鼠标,

    并向第五个控制器的帧动画对象拖动,

    将动画属性和其他的动画对象进行连接。

    点击连接图标,可以查看该属性共连接了哪些控件。在面板外部点击隐藏该面板。

  • 相关阅读:
    c# 进程间同步实现
    mysql 中文支持
    堆排序算法详解
    CodeSmith 使用
    东软C#编程规范
    红伞各版key 申请和下载
    sql 添加删除字段
    第一个Hibernate 程序终于测试通过了
    C#下载大文件并实现断点续传
    Ms rdlc 打印
  • 原文地址:https://www.cnblogs.com/strengthen/p/10356231.html
Copyright © 2011-2022 走看看