Xcode Programing & iOS !!

네 이번에는 초보자도 쉽게 따라할수있는 아이폰개발에 UIButton (버튼) 을 추가하는 법을 알려 드릴게요.

이전에 빈 프로젝트로 프로젝트를 생성하셨다면 이어서 설명하도록 하겠어요^ ㅡ^

이전에 작업했던 프로젝트 생성을 못보신분들은 한번 읽어 보시구 오시면 좋겠어요.

자 그럼 일단 프로젝트가 생성되었다면 아래 그림처럼 왼쪽에 5개의 파일이 보이실꺼에요.

버튼을 추가 하기위해서는 5개의 파일중에 ViewController.m 파일과 ViewController.h 파일 그리고 ViewController.xib 파일

을 손을 봐야되요.

일단 ViewController.h 파일을 먼저 클릭하시구 중앙에 ViewController.h 파일을 코딩할수있도록 아래 화면 처럼 보인답니다.

이렇게 열렸다면 이제 UIButton(버튼)을 추가 하기위해서 일단 난 이 버튼의 이름을 지정해서 쓰겠다고 선언을 해주어야겠죠?

아래 그림 처럼 UIButton을 선언해주도록 해요.

그림이 작아서 소스가 잘 안보이신다면 아래 소스를 입력하면되요.

#import <UIKit/UIKit.h>

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

@property(nonatomic, retain)IBOutlet UIButton * testButton;  // <- 추가 해주세요

@end

자 이렇게 ViewController.h 파일에 입력하셨나요? 여기서 다들 궁금증이 생길꺼에요. 왜 UIButton * testButton 을 선언하는데

앞에 IBOutlet 을 적는지 궁금하실꺼에요. IBOutlet은 뷰 내의 개체와 코드를 연결하는 데 사용해요. 뷰 컨트롤러 내에서 버튼을
사용할려면 헤더파일에 IBOutlet UIButton * testButton; 을 선언하고 .xib파일에 연결하게되면 완전한 상호작용이 가능하게 되

어속성을 변경하거나 메서드를 호출하는 작업을 할수가 있게 된답니다. 쉽게 말해 눈으로 보이는 버튼을 코드와 연결시켜주는

중요한 연결고리를 IBOutlet이 해결해준다고 생각하시면 되요.

자 이렇게 @interface 부분을 작성을 한뒤 그 아랫줄에 @property(nonatomic, retain)IBOutlet UIButton * testButton; 이라는

한줄의 문구가 보일꺼에요. 이 한줄은 'getter'와 'setter'(접근자나 변경자)를 통해 노툴되어야 하는 요소들을 선언하는 구간

이에요. 너무 깊게 들어가면 머리 아프니 ViewController.m 파일을 코딩하는 부분에서 같이 설명하도록 하겠어요.

자 헤더파일에 위와 같이 코딩을 하셨다면, 이제 실질적으로 UIButton을 뷰 화면에 넣어 볼까요?

왼쪽 5개 파일중에 ViewController.xib 파일을 클릭해봅니다.

ViewController.xib 파일을 클릭 하셨다면 오른쪽 하단에 UIButton 아이콘이 보일꺼에요.

UIButton 아이콘을 드래그앤 드랍으로 뷰화면에 원하는 위치에 놓으시면 되요. 이렇게 하면 일단 버튼은 뷰화면에 추가가

되었어요. 하지만 버튼은 화면상으로는 추가 되었지만 실질적으로 버튼은 코드상에 등록이 안되었기에 작동하지는 않아요.

자그럼 앞서 IBOutlet UIButton * testButton; 을 ViewController.h 파일에 추가하셨기에 위에 화면에 보여지는 버튼과

연결을 시켜보도록 하겠어요. 그래야 버튼을 제대로 사용할수가 있답니다.

자 그럼 아래 그림처럼 왼쪽에 Placeholders 라는 항목 아래 File's Owner 이라는 항목이 보일꺼에요.

