Android中習慣了叫側邊欄，iOS中如果不習慣側邊欄稱呼的話可以叫dock，側邊欄的切換，類似于Android中的底部導航欄的切換，iPad尺寸大了一些，導航的欄目放在側邊會顯示的更好耐看一些。選項卡是用按鈕實現的，通過按鈕的狀態控制按鈕的背景圖片，最后通過按鈕的Tag屬性進行相對應的操作，iPad需要考慮一個橫豎屏的問題，不過現在有些項目為了效果也好，為了開發效率也罷，可能只是選中了橫屏效果。

基本布局

布局之前先來看一下最終需要實現的效果:

?

需要最四個圖片進行相應的操作，通過圖片控制最后的切換效果，黑色的屬于側邊欄的區域，四個圖片是按鈕的背景圖片，不過由于需要經常操作區域的寬度和按鈕的寬度，需要預定義一下,新建一個Common.h文件，如果你不習慣，你也可以定義為Config.h，能看懂即可:

1 2 3

//側邊欄條目的尺寸 #define GPDockItemWidth 100 #define GPDockItemHeight 80

在之前的xCode中是默認的有pch文件的，xCode6.1中沒有，需要新建一個pch文件:

?

新建之后并不能保證你運行成功，還需要去編譯中設置一下Prefix Header($(SRCROOT)/PrefixHeader.pch)，清理下項目，導入Common.h文件即可成功；

Demo實戰

①首先需要新建一個GPMainController控制器，控制頁面頁面邏輯:

?

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// //? GPMainController.h //? GrouponProject //http://www.cnblogs.com/xiaofeixiang //? Created by keso on 15/3/9. //? Copyright (c) 2015年 keso. All rights reserved. // #import <UIKit/UIKit.h> #import "GPDock.h" @interface?GPMainController : UIViewController <GPDockItemDelegate> @end

?

需要在ViewDidLoad加載側邊欄區域:

1 2 3 4 5 6 7 8 9 10 11

