[swift] TableFlip을 사용하여 Swift에서 테이블 뷰의 셀에서 사진 편집 기능 추가하기

16 Nov 2023

swift

TableFlip 소개

TableFlip은 iOS 개발자들이 테이블 뷰의 애니메이션을 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 셀의 추가, 삭제, 이동 등 다양한 애니메이션 효과를 제공합니다. 여기서는 셀에서 사진 편집 기능을 추가하고 해당 셀을 테이블에서 삭제하는 애니메이션을 구현하기 위해 TableFlip을 사용할 것입니다.

프로젝트 설정

먼저, 프로젝트에서 TableFlip 라이브러리를 사용할 수 있도록 설정해야 합니다. Podfile에 다음과 같은 내용을 추가합니다.

pod 'TableFlip'

그리고 터미널을 열어 프로젝트가 있는 디렉토리로 이동한 후, 다음 명령을 실행하여 라이브러리를 설치합니다.

pod install

셀 UI 구성

셀에서 사진 편집 기능을 추가하기 위해 먼저 해당 셀의 UI를 구성해야 합니다. 이미지를 표시할 UIImageView와 편집 버튼을 추가합니다. 이 버튼을 누르면 이미지 편집 화면으로 이동할 것입니다. 필요한 경우 UILabel을 추가하여 이미지 정보를 표시하는 것도 좋습니다.

예를 들어, 다음과 같이 셀의 UI를 구성할 수 있습니다.

class PhotoCell: UITableViewCell {
    @IBOutlet weak var photoImageView: UIImageView!
    @IBOutlet weak var editButton: UIButton!
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // 셀 초기화 코드
        // 이미지와 버튼에 대한 설정
    }
}

편집 화면 구성

이제 편집 화면을 구성해야 합니다. 편집 화면에서는 사진을 편집하고 적용할 수 있는 기능을 제공해야 합니다. 예를 들어 색상 조정, 자르기, 필터 적용 등의 기능을 구현할 수 있습니다. 그러나 여기서는 편집 화면을 구성하는 방법에 대해 다루지 않을 것입니다.

셀에서 편집 기능 활용하기

이제 테이블 뷰 컨트롤러에서 편집 기능을 활용하는 방법을 알아보겠습니다. 먼저, 테이블 뷰의 셀을 만들고 데이터를 표시해야 합니다. 이 작업은 테이블 뷰 데이터 소스 메서드에서 수행합니다.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
    let photo = photos[indexPath.row]
    
    cell.photoImageView.image = photo.image
    
    // 편집 버튼의 타겟 메서드 설정
    cell.editButton.addTarget(self, action: #selector(editButtonTapped(_:)), for: .touchUpInside)
    
    return cell
}

여기서는 편집 버튼을 눌렀을 때 호출될 editButtonTapped(_:) 메서드를 설정하였습니다. 이 메서드에서는 편집 화면으로 이동하는 코드를 구현할 것입니다. 다음과 같이 해당 메서드를 추가합니다.

@objc func editButtonTapped(_ sender: UIButton) {
    if let cell = sender.superview?.superview as? PhotoCell,
       let indexPath = tableView.indexPath(for: cell) {
        let photo = photos[indexPath.row]
        
        // 편집 화면으로 이동하는 코드
    }
}

편집 화면으로 이동하기 위해서는 해당 셀의 indexPath를 사용하여 편집할 사진을 식별해야 합니다. 이제 구현할 편집 화면으로 이동하는 코드를 추가합니다.

편집 화면 구현

편집 기능을 구현할 편집 화면을 구성해야 합니다. 여기서는 편집 화면에서 사진을 편집하고 변경된 결과를 적용하는 방법에 대해 다루지 않을 것입니다. 대신, 편집 화면에서 완료 버튼을 누르면 해당 셀이 테이블에서 삭제되도록 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

편집 화면에서 완료 버튼을 눌렀을 때 호출되는 메서드에서 다음 코드를 추가하여 해당 셀을 삭제하도록 하겠습니다.

if let indexPath = tableView.indexPathForSelectedRow {
    tableView.deleteRows(at: [indexPath], with: .left)
}

여기에서 deleteRows(at:with:) 메서드를 사용하여 해당 셀을 삭제하고, 삭제되는 애니메이션을 .left로 설정하였습니다.

애니메이션 효과 적용

이제 TableFlip을 사용하여 셀 삭제 시 애니메이션 효과를 구현할 차례입니다. 우리는 셀이 삭제될 때 slideOutLeft 애니메이션을 적용하고, 셀의 위치가 변경되는 것처럼 보이도록 하겠습니다.

먼저, TableFlip을 import 하여 사용할 준비를 해야 합니다.

import TableFlip

그리고 셀이 삭제될 때의 애니메이션을 구현해보겠습니다. 이를 위해 UITableViewDelegate의 willDisplay 메서드를 구현하여 해당 셀에 slideOutLeft 애니메이션을 적용합니다.

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.animate(.slideOutLeft)
}

이제 테이블 뷰에서 셀을 삭제하면 해당 셀이 왼쪽으로 사라짐과 동시에 셀들이 재배치되는 것을 확인할 수 있습니다.

마무리

이렇게 Swift에서 테이블 뷰의 셀에서 사진 편집 기능을 추가하고 해당 셀을 테이블에서 삭제하는 방법에 대해 알아보았습니다. TableFlip을 사용하여 셀 삭제 시 애니메이션 효과를 자연스럽게 구현할 수 있습니다. 다양한 애니메이션 효과를 사용하여 앱의 사용자 경험을 향상시킬 수 있습니다.