IOS_Swift_커스텀키보드 만들기(2)

안녕하세요!

이번에는 커스텀 키보드 만들기 2탄을 포스팅하겠습니다. 

1탄에서는 xib에서 키보드 UI 까지 완성했습니다.! 

이번에는 화면에서 커스텀키보드를 뛰어보는 것까지 해보겠습니다.!

xcode를 다시 켜봅시다 

그리고 기존에 만든 버튼들의 타이틀을 바꿔 숫자패드처럼 바꿔보겠습니다.

 

위와 같이 버튼의 타이틀을 바꿔 숫자패드처럼 변경을 해주었습니다.

그리고 NewFile -> CocoaTouchClass -> 파일명은 xib와 동일하게(저 같은 경우는 안 헷갈리게 보통 같은 이름으로 합니다!) subclass는 UIview로 합니다.

 

파일을 만들면 위와 같이 UIView를 상속받은 class 가 만들어집니다. 이제 다시 xib로 이동을 해 방금 class파일을 적용시켜 주겠습니다,

xib -> view클릭 -> Identi Inspecter -> Class에서 KeyBoardView(여러분들이 만든 view이름)을 적용합시다.

위와 같이 모듈명이 정상적으로 바뀐다면 커스텀클래스가 정상적으로 적용이 된 것입니다! (종종 xcdoe로 버그로 안될 수 있습니다. 그럴 경우 xcode를 껐다 다시 키시면 됩니다) 

 

이번엔 stroyboard 로 이동해 텍스트 필드 2개를 만들어 봅시다! 

첫 번째 텍스트 필드는 커스텀 키보드를 2번째 키보드는 시스템에서 제공해주는 키보드를 띄울 것입니다.

 

텍스트 필드를 만들었다면 VC파일로 이동해 각각 필드를 Oulet으로 연결을 시켜줍시다! 

그리고 viewdidload로 이동해서 xib를 로드하여 화면에 띄어주는 코드를 작성해봅시다

코드는 다음과 같습니다.

Bundel.main.loadNibNamed 메서드는 xib파일을 로드해주는 역할을 합니다. 메서드 단어 중 Nib이 있는데 xib==nib 으로 생각하시면 이해하기 편하실 겁니다.! 첫 번째 필드는 xib파일 이름 owner option는 nil로 작성해줍시다.

 현재 포스팅은 키보드를 띄우는 게 목적이니  2번째 3번째 필드는 다음의 시간이 되면 따로 xib 관련해서 포스팅을 해보겠습니다! 

자 이제 xib를 로드했으면 다운 캐스팅을 이용해 KeyBoardView로 캐스팅해줍시다.! 

*캐스팅의 대한 내용도 조만간 한번 포스팅 한번 해보도록 하겠습니다

실수가 없으시다면 옵션 키를 눌러 위처럼 정상적으로 KeyBoardView로 캐스팅된 것을 확인이 가능합니다.

 

자 이제 커스텀뷰를 적용시키기 위해 위와 같은 프로퍼티를 사용해야 합니다. 

설명을 보면 대충 텍스트 필드가 첫 번째 응답자가 될 때 표시 커스텀뷰를 표시해준다고 하는 것 같습니다.

그리고 기본 값은 nil이고 nil 일 경우 시스템 키보드를 보여주는 것 같습니다. 값을 줄 경우에는 커스텀뷰가 나오는 것 같습니다.

자 이제 모든 작업이 끝났으니 컴파일을 해봅시다.

 

 

첫 번째 필드 클릭 시 우리가 만든 키보드가 표시되고 

2번째 키보드 클릭 시 시스템 키보드가 표시됩니다! 

자 이제 그럼 여기서 끝? 아닙니다 이제 델리게이트 패턴을 통해 텍스트 필드에 값을 보여주어야 합니다.

왜냐하면 현재 커스텀 키보드를 클릭하면 아무런 값이 안 나오기 때문이죠!

자 그럼 바로 시작해봅시다! 

xib파일을 띄우고 그 옆에는 UIView를 상속받은 keyboard파일을 2분 할로 띄어봅시다.

그리고 우리에게 익숙하게 button하나를 IBAction으로 연결시켜줍시다! 

 

그리고 위와 같이 버튼의 타이틀을 읽어와 변수를 초기화합시다. 값을 가져올 때도 혹시 모르니 안전하게 옵셔널 바인딩을 사용합시다!

이제는 델리게이트 패턴을 위한 프로토콜을 만들어 봅시다.

위와 같이 프로토콜을 만들고 안의 필수로 만들어야 할 메서드를 만들어 줍시다!

그리고 다시 UIView파일로 넘어와  delegate라는 이름의 변수를 만든 뒤 만든 프로토콜로 초기화시켜줍시다.

(프로토콜 파일을 따로 만들어도 됩니다! 저는 포스팅을 위해 한파일에 작성하였습니다! 혹시나 자기 스타일이 있으신 분들은

자기 스타일대로 하시면 좋을 것 같습니다)

 

 자 그리고 다시 버튼 메서드에서 위와 같이 함수를 불러와 입력받은 타이틀 이름(string형)을 넘겨줍시다,!

 

이 작업이 끝났으면 VC파일로 넘어와 KeyBoardDelegate를 채택해줍시다. 

그리고 채택이 끝났으면 "구현" 작업을 합시다. 화면에 텍스트를 표시하기 위해서는 텍스트 필드 객체. text = 보여줄 스트링입니다.

그리고 viewDidLoad에서 keyboard.delegate = self를 통해 현재뷰 컨트롤러에게 위임을 합시다! 

 

자 컴파일 후 다시 연결한 버튼을 클릭하면 정상적으로 화면에 표시가 됩니다. 

(저는 귀찮아서 1 버튼만 연결시켰습니다. 여러분들은 다 연결 후 한번 해보세요~ ) 

현재 지금은 값이 연속적으로 이어지지 않을 겁니다! 이후 작업은 여러분들이 한번 만들어 보시는 것도 좋을 것 같습니다.

 

자 지금까지 커스텀 키보드 포스팅을 봐주셔서 감사합니다. 

여기서 키보드 만들기 포스팅을 마치도록 하겠습니다!  봐주셔서 감사합니다.

 

** 포인트 

1. xib파일을 만들기

2. UIView 클래스를 만들어 xib파일 view-> 커스텀 클래스 적용 

3. VC에서 xib 로드하기 

4. 로드한 xib 다운 캐스팅 하기 

5. 델리게이트 패턴 적용시키기 

 

 

 

** 완성된 소스코드는 깃허브에서 확인 가능합니다. github.com/LeeSeungKeun/CustomKeyboard.git

LeeSeungKeun/CustomKeyboard