Switching View and Passing Data(1) - Code
지난 시간에는 Navigation Controller와 segue를 통해 기본적인 뷰의 구성과 화면 전환의 흐름까지 설정해보았습니다. 오늘은 본격적으로 코딩을 통해 데이터를 뿌려주고 추가해주는 작업을 해보도록 하겠습니다. 그럼 바로 시작하겠습니다.
1) Table View
먼저 친구들의 연락처 목록을 보여주는 Table View부터 작성해보도록 하겠습니다.
앞선 포스팅에서 언급했듯이
Table View에 대한 자세한 설명은 생략하도록 하겠습니다.
먼저 UITableViewDelegate 프로토콜과 UITableViewDataSource프로토콜은 준수할 것이라고 명시를 합니다.
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{
/*
Code
*/
}
그 후 간단한 기본 데이터와 프로토콜을 준수하기 위한 메소드들을 ViewController안에 작성해줍니다.
var friendList:[[String:String]] =
[["name":"lee", "phone":"010-1111-2222"],
["name":"kim", "phone":"010-2222-3333"]]
@IBOutlet weak var friendListTableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
friendListTableView.delegate = self
friendListTableView.dataSource = self
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "friendcell", for: indexPath)
cell.textLabel?.text = friendList[indexPath.row]["name"]
cell.detailTextLabel?.text = friendList[indexPath.row]["phone"]
return cell
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return friendList.count
}
friendListTableView.delegate = self와friendListTableView.dataSource = self를 작성해주는 것을 잊지마세요!
그리고 스토리보드로 돌아가 Table View Cell의 Style을 Right Detail로 바꿔줍니다.
2) Add Friend ViewController
그 다음으로는 친구를 추가해주는 ViewController의 Cocoa Touch Class를 만들어주고 이를 해당 뷰에 할당해줍니다.
그리고 각각의 Text Field를 선언하고 연결시켜줍니다.
class AddFriendViewController: UIViewController {
@IBOutlet weak var nameTextField: UITextField!
@IBOutlet weak var phoneTextField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
}
}
3. Unwind Segue
앞선 포스팅에서 저는 화면 전환을 위해 segue를 사용하였습니다. 사실 segue는 단순히 화면 전환을 하는데 사용할 뿐만 아니라 전환되는 화면으로 데이터를 전달할 때도 사용합니다. 하지만 이번 포스팅의 예제에서는 앞에서 뒤로 (흐름상) 데이터를 전달하지 않고 뒤에서(친구를 추가하는 화면) 앞으로 (친구들의 연락처 목록)으로 데이터를 전달하기 때문에 segue를 활용한 데이터 전달은 다루지 않도록 하겠습니다.
이렇게 뒤에서 앞으로 전달을 하기 위해서는 unwind segue라는 것을 사용해야 합니다. unwind segue와 segue 모두 segue객체를 갖고 있습니다. 이 객체는 시작점인 ViewController를 source라는 참조를, 목적지인 ViewController를 destination이라는 참조를 내부에 갖고 있습니다.
기본적으로
segue가 발동(trigger)되면prepare(for:sender)메소드가 자동으로 호출됩니다. 이 메소드는segue를 활용한 데이터 전달을 할 때override하여 작성하기 때문에 이번 포스팅에서는 다루지 않도록 하겠습니다.
unwind segue를 사용하기 위해서는 데이터를 받는 쪽에 @IBAction의 메소드를 작성해주어야 합니다. 즉 우리가 작성하고 있는 예제에서 데이터를 주는 것은 AddFriendViewController이고 데이터를 받아서 처리하는 것은 ViewController입니다. 그러므로 해당 메소드를 우리는 ViewController내에 작성해주어야 합니다.
@IBAction func getNewFriendData(_ sender: UIStoryboardSegue){
if let from = sender.source as? AddFriendViewController {
var newFriend = [String:String]()
newFriend["name"] = from.nameTextField.text
newFriend["phone"] = from.phoneTextField.text
friendList.append(newFriend)
friendListTableView.reloadData()
}
}
- 기본적으로
segue액션을 통해 발생하는 메소드들은 매개변수로segue객체를 갖습니다. 출발지와 목적지의 정보를 담고 있기 때문입니다. - 이 메소드가 호출될 때
source는AddFriendViewController이기 때문에 해당 뷰에서Text Field에 입력된 데이터를 가져와 새로 하나의newFriend딕셔너리 데이터로 가공하여friendList에 추가를 해줍니다. - 데이터가 추가가 되었다면 화면을 갱신해주기 위해 해당
Table View를reload해주어야 합니다.
이렇게 메소드를 작성해주었다면 이젠 AddFriendViewController에서 unwind segue 액션을 설정해주어야 합니다. 이전 포스팅에서 Add 버튼이 화면 전환의 segue를 발동시키는 요소였다면 현재 화면에서는 Save버튼이 될 것입니다. unwind segue는 다음과 같이 설정합니다.
이렇게 드래그를 통해 exit에 끌어다 놓으면 unwind segue에 해당하는 메소드를 선택할 수 있게 됩니다. 우리는 Save버튼을 통해 데이터를 추가해주는 것이기 때문에 우리가 작성해놓은 getNewFriendData(_ sender:) 메소드를 선택해줍니다.
마무리
이렇게 unwind segue까지 작성해주면 이번 예제의 어플리케이션인 간단한 “친구들의 연락처 목록” 어플리케이션이 완성이 되는 것입니다.
오늘은 이렇게 segue를 이용한 화면 전환과 unwind segue를 이용한 데이터 전달을 알아보았습니다. 화면 전환과 데이터 전달에는 여러가지 방법들이 존재합니다. 그러한 방법들은 다음 시간에 다뤄보도록 하겠습니다. 감사합니다.
Source : https://github.com/ehdrjsdlzzzz/tistory-ios/tree/master/view_change_data_pass_sample1
참고자료