★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(shanqingyongzhi)
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:https://www.cnblogs.com/strengthen/p/10356231.html
➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示创建动画样式的底部标签条的切换效果。
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
点击【显示辅助编辑器】图标,打开辅助编辑器。
选择故事板中的标签控制器,
在动画属性左侧的连接图标上按下鼠标,
并向第五个控制器的帧动画对象拖动,
将动画属性和其他的动画对象进行连接。
点击连接图标,可以查看该属性共连接了哪些控件。在面板外部点击隐藏该面板。