转载

仿微博 iOS 客户端 TabBar 中间按钮

原文链接：仿微博 iOS 客户端 TabBar 中间按钮

项目源码：模仿微博客户端项目源码

我在模仿微博 iOS 客户端。如图：

微博客户端 TabBar 中间按钮和其他按钮不一样，一个是样式不一样，一个是点击事件不一样。

思路

第一个想法其实是建一个 UITabBarController 的子类，自定义 TabBar 的样式，但是因为还没学习过，所以这次希望另找一个办法。

第二个想法是用一个 button 覆盖 TabBar 中间按钮。无非就是在代码里新建一个 UIButton ，用 CGRectMake() 定位。

一个错误的尝试

有了上面的思路，我就在首页的 ViewController 中的 viewDidLoad() 方法中添加了如下代码：

    //100px 高宽随便设置用来测试的。     let postBtn = UIButton()     postBtn.frame = CGRectMake(self.view.frame.width/2 - 50, self.view.frame.height - 100, 100, 100)     postBtn.setBackgroundImage(UIImage(named: "post_btn"), forState: .Normal)     self.view.addSubview(postBtn)

结果如图：

仿微博 iOS 客户端 TabBar 中间按钮

两个问题

按钮被什么东西挡住了？
这个按钮添加在首页的 View 里面，所以只有首页有，其他 tab 怎么办？每个 tab 写一个吗？

问题一

在 Tabbed Application，底部始终有一个在最上层的 TabBar。每一个 tab 页面的 view 都在 TabBar 下面，所以在 tab 页面的 view 中在 TabBar 所在的位置添加子 subview，subview 会被盖住。

所以思路二行不通了吗？

问题二

重复一点代码倒没什么，不过有没有办法避免呢？

解决方案

我发现作为 Initial View Controller 的这个 Tab Bar View Controller 也可以添加一个自定义的 ViewController。

仿微博 iOS 客户端 TabBar 中间按钮

于是我新建了一个 UITabBarController 的子类。在 viewDidLoad() 中添加了 button。下面的代码是调整过 button 大小位置后的最终代码。

//  TabBarViewController.swift import UIKit  class TabBarViewController: UITabBarController {      override func viewDidLoad() {         super.viewDidLoad()                  //  初始化一些要用到的参数         let WINDOW_HEIGHT = self.view.frame.height         let TAB_HEIGHT = self.tabBar.frame.height         let GRID_WIDTH = self.view.frame.width / 5         let MARGIN_X = CGFloat(2)         let MARGIN_Y = CGFloat(5)         let BTN_WIDTH = TAB_HEIGHT - MARGIN_X * 2         let BTN_HEIGHT = TAB_HEIGHT - MARGIN_Y * 2                  //  遮罩层，用于遮挡原本的 TabBarItem         let modalView = UIView()         modalView.frame = CGRectMake(GRID_WIDTH * 2, WINDOW_HEIGHT - TAB_HEIGHT, GRID_WIDTH, TAB_HEIGHT)         self.view.addSubview(modalView)                  //  添加自定义按钮         let postBtn = UIButton()         postBtn.frame = CGRectMake(GRID_WIDTH * 2 + (GRID_WIDTH - BTN_WIDTH) / 2, WINDOW_HEIGHT - TAB_HEIGHT + MARGIN_Y, BTN_WIDTH, BTN_HEIGHT)         postBtn.setBackgroundImage(UIImage(named: "post_btn"), forState: .Normal)         self.view.addSubview(postBtn)                  //  给按钮添加事件         postBtn.addTarget(self, action: "postButtonClicked:", forControlEvents: .TouchUpInside)     } }

效果如图：

仿微博 iOS 客户端 TabBar 中间按钮