Storyboard 기반의 iOS 앱 개발 - 4편
아 시간이 좀 많이 흘렀네요. 그새 2주가 넘게 지나가다니 -_-;; 새 회사에 들어가서 적응하느라 시간이 좀 걸렸습니다. 게다가 입사 후 분야가 안드로이드로 바뀌어서 적응하느라 쉽지가 않네요. 마지막으로 안드로이드 했던 건 2.1 시절의 Eclair 였던지라... 그래도 문서 내용 하나도 없던 그때와는 달리, 지금은 전반적으로 많이 문서들이 확충되었더군요. 진작 이랬어야지.
어쨌거나 이대로 가면 조만간 안드로이드 강좌도 쓰게 될 거 같습니다.
어쨌거나 지난번에 이어 계속하도록 하겠습니다.
1. Table View 의 정적 Cell 들을 활용한 메뉴 작성하기
스토리보드 들어오면서, TableViewController 에서 Cell 디자인을 연결하는 방법이 좀 바뀌었습니다. 이전의 직관성 떨어지고 복잡한 방식에서 훨씬 단순한 구조로 바뀌었죠.
이에 더불어, 스토리보드에서는 데이터에 따라서 가변적으로 테이블 갯수가 늘어나는 테이블이 아닌, 고정 메뉴와 같은 경우에 대응할 수 있도록 부가 옵션이 추가되었으며, 이에 따라 고정 메뉴의 경우 코딩 없이 스토리보드에서 작성하는 것만으로도 처리할 수 있게 바뀌었습니다. 코딩하기가 훨씬 편해졌죠.
이번에 할 것은 바로 그 부분입니다. 변화하지 않는 고정적인 Cell을 가진 TableViewController 를 스토리보드상에서 만들어 보고, 이를 Segue 로 연동시켜 보는 거죠.
자 지난번 프로젝트를 다시 활용해 봅시다.
지난번까지는 아무것도 없던 TableViewController 를 바꿔 보도록 합시다. 우선 선택을 하시고요. 이후 좌측의 개체 윈도에서 선택된 TableViewController 항목을 살펴봅시다.
컨트롤러와 연결된 TableView 를 선택합니다. 그리고, 이제 우측을 보죠.
우측 창의 네 번째 탭을 보시면 최상단에 Content 라는 항목이 있습니다. 빨간색 테두리 쳐둔 부분이죠. 여기를 선택해 봅니다.
Static Cells 라는 항목이 있습니다. 이걸 선택합니다.
그럼 테이블 뷰 안쪽으로 3개의 TableViewCell 이 생성된 것을 확인할 수 있습니다. 좌측의 개체 윈도와 가운데 스토리보드 화면을 각각 확인해 보세요.
이제 좌측 윈도에서 셀을 선택해 봅니다. TableView 를 선택한 상황이라면 가운데의 스토리보드 화면에서도 직접 선택 가능합니다.
이렇게 선택해 보면,
셀 선택된 게 보이고, 동시에 우측 창에도 셀을 위한 속성이 나타나는 것을 볼 수 있습니다. 여기서 최상단의 Style 항목을 선택해 봅니다. 현재는 Custom 이라고 써 있죠.
가장 기본적인 Cell 형태인 Basic을 선택해 봅시다.
스토리보드 화면에서 Title 이라는 부분이 나타난 것을 확인할 수 있습니다. 동시에 좌측 윈도의 Cell 부분 좌측에 뭔가 졉혀있다는 화살표가 나타난 것을 확인할 수 있죠. 옙. 커스텀이 아닌 기본적으로 정의된 다른 형식의 Cell을 선택할 경우 기본 구성요소를 만들어 주고, 그 구성요소들이 좌측 개체 윈도 내에도 표시됩니다.
그럼 펼쳐보죠.
Basic 의 경우, Title 한 요소만으로 구성된 것을 확인할 수 있습니다. 이제 그 Label 을 선택해서 간단히 수정해 보죠.
Label 을 선택하면...
이렇게 됩니다. Text 항목을 대충 수정해 보죠. 전 "첫번째 탁자토막" 이라고 썼습니다. 작성 후 리턴을 치거나 화면 다른 곳을 터치하면 좌측 스토리보드 화면 내의 셀 안 글자도 바뀌게 됩니다.
그럼 이제 두 번째 것을 마찬가지로 손대 보죠.
이건 Right Detail 로 해 봅시다.
아까와 달리, Detail 이란 레이블이 하나 더 추가되었습니다. 그럼 각 Label 을 수정해 볼까요.
어... 좀 이상하게 되었습니다. 각 레이블에 들어있는 글씨들이 모두 ... 으로 줄어버렸죠. 레이블의 크기가 너무 작은 것일까요?
이 문제는 다행히도 간단히 해결이 가능합니다. 우측 윈도 상단에서 다섯 번째 탭을 누릅니다. 아래 이미지에서 윗쪽에 빨간 사각형이 쳐진 부분이죠.
그리고 아래 빨간색 사각형 부분에 있는 슬라이더를 살짝 건드려 봅시다. 수치가 약간 바뀌는데요. 그냥 우측 텍스트 박스에 원래 값이 250을 다시 입력하시면 됩니다. 어쨌거나 그렇게 터치하는 순간....
오 제대로 되었군요... 뭐가 문젤까요? 실은 저도 잘 모릅니다 -_- 아직 레이아웃 부분은 공부하는 중인지라. 다 공부하면 그 때 알려드릴께요. 지금은 버그인지 아닌지도 잘 모르겠습니다;;
이번에는 Subtitle 로 가봅시다. 선택하시구요.
이번에는 Siubtitle 이란 Label이 생겼죠. 역시 각각 수정해 줍니다.
역시 여전히 ... 문제가 발생하는군요. 아까와 마찬가지 방법으로
터치해서 수정해 줍니다.
그리고 이번에는 하나 더 해 보죠. 몇 가지 앱들을 보면 테이블의 각 항목 우측에 뭔가 버튼이 붙은 걸 보실 수 있을 겁니다. 우선 Cell 을 선택해 봅니다.
아까 레이아웃 때문에 5번째 탭을 선택했을 것이므로 다시 네 번째 탭으로 돌아가면 다음과 같은 속성들이 나타나죠.
이 중 Accesory 항목을 선택하고 Detail Disclosure 항목을 고릅니다. 그럼 앱들 중에서 자주 보던 버튼이 나타날 겁니다.
셀 우측의 파란색 버튼 보이시죠? 가장 흔히 쓰이는 버튼이죠. 그 외에 다른 것은 직접 선택해서 어떤 것인지 확인해 보시기 바랍니다.
2. Static Cell 에 Segue 연결하기
이제 Segue 를 연결해 봅시다! 먼저 연결할 ViewController 들을 만들어 두죠.
4개를 만들었습니다. 각각 첫 번째 셀, 두 번째 셀, 세 번째 셀, 세 번째 셀의 Accesory 에 붙일 것들이죠.
전 전체적으로 이렇게 배치했습니다.
그럼 본격적으로 연결해 봅시다. 우선, 좌측 윈도에서 이제까지 만들었던 테이블을 선택합니다. 그리고 Ctrl 키를 누른 후 드래그를 시도합니다. 그럼 이전에도 봤듯이 선이 주욱 이어지게 되죠.
아래의 스크린샷은 이전에 작업했던 스크린샷이 없어져서 (라기 보다는 파일로 떨궈진 줄 알았는데 클립보드에 남았던 걸 저장된 걸로만 생각해서 날린 거) 그냥 이미 완성된 걸로 새로 찍어둔 겁니다. 아무튼 이렇게 선이 이어지죠. 대강 감안해 주세요 ㅎㅎ;
손을 떼고 나면 이전에도 많이 본 팝업이 나타납니다.
요건 예전에 찍어둔 거라 선이 없습니다. 역시 감안해 주시길 ㅎㅎ;
당연하지만 우리는 NavigationController 를 쓰고 있으므로 push 를 선택해야겠죠. 자 여기서 보시면 아시겠지만, 하단에 보면 Accesory Action 이란 부분이 있습니다. 위의 것은 셀을 Select 할 때 지정하는 것이므로 Selection Segue 이라고 기록되어 있고, 하단의 것은 Accesory 눌렀을 때의 동작을 지정하는 것이므로 Accesory Action 이라고 써 있죠.
일단은 셀의 선택을 연결하는 것이므로 위의 것을 선택합니다. 그럼 이제까지 자주 봐왔던 대로 선이 연결되죠.
우측 윈도의 가장 마지막 탭을 보시면, Triggered Segue 범주에 Selection 항목으로 추가되어 있음을 확인할 수 있습니다.
더불어, ViewController 가 연결되는 순간, 셀 우측에 > 가 붙으면서 셀의 Accessory 설정이 Detail Disclosure 로 변경된 것을 확인할 수 있습니다. 선택할 경우 다른 ViewController 로 넘어감을 명시적으로 표현해 주는 것인데요. 이 표시는 Accesory 설정을 None 으로 바꿈으로써 없앨 수 있습니다.
이렇게 말이죠.
이런 식으로 아래의 2개 셀도 지정해 둡니다. 세 번째 셀도 일단은 Selection Segue 쪽의 것을 선택해 주세요.
이제 Accesory Action 을 연결해 봅시다. 일단 위에 언급드렸듯이, Cell 위에서 Ctrl 을 누른 후 드래그해서 나타나는 팝업에서, Accesory Action 의 push 항목을 선택하면 됩니다만, 이번에는 좀 다르게 해 보죠.
셀을 선택한 다음 우측에서 가장 마지막 탭을 누릅니다. 그럼 위 화면에도 나타나긴 하지만 Triggered Segues 항목 아래에 accesory action 항목이 나타나죠.
이번에는는 거꾸로 이쪽에서 연결해 보도록 합니다. accesory action 우측에 있는 동그라미에서 드래그를 해 보시면 선이 주욱 늘어나는 걸 보실 수 있죠. view 위에서 ctrl 누른 것처럼 말입니다. 그 선을 그대로 segue 로 연결할 View Controller 에 위의 이미지처럼 끌어둡니다.
이렇게 아담한 팝업이 뜹니다. push 를 선택하면 기존과 마찬가지로 연결되죠.
최종적으로는 아래와 같이 됩니다.
뭔가 복잡하군요 @_@
현재는 파생화면들이 모두 빈 화면이라 제대로 동작하는지 구분이 되지 않으니, 각 화면에 적당히 뭔가 구분할 수 있는 것을 넣어둡니다. 지난번에도 했었죠.
전 이렇게 했습니다.
그럼 이제 구동시켜 보죠.
전편에 봤던 화면 그대로죠. 다른 건 이전과 동일하니 세 번째 버튼을 눌러 봅시다.
예측했던 이 화면이 나옵니다. 이제 각각을 눌러보죠.
이렇게 잘 뜨는군요.
3. 셀 추가하기
처음에 Static Cell 설정하면 3개의 셀을 만들어 주는데요. 당연하지만 더 많은 셀을 추가할 수 있습니다.
우측 하단의 개체 리스트에서 Table View Cell 을 선택한 다음 이것을 Table View 쪽으로 드래그 해 줍니다.
이렇게 선택하고 드래그하면...
이렇게 추가가 됩니다.
드래그 할 때 녹색 십자 표시가 뜨는데 이건 통상적인 방식으로 캡처가 안되어서 그냥 결과 화면만 보여드릴 수 밖에 없겠네요.
4. Static Cell 을 사용하는 Table View Controller 사용 시 유의점
정적 Cell 활용 시에는 다음과 같은 주의점이 있습니다.
만약 정적 Cell 을 활용할 TableViewController 라면, 여기에 커스텀 클래스를 연결할 때, TableViewController 클래스 생성시 자동으로 작성되는 코드들 중, TableViewControllerDelegate 와 TableViewDataSource 프로토콜에 해당하는 부분을 모두 주석처리해야만 합니다.
위의 하늘색으로 선택한 영역들을 모두 주석처리해 주셔야 합니다.
이외에도 위의 두 프로토콜과 관련하여 작성된 코드가 더 있다면 관련 코드 역시 주석처리 해 주셔야겠죠.
이는 정적 Cell 을 사용하는 TableViewController 작성 시, 셀을 자동적으로 생성해 주는 코드가 내부적으로 작성된 상태가 되는데, 위의 두 프로토콜을 구현해 버리면 그걸 오버라이딩 해 결과적으로 코드들을 엎어써버리는 게 되어버리는 지라 내부 작성 코드들이 동작하지 않게 되어버리는 거죠.
따라서 다른 외형들을 제어할 필요가 있어 커스텀 클래스를 연결해 둘 것이라면 테이블과 관련된 부분들은 손대지 않으시는 게 좋습니다. 물론 몇 가지 기법을 쓰면 이것도 극복할 방법이 있고, 어느 정도 코딩해 보신 분이면 해법을 충분히 눈치채시겠지만 일단은 여기까지.
