아이폰어플개발정보2010. 6. 24. 08:01
키보드로 입력해 보자!
다양한 애플리케이션을 사용하는데 있어서 중요한 요소중의 하나는 어떠한 정보를 입력하느냐이다. 특히 스마트폰 같이 작은 크기 때문에 키보드 같은 물리적 입력도구를 갖지 못하는 경우에는 더욱 더 신중하게 다루어야 하는 요소이다. 아이폰에서는 몇가지 종류의 키보드를 제공하고 있다. 영어, 한글, 숫자, 특수문자등의 필요에 따라 원하는 키보드를 호출하여 사용이 가능하다.


New Project.
새로운 프로젝트를 시작한다. 'View-based Application' 을 선택하고 프로젝트 이름은 'keyBoard' 로 하였다. 이번에 만들게 될 애플리케이션에는 이미지와 여러개의 라벨, 키보드로 입력이 가능한 텍스트 필드 몇개가 있는 프로젝트이다. 여기서 설명하는데로 따라해도 괜찮지만, 각자 새로운 형태의 구성을 해보는 것도 괜찮다.



그림1. 애플리케이션 구상

그림과 같이 각 영역을 구분지어보고, 각 영역별로 어떤 기능을 담당하게 할 것인가에 대해서 생각해 보아야 한다. 처음에 있는 이미지 영역은 단순히 이미지를 나타내기만 한다. 오른쪽의 텍스트 영역 역시 별다른 수정이나 변화가 필요하지 않다. 이제 아래에 있는 영역들을 보면, 'Name : ' 와 'Anumber : ' 는  텍스트필드 영역에 어떤 내용이 들어가야 하는지에 대해서 설명을 해주기 때문에 별 다른 변화가 필요하지 않다. 오른쪽 아래의 텍스트 필드 영역은 실제적으로 이름과, 군번(Anumber) 가 들어가는 자리이다. 이 영역에는 뭔가 입력을 받고, 데이터를 저장하는 등의 상호작용을 위한 부분이 되는 것이다. 이렇게 구성을 확인해 보면, 아웃렛이나, 액션이 선언되어야 하는 부분이 확실해 질것이다.


아웃렛 선언하기.
아웃렛을 선언해야 하는 부분은 두개의 텍스트 필드 영역이다. 아웃렛을 선언하기 위해서는 뷰컨트롤러.h 파일에 @property를 선언하고, 뷰컨트롤러.m 파일에 @synthesize 를 선언해 주면 된다.



그림2. keyBoardViewController.h 파일 수정

아웃렛을 선언하려는 부분의 프로퍼티를 선언한다. 프로퍼티를 선언하는 것은 다음과 같이 형식을 취하여 선언하면 된다. (굵은 글씨의 부분을 추가)

@interface keyBoardViewController : UIViewController {
UITextField *nameField;
UITextField *AnumberField;
}
@property (nonatomic, retain) IBOutlet UITextField *nameField;
@property (nonatomic, retain) IBOutlet UITextField *AnumberField;
@end



그림3. keyBoardViewController.m 파일 수정

헤더파일에 아웃렛을 선언한 후에 뷰컨트롤.m 파일에 @synthesize 선언자를 통해 선언을 해 주어야 접근자 메소드와, 변경자 메소드가 생성된다.

@implementation keyBoardViewController
@synthesize nameField;
@synthesize AnumberField;

또한, 메모리에 관련한 부분도 잊어서는 안된다. 아이폰 처럼 매우 적은 메모리를 사용하는 기기일 수록 메모리가 낭비되는 일이 없도록 꼼꼼하게 프로그래밍을 해야 한다. retain 키워드를 사용해 선언한 변수들을 모두 release 해주어야 한다.

- (void)dealloc {
    [nameField release];
    [AnumberField release];
    [super dealloc];
}


이미지 추가하기.
아이폰 프로그래밍에서 이미지를 사용하기 위해서는 'Groups&Files' 창의 'Resource' 폴더에 포함되어 있어야 한다. 아이폰에서 보여주고자 하는 작은 크기의 이미지로 작업을 해야 아이폰에서 이미지 크기를 변경하는 불필요한 연산을 줄일 수 있다. 사용하고자 하는 파일을 파인더에서 'Resource' 폴더로 끌로와서 포함을 시키거나, 'Resources' 폴더의 우클릭 메뉴에서 'Add' -> 'Existing Files...'을 해서 이미지 파일을 추가할 수 있다.



그림4. 이미지 파일 추가.


