快捷導(dǎo)航

詳解iOS App中UiTabBarController組件的基本用法

更新時(shí)間：2016年05月18日 09:30:43 作者：Nono_Love_Lilith

UiTabBarController組件即是用來(lái)創(chuàng)建App中的Tab視圖切換選項(xiàng)欄,下面將詳解iOS App中UiTabBarController組件的基本用法,包括左右滑動(dòng)切換標(biāo)簽頁(yè)等基本功能的實(shí)現(xiàn),需要的朋友可以參考下

UiTabBarController這個(gè)控制器絕對(duì)是項(xiàng)目架構(gòu)時(shí)做常用的一個(gè)控件。
我們大致看下控件的效果，我們就知道為什么說(shuō)他常見(jiàn)了。

201651892122380.png (366×506)

這就是最簡(jiǎn)單的一個(gè)雛形，想必現(xiàn)在基本70%的應(yīng)用界面結(jié)構(gòu)都會(huì)是這樣的。
在Android中我們以ActivityGroup或是現(xiàn)在的fragment來(lái)實(shí)現(xiàn)，一個(gè)容器中包含多個(gè)子控制器。
下面我們還是以建立xib文件的形式來(lái)實(shí)現(xiàn)一個(gè)這樣的整體布局的例子。
當(dāng)然在 xcode中我們會(huì)發(fā)現(xiàn)其實(shí)直接有這么一個(gè)模板了

201651892201121.png (647×201)

但是直接使用模板后會(huì)發(fā)現(xiàn)是直接在代碼里實(shí)現(xiàn)了子布局得添加，由于我們不熟練，對(duì)于item，tabbar什么的圖片文字自定義，一下子找不到代碼里的api，
可能說(shuō)用xib來(lái)實(shí)現(xiàn)可以看得比較明了。
據(jù)說(shuō)以前直接有base_window模板，不過(guò)沒(méi)關(guān)系，模板只是為了給我快速建立一個(gè)應(yīng)用而已，我們這邊手動(dòng)的從最基礎(chǔ)得開(kāi)始
1.首先建立一個(gè)Empty Application

2.建立完后我們自定頂一個(gè)MainWindow.xib（當(dāng)然，這個(gè)名字可以隨意取，但是按照規(guī)范以及一種默認(rèn)留下來(lái)的習(xí)慣），作為應(yīng)用啟動(dòng)時(shí)加載的首個(gè)nib文件，
在新建xib文件你可以選擇window也可以是empt什么，其實(shí)都差不多，我們這邊選window模板得xib文件

3.然后我們其實(shí)是要把XXXAppdelegate和這個(gè)xib文件連接起來(lái)。因此把.h文件定義成這樣：

復(fù)制代碼代碼如下:

#import <UIKit/UIKit.h>

@interface NonoAppDelegate : UIResponder <UIApplicationDelegate>
{
UIWindow *window;
UITabBarController *tabTarController;
}

@property (retain, nonatomic) IBOutlet UIWindow *window;//該控件模板生成是不帶IBOutlet的，但是我們?yōu)榱藊ib文件布局得統(tǒng)一性，將其也作為一個(gè)輸出口和在Mainxib中連接起來(lái)可以
@property (retain, nonatomic) IBOutlet UITabBarController *tabTarController;
@end

4.然后我們來(lái)大致設(shè)計(jì)我們的xib文件,打開(kāi)MainWindow.xib文件，我們大致看到視圖元素，一個(gè)是文件擁有者Filesowner，然后是reponder（這個(gè)一直沒(méi)
怎么用到，具體干嗎使的還不是明確），然后最主要得是Object這個(gè)標(biāo)簽下得元素，此時(shí)就一個(gè)window。
首先我們要將文件擁有者這個(gè)類改成UIApplication，點(diǎn)擊File'sOwner標(biāo)簽后在右側(cè)的屬性欄選擇Indentity inspector，看到此時(shí)customclass是NSobject，
我們改成UIApplication，改完后會(huì)發(fā)現(xiàn)File'sOwner得Outlets用了一個(gè)delegate的輸出口東東，看過(guò)上一篇關(guān)于outlets和reference outlet我們就知道，
這個(gè)東東等會(huì)可以指向一個(gè)實(shí)例對(duì)象什么的。

5.好了，那么我們?cè)趏bject下的添加一個(gè)delegate的對(duì)象，操作很簡(jiǎn)單，在右側(cè)控件組中

201651892223305.png (664×256)

拖一個(gè)這樣得對(duì)象到xib下得Object標(biāo)簽下，

然后我們來(lái)自定這個(gè)對(duì)象，根據(jù)上面所知，我們大致可以知道我們需要一個(gè)類似于delegate類得對(duì)象，對(duì)了

我們的AppDelegate不就剛好是這么一個(gè)東西么。于是很自然的，選中這個(gè)object然后在右側(cè)屬性欄將custom class設(shè)置成NonoAppDelagate。

然后點(diǎn)擊File's Owner將其輸出口delegate和我們剛放上去的NonoAppdelagate鏈接起來(lái)。

6.設(shè)置完以上后，我們可以點(diǎn)擊Object下得XXXAppDelegate，然后看右邊屬性欄的 Outlets，對(duì)了，我們剛在該文件得.h中申明過(guò)兩個(gè)輸出口，此刻我們是

