[iOS] FLO 앱 개발 일지 #2. TableView 로 가사 화면 개발하기

• 프로그래머스 연습 과제의 FLO 앱 요구사항을 바탕으로 개발한 앱입니다.
• FLO 앱 개발 일지 #1. MVVM 패턴과 Data Binding 

[iOS] FLO 앱 개발 일지 #2. TableView 로 가사 화면 개발하기

이번 개발 일지는 전체 가사 보기 화면을 개발하면서 TableView 를 어떻게 이용했는지에 대해 작성해볼게요! 아래 순서로 작성했습니다

---

1. 문자열의 가사를 딕셔너리로 변환하기 

2. TableView 로 전체 가사 화면 UI 개발하기

3. Music Player 의 시간이 지남에 따라 가사가 변경되도록 하기

* Issue :: Observer 를 등록하고 화면이 종료될때 해제해주지 않아 가사 싱크가 맞지않는 이슈가 발생 (해결)

4. TableView 로 특정 가사 터치 시 해당 구간부터 재생되도록 개발하기

---

 

👀 1. 문자열의 가사를 딕셔너리로 변환하기 

JSON 으로 받아온 가사는 String 타입으로, "[mm:ss:mss]가사\n[mm:ss:mss]가사\n"  형태로 되어있습니다. 먼저 split 함수를 이용해 '\n' 을 기준으로 하나의 가사씩 분리한 후 정규표현식을 이용해 시간 부분을 파싱했고, ']' 이후의 부분을 가사로 저장했습니다.

"[00:16:200]we wish you a merry christmas\n[00:18:300]we wish you a merry christmas\n
  [00:21:100]we wish you a merry christmas\n[00:23:600]and a happy new year\n...
  [02:57:900]we wish you a merry christmas\n[03:00:500]and a happy new year"

 

JSON 데이터를 받아오면서 [시간(Int): 가사(String)] 타입의 딕셔너리로 값을 저장해뒀습니다. 이 때, ms 단위는 제외하고, 분과 초 단위만 고려해서 초 단위 시간으로 Key 를 지정했습니다! 그리고, 처음 시작인 시간 0과 끝나는 시간(duration) 198 을 Key 로 갖는 값을 추가해줬습니다. 

{ 0: "간주중",
  16 : "we wish you a merry christmas",
  18 : "we wish you a merry christmas",
  ...
  177 : "we wish you a merry christmas",
  180 : "and a happy new year"
  198 : "간주중" }
* 실제 딕셔너리는 정렬되어있지 않습니다.

 

TableView 에서 가사를 시간순으로 정렬해서 보여줘야 하기 때문에, 위의 딕셔너리를 가사 배열로 만들어줍니다! 이 때, 딕셔너리를 key 기준으로 정렬한 후 value 만 따로 분리하면 됩니다. 참고로, 딕셔너리를 정렬했을 때에는 실제 딕셔너리가 정렬되는 것이 아닌 딕셔너리의 엘리먼트를 정렬한 배열이 반환됩니다. 

// sorted 함수의 반환값 : [Dictionary<Int, String>.Element]
// lyricsArray 의 타입 : [String]
lyricsArray = lyricsDict.sorted { $0.key < $1.key }.map { $0.value }

 

✔︎ 2. TableView 로 전체 가사 화면 UI 개발하기

 

TableView 의 Cell 은 가사를 보여주는 lyricsLabel 하나만을 갖는 단순한 구조입니다!

구현된 앱의 TableView // Storyboard

 

✔︎ lyricsArray 배열을 이용해 Table View Data Source 프로토콜의 필수 메소드를 구현해줍니다.

1. tableView(_:numberOfRowsInSection:)
Return the number of rows for the table. :: 해당 메소드를 구현해 테이블의 전체 행 개수를 알려줘야 한다.

2. tableView(_:cellForRowAt:)
Provide a cell object for each row. :: 테이블의 각 행마다 Cell 을 제공해야한다.

extension LyricsViewController: UITableViewDelegate, UITableViewDataSource {
    
    // MARK: - TableView method
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return viewModel.lyricsCount
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "LyricsCell", for: indexPath) as? LyricsCell else {
            return UITableViewCell()
        }
        cell.setLyrics(text: viewModel.lyricsArray[indexPath.row])
        return cell
    }
    
    // other methods ...
}

 

✔︎ Music Player 의 시간이 지남에 따라 가사가 변경되도록 하기

• 음악 재생 시간이 변함에 따라, UI 가 변경되어야하는데 이 때 테이블뷰가 가리키는 행도 변경되어야합니다.
• AVPlayer 에 Observer 를 등록해서 시간이 변할때마다 Label, Slider 값, 테이블뷰가 가리키는 행을 변경해주면 됩니다.
• TableView 를 스크롤 하는 동안에 가리키는 행이 변경되면 불편함이 있을 수 있어, 스크롤중임을 체크하여 업데이트하지 않도록 했습니다.
• 등록한 Observer 는 View 가 종료될 때, 해제해주어야 합니다.

🤔 Issue 
가사 전체 화면을 종료하고 다시 시작했을 때, 가사의 싱크가 정확하게 맞지 않는 이슈가 있었습니다.
Observer 를 등록하고 화면이 종료될때 해제해주지 않아서, 발생한 문제였습니다.
View 가 로딩될 때 Observer 를 등록하고, View 가 종료될 때 Observer 를 해제해주어 해결했습니다.

 

