Intermediate Table Views : 스위프트 Swipt 해석가이드

안녕하세요 ! 애플앤마블입니다.

오늘은 저번 해석가이드에서 다룬 Table View에서 수정, 추가 기능이 가능한 Intermediate Table Views를 만들어보겠습니다.

우선 결과물부터 영상으로 보아요 ! 

이제 목록을 누르면 그 목록에 대해 수정이 가능하고 목록 추가도 가능한 Table View에 대한 해석가이드를 시작하겠습니다.

iBooks에 무료로 배포되어있는 책을 참고하셔서 책과 함께 따라오면 더욱 좋습니다.

Apple Education. ‘App Development with Swift.’ Apple Inc. - Education, 2017. iBooks. https://itun.es/kr/SoKQib.l

531p~552p

저번시간에 만든 Table View인  EmojiDictionary를 열어 Main.storyboard의 table view cell을 열어주세요. 그 후 table view cell의 Attribute Inspector로 가셔서 Style을 Custom으로 바꿔주세요. 그러면 하얀색 빈 table view cell이 화면에 보입니다. 

Style이 Custom인 table view cell에 horizontal stack view를 추가하고 아래와 같이 설정해주세요.

추가된 horizontal stack view안에 Label하나와 Vertical Stack View. 그리고 Vertical Stack View안에 Label을 추가해주세요. 그 후 Vertical Stack View의 Distribution의 property를 Fill 에서 Fill Equally로 바꿔주세요

여기서 아래의 붉은색으로 표시 된 라벨을 선택해 주세요. 이 라벨은 이모티콘이 들어갈 라벨인데요. 이 라벨을 선택 후 Size inspector로 들어가 아래쪽을 보시면 아래 사진에 밑줄이 되어 있는 곳을 251에서 252로 설정해주세요. 책에서는 Attribute inspector로 들어가라고 하는데 잘 못 되어있는 부분입니다.

그럼 이제 코딩을 할 차례인데요. TableViewcell에 대한 Subclass를 만들어야 합니다.

Command + N 키를 눌러 Cocoa Touch Class를 눌러 EmojiTableViewCell이라는 파일을 생성 후 Next! Create!

그후 이 Subclass를 EmojiCell에 심어주셔야 합니다.

아래사진처럼 간단하게 심어주세요!

그리고 아까 추가한 3개의 Label을 outlet을 추가하여 EmojiTableViewCell 파일에 연결시켜주세요. (Control + drag) . 각각의 이름은 symbolLabel, nameLabel, descriptionLabel. 그 후 아래 사진과 같은 코드를 넣게되면 목록이 앞의 해석가이드에 넣은 데이터를 업데이트 할 함수가 만들어집니다. 아래 사진의 func update 부분을 코딩해주세요.

그리고 이를 EmojiTableViewController와 상호작용을 시키려면 EmojiTableView Controller에도 코딩을 해주셔야 겠죠?

EmojiTableViewController파일로 가게되면 기존에 있던 cellForRowAt이 있는데 그 부분의 코드를 다음과 같게 수정해주세요.(추가 아니고 기존 것 수정)

이제, 앱을 실행해주세요. 그렇다면 Custom으로 우리가 설정한 목록 모양에 데이터들이 들어가있는 것을 볼 수 있습니다.

이 사진처럼 앱이 실행되었나요? 혹시 글자 크기나 글꼴을 바꾸시고 싶다면 언제든 바꾸셔도 무관합니다 ㅎㅎ

그럼 이제, Edit버튼을 눌러 Delete버튼을 눌러보세요.

지금 이 상태로의 앱이라면 Delete버튼이 아마 먹통일거에요.

그렇다면 Delete버튼을 눌렀을 때 Cell이 지워지는 것에 대해서도 코드를 넣어줘야겠죠?

EmojiTableViewController 파일에서 몇가지 코드를 넣고 기존에 있던 코드를 주석 묵음 혹은 삭제를 해볼게요.

EmojiTableViewContoller에서 아래와 같이 코드를 넣어주세요.

그리고 기존에 Cell을 클릭하면 Cell의 정보를 출력하는 함수를 저번 해석가이드에서 다뤘었는데요. 그 부분이 바로 didSelectRowAt 부분인데요. 이 부분을 아래 사진과 같이 주석처리를 해주세요. (삭제해도 무관합니다!)