要?jiǎng)?chuàng)建兩個(gè)這樣的對(duì)象然后將其連接起來(lái)。window這時(shí)已經(jīng)有了，還少個(gè)UITabBarController。那么我們從右邊拖個(gè)過(guò)來(lái)咯

然后輸出口和對(duì)象鏈接起來(lái)。

此刻，最基本的tabbarcontroller布局框架就ok了，此刻的xib文件如下圖

201651892257438.png (900×500)

然后我們打開(kāi)AppDelegate.m進(jìn)行實(shí)現(xiàn)和修改

復(fù)制代碼代碼如下:

#import "NonoAppDelegate.h"

@implementation NonoAppDelegate

@synthesize window ;
@synthesize tabTarController ;

- (void)dealloc
{
    [self.window release];
    [self.tabTarController release];
    [super dealloc];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
//    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    self.window.rootViewController = self.tabTarController;
    [self.window makeKeyAndVisible];
    return YES;
}

恩，就是這么簡(jiǎn)單。
理論上我們現(xiàn)在啟動(dòng)模擬器后程序可以啟動(dòng)了。
但是卻發(fā)現(xiàn)起來(lái)后是空白的。
我們從應(yīng)用的main.m中看

復(fù)制代碼代碼如下:

int main(int argc, char *argv[])

{

    @autoreleasepool {

        return UIApplicationMain(argc, argv, nil, NSStringFromClass([NonoAppDelegate class]));

    }

}

然后應(yīng)用到了我們自定義得delegate類了，然后發(fā)現(xiàn)一個(gè)問(wèn)題，按照這個(gè)流程，我們MainWindow.xib文件貌似沒(méi)加載進(jìn)來(lái)啊.
這就對(duì)了，以前我們定義個(gè)controller的xib文件后都會(huì)有initWithNibName，而對(duì)于UIApplication類型的xib文件（其實(shí)局勢(shì)整個(gè)應(yīng)用最先要啟動(dòng)的一個(gè)類），
據(jù)說(shuō)是這樣的加載

201651892436632.jpg (900×409)

這個(gè)具體你可以去看上一篇中提到過(guò)ios應(yīng)用啟動(dòng)內(nèi)容，有個(gè)不錯(cuò)得博文給了很好得一個(gè)解釋。
此刻我們可以將main.h代碼稍微修改下

復(fù)制代碼代碼如下:

#import <UIKit/UIKit.h>

#import "NonoAppDelegate.h"

int main(int argc, char *argv[])
{
@autoreleasepool {
return UIApplicationMain(argc, argv, nil, nil);

}
}

原本第四個(gè)參數(shù)是指定AppDelegate,但是我們知道，在加載MainWindow.xib實(shí)例化里面一個(gè)delegate對(duì)象時(shí)，我們已經(jīng)鏈接了AppDelegate類了，
感覺(jué)如果第四個(gè)參數(shù)指定后，這個(gè)類像是被實(shí)例化了2次，更多具體內(nèi)容還是參考上面提到那個(gè)博客去看吧。

7.好了。最基本得tabbar界面完成，接下來(lái)是往里面添加子控制器。
首先我們來(lái)熟悉下UITabBarController這個(gè)控件：
從界面我們可以推測(cè)出，該控件里面大致上有什么東西：
1>.應(yīng)該有個(gè)類似于管理一組子控件的東西吧。
2>界面下面切換得切換條吧 tabBar
3>當(dāng)然還回發(fā)現(xiàn)有個(gè)delegate這樣得東西，就是代理對(duì)象么。
當(dāng)然上面是在代碼中，我們得到這些屬性，做相應(yīng)得操作。
在xib文件里可能說(shuō)看上去會(huì)比較直觀

201651892502600.png (648×503)

1>Tab bar里面放的是由一個(gè)或是多個(gè)TabbarItem組成的數(shù)組，每個(gè)itm對(duì)應(yīng)一個(gè)ViewController。
2>下面的 First，Second等等就是每個(gè)Item對(duì)應(yīng) 的Controller，這里也要注意一點(diǎn)，默認(rèn)的我們我們拖進(jìn)去一個(gè)
TabBarItem，一般我們會(huì)設(shè)置對(duì)應(yīng)得XXXcontroller.xib文件

201651892525978.png (298×241)

之后還需將Custom class改成對(duì)應(yīng)XXXXController類，因?yàn)槟J(rèn)的類是UIViewController。這會(huì)在應(yīng)用啟動(dòng)后報(bào)錯(cuò)的。
3>tabbarItem中可以設(shè)置title ，系統(tǒng)默認(rèn)的幾種圖標(biāo)，還有是自定義圖標(biāo)，以及badgeValue，就是上面標(biāo)簽上每個(gè)紅色的值，
這個(gè)比Android上先見(jiàn)之明多了呵呵。
4> 當(dāng)?shù)撞康陌粹o超過(guò)5個(gè)時(shí)，系統(tǒng)會(huì)自動(dòng)增加一個(gè)more按鈕，點(diǎn)擊more后，剩余的按鈕會(huì)被顯示出來(lái)。

201651892543769.jpg (358×693)