(Object-C) 3. UIButton을 이용한 UIView 전환. 버튼으로 화면 전환 ( 아이폰 )

 

자 전에 사용했던 버튼만들기 프로젝트를 이어서 갈꺼에요.

혹시 전에 버튼 만들기를 못보신분들은 버튼 만드는걸 할줄알고 간단하게 이벤트 처리 하는방식을

알꺼라고 생각하고 그부분은 생략하고 넘어가도록 하겠어요.

이번에는 메인 뷰에 버튼이 하나 있고, 그 버튼을 누르면 새로운 firstView 라는 새로운 뷰가 올라오도록 하고, 다시 firstView

에 있는 Back 버튼을 눌러 처음 메인 뷰로 돌아가게 하는걸 만들어 보겠어요.

자 그럼 일단 새로운 뷰가 있어야 겠죠? 아래 그림처럼 프로젝트의 'adf' 라는 폴더에 마우스를 가져다 가시구요.

마우스 우클릭하시면 팝업메뉴가 나올꺼에요. 이때 'New file...' 눌러주세요.

프로젝트의 폴더 'adf' 에 마우스 우클릭하고 새로운 파일을 생성하기 했는데요. 어떤 위치에서든 우클릭하시고 파일을 생성

하셔도 어떠한 문제점도 생기지 않아요. 다만 저는 'adf' 폴더에 새로운 파일을 생성하겠다 라는 생각으로 한거 뿐이에요.

나중에 파일이 많아지고 프로젝트가 길어진다면 따로 프로젝트내에 폴더를 생성하여 관리하시면 편하게 작업할수 있답니다.

자 'New file...' 을 클릭하셨다면 아래와 같은 그림이 나올꺼에요.

Chose a template for your new file: 이라는 창이 뜨셨을꺼에요.

이부분에서 여러가지가 나오는데요. 저희는 이부분중 'UIViewController subclass' 가 필요 합니다. 다른부분에 대해서

궁금하시다면 댓글 달아주시면 상세하게 설명 해드리도록 할께요.

'UIViewController subclass' 를 선택하고 'Next' 를 눌려 줍니다. Next를 누르게 되면 아래와같이 클래스명과 선택 사항이

나와요.

여기서 클래스명을 적어주시고요. 'Subclass of' 항목은 'UIViewController' 를 선택 해 줍니다.

그리고 그 밑에 'Targeted for iPad' 와 'With XIB for user interface' 부분이 보일꺼에요. 첫번째 'Targeted for iPad'는 딱

봐도 이건 타겟을 iPad로 잡겠다 라는걸 아시겠죠? 그 내용 그대로 입니다.

두번째 'With XIB for user interface'는 여러분이 버튼만들기까지 보셨다면 xcode에 필요한 파일이 .h, .m, .xib 파일 이렇게

3가지 파일이 필요하다는걸 아실꺼에요. 여기서 'With XIB for user interface'를 체크하지 않으면 .xib 파일을 제외한 .h, .m파일

두가지만 만들어지게 되요. 그러면 나중에 다시 .xib 파일을 따로 만들으셔야겠죠? 하지만 이러한 수고를 덜기위해 지금 항목을

체크해주셔서 .h, .m, .xib 파일 3가지가 만들어지도록 체크 해두는거에요.

자 그럼 체크 하시고 next를 눌려 줍니다.

자 그럼 이런 창이 나오시죠?

많이 보신 창이라 생각이 되요. 이창은 역시 이파일을 어디에다가 저장 하겠는지 물어보는 창이에요. 여기서 중요하다면

Targets 부분에 adf 프로젝트를 선택을 해주어야 된다는거죠. 보통은 체크되어 있지만 혹시 체크 안되어있다면 이부분에 꼭

체크 해주시기를 바랄께요.

자 그럼 이제 드디어 서브클래스를 만들기위해 Create 버튼을 눌려 줍니다.

Create 버튼을 눌렸다면 Xcode 에 왼쪽에 파일이 보여지는 부분에 3가지 파일이 아래의 그림처럼 만들어진걸 확인 하실수가

있어요.

확인 하셨나요?

자 그럼 이제 화면 전환했을때 보여질 뷰하나를 더 만든셈이라고 생각하시면 되요.

자 이제 새로운 파일을 만들었으니 화면 전환했을때 보여질 뷰를 구별하기위해 꾸며야겠죠?

