[iOS - swift] 2. iOS 스러운, storyboard 활용 방법 (dynamic prototypes cell, unwind segue, storyboard reference)

1. iOS 스러운, storyboard 활용 방법 (static prototype cell, segue, gesture)

2. iOS 스러운, storyboard 활용 방법 (dynamic prototype cell, unwind segue, storybaord reference)

플레이어 목록 DataSource 추가

• Player 데이터 추가

struct Player {
  var name: String?
  var game: String?
  var rating: Int
}

• PlayersDataSource 추가

• PlayersDataSource

import UIKit

class PlayersDataSource {
  // MARK: - Properties
  var players: [Player]

  static func generatePlayersData() -> [Player] {
    return [
      Player(name: "Bill Evans", game: "Tic-Tac-Toe", rating: 4),
      Player(name: "Oscar Peterson", game: "Spin the Bottle", rating: 5),
      Player(name: "Dave Brubeck", game: "Texas Hold 'em Poker", rating: 2)
    ]
  }

  // MARK: - Initializers
  init() {
    players = PlayersDataSource.generatePlayersData()
  }

  // MARK: - Datasource Methods
  func numberOfPlayers() -> Int {
    players.count
  }

  func append(player: Player, to tableView: UITableView) {
    players.append(player)
    tableView.insertRows(at: [IndexPath(row: players.count-1, section: 0)], with: .automatic)
  }

  func player(at indexPath: IndexPath) -> Player {
    players[indexPath.row]
  }
}

 

PlayersViewController 추가

• property 추가

class PlayersViewController: UITableViewController {
  var playersDataSource = PlayersDataSource()
}

Main.storyboard에서도 클래스 지정

Data를 담는 Cell 추가

• Cell의 높이 설정 - tableView에서 Row Height 설정

• PlayersViewController의 TableView를 Static Cells에서 Dynamic Prototypes로 변경

• PlayerCell 추가: 주의할 점은 Cell이 Models에 속하는게 아닌 Views 그룹에 속하는 것

import UIKit

class PlayerCell: UITableViewCell {

    static let identifier = "PlayerCell"

}

• XIB 연결
  - class 연결
  - identifier 설정

Class 연결

Identifier 설정

• Storyboard에서 드래그하여 IBOutlet 설정

class PlayerCell: UITableViewCell {

    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var gameLabel: UILabel!
    @IBOutlet weak var ratingImageView: UIImageView!
}

• IBOutlet 설정 주의
  - storyboard View에서 뷰 컴포넌트 자체를 끌어다가 바로 Outlet 작성하지 않고
  - 컴포넌트에 마우스를 대고 ctrl + 왼쪽 클릭하여 아래처럼 Referncing Outlets에서 동그런 원을 끌어다가 연결할 것 (Outlet이 중복으로 생기는 것을 방지하고 더욱 간편한 방법)

• 데이터 binding 추가

class PlayerCell: UITableViewCell {

    static let identifier = "PlayerCell"

    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var gameLabel: UILabel!
    @IBOutlet weak var ratingImageView: UIImageView!

    var player: Player? {
      didSet {
        guard let player = player else { return }

        gameLabel.text = player.game
        nameLabel.text = player.name
        ratingImageView.image = image(forRating: player.rating)
      }
    }

    private func image(forRating rating: Int) -> UIImage? {
      let imageName = "\(rating)Stars"
      return UIImage(named: imageName)
    }
}

PlayersViewController에서 cell 사용

• DataSource delegate 구현

// MARK: - UITableViewDataSource
extension PlayersViewController {
  override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    playersDataSource.numberOfPlayers()
  }

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: PlayerCell.identifier) as! PlayerCell
    cell.player = playersDataSource.player(at: indexPath)
    return cell
  }
}

 

PlayerDetailsViewController 추가

• IBOutlet 설정

class PlayerDetailsViewController: UITableViewController {
  @IBOutlet weak var nameTextField: UITextField!
  @IBOutlet weak var detailLabel: UILabel!
}

• 초기화 코드 추가

class PlayerDetailsViewController: UITableViewController {

  @IBOutlet weak var nameTextField: UITextField!
  @IBOutlet weak var detailLabel: UILabel!

  var player: Player?

