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


EAIntroView에 대한 자세한 소개는 EAIntroView의 GitHub 페이지에서 확인 하실 수 있습니다.



테스트해보니깐, Intro 화면을 매우 쉽게 만들 수 있을 것으로 생각됩니다. 


Intro 화면이라고 하면, 앱의 소개, 사용 방법 등을 간략하게 보여줄 수 있는 페이지라고 생각됩니다. 


그럼 테스트, 소스 코드 간단한 설명 정도로 포스팅 해볼께요.


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


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


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


vi Podfile 


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


pod 'EAIntroView', '~>2.3.0'


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


pod install



2. EAIntroView 사용


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

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

스토리보드를 열고, 기본적(Single View 프로젝트로 생성한 경우)으로 생성된 View의 Class를 EAIntroView로 변경해줍니다. 

맨 오른쪽 빨간색 박스 처럼 말이죠.


그리고 해당 View를 소스코드와 연결해줍니다. 

View 클릭하시고, Ctrl 누르고 마우스로 끌어서 연결하시는 거 아시죠???


@property (strong, nonatomic) IBOutlet EAIntroView *introView;


저는 introView라는 이름으로 연결해줬구요. 위와 같이 말이죠.


그다음, 

ViewContoller.h 파일을 열고 EAIntroView.h를 추가해줍니다.


#import "EAIntroView.h"


다음은, ViewController.m 파일을 열고, - (void)viewDidLoad 함수에 아래 내용을 추가해주시면 됩니다.


- (void)viewDidLoad

{

    [super viewDidLoad];


    EAIntroPage *page1 = [EAIntroPage page];

    page1.title = @"Test Intro Page 001";

    page1.desc = @"a1";

    page1.bgImage = [UIImage imageNamed:@"image001"];

    page1.titleIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"title1"]];

    

    EAIntroPage *page2 = [EAIntroPage page];

    page2.title = @"Test Intro Page 002";

    page2.desc = @"a2";

    page2.bgImage = [UIImage imageNamed:@"image002"];

    page2.titleIconView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"title2"]];


    EAIntroView *intro = [[EAIntroView alloc] initWithFrame:introView.bounds andPages:@[page1,page2]];

    [intro setDelegate:self];

    

    [intro showInView:introView animateDuration:0.3];

}


물론 image001, image002가 프로젝트에 추가되어 있어야 하겠죠? :)



다음은, Intro 부분이 끝났을 때 Modal로 다른 View로 넘어가는 부분입니다.


EAIntroView에서 제공하고 있는 함수를 사용하시면 되는데요.


- (void)introDidFinish:(EAIntroView *)introView {

    [self performSegueWithIdentifier:@"test" sender:self];

}


위와 같이 introDidFinish 함수를 사용하시면 됩니다.

저는 스토리보드에서 Modal로 연결해뒀습니다. 이름을 test라고 했구요.



3. 테스트 결과

    



+ Recent posts