아래그림처럼 새로 만든 파일중 .xib 파일을 선택하시고 다음과 같이 'UILabel' 과 'UIButton' 을 만들고 각각  FirstView,

Back 이라고 넣으시면 되요.

위 화면의 뷰는 버튼을 눌렸을때 이 화면을 보여주고 다시 Back 버튼을 눌리면 전페이지로 돌아 올 수 있도록 만들도록 하겠어

요. 자 이제 Back 버튼을 만들었으니 이 Back 버튼에게 이벤트를 주어야겠죠? 다시 .h 파일로 가서 UIButton과 연동되게

선언하로 가보아요.

자 위 화면 처럼 빨간 네모안에 버튼을 선언 하도록 합니다.

이미지가 작아서 안보이시는 분들을 위해서 따로 제가 아래 소스를 첨부하도록 하겠어요.

#import <UIKit/UIKit.h>

@interface firstViewController : UIViewController {
    // 버튼을 선언 해줍니다.
    IBOutlet UIButton * backbutton;
}

// getter와 setter 관계 아시죠? @property로 선언하고 .m 파일에서 @synthesize 로 받기위해 선언합니다.
@property (nonatomic, retain) IBOutet UIButton * backbutton;

// 버튼 클릭이 이벤트 발생을 위해 선언 합니다.
-(IBAction) backbutton_click:(id)sender;

@end

자 'firstViewController.h' 파일에 위와 같이 선언을 하셨나요? 자 그럼 이제 'firstViewController.m' 파일로 가서 세부적인

부분을 만져보도록 해보아요. 'firstViewController.m'파일로 가봅니다.

'firstViewController.m' 파일에 가보시면 위 그림처럼 '-(id)initWit......' 로 시작하는 부분이 있을꺼에요. 여기까지 설명하면

길어지니 궁금하신 분은 댓글로 남겨주시구요. 지금 저희에겐 이 부분은 필요가 없습니다.

자 간단하게 지워주시는거에요^ ㅡ^*

그럼 이제 'firstViewController.h'파일에서 선언했던 버튼과 버튼클릭시 이벤트 부분을 'firstViewController.m'파일에서 손을

봐야겠죠?

위 그림처럼 firstViewController.h 파일에 선언했던 부분과 버튼 클릭시 이벤트 발생시키는 부분을 추가 해요.

그림이 작아서 안보이시는 분들을 위해 아래에 소스를 적어놨어요.

@implementation firstViewController  <- 이 아래 부분에 넣으시면 되요.

@synthesize backbutton;  // <- 추가 해야되요 ^^

-(IBAction)backbutton_click:(id)sender{
    [self.view removeFromSuperview];   // <- 추가 해야되요 ^^
}

추가 하셨다면 클릭이벤트 발생하는 함수 안에 있는 [self.view removeFromSuperview]; 부분을 설명 해드릴께요.

지금 'firstViewController' 뷰는 클릭했을때 뜨는 화면이니 다시 버튼을 클릭해서 돌아가야 겠죠? 저 명령은 지금 뷰에 올라온

뷰를 제거 한다는 의마라고 생각하시면 되요. 그럼 현재 뷰가 사라지고 맨 처음 뷰가 보이겠죠? 이해가 되지 않으시다면

댓글 남겨 주시면 상세하게 다시 설명해드릴께요.

자 그럼 firstViewController.xib 로 돌아가서 버튼과 버튼 클릭시 발생하는 이벤트 함수를 UI환경에서 연결해야겠죠?

다시 firstViewController.xib 파일로 돌아가서 연결해주도록 해보아요.

버튼 등록하는 방법은 전에 설명해서 아시겠죠?

혹시 모르신다면

http://xgeno.tistory.com/entry/Object-C-2-초보자도-쉽게-따라하는-아이폰개발-UIButton버튼-추가해보기

아래 주소로 가보시면 버튼 등록하는 부분에 관해서 제가 설명 해놨어요. 한번 읽업시면 도움 되실꺼에요.

자 위 그림처럼 'firstViewController' 뷰를 완성했습니다.

그럼 이제 메인뷰로 돌아가서 'firstViewcontroller' 뷰가 연결되도록 설정해야겠죠?

다시 'viewController.h' 로 돌아가봅니다.

그림이 잘 안보이시는 분들을 위해 아래에 코드를 적어 드리겠습니다.

#import <UIKit/UIKit.h>

@class firstViewController;    // <- 추가 해주세요