  var game = "" {
    didSet {
      detailLabel.text = game
    }
  }

  // MARK: - View Lifecycle
  override func viewDidLoad() {
    game = "Chess"
    nameTextField.becomeFirstResponder()
  }
}

완성된 화면

unwind segue

• 생성된 segue를 되돌리는 기능
• unwind 작성 방법: unwind를 진행하는 화면이 아닌, unwind 결과로 나오는 화면에 @IBAction코드 작성
• cancel버튼, Done버튼에 관한 @IBAction Code 작성

// PlayersViewController

extension  PlayersViewController  {
   @IBAction  func  cancelToPlayersViewController ( _  segue : UIStoryboardSegue ) {
  }

  @IBAction  func  savePlayerDetail ( _  segue : UIStoryboardSegue ) {
  }
}

• unwind segue 연결

오른쪽 버튼 오타: Item -> Done

생성된 Unwind segue

• Done 버튼의 Unwind segue 동작 시 데이터 추가하는 기능은 뒤에서 추가

새 플레이어 만들기 - GamePickerViewController 추가

• GamesDataSource 추가

import UIKit

class GamesDataSource {
  // MARK: - Properties
  var games = [
    "Angry Birds",
    "Chess",
    "Russian Roulette",
    "Spin the Bottle",
    "Texas Hold'em Poker",
    "Tic-Tac-Toe"
  ]

  var selectedGame: String? {
    didSet {
      if let selectedGame = selectedGame,
        let index = games.firstIndex(of: selectedGame) {
        selectedGameIndex = index
      }
    }
  }

  var selectedGameIndex: Int?

  // MARK: - Datasource Methods
  func selectGame(at indexPath: IndexPath) {
    selectedGame = games[indexPath.row]
  }

  func numberOfGames() -> Int {
    games.count
  }

  func gameName(at indexPath: IndexPath) -> String {
    games[indexPath.row]
  }
}

• GamePickerViewController 추가

class GamePickerViewController: UITableViewController {
  let gamesDataSource = GamesDataSource()
}

• XIB에 연결

• Cell 설정: Static Prototypes -> Dynamic Prototypes

• Cell나머지 삭제, Identifier설정

• 따로 CustomCell.swift하여 사용하지 않을것이기 때문에, cell style을 설정해주지 않으면 겹쳐보이는 버그 발생
  Custom -> Basic으로 변경

• DataSource delegate 구현
  - cell.accessoryType으로 checkmark속성 부여
  - dequeueReusableCell(withIdentifier:for:)이 함수는 optional로 반환하지 않는 장점 존재

// GamePickerViewController.swift

// MARK: - UITableViewDataSource
extension GamePickerViewController {
  override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    gamesDataSource.numberOfGames()
  }

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "GameCell", for: indexPath)
    cell.textLabel?.text = gamesDataSource.gameName(at: indexPath)

    if indexPath.row == gamesDataSource.selectedGameIndex {
      cell.accessoryType = .checkmark
    } else {
      cell.accessoryType = .none
    }

    return cell
  }
}

 

cell을 탭할 때 unwind segue

• 뒤로가기 시 나오는 화면인 PlayerDetailsViewController에 unwind segue 데이터를 받는 코드 추가

extension PlayerDetailsViewController {
  @IBAction func unwindWithSelectedGame(segue: UIStoryboardSegue) {
    if let gamePickerViewController = segue.source as? GamePickerViewController,
       let selectedGame = gamePickerViewController.gamesDataSource.selectedGame {
      game = selectedGame
    }
  }
}

• Cell 선택 > Exit으로 Ctrl+드래그 > UnwindWithSelectedGameWithSegue 선택

Segue로 매개변수 전달

• PlayerDetailsViewController -> GamePickerViewController: 선택한 game이 체크박스로 표현 기능
• segue를 참조하기 위해 "PickGame" Identifier 지정

• prepare(for:) 함수를 통해 segue 참조 가능 - PlayerDetailsViewController에 추가

// PlayerDetailsViewController.swift

  override func prepare(for segue: UIStoryboardSegue, sender: Any?)  {
    if segue.identifier == "PickGame",
       let gamePickerViewController = segue.destination as? GamePickerViewController {
      gamePickerViewController.gamesDataSource.selectedGame = game
    }
  }
}