화면 디자인 하기.
'Resources' 폴더의 'keyBoardViewController.xib' 파일을 더블클릭하여 인터페이스 빌더를 실행한다. 먼저 이미지를 추가하기 위해서는 라이브러리 윈도우에서 'Image View' 를 드래그 해서 View 윈도우에 놓아야 한다.



그림5. 이미지 뷰 추가.

위의 화면과 같이 꽉 찬 화면의 이미지뷰가 뷰 윈도우에서 선택되어 진 것을 볼 수 있을 것이다. 하지만 우리가 넣고자 하는 이미지는 아직 들어가 있지 않다. 이미지뷰는 이미지의 영역을 구분하는 경계정도로 생각하면 된다.



그림6. 실제 이미지 표현

실제로 이미지가 나타나게 하기 위해서는 Attribute 윈도우의 'Image' 에 이미지 파일을 추가해 주어야 한다. 드롭다운 선택 메뉴가 나오는데, 여기에는 'Resource' 폴더에 포함된 이미지들만 나오게 된다. 여기서 원하는 이미지를 선택하면 위의 그림과 같이 이미지가 뷰에 표현되는 것을 볼 수가 있다. 간혹 실제 이미지를 표현하기 전에 이미지 영역이 뷰 영역의 뒤로 표현이 되서 선택을 못하는 경우가 발생하는데, 이럴 경우에는 main 윈도우의 View Mode 를 리스트 보기로 바꾸면 뷰영역안에 포함되어 있는 목록을 볼 수 있다. 여기에서 이미지 뷰 영역을 선택하면 뷰 윈도우에서도 똑같이 선택할 수 있다.



그림7. main 윈도우 리스트로 보기

이미지를 이미지 뷰 위에 올려놓은 후에는 이미지와, 이미지뷰의 크기를 똑같이 하는 작없이 필요하다. 이는 자원의 낭비를 줄이는 것도 되겠지만, 이미지 뷰 영역 자체가 하나의 영역으로 작용하기 때문에, 다른 영역과 겹칠 수 있는 가능성을 없애고, 이미지 외 별도의 효과를 주는 것을 피하기 위해서이다. 이미지 영역을 맞추기 위해서는 '사과키' + '=' 을 누르거나 메뉴에서 'Layout' -> 'Size to Fit' 을 선택하면 된다. 이미지에 대한 작업을 마치고, 라벨을 적당한 위치에 배치하고, 내용을 변경하여 구상했던 모양대로 인터페이스를 구성한다.


그림8. 라벨, 텍스트필드 인터페이스 디자인


이미지와 라벨, 텍스트 영역을 이리저리 움직이다보면 나타나는 가이드 라인을 이용하면 어색하지 않은 인터페이스를 구성할 수 있을 것이다. 각 라이브러리 별 인스펙터도 하나하나 변경해보며 어떤 기능들이 있는지 확인해 보는 것도 재밌는 경험이 될 것이다. 텍스트 필드의 애트리뷰트 중에서는 사용자의 입력의 편의를 위해서 몇가지 주의를 해야 할 항목들이 있다. 먼저 'Clear When Editing Begins' 의 체크박스는 사용자가 텍스트 필드를 선택할때 기존에 있던 내용을 지우고 새로 시작할 것인지를 설정하게 된다. 체크를 해 놓으면 기존의 있던 내용이 텍스트 필드를 선택할 때마다 지워지고, 체크를 해제하면 기존의 내요이 유지가 된다. 보통은 체크를 해제하여 사용하도록 한다. 'Adjust to Fit' 체크박스는 입력하고자 하는 내용이 텍스트 필드의 크기보다 커질 경우 글씨의 크기가 줄어드는데, 줄어드는 정도의 최소 크기를 정하는 것이다. 체크를 해 놓으면 정해진 만큼 이하로는 글씨의 크기가 작아지지 않는다. Keyboard 메뉴는 입력하고자 하는 내용에 맞는 적절한 키보드가 나타나도록 한다. Name 필드 같이 이름을 입력할 경우에는 텍스트로 되어 있기 때문에 일반적인 키보드를 불러내도 상관없지만, Anumber 필드 같이 숫자만 입력하는 필드 같은 경우는 문자대신 숫자로만 이루어진 키보드가 적절하다. 이럴땐 팝업 메뉴에서 'Number Pad' 를 선택하면 숫자로만 이루어진 키보드가 나타나게 된다.