File's Owner 부분을 우클릭해보시면 검은 창이 아래 그림처럼 보여질텐데 여기 검은창에 자세히 보면 조금전 저희가

ViewController.h 파일에 'IBOutlet UIButton * testButton;' 이라고 선언한 부분중 'testButton'이라는 변수명이 검은 창에

표시가 될꺼에요. 확인하셨나요? 여기서 검은창 안에 'testButton' 이라는 항목 오른쪽편에 동그라미가 보이실꺼에요 속이

비어 있는 동그라미에 마우스를 가져다 보면 빈 동그라미안에 + 마크가 표시가 될꺼에요. 자 그상태에서 아래 그림처럼

뷰에 추가 했던 버튼으로 마우스를 드래그앤 드랍을 해보아요.

마우스를 끌어서 버튼위에 가져다가 놓으셨나요? 설명대로 하셨다면, 검은창에 약간의 변화가 생기셨을꺼에요.

자 위에 그림처럼 검은창에 'testButton' 항목 옆에 Button라는 문구가 생기셨나요?

위 그림처럼 생기셨다면 'ViewController.h' 파일에 'testButton' 이라고 등록했던 변수가 뷰화면에 추가한 버튼과 서로 연결이

되었다는 의미에요.

자 이렇게하면 드디어 뷰에 추가했던 버튼이 변수로 완전하게 상호작용이 가능하게 되었습니다.

여기서 이렇게 끝내면 버튼을 등록하고 버튼 클릭시 이벤트가 없으니 무언가 허전하겠죠? 자 이제 이 버튼을 눌렸을때 간단한

이벤트효과를 넣어 볼까요?

자 그럼 다시 'ViewController.h' 파일로 돌아가서 이벤트 함수를 선언해볼까요?

자 그럼 다시 'ViewController.h' 파일로 돌아와서 위 그림처럼 소스를 추가 해주어요.

그림이 작거나 안보이시는 분들은 아래 소스를 그림과 같이 추가 해주시면되요.

-(IBAction)button_click:(id)sender;

자 이 한줄을 @property(nonatomic, retain)IBOutlet UIButton * testButton; 와 @end 사이에 추가 해주시면 되요.

자그럼 함수명 -(IBAction)button_click:(id)sender; 이라는 함수가 선언이 되었습니다.

여기서 IBAction은 코드에서 특정 이벤트가 발생할 때 호출되어야 하는 메서드를 알리는 데 사용된다고 생각하시면 되요.

자 그럼 함수를 정했으니 이 함수안에 내용물을 넣어야 겠죠?

이제 실질적으로 동작하는 곳을 손을 봐야 하닌깐 'ViewController.m' 파일로 가요. 'ViewController.m' 파일에 가니 알수

없는 소스가 엄청 많죠? 일단은 저희는 버튼만 만지려 하기때문에 다른 소스부분은 잠시 제껴두도록 하겠어요.

자 위의 그림처럼 @implementation ViewController 이라는 문장 바로 아래 다음과 같은 소스를 추가 하도록 하겠어요.

-(IBAction)button_click:(id)sender{
    //여기에 버튼 클릭시 이벤트를 코딩하면 됩니다.
    if ( self.view.backgroundColor == [UIColor redColor] ) {
        self.view.backgroundColor = [UIColor blackColor];
    } else {
        self.view.backgroundColor = [UIColor redColor];
    }
}

자 위와 같이 코드를 집어 넣었나요? 그럼 일단 첫줄 부터 설명 할께요. @synthesize testButton;  자 이부분은

'ViewController.h' 에 @property(nonatomic, retain)IBOutlet UIButton * testButton; 를 선언했던 부분이랑 관련이 있어요.

'ViewController.h' 파일에 UIButton의 변수명을 testButton 이라고 선언했지만 'ViewController.m' 파일에서는 testButton이

