iOS开发-iPad侧边栏Tab选项卡切换
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,如需转载请自行联系原作者