• GamePicker의 데이터 소스 delegate 구현

// GamePickerViewController.swift

// MARK: - UITableViewDelegate
extension GamePickerViewController {
  override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    // 셀을 선택할 경우 나타나는 회색 배경 제거
    tableView.deselectRow(at: indexPath, animated: true)

    // 이전에 선택한 cell의 checkmark UI 제거
    if let index = gamesDataSource.selectedGameIndex {
      let cell = tableView.cellForRow(at: IndexPath(row: index, section: 0))
      cell?.accessoryType = .none
    }

    // dataSource에서 새 게임 선택
    gamesDataSource.selectGame(at: indexPath)

    // checkmark UI 표출
    let cell = tableView.cellForRow(at: indexPath)
    cell?.accessoryType = .checkmark
  }
}

• unwind 수정: 기존의 unwind는 cell를 선택할 때 위 구현부 전에 실행되어서 데이터가 업데이트 안되는 현상이 존재
  - 기존의 unwind를 제거한 후, 코드에서 unwind를 호출
• identifier 정보 추가: 위 cell?.accessory = .checkmark 바로 밑에 작성
  - 해당 id는 storyboard에서 참조될 값

extension GamePickerViewController {
  override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    ...
    
    performSegue(withIdentifier: "unwind", sender: cell)
  }
}

• 기존의 GameCell에 연결되어 있던 unwind 제거 후 다시 연결

• 추가된 segue의 identifier입력

Done을 탭한 경우, 새 플레이어 저장

• PlayerDetailsViewController의 prepare(for: sender:)에 Done버튼이 눌린 경우 위에서 선언한 property에 저장하는 로직 추가
  - 본 화면이 Done버튼을 클릭해서 뒤로 갈때 "SavePlayerDetail" segue가 동작

// PlayerDetailsViewController.swift

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
  
  if segue.identifer == "PickGame", ... {
    ...
  }
  
  if segue.identifier == "SavePlayerDetail",
    let playerName = nameTextField.text,
    let gameName = detailLabel.text {
    player = Player(name: playerName, game: gameName, rating: 1)
  }
}

• PlayerViewsViewController에서 unwind segue로 온 데이터 획득한 후 처리
  - savePlayerDetails 부분 내용 추가 (storyboard에서 segue 부분의 identifier에도 기입 필요)

// PlayersViewController.swift

extension PlayersViewController {
  @IBAction func cancelToPlayersViewController(_ segue: UIStoryboardSegue) {
  }

  @IBAction func savePlayerDetail(_ segue: UIStoryboardSegue) {
    guard
      let playerDetailsViewController = segue.source as? PlayerDetailsViewController,
      let player = playerDetailsViewController.player
      else {
        return
    }
    playersDataSource.append(player: player, to: tableView)
  }
}

Storyboard Reference

• 하나의 storyboard reference로 만들 ViewController들을 드래그하여 선택

• Editor -> Refactor to Storyboard... 선택

• 이름 설정
  - path 설정 주의: default는 Target바로 하위로 이동

• 결과: reference로 생성되었으며, Player.storyboard라는 별도의 파일로 생성

• reference 객체의 속성을 보면, Player.storyboard로 지정되어 있는 것을 확인

* segue 정리

A -> B, A <- B 단순 화면전환: segue, unwindSegue A -> B 데이터 전달: prepare(for:sender:) 사용 A -> B cell 선택 시 데이터 전달 tableView의 cell선택 후 A -> B 전달: segue는 cell이 아닌 ViewController에서 다음화면에 drag하여 segue생성 (id입력) 테이블뷰 didSelectRowAt 델리게이트에서 dataSource에 selectedIndex에 대입 prepare(for:sender:)에서 dataSource에 있는 selectedItem으로 값을 가져와서, B화면에 전달

A <- B 데이터 전달 viewController에서 exit으로 드래그하여 segue 생성, id 입력 performSegue를 통해 호출 받는 쪽에서 정의했던 unwindSegue함수에서, segue.source as? B를 통해 객체 얻어서 사용

* 참고

- 개념: www.raywenderlich.com/5055396-ios-storyboards-segues-and-more

- 소스코드: https://github.com/JK0369/ratings_example