[iOS] UISwipeActionsConfiguration

https://developer.apple.com/tutorials/app-dev-training/adding-and-deleting-reminders

Apple Developer Documentation

iOS App Dev Trutorials를 공부하고 적은 글입니다.

사진과 같이 UICollectionView (list) 에서 왼쪽으로 swipe 액션을 취했을 때 Delete 버튼이 나올 수 있도록 설정을 해줄겁니다.

(Delete는 왼쪽 끝까지 swipe 하면 자동으로 실행됩니다 -> performsFirstActionWithFullSwipe: Bool)

 

UISwipeActionsConfiguration

The set of actions to perform when swiping on rows of a table.
테이블의 행을 swipe 할 때 수행할 작업의 집합입니다.

수행할 작업의 집합이라고 쓰여진 이유는 swipe 시 여러 작업을 수행할 수 있도록 custom 할 수 있기 때문입니다.

 

애플 문서의 Table Views 클래스에 들어있더라구요? List 형식에서만 만들 수 있어서 그런가

여기서는 CollectionListView 에 추가를 해보겠습니다. 

 

 

 

튜토리얼에서는 UISwipeActionsConfiguration 옵셔널을 반환하는 함수를 만들었습니다.

makeSwipeActions

private func makeSwipeActions(for indexPath: IndexPath?) -> UISwipeActionsConfiguration? {

}

Swipe 시 어떤 액션을 할 것인지 반환해주는 함수입니다.

이 함수는 목록의 각 항목에 적용할 것입니다. -> 각 항목에 모두 swipe action을 적용

위에서 swipe 시 여러 작업을 수행할 수 있도록 한다고 했는데 UIContextualAction이 하나하나의 작업이라고 생각하면 됩니다.

 

따라서 UISwipeActionsConfiguration 을 구현하기 위해서는 각 행의 액션인 UIContextualAction 을 구현해야 합니다.

 

UISwipeActionsConfiguration 의 init UIContextualAction 의 집합을 필요로 하고 있는 것을 알 수 있습니다..

init(actions: [UIContextualAction])

 

makeSwipeActions

private func makeSwipeActions(for indexPath: IndexPath?) -> UISwipeActionsConfiguration? {
    guard let indexPath = indexPath, let id = dataSource.itemIdentifier(for: indexPath) else { return nil }
    let deleteActionTitle = NSLocalizedString("Delete", comment: "Delete action title")
    let deleteAction = UIContextualAction(style: .destructive, title: deleteActionTitle) { [weak self] _, _, completion in
        self?.deleteReminder(with: id)
        self?.updateSnapshot()
        completion(false)
    }
    return UISwipeActionsConfiguration(actions: [deleteAction])
}

 

UIContextualAction  init 함수를 살펴보겠습니다.

init(style: UIContextualAction.Style, title: String?, handler: UIContextualAction.Handler)

Style은 기본적으로 normal, destructive 두개가 있었고

style의 background 속성을 설정하여 custom 할 수 있다고 합니다. 

title은 보여질 글자 

image로 아이콘도 넣을 수 있습니다.

handler는 버튼을 클릭했을 때 어떤 액션을 실행할지

 

 

이렇게 UIContextualAction을 만들었으면 UISwipeActionsConfiguration(actions:) 에 담아서 리턴합니다.

 

 

CollectionView 에 등록

CollectionView 에 등록은 layout을 잡을 때 사용하는

UICollectionLayoutListConfiguration

에서

trailingSwipeActionsConfigurationProvider

속성에 makeSwipeActions 함수를 넣어주면 됩니다.

 

• leadingSwipeActionsConfigurationProvider : 오른쪽으로 swipe
• trailingSwipeActionsConfigurationProvider : 왼쪽으로 swipe

private func listLayout() -> UICollectionViewCompositionalLayout {
    var listConfiguration = UICollectionLayoutListConfiguration(appearance: .grouped)
    listConfiguration.showsSeparators = false
    listConfiguration.backgroundColor = .clear

    // swipe action 추가
    listConfiguration.trailingSwipeActionsConfigurationProvider = makeSwipeActions

    return UICollectionViewCompositionalLayout.list(using: listConfiguration)
}

 

 

 

참조

https://developer.apple.com/documentation/uikit/uiswipeactionsconfiguration