Xcode SideMenu 구성하기(MFSideMenu)

Xcode SideMenu 구성하기(MFSideMenu)

Android에서 Navigation Drawer의 역할과 비슷한 SideMenu를 사용해본다.

SideMenu는 앱의 깊이(Depth)를 크게 줄이고, 사용자에게 조금 더 직관적인 UI를 제공해주기 때문에, FaceBook이나 쇼핑몰 앱등에서도 쉽게 볼 수 있다.

  

MFSideMenu 라이브러리를 이용하여 SideMenu를 만들어본다.

참고. https://github.com/mikefrederick/MFSideMenu

과정

1.라이브러리 설치.

2.SideMenu 구성

3.Main화면 구성

4.Main화면과 SideMenu 연결

1.라이브러리 설치.

MFSideMenu는 Cocoapods로 제공이 되므로 이를 통해 설치한다.

프로젝트 생성후, 터미널에서 해당 경로로 이동한다.

그리고 podfile을 생성하여 아래 코드를 입력하고 MFSideMenu 라이브러리를 설치한다.

명령어 : touch podfile

편집 : open -e podfile

설치 : pod install

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, ‘7.0’
pod 'MFSideMenu'

2.SideMenu 구성

SideMenu는 테이블뷰로 구성할 것이다. UITableViewController를 상속받은 SideMenuController를 생성한다.

그리고 테이블 뷰에 각 아이템을 생성하는 코드를 구성한다. 여기에서는 2개의 section과 각 section당 10개의 아이템을 갖는 테이블뷰를 구성한다.

SideMenuViewController.h

#import <UIKit/UIKit.h>
 
@interface SideMenuViewController : UITableViewController
 
@end

SideMenuViewController.m

#import "SideMenuViewController.h"
 
#pragma mark - UITableViewDataSource
 
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    return [NSString stringWithFormat:@"Section %d", section];
}
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 2;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }
    
    cell.textLabel.text = [NSString stringWithFormat:@"Item %d", indexPath.row];
    
    return cell;
}

3.Main화면 구성

UIViewController를 상속받은 MainViewController를 생성한다. 이 때 Xib도 같이 생성한다.

xib를 이용해서 원하는 화면 구성을 한다.

그리고 상단의 네비게이션바에 메뉴버튼 구성하여, 메뉴를 클릭 했을 때 SideMenu가 열리는 동작을 하도록한다.

MainViewController.h

#import <UIKit/UIKit.h>
 
@interface MainViewController : UIViewController
 
@end

MainViewController.m

#import "MainViewController.h"
#import "MFSideMenu.h"
 
@interface MainViewController ()
 
@end
 
@implementation MainViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupMenuBarButtonItems];  
}
 
/**
 * 네이게이션바에 메뉴버튼 생성
 */
- (void)setupMenuBarButtonItems {
    self.navigationItem.leftBarButtonItem = [self leftMenuBarButtonItem];
}
 
/**
 * LeftBarButtonItem 생성
 */
- (UIBarButtonItem *)leftMenuBarButtonItem {
    return [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"menu-icon.png"]
                                    style:UIBarButtonItemStylePlain
                                    target:self
                                    action:@selector(pressedLeftBarButtonItem:)];
}
 
/**
 * LeftBarButtonItem 클릭시
 */
- (void)pressedLeftBarButtonItem:(id)sender {
    [self.menuContainerViewController toggleLeftSideMenuCompletion:^{
        [self setupMenuBarButtonItems];
    }];
}
@end
 
 
 

4.Main화면과 SideMenu 연결

2,3번 과정에서 Main화면과 SideMenu화면을 구성했다. AppDelegate에서 이를 연결해주는 작업을 한다.

AppDelegate.h

#import <UIKit/UIKit.h>
#import "MFSideMenu.h"
#import "MainViewController.h"
 
@interface AppDelegate : UIResponder <UIApplicationDelegate> {
    UINavigationController * naviViewController;
    MainViewController *mainViewController;
 
}
@property (strong, nonatomic) UIWindow *window;
@end

AppDelegate.m

#import "AppDelegate.h"
#import "MFSideMenu.h"
#import "SideMenuViewController.h"
 
@interface AppDelegate ()
@end
 
@implementation AppDelegate
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    
    // Main 생성
    mainViewController = [[MainViewController alloc] initWithNibName:@"MainViewController" bundle:nil];
    
    // Main을 감쌀 UINavigationController 생성
    naviViewController = [[UINavigationController alloc] initWithRootViewController:mainViewController];
    
    // 왼쪽 SideMenu 구성
    SideMenuViewController *leftMenuViewController = [[SideMenuViewController alloc] init];
    
    // Main과 SideMenu 연결
    MFSideMenuContainerViewController *container = [MFSideMenuContainerViewController
                                                    containerWithCenterViewController:naviViewController
                                                    leftMenuViewController:leftMenuViewController
                                                    rightMenuViewController:nil];
    self.window.rootViewController = container;
    [self.window makeKeyAndVisible];
    
    return YES;
}
@end

최종적으로 밑에 그림과 같은 구조를 가진다. Main화면은 추후 확장을 고려해 UINavigationController로 한번 감싸주어 구성해주었다.