그리고 마지막으로 아래와 같은 함수를 하나 더 추가해준다면, 삭제버튼이 활성화 되고 그 Cell이 사라지는 앱을 만들게 됩니다. 아래와 같이 코딩해주세요.

그리고 앱을 실행해보세요!

목록이 삭제가 되나요? ㅎㅎ

지금까지의 EmojiTableViewController 파일의 코드는

이와 같으니 참고해주세요.

이제 이 강의에서 가장 중요한 Static Table View와 Pass Data to Static Table View에 대해서 다뤄볼테니 잘 따라와 주세요!

Navigation Controller를 main.storyboard로 가져와주세요.

그리고 Bar Button Item을 가져와 기존의 Table View 오른쪽 상단에 놓아주신 후 System Item을 Add로 변경해주세요.

이 다음을 설명하기전에 아래의 사진부터 먼저 숙지해주세요.

1번의 EmojiCell을 선택해 Control + Drag 로 Table View Controller에 Segue설정을 하는데 팝업창이 뜨면 Show를 선택.

2번의 Add 버튼을 선택해 Control + Drag 로 Navigation Controller에 Segue설정을 하는데 팝업창이 뜨면 Present Modally를 선택.

그 후 위의 사진에서 파란색으로 선택된 Segue화살표를 선택 후 Identifier를 'EditEmoji'로 설정해주세요.

이제, 두번째 TableView의 설정을 바꾸고 코드를 하는 과정입니다.

새로운 TableView의 Attribute inspector에 Content를 Static Cells로 변경. Sections의 섹션수를 4로 변경. (좌측 사진)

Section들의 Row수를 1로 변경. 각각 Header의 이름을 Symbol. Name. Description. Usage.로 설정해주세요. (우측 사진)

"각각의 Section에 TextField(각 한개)를 추가하셔서 Add new constrains의 상하좌우를 0, Constrain to margin을 체크해주세요"

 여기서 캡쳐 중간에 빼먹었는데 왼쪽 사진에서 Style을 Plain에서 Grouped로 바꿔주세요!

이제 이번 해석가이드에서 가장! 가장 중요한 부분!

바로 'Pass Data to Static Table View'에 대해서 해석가이드를 진행할거에요. 책에서는 이 부분에 설명이 굉장히 많이 누락되어 있어서 정말! 정말 어려운 구간이었구요. 고민과 생각을 3일째 해서 알아낸 정말 ㅠㅠ....노력의 결과의 부분입니다. 따라와주세요 ㅎㅎ

새로 만든 Table View에 도화지 파일을 (Subclass)를 만들거에요. 이름은 "AddEditEmojiTableViewController'입니다. Control + N으로 UITableViewController파일의 이름을 AddEditEmojiTableViewController로 설정 후 Create!

그리고 Subclass를 바꿔주세요.

이제 AddEditEmojiTableViewController에 코딩을 할 차례인데요. 이 부분부터가 바로 Pass Data를 하는 부분이니 잘 따라와주세요.

책에 ‘Add a property to the AddEditEmojiTableViewController class called emoji with a type of Emoji?. 라고 되어 있는 부분에서 많이 의아해 하실지도 모르겠는데요!

어떻게 property를 추가하라는 말이 안적혀 있거든요...

이거는 var emoji: Emoji? << 이 코드를 상단에 집어넣어주면 해결 됩니다. 그 후 다시 EmojitableViewController 파일로 돌아가 아래와 같이 Segue에 대한 코드를 넣을거에요.

이 코드는 Segue로 인해 데이터를 EmojiTableViewController 에서 AddEditEmojiTableViewController로 옮겨주는 코드입니다.

EmojiTableViewController 파일에는 위와 같이 코딩해주시구요.

AddEditEmojiTableViewController 에는 Static Table View에 이전에 추가한 각각의 TextField의 outlet을 추가해 주는데 그 이름은 symbolTextField, nameTextField, descriptionTextField, usageTextField로 설정해 주신 후 ViewDidLoad()안에 다음과 같이 코드를 넣어주세요.

자, 이렇게하면 Pass Data가 완성되었습니다.