@interface ViewController : UIViewController {
    IBOutlet UIButton * testButton;
    firstViewController * firstView;  // <- 추가 해주세요
}

@property (nonatomic, retain) IBOutlet UIButton * testButton;

-(IBAction) button_click:(id)sender;

@end

'viewController.h' 파일로 가셔서 '#import <UIKit/UIKit.h>' 부분 아래에 ' @class firstViewController;' 를 추가 합니다.

@interface 부분 안에 'firstViewController * firstView;' 라고 선언을 해줍니다.

여기서 @class 는 전방 참조를 설정해요. 전방 참조는 컴파일러에게 "이봐 컴파일러, 나를 믿어봐. 나중에는 이클래스가 어떤

것인지 알게 될테니까 지금은 이것으로 처리해줘"라고 알려주는 방법이에요. 쉽게 말해 @class 라고 선언된 부분은 참조한다

라는 의미라고 알고 있으시면 되요.

자 그럼 'ViewController.h' 파일에 필요한 부분은 다 선언 되었습니다.

이제 그럼 'ViewController.m'파일에 .h 파일에 선언했던것을 세부적으로 손을 보러 가봅니다.

'ViewController.m' 파일에 가보시면 위그림처럼 빨간 네모안에 들어있는 부분을 각 위치에 코딩해요.

그림이 잘 안보이시는 분들을 위해 아래에 코드를 보여드리겠어요.

1. #import "ViewController.h" 파일 바로 아래에다가 ' #import "firstViewController.h" 를 선언 해줍니다.

2. -(IBAction)button_click:(id)sender{} 부분 안에다가 ' [self.view addSubview:firstView.view] ' 를 코딩해줍니다.

  여기서 [self.view addSubview:firstView.view] 는 self.view 현재 뷰에 firstView.view 뷰를 더해서 올린다. 라고 생각하시면

  됩니다. 그럼 버튼 클릭시 firstView.vew 가 'ViewController'의 뷰 위로 올라오게되서 화면이 바뀐거처럼 보이게 되는거죠.

3. 이부분이 조금 중요한 부분이에요.

  -(void)viewDidLoad {} 바로 이 함수 안에 ' firstView = [[firstViewController alloc]init]; ' 라고 코딩을 해주는데요.

  -(void)viewDidLoad {} 이 함수는 맨처음 뷰가 실행될때 딱 한번 먼저 읽고 들어간다고 생각하시면되요. 맨처음 이 함수를

  컴파일러가 읽고 내려가면서 컴파일러에게 firstView 는 firstViewController 라고 인식을 시켜주고 시작한다고 생각하시면

  되요.

자 그럼 이제 코딩이 완료 되었네요. 혹시 이전에 제가 쓴 버튼만들기라는 내용의 글을 읽고 따라 오시지 않은 분들은

ViewController.xib 로 가셔서 버튼을 연결시켜주는 부분을 꼭 하셔야되요.

자세한 내용은

http://xgeno.tistory.com/entry/Object-C-2-초보자도-쉽게-따라하는-아이폰개발-UIButton버튼-추가해보기

참조 하시면 되요.

자 이제 모든 준비가 끝났으니 빌드를 돌려서 에뮬레이터로 확인 해보아야 겠죠?

자 Xcode의 왼쪽 상단에 Run 버튼을 누르거나 " Command + R " 키를 눌려 빌드를 돌려 봅니다.

자 아래 그림처럼 버튼클릭시 화면이 전환되었다가 다시 돌아 오나요?

자 그럼 이제 화면 전환 하는 방법도 끝났군요.

이렇게 화면을 전환하는 방법과 네비게이션바를 이용하여 화면을 전환하는 방법이 있어요. 뭐 둘다 비슷비슷 하지만 아이폰은

거의 대부분이 네비게이션바를 이용하여 화면이 전환되게 되어있어요.

그래도 혹시 모르게 누가 버튼을 이용해서 화면전환하시는 분이 있다면 도움이 되었을거라 생각해요.

오늘은 여기까지만 하도록 하겠어요.

혹시 빠진 설명이나 추가되어야 할 사항이 있으면 댓글로 남겨주셨으면 해요.

그밖에도 모르는 것이나 이해가 잘 안간다 라고 되시는분들은 댓글남겨주시면 자세히 설명을 해드리도록 하겠어요^^;

그럼 끝까지 읽어주셔서 감사합니다.

 

^^*