博文:iOS开源库PKRevealController的使用

BarryWey 发布于 2013年08月21日 | 更新于 2013年08月22日
无人欣赏。

{原文首发与:http://my.oschina.net/barrywey/blog/155893}

自学iOS也有一段时间了,期间发现iOS和Android一样,有很多非常优秀的开源库可以使用。但无奈国内几乎没有太多关于此方面资料,唯有在Github上摸索。今天就写一篇关于PKRevealController的使用。本文章假定你已经具有一定的Objective-C开发技术技术,若需要入门教程请咨询谷歌君。

PKRevealController是什么

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.

其主要的特点有:

  • Proper view controller containment usage
  • Elegant block API
  • Supports both left and right sided view presentation
  • Works on both iPhones & iPads
  • Supports landscape & portrait orientations

PKRevealController使用概要

  1. Github下载该项目,找到其中的PKRevealController/Controller文件夹,把它拖到项目中去就可以了
  2. 在任何一个你想要使用它的地方记得导入 #import "PKRevealController.h"
  3. 在你的项目AppDelegate.h里面声明一个PKRevealController对象

    @property (nonatomic, strong) PKRevealController *revealController;  
    

    之后在AppDelegate.m中适当的初始化(后面详解)

    self.revealController = [PKRevealController revealControllerWithFrontViewController:frontViewController leftViewController:leftViewController options:nil];
    
  4. 在左边或者右边菜单栏里面现实内容,并在其中实现点击以后的切换效果即可

PKRevealController使用详解

为了能够演示如何使用PKRevealController,简单新建一个如下图所示的项目。运行之后可以看到主界面,在其主界面左上角导航栏具有一个按钮,点击之后即可查看菜单。菜单种有两项分别位:Home、Profile。点击Home返回主页面,点击Profile则显示个人信息页面。

alt text alt text alt text

  1. 打开Xcode并新建一个EmptyApplication,将其命名为PKRevealControllerDemo
  2. 下载PKRevealController项目并将其中的PKRevealController/Controller文件夹复制到项目中
  3. 打开RevealControllerAppDelegate.h文件,在其中引入#import "PKRevealController.h",之后声明一个PKRevealController类型的对象命名为revealController

    #import <UIKit/UIKit.h>
    #import "PKRevealController.h"  
    
    @interface RevealControllerAppDelegate : UIResponder <UIApplicationDelegate>
    
    @property (strong, nonatomic) UIWindow *window;
    @property (strong,nonatomic) PKRevealController *revealController;
    
    @end
    
  4. 新建用以显示主界面的Controller,将其命名为MainFaceController。为了简单起见,界面设计等使用xib布局就好。在界面上随便拖动一个组建,并显示相关数据。为了简便,我在界面上放置一个UILabel组件,并在其中显示问候信息。核心代码如下:

    - (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];
    }
    
  5. 新建用以显示左边菜单栏的Controller,将其命名为LeftFaceController。一般情况下,菜单栏可以使用UITableView实现。表格数据填充参考:

    - (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;
    }
    

    表格中点击事件参考:

    - (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];
    }
    
  6. 新建用以显示个人信息页面的Controller,将其命名为ProfileViewController,其内容大致于MainFaceController类似,因此就不再详细描述。(请看代码)

  7. 回到RevealControllerAppDelegate.m,在其中并初始化主界面MainFaceController、左边菜单栏LeftFaceControllerPKRevealController等对象,并将其作为rootViewController展示给用户

    - (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;
    }
    

完整代码下载

  1. https://git.oschina.net/barrywey/PKRevealController-Demo

  2. https://github.com/barrywey/PKRevealController-Demo

共3条回复
tinyfool 回复于 2013年08月21日

楼主好人啊

vikiliu0310 回复于 2013年08月22日

赞~话说这个效果的库好多好多啊~https://www.cocoacontrols.com/controls 这个网站好多开源控件,收费的不收费的都有

xamppobjc 回复于 2013年08月22日

赞一个,虽然自己会用了,但是也没有写过这么详细的帖子分享出来。

登录 或者 注册