详解iOS自定义UITabBar与布局

2020-01-21 04:56:53刘景俊

在小编整理过的文章iOS项目基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置。但是,很多时候,我们需要修改TabBarItem的图片和文字属性之外,还需要自定义TabBarItem的位置,这样系统自带的TabBar的样式并不能满足我们的项目需求,所以我们需要对系统的UITabBar进行自定义,以达到我们的项目需求。例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现,最中间那个【+】发布微博并不是用来切换tab的,而是在当前的页面上覆盖一个编辑发布页面,发布完成或者取消发布之后又回到之前的页面,并没有进行切换,这时候我们就需要对TabBar进行自定义,在最中间空出一个TabBar的空间进行布置这个【+】发布按钮。     

iOS,UITabBar,布局

iOS,UITabBar,布局

我们的项目是仿写“百思不得姐”App的功能模块进行学习和提高,其TabBar的样式与微博的样式基本相似(如上图右边的图),最中间的Tab按钮也是发帖功能,也是在直接当前的页面上覆盖一个编辑发布页面,发布完成或者取消发布之后又回到之前的页面,并没有进行切换。

解决方案

对于类似新浪微博和我们项目中这种情况有两种解决思路:

定义5个TabBarItem,然后在TabBar上添加一个与TabBarItem等大小的发布按钮在最中间,并添加点击事件,这样因为大小相等,所以新按钮完全覆盖了最中间的TabBarItem,最中间的TabBarItem的响应事件也会被屏蔽,因为按钮会先响应自定义TabBar,重写其 layoutSubviews 方法,将所有4个TabBarItem的布局和大小进行修改,将中间空出来,然后添加一个自定义的【发布】按钮,实现其点击事件即可 1 覆盖控件实现方案

这种方案的思路在上面已经说到了,就是先占一个位置,然后用一个按钮覆盖到其上面。主要缺点就是需要先申请一个位置和控制器来占位比较浪费,而且这种也只适用于各控件的大小是均匀的情况,当我们需求中每个TabBarItem的规格和尺寸不一样时,我们就无法使用这种方案实现。

有几点值得说明一下:

设置所有UITabBarItem的文字属性在上一篇文章iOS项目——基本框架搭建中已经提到了,这里就不详细介绍了【发布】按钮的初始化应该使用单例模式进行创建,因为我们项目中只有一个【发布】按钮,所以使用单例模式更合理,本文采用懒加载的方式进行单例模式的创建在 viewWillAppear: 中添加【发布】按钮 [self.tabBar addSubview:self.publishButton]; 。至于为什么要在 viewWillAppear: 中添加【发布】按钮而不是在 viewDidLoad 中添加?根本原因就是TabBarItem加载到TabBar上是在 viewDidLoad 之后执行的,后面在第2部分中有验证这一点, 在上一文章我们就说过,tabbarcontroller是在一创建控制器的时候就进行加载viewdidLoad。所以,如果添加【发布】按钮在viewDidLoad中会造成【发布】按钮在TabBar中是第一个添加的,这样会导致【发布】按钮会被TabBarItem覆盖了,这样我们就达到我们的目的。