1) LyricsViewController 에서 Music Player 에 Observer 등록 / 해제하는 코드

func addObserverToPlayer() {
    timeObserver = player.addPeriodicTimeObserver(forInterval: CMTime(seconds: 1, preferredTimescale: 10), queue: DispatchQueue.main) { time in
        guard self.isScrolling == false else { return }
        self.updateTime(time)
    }
}
    
func removePeriodicTimeObserver() {
    if let token = timeObserver {
        player.removeTimeObserver(token: token)
        timeObserver = nil
    }
}

 

2) Music Player 의 시간이 변경될 때마다 호출되어 UI 를 업데이트 하는 함수 

 

• 위의 Observer 를 등록하는 함수에 의해, 스크롤이 되지 않는 경우에 updateTime 메소드가 호출됩니다.
• updateTime 메소드는 재생시간을 나타내는 Label과 Slider 의 값을 변경하고 가사의 index 가 변경되는 경우에만 TableView 의 row 를 변경해줍니다.
• 가사는 매번 변경되는 것이 아니라, 재생 시간이 현재 가사의 범위를 넘어갈 때에만 업데이트되도록 하기 위함입니다.

 

func updateTime(_ time: CMTime) {
    currentTimeLabel.text = player.currentTimeText
    progressSlider.value = Float(player.currentValue)
    let index = viewModel.getCurrentLyricsIndex()
    guard viewModel.prevIndex != index else { return }
    updateLyricsTableViewCell(prev: viewModel.prevIndex, index: index)
    viewModel.prevIndex = index
}

 

3) TableView 에서 현재 재생되는 가사로 변경하는 하이라이팅하는 함수

 

• updateLyricsTableViewCell(prev: index:) 메소드에서 prev 는 이전에 재생된 가사의 인덱스, index 는 현재 재생중인 가사 인덱스입니다.
• 현재 재생하는 가사의 row 로 테이블을 스크롤시키고, Cell 의 글자 색상 배경등을 바꾸는 함수입니다. 
• UITableView.scrollToRow(at:at:animated:) 메소드를 통해 현재 재생되는 가사가 있는 행으로 이동되도록 합니다.
• index 값을 통해 현재 재생중인 가사의 Cell 에 대해 .setNowLyrics() 메소드를 호출해 색상을 강조시켜줍니다.
• prev 값을 통해 이전 재생중인 가사의 Cell 에 대해 .desetPrevLyrics() 메소드를 호출해 기본 색상으로 변경해줍니다.

 

func scrollToRow(at indexPath: IndexPath, at scrollPosition: UITableView.ScrollPosition, animated: Bool)
* 첫번째 파라미터 indexPath는 IndexPath 타입으로 이동할 row 를 지정합니다.
* 두번째 파라미터 scrollPosition는 해당 행이 테이블뷰의 상단, 중간, 하단 중 어디에 위치할 지 정할 수 있습니다.
* 세번째 파라미터 animated 는 스크롤 애니메이션의 여부입니다.

func updateLyricsTableViewCell(prev: Int, index: Int) {
    lyricsTableView.scrollToRow(at: IndexPath(row: index, section: 0), at: .middle, animated: true)
        
    let indexPath = IndexPath(row: index, section: 0)
    if let cell = lyricsTableView.cellForRow(at: indexPath) as? LyricsCell {
        cell.setNowLyrics()
    }

    guard prev >= 0 else { return }
    let prevIndexPath = IndexPath(row: prev, section: 0)
    if let prevCell = lyricsTableView.cellForRow(at: prevIndexPath) as? LyricsCell {
        prevCell.desetPrevLyrics()
    }
}

 

✔︎ TableView 로 특정 가사 터치 시 해당 구간부터 재생되도록 개발하기

• 특정 가사를 터치한다는 것은, TableView 의 Cell 을 클릭한 것과 같다고 생각했습니다.
• UITableViewDelegate 프로토콜의 메소드 중, 셀을 클릭했을 때 호출되는 함수를 이용했습니다.
• 요구사항에 있던, toggleButton 이 선택됨에 따라 재생구간을 변경하거나, View 를 종료하도록 했습니다.

💡 tableView(_:didSelectRowAt:)
Tells the delegate a row is selected. :: 특정 행이 선택됐을 때, Delegate 에게 알려준다.

 

✔︎ 재생구간을 변경하기 위한 방법

• 재생구간을 변경하기 위해서, 클릭된 가사의 index를 통해 딕셔너리의 key 를 가져왔습니다.
• 딕셔너리의 key 인 시간값을 통해 AVPlayer 의 seek 함수를 이용해 재생시간을 변경하고 UI를 업데이트했습니다.

extension LyricsViewController: UITableViewDelegate, UITableViewDataSource {

    // other methods ...

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if toggleButton.isSelected {
            let seconds = viewModel.lyricsDict.sorted { $0.key < $1.key }[indexPath.row].key
            let time = CMTime(seconds: Double(seconds), preferredTimescale: 100)
            player.seek(time)
            updateTime(time)
        } else {
            dismiss(animated: true, completion: nil)
        }
    }
}

 

 

👀 Github

songda515/FLO