이번에 테스트 해본 라이브러리는 RNGridMenu입니다. 


그리드 메뉴를 구성할 수 있도록 도와주는 라이브러리로, 잘 활용하면 이쁜 디자인을 표현할 수 있을 것 같네요.


RNGridMenu에 대한 설명은 RNGridMenu의 GitHub 페이지에서 확인 하실 수 있습니다.


RNGridMenu GitHub : https://github.com/rnystrom/RNGridMenu




1. RNGridMenu 설치(install), 적용(apply)


이번 포스팅에서는 cocospod을 사용해보겠습니다. 


일단 새로운 프로젝트를 만드시고, Terminal에서 해당 프로젝트 폴더로 이동하신다음, 


vi Podfile 


위와 같이 파일을 열고, 아래 내용을 작성합니다.


pod 'RNGridMenu', '~>0.1.2'


파일을 닫고, 아래 명령어로 RNGridView를 해당 프로젝트에 적용합니다.


pod install



2. RNGridMenu 사용


프로젝트를 Xcode에서 오픈하시고, 스토리보드로 이동합니다.

먼저, 아래 그림을 확인하시죠.

저는 일단 Single View 프로젝트로 생성해서, View 안에 하나의 Button을 생성하고, 그 버튼을 소스와 연결해줬습니다.

그림과 같이 말이죠.


그리고 ViewController에 헤더 파일에 RNGridMenu.h를 추가해줍니다.


#import "RNGridMenu.h"


다음은, ViewController.m 파일을 열고, 버튼 클릭했을 때 수행되는 함수에 [self showGrid]라는 함수를 불러주고, 

-(void) showGrid 함수에는 다음과 같은 내용을 추가해줍니다.


- (IBAction)showGridMenuClick:(UIButton *)sender {

    [self showGrid];

}


- (void)showGrid {

    NSInteger numberOfOptions = 9;

    NSArray *items = @[

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"arrow"] title:@"Next"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"attachment"] title:@"Attach"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"block"] title:@"Cancel"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"bluetooth"] title:@"Bluetooth"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"cube"] title:@"Deliver"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"download"] title:@"Download"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"enter"] title:@"Enter"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"file"] title:@"Source Code"],

                       [[RNGridMenuItem alloc] initWithImage:[UIImage imageNamed:@"github"] title:@"Github"]

                       ];

    

    RNGridMenu *av = [[RNGridMenu alloc] initWithItems:[items subarrayWithRange:NSMakeRange(0, numberOfOptions)]];

    av.delegate = self;

    //    av.bounces = NO;

    [av showInViewController:self center:CGPointMake(self.view.bounds.size.width/2.f, self.view.bounds.size.height/2.f)];

}


위 소스는 https://github.com/rnystrom/RNGridMenu 에서 받은 소스에 나와있는 내용입니다.


총 9개의 메뉴를 생성하고, RNGridMenu에 넣어줍니다. initWithItems 라는 함수를 통해서 말이죠.


다음은 그리드 메뉴(Grid Menu) 클릭(Click)했을 때 불려지는 함수입니다.


- (void)gridMenu:(RNGridMenu *)gridMenu willDismissWithSelectedItem:(RNGridMenuItem *)item atIndex:(NSInteger)itemIndex {

    NSLog(@"Dismissed with item %d: %@", itemIndex, item.title);

}


이 함수에서는 NSLog로 몇 번째 Grid Menu Click되었는지 확인할 수 있도록 되어있습니다.

이 부분에 각 버튼에 대해서 하는 일에 대해서 작성하면 되겠죠. 



3. 테스트 결과


Grid Menu를 너무 쉽게 구현 할 수 있네요. ^^

  



+ 덧 (2014. 05. 13)


Grid 메뉴의 아이콘 사이즈(icon size), 폰트 크기(font size), 백그라운드(background) 색상 변경은 

RNGridMenu.m 파일에서 initWithItems 함수에서 정의되어 있습니다.

즉 initWithItems를 수정하시면 위 내용들을 수정하실 수 있겠죠?


아이콘이 검정색일 경우에는 백그라운드가 검정색일 때 잘 안보이겠죠? 

그래서 저는 backgroundColor 에서 colorWithWhite 값을 0.3으로 수정했더니, 꽤 잘 보이더라구요.


ㅠㅠ 아이콘을 만들 수 있는 능력이 있으면, 흰색으로 하는게 더 이쁘겠지만요 ㅠ





+ Recent posts