정확히 무엇인지 알수가 없답니다. 이부분은 getter와 setter라고 하는데 깊게는 들어가지 않겠어요. 쉽게 .h파일의 변수를

.m 파일에 연결 시켜주는 끈이라고 생각하시면되요. 물론 깊은 뜻은 있지만 일단 이정도만 알고 넘어 가도록 해요.

그다음 -(IBAction)button_click:(id)sender{} 부분이에요 저 함수가 실행이 되면 안에 소스가 작동한다는 것은 그 누구라도

잘 아실꺼라 생각해요. 일단은 쉽게 설명하자면 안에 내용은 즉 이렇답니다.

만약에 ( 뷰의 배경화면이 빨간색이라면 ) {
    뷰의 배경화면의 색을 검은색으로 하여라
}만약에 뷰의 배경화면이 빨간색이 아니라면 {
    뷰의 배경화면을 빨간색으로 하여라
}

라는 정도의 의미랍니다.(코딩좀 해보신 분이라면 다 알거라 생각해요...아마도...이걸 모르시면 일단 명령어 공부를..)

자 이제 버튼을 클릭 하면 위와 같은 소스가 작동하겠죠? 그런데 하나가 빠진게 있답니다?

분명 클릭시 발생하는 이벤트 함수를 선언 하긴 했는데... 버튼이 어떻게 저 함수를 자동으로 인식을 하는걸까요?

네 버튼은 저 함수를 인식하지 못하고 있습니다. 왜냐면 제일 중요한 연결하는걸 해주지 않았 거든요.

그럼 이제 다시 'ViewController.xib' 파일로 돌아가서 직접 버튼이 이벤트 함수를 발생할수 있도록 연결을 시켜 줄까요?

다시 'ViewController.xib' 파일로 돌아 갑니다.

역시 File's Owner 를 우클릭하시구요 자 그럼 이번에 뜬 검은창에는 맨아래쪽에 'Received Actions' 라는 항목아래에 새로운

목록이 보일꺼에요. 네 바로 조금전 액션 이벤트를 넣은 함수명이 보이게 됩니다. 바로 'button_click:'라는 항목이 보이시죠?

역시 이 항목 오른쪽에 빈 동그라미부분에 마우스를 올리면 '+'마크가 생길꺼에요. 그대로 마우스로 드래그하시면서 버튼위에

드랍! 시키면 어라? 새로운 검은창이 또 생겨요. 바로 위에 있는 액션 함수를 어떤 시기에 이벤트를 발생시키겠느냐 라는

검은 창이 뜨게 되죠. 간단히 Touch Up Inside 를 선택하는겁니다.  터치로 누르고 터치가 떨어지는 것과 동시에 이벤트를

발생시켜라 인거죠. 자 우리에겐 이제 모든게 준비가 완료 되었습니다.

그럼 이제제대로 버튼 이벤트가 작동하는지 확인을 해보아야 겠죠?

그럼 그대로 Command + R 혹은 오른쪽 맨위에 Run버튼을 눌려 디버깅을 돌리며 에뮬레이터가 뜨길 기다립시다.




내 첫화면은 회색으로 시작하시죠? 당연히 첫 배경칼라를 지정하지 않았기에 디폴트 값으로 회색화면이 시작됩니다. 그다음

버튼을 누르게되면 빨강색과 검은색이 바뀌는게 눈에 보입니다.

자 이제 버튼 생성과 간단한 이벤트 조작을 해보았는데요.

액션에는 (IBAction) 이 들어가는 함수로 선언은 .h 파일로 세부적인 내용은 .m 파일안에서!

서로 연결해주는건 IBOutlet 과 @property 와 @synthesize 가 존재한다는거!

잊지 마시구요.   혹시 이밖에 잘못된 설명이나 궁금하신건 답글로 남겨주시면 감사하겠습니다.^^

끝까지 읽어주셔서 감사하구요 즐거운 하루되시길 빌께요 ^^