티스토리 뷰

Switching View and Passing Data(1) - Code


지난 시간에는 Navigation Controllersegue를 통해 기본적인 뷰의 구성과 화면 전환의 흐름까지 설정해보았습니다. 오늘은 본격적으로 코딩을 통해 데이터를 뿌려주고 추가해주는 작업을 해보도록 하겠습니다. 그럼 바로 시작하겠습니다.


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 = selffriendListTableView.dataSource = self를 작성해주는 것을 잊지마세요!

그리고 스토리보드로 돌아가 Table View CellStyleRight Detail로 바꿔줍니다.


2) Add Friend ViewController

그 다음으로는 친구를 추가해주는 ViewControllerCocoa 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 seguesegue 모두 segue객체를 갖고 있습니다. 이 객체는 시작점인 ViewControllersource라는 참조를, 목적지인 ViewControllerdestination이라는 참조를 내부에 갖고 있습니다.



기본적으로 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()
        }
    }
  1. 기본적으로 segue 액션을 통해 발생하는 메소드들은 매개변수로 segue객체를 갖습니다. 출발지와 목적지의 정보를 담고 있기 때문입니다.
  2. 이 메소드가 호출될 때 sourceAddFriendViewController이기 때문에 해당 뷰에서 Text Field에 입력된 데이터를 가져와 새로 하나의 newFriend 딕셔너리 데이터로 가공하여 friendList에 추가를 해줍니다.
  3. 데이터가 추가가 되었다면 화면을 갱신해주기 위해 해당 Table Viewreload해주어야 합니다.

이렇게 메소드를 작성해주었다면 이젠 AddFriendViewController에서 unwind segue 액션을 설정해주어야 합니다. 이전 포스팅에서 Add 버튼이 화면 전환의 segue를 발동시키는 요소였다면 현재 화면에서는 Save버튼이 될 것입니다. unwind segue는 다음과 같이 설정합니다.



이렇게 드래그를 통해 exit에 끌어다 놓으면 unwind segue에 해당하는 메소드를 선택할 수 있게 됩니다. 우리는 Save버튼을 통해 데이터를 추가해주는 것이기 때문에 우리가 작성해놓은 getNewFriendData(_ sender:) 메소드를 선택해줍니다.



마무리

이렇게 unwind segue까지 작성해주면 이번 예제의 어플리케이션인 간단한 “친구들의 연락처 목록” 어플리케이션이 완성이 되는 것입니다.


오늘은 이렇게 segue를 이용한 화면 전환과 unwind segue를 이용한 데이터 전달을 알아보았습니다. 화면 전환과 데이터 전달에는 여러가지 방법들이 존재합니다. 그러한 방법들은 다음 시간에 다뤄보도록 하겠습니다. 감사합니다.


Sourcehttps://github.com/ehdrjsdlzzzz/tistory-ios/tree/master/view_change_data_pass_sample1


참고자료


  1. Passing Data Between View Controllers in iOS: the Definitive Guide (Best Practices + Examples)
  2. Learning Swift - Storyboard, Scene and Segue
  3. How do Unwind Segues work


'Swift + iOS > iOS' 카테고리의 다른 글

[ios] Auto Layout Programmatically - 1  (3) 2017.11.08
[ios] Horizontal Scroll View  (1) 2017.11.04
[ios] Switching View and Passing Data(1) - UI  (0) 2017.11.01
[ios] UIViewController Lifecycle  (0) 2017.10.25
[ios] Custom Table VIew  (0) 2017.10.17
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/11   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함