用Swift与OC混编制作iOS8风格菜单

一、开篇

    众所周知Swift是苹果公司于2014年WWDC发布的新开发语言，它可以与Objective－C共同运行于Mac OS和iOS平台。但是由于iOS应用程序大多是由Objective－C完成的，在由OC过度到Swift的过程中，我们会不可避免地将Swift和OC混合编写Mac和iOS的应用程序。

    这篇博文主要的内容就是，如何用以Swift语言为主的iOS应用程序调用一些开源的Objective-C类，并用一个实例来阐述是怎样完成的，如果您在看本文的过程中发现什么错误可以指出来。

    下图是一个实例的最终模板，可以自己添加一些菜单的响应。这个菜单带有进入Menu的渐变动画以及模糊背景的功能，而这些功能的代码都是由OC实现并且在ViewController调用的（因为Swift较新，目前不会有什么开源的模块，不然我也不会写这篇技术博文了），那么我将展示如何用Swift语言调用该类

二、OC类

1.下面是CNPGridMenu.h的代码

#import <UIKit/UIKit.h>@class CNPGridMenuItem;@protocol CNPGridMenuDelegate;typedef void (^SelectionHandler)(CNPGridMenuItem *item);@interface CNPGridMenu : UICollectionViewController@property (nonatomic, assign) UIBlurEffectStyle blurEffectStyle;@property (nonatomic, weak) id <CNPGridMenuDelegate> delegate;@property (nonatomic, readonly) NSArray *menuItems;- (instancetype)initWithMenuItems:(NSArray *)items;@end@protocol CNPGridMenuDelegate <NSObject>@optional- (void)gridMenuDidTapOnBackground:(CNPGridMenu *)menu;- (void)gridMenu:(CNPGridMenu *)menu didTapOnItem:(CNPGridMenuItem *)item;@end@interface CNPGridMenuItem : NSObject@property (nonatomic, strong) NSString *title;@property (nonatomic, strong) UIImage *icon;@property (nonatomic, copy) SelectionHandler selectionHandler;@end@interface UIViewController (CNPGridMenu)@property (nonatomic, strong) CNPGridMenu *gridMenu;- (void)presentGridMenu:(CNPGridMenu *)menu animated:(BOOL)flag completion:(void (^)(void))completion;- (void)dismissGridMenuAnimated:(BOOL)flag completion:(void (^)(void))completion;@end</span></span></span>

2.接下来是CNPGridMenu.m的代码

