自学iOS也有一段时间了,期间发现iOS和Android一样,有很多非常优秀的开源库可以使用。但无奈国内几乎没有太多关于此方面资料,唯有在Github上摸索。今天就写一篇关于PKRevealController的使用。本文章假定你已经具有一定的Objective-C开发技术技术,若需要入门教程请咨询谷歌君。
PKRevealController是由ZUUIRevealController改进而来,是一个简单、漂亮的开源库。实现了Facebook iOS客户端左右两边侧边菜单栏的效果(如下图)
其实,在Google上搜索『facebook like side menu』可以搜到一大堆可以实现的方案,其中有不少非常不错的实现方式。但我这篇文章中选择PKRevealController来演示。因为看了几种不同的实现方案之后,发现还是PKRevealController的实现方式比较简单、易用,而且最终效果和Facebook的效果高度一致。
其Github主页上对于它的说明如下:
PKRevealController (ex. ZUUIRevealController) is a delightful view controller container for iOS, enabling you to present multiple controllers on top of one another.
其主要的特点有:
从Github下载该项目,找到其中的PKRevealController/Controller
文件夹,把它拖到项目中去就可以了
在任何一个你想要使用它的地方记得导入 #import "PKRevealController.h"
在你的项目AppDelegate.h
里面声明一个PKRevealController
对象
1
|
@property
(nonatomic, strong) PKRevealController *revealController;
|
之后在AppDelegate.m
中适当的初始化(后面详解)
1
|
self.revealController = [PKRevealController revealControllerWithFrontViewController:frontViewController leftViewController:leftViewController options:nil];
|
在左边或者右边菜单栏里面现实内容,并在其中实现点击以后的切换效果即可
为了能够演示如何使用PKRevealController,简单新建一个如下图所示的项目。运行之后可以看到主界面,在其主界面左上角导航栏具有一个按钮,点击之后即可查看菜单。菜单种有两项分别位:Home、Profile。点击Home返回主页面,点击Profile则显示个人信息页面。
打开Xcode并新建一个EmptyApplication
,将其命名为PKRevealControllerDemo
下载PKRevealController项目并将其中的PKRevealController/Controller
文件夹复制到项目中
打开RevealControllerAppDelegate.h
文件,在其中引入#import "PKRevealController.h"
,之后声明一个PKRevealController
类型的对象命名为revealController
1
2
3
4
5
6
7
8
9
|
#
import
<UIKit/UIKit.h>
#
import
"PKRevealController.h"
@interface
RevealControllerAppDelegate : UIResponder <UIApplicationDelegate>
@property
(strong, nonatomic) UIWindow *window;
@property
(strong,nonatomic) PKRevealController *revealController;
@end
|
新建用以显示主界面的Controller,将其命名为MainFaceController
。为了简单起见,界面设计等使用xib布局就好。在界面上随便拖动一个组建,并显示相关数据。为了简便,我在界面上放置一个UILabel
组件,并在其中显示问候信息。核心代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
- (
void
)viewDidLoad
{
[
super
viewDidLoad];
//设置当前标题
[self setTitle:@
"Home"
];
//设置标题栏上左边的按钮
UIBarButtonItem *btnLeft = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:
@selector
(showLeftView)];
self.navigationItem.leftBarButtonItem = btnLeft;
}
//按钮点击事件
- (
void
) showLeftView
{
[self.navigationController.revealController showViewController:self.navigationController.revealController.leftViewController];
}
|
新建用以显示左边菜单栏的Controller,将其命名为LeftFaceController
。一般情况下,菜单栏可以使用UITableView
实现。表格数据填充参考:
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
|
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return
1
;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return
2
;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static
NSString *CellIdentifier = @
"CellReuseIndentifier"
;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if
(cell == nil)
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
switch
(indexPath.row)
{
case
0
:
[cell.textLabel setText:@
"Home"
];
break
;
case
1
:
[cell.textLabel setText:@
"Profile"
];
break
;
}
return
cell;
}
|
表格中点击事件参考:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
- (
void
)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
UINavigationController *frontViewController = nil;
switch
(indexPath.row)
{
case
0
:
//home
frontViewController = [[UINavigationController alloc] initWithRootViewController:self.mainFaceController];
break
;
case
1
:
//profile
frontViewController = [[UINavigationController alloc] initWithRootViewController:self.profileViewController];
break
;
}
[self.revealController setFrontViewController:frontViewController];
[self.revealController showViewController:self.revealController.frontViewController];
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
|
新建用以显示个人信息页面的Controller,将其命名为ProfileViewController
,其内容大致于MainFaceController
类似,因此就不再详细描述。(请看代码)
回到RevealControllerAppDelegate.m
,在其中并初始化主界面MainFaceController
、左边菜单栏LeftFaceController
、PKRevealController
等对象,并将其作为rootViewController
展示给用户
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
//主界面
MainFaceController* mainFaceController = [[MainFaceController alloc] init];
//菜单栏
LeftFaceController* leftFaceController = [[LeftFaceController alloc] init];
//构造PKRevealController对象
UINavigationController *frontViewController = [[UINavigationController alloc] initWithRootViewController:mainFaceController];
self.revealController = [PKRevealController revealControllerWithFrontViewController:frontViewController leftViewController:leftFaceController options:nil];
//将其PKRevealController对象作为RootViewController
self.window.backgroundColor = [UIColor whiteColor];
self.window.rootViewController = self.revealController;
[self.window makeKeyAndVisible];
return
YES;
}
|
https://git.oschina.net/barrywey/PKRevealController-Demo
https://github.com/barrywey/PKRevealController-Demo