大家知道，我們?cè)谛陆ㄒ粋€(gè)項(xiàng)目的時(shí)候，xcode就提供了一些模版框架給我們選擇，其中比較常用的便是Tabbed Application，一旦選用這個(gè)模版創(chuàng)建好項(xiàng)目之后呢，會(huì)在StoryBoard中自動(dòng)生成一系列的ViewController，非常方便（如下圖），但僅僅只對(duì)個(gè)人開發(fā)者而言，團(tuán)隊(duì)開發(fā)的話如果把所有Controller都寫到一個(gè)StoryBoard中，很有可能因?yàn)槎夹薷倪^這個(gè)文件而提交時(shí)有沖突，現(xiàn)在我們就學(xué)習(xí)一下如何避免這種情況。
這里給大家推薦一個(gè)優(yōu)秀的第三方TabBarController:CYLTabBarController,有點(diǎn)不足的是它是用Objective-C寫的，不過正好我們可以再溫習(xí)一下如何在Swift工程下引用Objective-C的開源工具。
繼續(xù)上一節(jié)我們的工程，上一節(jié)我們是為項(xiàng)目添加了百度地圖的支持，不過我們暫時(shí)先不用它，現(xiàn)在我們?cè)趂inder中新建一個(gè)目錄，放一些我們后面可能會(huì)使用到的第三方或者是我們自己編寫的一些公共通用工具類，這也是我們后面的目的，打造一個(gè)Swift快速開發(fā)框架。
現(xiàn)在我們來開始動(dòng)手吧，在當(dāng)前目錄中新建目錄 Library(以后我們的框架庫(kù)) -> Resource(所有引用到的第三方開源工具) ，并在Resource中放入上面提到的CYLTabBarController。現(xiàn)在你的目錄結(jié)構(gòu)應(yīng)該跟下面是一樣的。
修改sctong-Bridging-Header.h，添加對(duì)CYLTabBar的引用
//百度地圖
#import <BaiduMapAPI_Base/BMKBaseComponent.h>//引入base相關(guān)所有的頭文件
#import <BaiduMapAPI_Map/BMKMapComponent.h>//引入地圖功能所有的頭文件
#import <BaiduMapAPI_Search/BMKSearchComponent.h>//引入檢索功能所有的頭文件
#import <BaiduMapAPI_Cloud/BMKCloudSearchComponent.h>//引入云檢索功能所有的頭文件
#import <BaiduMapAPI_Location/BMKLocationComponent.h>//引入定位功能所有的頭文件
#import <BaiduMapAPI_Utils/BMKUtilsComponent.h>//引入計(jì)算工具所有的頭文件
#import <BaiduMapAPI_Radar/BMKRadarComponent.h>//引入周邊雷達(dá)功能所有的頭文件
#import <BaiduMapAPI_Map/BMKMapView.h>//只引入所需的單個(gè)頭文件
//新增CYLTabBar
#import "CYLTabBarController.h"
#import "CYLTabBar.h"
#import "CYLPlusButton.h"
現(xiàn)在我們?cè)陧?xiàng)目根目錄下也新建一些目錄，初學(xué)者不要嫌這樣很麻煩，你當(dāng)然可以直接在Xcode中直接新建group，再到group下新建對(duì)應(yīng)的文件就行，但這樣在Xcode中看起來還正常，如果你到Finder下查看的話，會(huì)發(fā)現(xiàn)所有的文件全部并在根目錄下的，那里你要找什么文件也不會(huì)很方便了，在Xcode支持創(chuàng)建Group時(shí)同時(shí)創(chuàng)建對(duì)應(yīng)的文件夾之前，我們還是老老實(shí)實(shí)的在Finder中創(chuàng)建并拖拽進(jìn)Xcode中吧。
我們將創(chuàng)建好的文件目錄拖拽進(jìn)Xcode，暫時(shí)只需要拖根目錄，也就是Library及UI兩個(gè)，現(xiàn)在你的結(jié)構(gòu)應(yīng)該跟圖中的一樣：
在Main下新建一個(gè)MainTabBarController，它就是以后程序的主界面了
之前我們看過android版的app，可以看到底部分別是首頁(yè)、人脈、消息、我的，現(xiàn)在我們繼續(xù)在Finder中分別創(chuàng)建對(duì)應(yīng)的4個(gè)目錄,Home、Connection、Message和Personal，中間的按鈕我們后面再實(shí)現(xiàn)。
拖進(jìn)Xcode中Main下：
分別在4個(gè)目錄下創(chuàng)建一個(gè)StoryBoard，并拖入一個(gè)簡(jiǎn)單的ViewControll，這樣如果團(tuán)隊(duì)開發(fā)的話我們就可以各自維護(hù)自己的SB并且不會(huì)沖突了。
好的我們現(xiàn)在回到MainTabBarController，修改其繼承自CYLTabBarController，如果你沒有找到這個(gè)類的話，請(qǐng)查看一下sctong-Bridging-Header是否添加了import。
//新增CYLTabBar
#import "CYLTabBarController.h"
#import "CYLTabBar.h"
#import "CYLPlusButton.h"
下面我們修改MainTabBarController，
viewDidLoad中的實(shí)現(xiàn)
/**
經(jīng)過我再次封裝，這個(gè)方法可以直接不需要理會(huì)，后面我們繼續(xù)擴(kuò)展，以后就不需要再寫viewDidLoad的方法了
*/
override func viewDidLoad() {
super.viewDidLoad()
var tabBarItemsAttributes: [AnyObject] = []
var viewControllers:[AnyObject] = []
for i in 0 ... Title.count - 1 {
let dict: [NSObject : AnyObject] = [
CYLTabBarItemTitle: Title[i],
CYLTabBarItemImage: Image[i],
CYLTabBarItemSelectedImage: SelectedImage[i]
]
let vc = UIStoryboard(name: StoryName[i], bundle: nil).instantiateInitialViewController()
tabBarItemsAttributes.append(dict)
viewControllers.append(vc!)
}
self.tabBarItemsAttributes = tabBarItemsAttributes
self.viewControllers = viewControllers
}
```
現(xiàn)在我們修改AppDelegate中的rootViewController為當(dāng)前的MainTabBarController：
最后我們?cè)谀M器上運(yùn)行一下，選擇6S\5S什么的隨便了。
噢，這里出了異常，不要懷疑這段代碼，是我們之前有一步忘記操作了。
**回到之前我們建立的4個(gè)SB文件，都把is initial view Controller勾上，再次運(yùn)行。**
這次我們看到，4個(gè)tab已經(jīng)顯示出來了，但因?yàn)闆]有設(shè)置導(dǎo)航，也沒有放圖片資源進(jìn)去，所以圖片和導(dǎo)航是看不到的。
現(xiàn)在我們?cè)O(shè)置一下導(dǎo)航：
記得把4個(gè)都設(shè)置一下。我們?cè)俜湃胭Y源文件
再次運(yùn)行，圖片和導(dǎo)航都正常的顯示出來了。
我們把導(dǎo)航做得稍微漂亮一點(diǎn)，Info.plist中添加
<key>UIStatusBarTintParameters</key>
<dict>
<key>UINavigationBar</key>
<dict>
<key>Style</key>
<string>UIBarStyleDefault</string>
<key>Translucent</key>
<false/>
</dict>
</dict>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
didFinishLaunchingWithOptions中添加
application.statusBarStyle = UIStatusBarStyle.LightContent
UINavigationBar.appearance().barTintColor = UIColor.init(red: 33/255, green: 150/255, blue: 243/255, alpha: 1)
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.whiteColor()]
再次運(yùn)行，一個(gè)完美的上檔次的主流導(dǎo)航UI框架就出現(xiàn)了。
最后我們來實(shí)現(xiàn)中間的按鈕，在MainTabBarController中新建一個(gè)PlusButtonSubclass，
class PlusButtonSubclass : CYLPlusButton,CYLPlusButtonSubclassing{
class func plusButton() -> AnyObject! {
let button:PlusButtonSubclass = PlusButtonSubclass()
//修改下按鈕的大小
button.frame.size.width = 50;
button.frame.size.height = 50;
button.setImage(UIImage(named: "icon_middle_add"), forState: UIControlState.Normal)
button.titleLabel!.textAlignment = NSTextAlignment.Center;
button.adjustsImageWhenHighlighted = false;
button.addTarget(button, action: "buttonClicked:", forControlEvents: UIControlEvents.TouchUpInside)
return button
}
//點(diǎn)擊事件
func buttonClicked(sender:CYLPlusButton)
{
print("hello mm")
}
override func layoutSubviews() {
super.layoutSubviews()
// 控件大小,間距大小
let imageViewEdge = self.bounds.size.width * 0.6;
let centerOfView = self.bounds.size.width * 0.5;
let labelLineHeight = self.titleLabel!.font.lineHeight;
// let verticalMarginT = self.bounds.size.height - labelLineHeight - imageViewEdge;
// let verticalMargin = verticalMarginT / 2;
// imageView 和 titleLabel 中心的 Y 值
// _ = verticalMargin + imageViewEdge * 0.5;
let centerOfTitleLabel = imageViewEdge + labelLineHeight + 2;
//imageView position 位置
self.imageView!.bounds = CGRectMake(0, 0, 36, 36);
self.imageView!.center = CGPointMake(centerOfView, 0)//centerOfImageView * 2 );
//title position 位置
self.titleLabel!.bounds = CGRectMake(0, 0, self.bounds.size.width, labelLineHeight);
self.titleLabel!.center = CGPointMake(centerOfView, centerOfTitleLabel);
}
}在didFinishLaunchingWithOptions中第一行加入PlusButtonSubclass.registerSubclass()```
有人遇到的這個(gè)buttonClicked 事件沒響應(yīng)，是因?yàn)槟銢]有設(shè)置按鈕的寬和高！自己打印下按鈕的frame，就知道了！然后在func plusButton()這個(gè)方法里面設(shè)置寬和高就可以了?。ㄈ绻趌ayoutSubviews中添加的話初始位置會(huì)不正確）
//修改下按鈕的大小
button.frame.size.width = 100;
button.frame.size.height = 100;
再次運(yùn)行，中間的按鈕已經(jīng)出來了，同學(xué)們可以根據(jù)自己的需求在layoutSubviews中修改一下坐標(biāo)，達(dá)到不同的效果。
OK本節(jié)到此結(jié)束。
Git地址：https://github.com/bxcx/sctong
本節(jié)分支：https://github.com/bxcx/sctong/tree/2nd_tabbed