#import "CNPGridMenu.h"#import <objc/runtime.h>#define CNP_IS_IOS8    ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0)@protocol CNPGridMenuButtonDelegate <NSObject>- (void)didTapOnGridMenuItem:(CNPGridMenuItem *)item;@end@interface CNPGridMenuFlowLayout : UICollectionViewFlowLayout@end@interface CNPGridMenuCell : UICollectionViewCell@property (nonatomic, strong) CNPGridMenuItem *menuItem;@property (nonatomic, strong) UILabel *titleLabel;@property (nonatomic, strong) UIButton *circleButton;@property (nonatomic, strong) UIImageView *iconView;@property (nonatomic, strong) UIVisualEffectView *vibrancyView;@property (nonatomic, assign) UIBlurEffectStyle blurEffectStyle;@property (nonatomic, weak) id <CNPGridMenuButtonDelegate> delegate;@end@interface CNPGridMenuItem ()@end@interface CNPGridMenu () <CNPGridMenuButtonDelegate, UIGestureRecognizerDelegate>@property (nonatomic, strong) UIVisualEffectView *blurView;@property (nonatomic, strong) NSMutableArray *buttons;@property (nonatomic, strong) CNPGridMenuFlowLayout *flowLayout;@property (nonatomic, strong) UITapGestureRecognizer *backgroundTapGestureRecognizer;@end@implementation CNPGridMenu- (instancetype)initWithMenuItems:(NSArray *)items {    self.flowLayout = [[CNPGridMenuFlowLayout alloc] init];    self = [super initWithCollectionViewLayout:self.flowLayout];    if (self) {        _blurEffectStyle = UIBlurEffectStyleDark;        _buttons = [NSMutableArray new];        _menuItems = items;    }    return self;}- (void)viewDidLoad {    [super viewDidLoad];    self.collectionView.backgroundColor = [UIColor clearColor];    self.collectionView.delaysContentTouches = NO;    [self.collectionView registerClass:[CNPGridMenuCell class] forCellWithReuseIdentifier:@"GridMenuCell"];        self.backgroundTapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTapOnBackgroundView:)];    self.backgroundTapGestureRecognizer.numberOfTapsRequired = 1;        UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:self.blurEffectStyle];    self.blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];    self.blurView.frame = self.view.bounds;    [self.blurView addGestureRecognizer:self.backgroundTapGestureRecognizer];    self.collectionView.backgroundView = self.blurView;}- (UIStatusBarStyle)preferredStatusBarStyle {    return self.blurEffectStyle == UIBlurEffectStyleDark ? UIStatusBarStyleLightContent : UIStatusBarStyleDefault;}#pragma mark - UICollectionView Delegate & DataSource- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    CNPGridMenuCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"GridMenuCell" forIndexPath:indexPath];    CNPGridMenuItem *item = [self.menuItems objectAtIndex:indexPath.row];    cell.delegate = self;    cell.blurEffectStyle = self.blurEffectStyle;    cell.menuItem = item;    cell.iconView.image = item.icon;    cell.titleLabel.text = item.title;    return cell;}- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return self.menuItems.count;}#pragma mark - UITapGestureRecognizer Delegate -(void) didTapOnBackgroundView:(id)sender {    if ([self.delegate respondsToSelector:@selector(gridMenuDidTapOnBackground:)]) {        [self.delegate gridMenuDidTapOnBackground:self];    }}#pragma mark - CNPGridMenuItem Delegate- (void)didTapOnGridMenuItem:(CNPGridMenuItem *)item {    if ([self.delegate respondsToSelector:@selector(gridMenu:didTapOnItem:)]) {        [self.delegate gridMenu:self didTapOnItem:item];    }}@end@implementation CNPGridMenuItem@end@implementation CNPGridMenuCell- (void)setupCell {    UIVisualEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:[UIBlurEffect effectWithStyle:self.blurEffectStyle]];    self.vibrancyView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];    [self.contentView addSubview:self.vibrancyView];        self.circleButton = [[UIButton alloc] initWithFrame:CGRectZero];    [self.circleButton setBackgroundColor:[UIColor clearColor]];    self.circleButton.layer.borderWidth = 1.0f;    self.circleButton.layer.borderColor = [UIColor whiteColor].CGColor;    [self.circleButton addTarget:self action:@selector(buttonTouchDown:) forControlEvents:UIControlEventTouchDown];    [self.circleButton addTarget:self action:@selector(buttonTouchUpInside:) forControlEvents:UIControlEventTouchUpInside];    [self.circleButton addTarget:self action:@selector(buttonTouchUpOutside:) forControlEvents:UIControlEventTouchUpOutside];    [self.vibrancyView.contentView addSubview:self.circleButton];        self.iconView = [[UIImageView alloc] initWithFrame:CGRectZero];    self.iconView.tintColor = [UIColor whiteColor];    [self.iconView setContentMode:UIViewContentModeScaleAspectFit];    [self.vibrancyView.contentView addSubview:self.iconView];        self.titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];    [self.titleLabel setFont:[UIFont systemFontOfSize:14]];    [self.titleLabel setTextColor:[UIColor whiteColor]];    [self.titleLabel setNumberOfLines:2];    [self.titleLabel setTextAlignment:NSTextAlignmentCenter];    [self.vibrancyView.contentView addSubview:self.titleLabel];}- (void)setBlurEffectStyle:(UIBlurEffectStyle)blurEffectStyle {    _blurEffectStyle = blurEffectStyle;    if (self.vibrancyView == nil) {        [self setupCell];    }}- (void)layoutSubviews {    [super layoutSubviews];    self.vibrancyView.frame = self.contentView.bounds;    [self.circleButton setFrame:CGRectMake(10, 0, self.contentView.bounds.size.width-20, self.contentView.bounds.size.width-20)];    [self.circleButton.layer setCornerRadius:self.circleButton.bounds.size.width/2];    [self.iconView setFrame:CGRectMake(0, 0, 40, 40)];    self.iconView.center = self.circleButton.center;    [self.titleLabel setFrame:CGRectMake(0, CGRectGetMaxY(self.circleButton.bounds), self.contentView.bounds.size.width, self.contentView.bounds.size.height - CGRectGetMaxY(self.circleButton.bounds))];}- (void)buttonTouchDown:(UIButton *)button {    self.iconView.tintColor = [UIColor blackColor];    button.backgroundColor = [UIColor whiteColor];}- (void)buttonTouchUpInside:(UIButton *)button {    self.iconView.tintColor = [UIColor whiteColor];    button.backgroundColor = [UIColor clearColor];    if ([self.delegate respondsToSelector:@selector(didTapOnGridMenuItem:)]) {        [self.delegate didTapOnGridMenuItem:self.menuItem];    }    if (self.menuItem.selectionHandler) {        self.menuItem.selectionHandler(self.menuItem);    }}- (void)buttonTouchUpOutside:(UIButton *)button {    self.iconView.tintColor = [UIColor whiteColor];    button.backgroundColor = [UIColor clearColor];}@end#pragma mark - CNPGridMenuFlowLayout @implementation CNPGridMenuFlowLayout- (id)init{    if (self = [super init])    {        self.itemSize = CGSizeMake(90, 110);        self.minimumInteritemSpacing = 10;        self.minimumLineSpacing = 10;        self.scrollDirection = UICollectionViewScrollDirectionVertical;        self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);    }    return self;}-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {        NSArray* array = [super layoutAttributesForElementsInRect:rect];        UICollectionViewLayoutAttributes* att = [array lastObject];    if (att){        CGFloat lastY = att.frame.origin.y + att.frame.size.height;        CGFloat diff = self.collectionView.frame.size.height - lastY;                if (diff > 0){            UIEdgeInsets contentInsets = UIEdgeInsetsMake(diff/2, 0.0, 0.0, 0.0);            self.collectionView.contentInset = contentInsets;        }    }    return array;}@end#pragma mark - CNPGridMenu Categories@implementation UIViewController (CNPGridMenu)@dynamic gridMenu;- (void)presentGridMenu:(CNPGridMenu *)menu animated:(BOOL)flag completion:(void (^)(void))completion {    [menu setModalPresentationStyle:UIModalPresentationCustom];    [menu setModalTransitionStyle:UIModalTransitionStyleCrossDissolve];    menu.modalPresentationCapturesStatusBarAppearance = YES;    [self presentViewController:menu animated:flag completion:completion];}- (void)dismissGridMenuAnimated:(BOOL)flag completion:(void (^)(void))completion {    [self dismissViewControllerAnimated:flag completion:completion];}- (void)setGridMenu:(CNPGridMenu *)gridMenu {    objc_setAssociatedObject(self, @selector(gridMenu), gridMenu, OBJC_ASSOCIATION_RETAIN_NONATOMIC);}- (CNPGridMenu *)gridMenu {    return objc_getAssociatedObject(self, @selector(gridMenu));}@end

