Android中习惯了叫侧边栏，iOS中如果不习惯侧边栏称呼的话可以叫dock，侧边栏的切换，类似于Android中的底部导航栏的切换，iPad尺寸大了一些，导航的栏目放在侧边会显示的更好耐看一些。选项卡是用按钮实现的，通过按钮的状态控制按钮的背景图片，最后通过按钮的Tag属性进行相对应的操作，iPad需要考虑一个横竖屏的问题，不过现在有些项目为了效果也好，为了开发效率也罢，可能只是选中了横屏效果。
基本布局
布局之前先来看一下最终需要实现的效果:
image
需要最四个图片进行相应的操作，通过图片控制最后的切换效果，黑色的属于侧边栏的区域，四个图片是按钮的背景图片，不过由于需要经常操作区域的宽度和按钮的宽度，需要预定义一下,新建一个Common.h文件，如果你不习惯，你也可以定义为Config.h，能看懂即可:
|
1
2
3
|
//侧边栏条目的尺寸
#define GPDockItemWidth 100
#define GPDockItemHeight 80
|
在之前的xCode中是默认的有pch文件的，xCode6.1中没有，需要新建一个pch文件:
image
新建之后并不能保证你运行成功，还需要去编译中设置一下Prefix Header($(SRCROOT)/PrefixHeader.pch)，清理下项目，导入Common.h文件即可成功；
image
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
|
最终效果如下:
image
代码相对以往较多，如有遗漏，请随时与我联系，如有好感，推荐或关注均可~
作者:FlyElephant
出处:http://www.cnblogs.com/xiaofeixiang
说明:博客经个人辛苦努力所得，如有转载会特别申明，博客不求技惊四座，但求与有缘人分享个人学习知识,生活学习提高之用，博客所有权归本人和博客园所有，如有转载请在显著位置给出博文链接和作者姓名，否则本人将付诸法律。
网友评论