- (void)viewDidLoad { ????[super?viewDidLoad]; ????// Do any additional setup after loading the view. ????self.view.backgroundColor=[UIColor greenColor]; ????? ????//加入側邊欄Dock ????GPDock *dock=[[GPDock alloc]initWithFrame:CGRectMake(0, 0,GPDockItemWidth,?self.view.frame.size.height)]; ????dock.dockDelegate=self; ????[self.view addSubview:dock]; }

　響應側邊欄的點擊事件，需要用到委托，如果委托不是很熟悉，可以參考本人之前的博客：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

-(void)switchMainByTabItem:(GPDock *)gpdock originalTab:(int)start destinationTab:(int)end{ ????switch?(end) { ????????case?0: ????????????self.view.backgroundColor=[UIColor blackColor]; ????????????break; ????????case?1: ????????????self.view.backgroundColor=[UIColor blueColor]; ????????????break; ????????case?2: ????????????self.view.backgroundColor=[UIColor redColor]; ????????????break; ????????case?3: ????????????self.view.backgroundColor=[UIColor purpleColor]; ????????????break; ????????default: ????????????break; ????} ????? }

GPMainContrller主要用于處理頁面的邏輯，同時需要在AppDelegate中設置一下根控制器:

1 2 3 4 5 6

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions { ????// Override point for customization after application launch. ????[UIView setAnimationDuration:2.0]; ????self.window.rootViewController=[[GPMainController alloc]init]; ????return?YES; }

②設置側邊欄區域，繼承自UIView:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// //? GPDock.h //? GrouponProject //http://www.cnblogs.com/xiaofeixiang //? Created by keso on 15/3/10. //? Copyright (c) 2015年 keso. All rights reserved. // #import <UIKit/UIKit.h> #import "GPTabItem.h" @class?GPDock; @protocol?GPDockItemDelegate <NSObject> -(void)switchMainByTabItem:(GPDock*)gpdock originalTab:(int)start destinationTab:(int)end; @end @interface?GPDock : UIView { ????GPTabItem *selectedTabItem; } @property?(nonatomic,weak)?id<GPDockItemDelegate> dockDelegate; @end

初始化側邊欄:

1 2 3 4 5 6 7 8 9 10 11

-(instancetype)initWithFrame:(CGRect)frame{ ????self=[super?initWithFrame:frame]; ????if?(self) { ????????//自動伸縮高度可伸縮，右邊距可以伸縮 ????????self.autoresizingMask=UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleRightMargin; ???????//設置背景圖片 ????????self.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"Toolbar_bg_tabbar.png"]]; ????????[self?addTabItems]; ????} ????return?self; }

　添加Tab選項卡:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//添加Tab選項卡 - (void)addTabItems { ?????//首頁 ????[self?addSingleTab:@"Toolbar_searchshop.png"?selectedImage:@"Toolbar_searchshop_selected.png"?weight:1]; ?? ????//團購 ????[self?addSingleTab:@"Toolbar_groupon.png"?selectedImage:@"Toolbar_groupon_selected.png"?weight:2]; ????//排行榜 ????[self?addSingleTab:@"Toolbar_ranklist.png"?selectedImage:@"Toolbar_ranklist_selected.png"?weight:3]; ????? ????// 個人中心 ????[self?addSingleTab:@"Toolbar_usercenter.png"?selectedImage:@"Toolbar_usercenter_selected.png"?weight:4]; ????? }

因為代碼類似，所以封裝到一個方法里面:

1 2 3 4 5 6 7 8 9 10 11 12 13

- (void)addSingleTab:(NSString?*)backgroundImage selectedImage:(NSString?*)selectedImage weight:(int)weight { ????GPTabItem *tabItem=[[GPTabItem alloc]init]; ????[tabItem setBackgroundImage:backgroundImage]; ????[tabItem setSelectedImage:selectedImage]; ????//設置位置 ????tabItem.frame = CGRectMake(0, GPDockItemHeight * (weight+1), 0, 0); ????//設置選中觸摸選中事件 ????[tabItem addTarget:self?action:@selector(tabItemTouchEvent:) forControlEvents:UIControlEventTouchDown]; ????tabItem.tag = weight - 1; ????[self?addSubview:tabItem]; ????? }

　設置觸摸事件:

1 2 3 4 5 6 7 8 9 10 11 12

//設置觸摸事件 - (void)tabItemTouchEvent:(GPTabItem *)tabItem { ????if?([self.dockDelegate respondsToSelector:@selector(switchMainByTabItem:originalTab:destinationTab:)]) { ????????[self.dockDelegate switchMainByTabItem:self?originalTab:selectedTabItem.tag destinationTab:tabItem.tag]; ????} ????selectedTabItem.enabled=YES; ????tabItem.enabled =?NO; ????//將當前選中的賦值 ????selectedTabItem =tabItem; }

③封裝側邊欄的GPDockItem，然后選項卡上的可以繼承：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// //? GPDockItem.h //? GrouponProject //博客園FlyElephant:http://www.cnblogs.com/xiaofeixiang //? Created by keso on 15/3/11. //? Copyright (c) 2015年 keso. All rights reserved. // #import <UIKit/UIKit.h> @interface?GPDockItem : UIButton //背景圖片 @property?(nonatomic,strong)??NSString??*backgroundImage; //選中圖片 @property?(nonatomic,strong)??NSString??*selectedImage; @end

　設置背景圖片和選中圖片:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

// //? GPDockItem.m //? GrouponProject //博客園FlyElephant:http://www.cnblogs.com/xiaofeixiang //? Created by keso on 15/3/11. //? Copyright (c) 2015年 keso. All rights reserved. // #import "GPDockItem.h" @implementation?GPDockItem /* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { ????// Drawing code } */ -(instancetype)initWithFrame:(CGRect)frame{ ????self=[super?initWithFrame:frame]; ????if?(self) { ????????// Item分割線 ????????UIImageView *splitLine = [[UIImageView? alloc] init]; ????????splitLine.frame = CGRectMake(0, 0, GPDockItemWidth, 2); ????????splitLine.image = [UIImage imageNamed:@"separator_tabbar_item.png"]; ????????[self?addSubview:splitLine]; ????} ????return?self; } //設置背景圖片 -(void)setBackgroundImage:(NSString?*)backgroundImage{ ????? ????_backgroundImage=backgroundImage; ????[self?setImage:[UIImage imageNamed:backgroundImage] forState:UIControlStateNormal]; ????? } //設置選中圖片 -(void)setSelectedImage:(NSString?*)selectedImage{ ????_selectedImage=selectedImage; ????[self?setImage:[UIImage imageNamed:selectedImage] forState:UIControlStateDisabled]; ????? } -(void)setFrame:(CGRect)frame{ ????//固定Item寬高 ????frame.size=CGSizeMake(GPDockItemWidth, GPDockItemHeight); ????[super?setFrame:frame]; } @end

　GPTabItem代碼:

1 2 3 4 5

#import "GPDockItem.h" @interface?GPTabItem : GPDockItem @end

設置選中時的背景圖片:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// //? GPTabItem.m //? GrouponProject //博客園FlyElephant:http://www.cnblogs.com/xiaofeixiang //? Created by keso on 15/3/11. //? Copyright (c) 2015年 keso. All rights reserved. // #import "GPTabItem.h" @implementation?GPTabItem /* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { ????// Drawing code } */ -(instancetype)initWithFrame:(CGRect)frame{ ????self=[super?initWithFrame:frame]; ????if?(self) { ????// 設置選中時背景圖片 ????[self?setBackgroundImage:[UIImage imageNamed:@"bg_tabbar_item.png"] forState:UIControlStateDisabled]; ????} ????return?self; } @end

　最終效果如下:

本文轉自Fly_Elephant博客園博客，原文鏈接：http://www.cnblogs.com/xiaofeixiang/p/4331452.html，如需轉載請自行聯系原作者

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的iOS开发-iPad侧边栏Tab选项卡切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。