그러나! 책에는 아무곳에도 설명되어 있지 않은 부분!

정말 설명이되어있지 않아서 엄청나게 힘들었던 이 부분이 나옵니다 !!!

다음으로 넘어가기 전에 앱을 실행해 보시면 Add 버튼이나 Cell을 눌러도 Static Table View가 나오지 않고 빈창이 나오는 것을 알 수 있습니다.

정말 찾느라 힘들었어요. 찾았을 때의 그 쾌감은 잊을 수 없이 좋았거든요. 바로 AddEditEmojiTableViewController 파일의 아래 코드를 주석 혹은 삭제 시켜주셔야 합니다.

별표 친 부분이 주석처리 혹은 삭제할 부분이구요. 위 사진은 AddEditEmojiTableViewController 파일 전체 샷입니다.

이제 실행해보세요. 정상적으로 작동하면 아래와 같은 화면이 출력될거에요.

자, 이제 이번 해석가이드의 마지막 부분으로 접어들겠습니다. 조금만 더 힘내주세요!

이제 Add버튼을 누른 후 생성되는 창에 원하는 목록을 입력하고 Save 혹은 Cancel버튼을 구현하겠습니다.

StaticTableView에 두개의 Bar Button을 추가해 위 사진과 같이 Cancel, Save로 설정해주세요.

그리고 unwindToEmojiTableView(:Segue)를 EmojiTableViewController 파일에 입력 후 Segue 를 설정해야합니다.

우선 아래와 같이 코드를 EmojiTableViewController에 입력해주세요.

그리고 아래 사진과 같이 Cancel과 Save버튼을 Exit으로 segue설정을 해주세요.

그리고 Save 버튼에 대한 segue의 identifier를 saveUnwind로 설정해주세요.

여기까지 따라오셨다면 앱을 실행해보세요. Add버튼을 누른 후 각 항목들의 textField에 글자를 넣고 Save버튼을 누르면 이전 목록 페이지로 가지만 목록에는 추가가 되지 않죠? 이제 Save Data에 대해 다뤄보겠습니다.

AddEditTableViewController 파일에 Save버튼의 outlet을 설정해주고 이름은 saveButton. 그리고 아래와 같이 updateSaveButtonState()코딩해준 후 ViewDidLoad()에 함수를 추가해주세요. 또한 updateSaveButtonState를 지속적으로 확인할 코드를 TextField에 넣을 @IBAction을 다음과 같이 타이핑 해주세요.

위에서 생성한 @IBAction에 각각의 textfield 에게 'EditChanged'를 설정해줄거에요. 아래 사진과 같은 환경으로 들어가주세요. Textfield를 선택해서 Assistant editor를 이용하고 Connetion inspector창을 열어주세요.

그 후 사진의 파란 선과 같은 방법으로 Control + Drag를 이용하여 각각의 TextField들을 Editing Changed에서 @IBActiond으로 넣어주세요.

여기서 앱을 실행시키면 이제 텍스트필드가 전부 채워지지 않은 상태라면 Save버튼이 활성화 되지 않은 앱을 만들게 된 것이에요.

이제, 사용자 지정 목록을 목록에 Save해서 추가하는 작업을 하겠습니다.

AddEditEmojiTableViewController파일을 열어주세요. 그리고 아래와 같은 코드를 넣어주세요.

이 코드는 saveUnwind라는 identifier를 가진 segue가 실행되면 각 textfield의 내용의 데이터를 다루는 코드입니다.

이후에 책에서는 unwindToEmojiTableView(segue:)에 대해 다루지만 우리는 앞에서 이 코드를 넣었기 떄문에 ! 

각각의 TextField에 원하는 목록을 넣고 Save버튼을 누르면 목록이 추가가 되는 것을 볼 수 있을거에요!

이로서 ! Intermediate Table Views 가 완성이 되었습니다!!!!!

정말 길고 험난한 여정이었지요?

고생하셨습니다.

이제 두 파일들에 다룬 코드를 전체적으로 찍은 사진을 마지막으로 포스팅을 마치겠습니다.

고생하셨습니다! 지금까지 애플앤마블이었습니다.

-AddEditEmojiTableViewController.swift-

-EmojiTableViewController.swift-