아웃렛 연결하기.
인터페이스를 완성하였다면 아웃렛을 연결해 주어야 한다. main 윈도우의 'File's Owner' 아이콘에서 'ctrl' 키를 누른채 아웃렛이 선언되어 있는 텍스트필드로 끌어주면 아래와 같은 팝업메뉴가 나오고, 텍스트필드에 맞게 선택해 주면 된다.



그림9. 아웃렛 연결

아웃렛을 연결하는 작업까지 마무리 지었다면 모든 과정이 일단은 마무리 되었다. 빌드를 하고 실행을 해보고 멋들어진 애플리케이션의 모습을 보도록 하자.


그림10. 애플리케이션 시뮬레이터.

그림과 글씨가 보이고 뭔가 있어보이는 듯한 애플리케이션을 완성하였다. 텍스트 필드를 클릭하면 텍스트와 숫자를 입력할 수 있는 키보드도 나타나게 된다. 하지만... 뭔가 생각지 못했던 문제가 있다.


키보드 사라지게 하기.
텍 스트 필드에 문자를 입력하고난 후 키보드가 사라지지 않는 것이다. 입력을 마쳐도 마쳤다는 신호를 보낼 수가 없다. 어떻게 사라지게 할 수 있을까? 상식적으로 생각을 해보면 된다. 우리가 모든 입력을 마친후 마침을 의미하는 'return' 키를 입력하게 되는데, 아이폰에서도 'return' 키를 입력하였을때 키보드가 사라지도록 만들면 된다. 키보드 화면에서 'return' 키를 입력하게 되면 'did end on exit' 이벤트가 생성되는데 이 이벤트가 발생함과 동시에 텍스트 필드에 대한 입력이 더이상 이루어지지 않도록 하면 된다. 컨트롤러에 액션 메소드를 추가하려면 'keyBoardViewController.h' 파일에 다음의 코드를 추가해 넣으면 된다.

@interface keyBoardViewController : UIViewController {
UITextField *nameField;
UITextField *AnumberField;
}
@property (nonatomic, retain) IBOutlet UITextField *nameField;
@property (nonatomic, retain) IBOutlet UITextField *AnumberField;
- (IBAction) textEndReturn: (id)sender;
@end

그리 고 'keyBoardViewController.m' 파일에 '(IBAction)' 액션 메소드를 구현하는 코드를 추가한다.

@implementation keyBoardViewController
@synthesize nameField;
@synthesize AnumberField;

- (IBAction) textEndReturn: (id)sender {
    [sender resignFirstResponder];

}


메소드를 구현하는 코드는 특별히 정해진 위치는 없기 때문에 적당한 위치에 입력하도록 한다. 이 메소드는 퍼스트 리스폰더의 상태에서 물러나게 된다. 텍스트를 입력하기 위해 텍스트 필트를 선택하면 텍스트 필드가 현재 실행하고 상호작용하고 있는 컨트롤을 의미하는 '퍼스트 리스폰더'의 상태를 가지게 된다. 그리고 동시에 텍스트를 입력할 수 있는 키보드가 나타나게 된다. 이때 키보드의 'return' 키를 눌러 퍼스트리스폰더 상태에서 물러나게 되는 액션이 실행되면, 더이상 텍스트 필드를 선택한 상태에 머무르지 않게 되는 것이다.


키보드 사라지는 액션 연결하기.
액션을 정의한 후에는 실제적으로 작동을 할 수 있도록 인터페이스 빌더에서 연결을 해 주어야 한다.



그림11. 액션 연결.

액션을 연결하고자 하는 텍스트 필드를 선택하고 'TextField Connections' 윈도우를 보이도록 한다. 텍스트 필드의 키보드에서 'return' 키를 누르면 액션이 반응하도록 할 것이기 때문에 'Did End On Exit' 액션을 이용하도록 한다. 'Did End On Exit' 의 오른쪽 부분의 원에 커서를 가져가면 십자가 모양으로 바뀌는 것을 볼 수 있다. 이것을 끌어다가 main 윈도우의 'File's Owner' 아이콘으로 가져가면 Xcode 에서 퍼스트리스폰더를 포기하는 액션이 정의된 메소드의 이름이 나타나는 것을 볼 수 있다. 이것을 선택하여 액션이 연결되도록 한다.


