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
참고자료