对于代码的内容我不作解释，毕竟这不是重点内容，有需要的可以拷贝下来自己研究。

三、在Swift语言的ViewController调用OC类

1.首先打开XCode6.0,新建一个Single View Application,点击Next

2.填写项目名称，语言选择Swift，点击Next，选择项目的路径，最后创建好项目

3.新建一个头文件的OC文件，把前面的代码拷贝到相应的文件里面，现在我们在ViewController.swift里面使用该类

4.下面是ViewController.swift中的关键代码,请注意：ShowMenu这个方法是与一个按钮绑定的，即按钮点击时的相应方法，按钮要先在storyboard中创建好，具体不多解释。还有图片没有给出来，你可以自己找一些图片来代替

@IBAction func ShowMenu(sender: AnyObject) {                var laterToday = CNPGridMenuItem()        laterToday.icon = UIImage(named: "LaterToday")        laterToday.title = "Later Today"                var thisEvening = CNPGridMenuItem()        thisEvening.icon = UIImage(named: "ThisEvening")        thisEvening.title = "This Evening"                var tomorrow = CNPGridMenuItem()        tomorrow.icon = UIImage(named: "Tomorrow")        tomorrow.title = "Tomorrow"                var thisWeekend = CNPGridMenuItem()        thisWeekend.icon = UIImage(named: "ThisWeekend")        thisWeekend.title = "This Weekend"                var nextWeek = CNPGridMenuItem()        nextWeek.icon = UIImage(named: "NextWeek")        nextWeek.title = "Next week"                var inAMonth = CNPGridMenuItem()        inAMonth.icon = UIImage(named: "InMonth")        inAMonth.title = "In A Month"                var someday = CNPGridMenuItem()        someday.icon = UIImage(named: "Someday")        someday.title = "Someday"                var desktop = CNPGridMenuItem()        desktop.icon = UIImage(named: "Desktop")        desktop.title = "Desktop"                var pickDate = CNPGridMenuItem()        pickDate.icon = UIImage(named: "PickDate")        pickDate.title = "Pick Date"                var GridMenu:CNPGridMenu = CNPGridMenu(menuItems: [laterToday, thisEvening, tomorrow, thisWeekend, nextWeek, inAMonth, someday, desktop, pickDate])        GridMenu.delegate = self        self.presentGridMenu(GridMenu, animated: true, completion: {            NSLog("Grid Menu Presented")        })    }            func gridMenuDidTapOnBackground(menu: CNPGridMenu!){        self.dismissGridMenuAnimated(true , completion: {                NSLog("Grid Menu Dismissed With Background Tap")            })    }        func gridMenu(menu: CNPGridMenu!, didTapOnItem item: CNPGridMenuItem!) {        self.dismissGridMenuAnimated(true, completion: {            NSLog("Grid Menu Did Tap On Item: %@", item.title)        })    }

这里使用NSLog有助于理解方法之间的联系

5.ViewController.swift需要继承一个CNPGridMenuDelegate协议

class ViewController: UIViewController, CNPGridMenuDelegate

四、Swift与OC混编必不可少的一步

如果你做到了以上几部，那么你肯定会发现，在使用CNPGridMenu的时候，没有代码提示，并且会提示错误，那是因为没有import这个类，那么如何引入该类呢？其实非常简单，在新建OC文件的时候，Xcode会提示你，是否创建一个桥接文件，或者你可以自己新建一个头文件，名字必须是 "项目名-Bridging-Header.h",然后在这个头文件里面就可以import了

#import "CNPGridMenu.h"

同时，我们必须配置这个桥接头文件的编译路径，在项目配置中找到build settings,搜索Bridging或者下拉找到Swift Compiler - Code Generation，setting中有一个Objective-C Bridging Header，设置它的值为刚才创建的头文件的路径，具体如下图：

经过这一步，我们就可以成功地编译运行这个iOS应用程序啦