'return' 키가 없는 숫자패드 사라지게 하기.
일반적인 키보드에는 'return' 키가 포함되어 있어서 입력이 완료되었음을 알려줄 수 있다. 하지만, 숫자로만 이루어진 키패드에는 숫자와 삭제버튼만 있을 뿐이다. 이런 키보드를 사라지게 하기 위해서는 어떻게 해야 할까? 이것 역시 간단하다. 키보드가 아닌 다른 곳을 터치할때 키보드가 사라지게 만들면 된다. 키보드가 아닌 다른곳을 터치할때는 어떤 컨트롤러에 액션을 연결해 주어야 할는걸까? 답은 뷰 컨트롤러에 연결하면 된다. 하지만, 라이브러리를 아무리 찾아보아도 뷰 컨트롤러는 찾을 수가 없다. 하지만, 찾지 않아도 된다. 이미 뷰 컨트롤러는 UIview 안에 포함되어 있기 때문이다. 프로젝트를 생성하면 기본적으로 만들어지는 view 는 여러 뷰 라이브러리를 담아두는 컨테이너의 역할을 한다. 모든 라이브러리가 UIview 의 하위클래스라는 것이다. 또 UIcontrol 역시 UIview 의 하위클래스이기 때문에 view는 control 의 역할까지 가질 수 있는 것이다.



그림12. view 클래스 변경

main 윈도우에서 view 아이콘을 선택하고, 'Control Identity' 윈도우를 띄운다. 위의 그림과 같이 class identity 를 변결할 수 있는 메뉴가 나오는데 view 의 클래스를 UIcontrol 로 변경하도록 한다. 이제 '뷰' 에도 액션을 추가할 수 있게 되었다. 배경을 터치하여 키보드가 사라지는 액션을 추가하는 방법은 이전의 방법과 동일하다. 먼저 'keyBoardViewController.h' 파일에 액션을 선언하는 코드를 추가한다.

- (IBAction) textEndReturn: (id)sender;
- (IBAction) backgroundTap: (id)sender;
@end

그리 고 'keyBoardViewController.m' 파일에 '(IBAction)' 액션 메소드를 구현하는 코드를 추가한다.

- (IBAction) backgroundTap: (id)sender {
    [nameField resignFirstResponder];

    [AnumberField resignFirstResponder];
}

위의 액션이 실행되면 nameField 와 AnumerField 객체가 가지고 있는 퍼스트 리스폰더를 모두 포기하게 된다. 만약 위에 있는 '[nameField resignFirstResponder];' 를 주석처리 한다면 AnumberField 만 퍼스트 리스폰더를 포기하게 되므로, AnumberField 에서만 액션이 작용하는것과 같은 결과가 나타나게 된다.


숫자패드 사라지는 액션 연결하기.
모든 코딩을 마무리 하였다면, 인터페이스 빌더로 이동하여 액션들을 이어주는 작업을 하도록 한다.



그림13. UIcontrol 액션 연결하기.

main 윈도우에서 Control 아이콘을 선택하고 'Control Connections' 윈도우를 띄운다. 이 'Control' 아이콘은 화면의 가장 배경을 나타내는 View 와 같은 것이라고 할 수 있다. View는 화면 전 영역을 나타내기 때문에 버튼에서 사용했던 'Touch up Inside' 액션이 아닌 'Touch Down' 액션을 사용하도록 한다. 'Touch Down' 의 오른쪽에 있는 원으로 커서를 이동시켜 십자가 모양으로 변경되면 이것을 끌어다가 main 윈도우의 File's Owner 아이콘으로 가져다 놓는다. 팝업 메뉴로 나오는 액션 메소드중 배경을 클릭하여 키보드를 사라지게하는 메소드인 'backgroundTap' 메소드를 선택한다. 지금까지의 작업들을 저장하고 Xcode로 돌아가 빌드하고 실행해보도록 한다. 텍스트필드에 키보드를 통하여 입력이 가능하고, 'return' 버튼을 누르거나 배경을 클릭하면 키보드가 사라지는 것을 볼 수 있을 것이다. 좀더 자세한 상호작용이 가능해진 것이다!



출처 : http://blog.naver.com/PostView.nhn?blogId=seanhigher&logNo=60105358304

'아이폰어플개발정보' 카테고리의 다른 글

나만의 앱에 아이콘 달기.  (0) 2010.06.24
IBOutlet 과 IBAction 이 필요한 이유  (0) 2010.06.24
키보드로 입력해 보자!  (0) 2010.06.24
이미지 뷰 Attribute.  (0) 2010.06.24
라벨 Attribute.  (0) 2010.06.24
슬라이더로 표현하기.  (0) 2010.06.24
Posted by 오늘마감

댓글을 달아 주세요