Android中習慣了叫側邊欄，iOS中如果不習慣側邊欄稱呼的話可以叫dock，側邊欄的切換，類似于Android中的底部導航欄的切換，iPad尺寸大了一些，導航的欄目放在側邊會顯示的更好耐看一些。選項卡是用按鈕實現的，通過按鈕的狀態(tài)控制按鈕的背景圖片，最后通過按鈕的Tag屬性進行相對應的操作，iPad需要考慮一個橫豎屏的問題，不過現在有些項目為了效果也好，為了開發(fā)效率也罷，可能只是選中了橫屏效果。
基本布局
布局之前先來看一下最終需要實現的效果:
需要最四個圖片進行相應的操作，通過圖片控制最后的切換效果，黑色的屬于側邊欄的區(qū)域，四個圖片是按鈕的背景圖片，不過由于需要經常操作區(qū)域的寬度和按鈕的寬度，需要預定義一下,新建一個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實戰(zhàn)
①首先需要新建一個
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加載側邊欄區(qū)域:
|
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``;
}
|
②設置側邊欄區(qū)域，繼承自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
|
最終效果如下:
代碼相對以往較多，如有遺漏，請隨時與我聯系，如有好感，推薦或關注均可~
作者:FlyElephant
出處:http://www.cnblogs.com/xiaofeixiang
說明:博客經個人辛苦努力所得，如有轉載會特別申明，博客不求技驚四座，但求與有緣人分享個人學習知識,生活學習提高之用，博客所有權歸本人和博客園所有，如有轉載請在顯著位置給出博文鏈接和作者姓名，否則本人將付諸法律。
