[iOS] 알람 앱 (4) - UIEditMenuInteraction과 UIPasteboard

알람앱 (3) - 테이블뷰에 랩타임 추가하기

[iOS] 알람 앱 (3) - 스톱워치 테이블 뷰에 랩 타임 추가하기

 

 

이전 포스팅의 랩타임 기능까지 구현하고 새롭게 추가할 기능이 뭐가 있을까 고민하다 랩타임 기록을 복사하면 좋을 것 같아 Copy & Paste 기능에 대해 공부하고 추가했다.

위 화면처럼 말풍선 창이 나타나고 복사가 되도록 구현했다.

 

어떻게 구현하는지 찾아보며 UIEditMenuInteraction이라는 객체를 알게 되었다.

선택했을 때 주변에 나타나는 작업메뉴를 사용할 수 있고 콘텐츠에 대한 잘라내기, 복사, 붙여 넣기 등의 편집 작업을 제공한다고 한다. 

또한 UIPasteboard는 복사에 사용된다. 데이터를 복사하여 클립 보드에 저장한 다음 데이터를 공유할 수 있다.

 

아래 링크에서 각 객체를 공식문서로 확인할 수 있다.

• UIEditMenuInteraction

UIEditMenuInteraction | Apple Developer Documentation

 

• UIPasteboard

UIPasteboard | Apple Developer Documentation

 

 

UIEditMenuInteraction을 사용해 작업 메뉴 표시

우선 UIEditMenuInteractionDelegate부터 사용해 보자.

별도의 제스처 사용은 하지 않고 셀의 클릭 상태에서 구현을 하기 위해서 UITableViewDelegate의 제공 함수인 didSelectRowAt 함수를 사용해서 작업메뉴가 나타나도록 했다.

// MARK: - TableView Delegate
extension StopwatchViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 50
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let copyMenuInteraction = UIEditMenuInteraction(delegate: self)
        tableView.addInteraction(copyMenuInteraction)
        
        let configuration = UIEditMenuConfiguration(identifier: nil, sourcePoint: tableView.accessibilityActivationPoint)
        copyMenuInteraction.presentEditMenu(with: configuration)
    }
}

작업 메뉴를 표시하는 UIEditMenuInteraction 객체를 생성하고 UITableView에 추가했다. 또한 UIEditMenuConfiguration는 작업 메뉴가 나타날 위치를 정하는 역할을 하는데 accessibilityActivationPoint를 기준으로 담았다.

정리하자면, 작업 메뉴를 위해 생성해 준 UIEditMenuInteraction 객체에 presentEditMenu 메서드를 사용하여 정해둔 위치에 작업 메뉴를 표시하도록 작성한 코드이다!

 

 

UIPasteboard를 사용하여 데이터를 클립 보드에 복사

이제 복사 기능을 위해 델리게이트 함수를 받아와야 한다.

위에서 설명했던 UIPasteboard를 사용해 볼 것이다.

 

작업 메뉴를 선택했을 때 동작을 하는 코드를 작성해 보자. UIEditMenuInteractionDelegate에서 제공되는 editMenuInteraction 메서드를 사용하여 위에서 생성한 작업메뉴를 설정할 수 있다.

// MARK: - UIEditMenuInteraction Delegate
extension StopwatchViewController: UIEditMenuInteractionDelegate {
    func editMenuInteraction(_ interaction: UIEditMenuInteraction, menuFor configuration: UIEditMenuConfiguration, suggestedActions: [UIMenuElement]) -> UIMenu? {
        let copyAction = UIAction(title: "랩타임 기록 전체 복사하기") {_ in
            var copyBoard: [String] = []
            
            for indexNum in 0...self.lapTableViewData.count-1 {
                copyBoard.append("\(indexNum+1)     \(self.lapTableViewData[indexNum])     \(self.diffTableViewData[indexNum])\n")
            }
            UIPasteboard.general.strings = copyBoard
        }
        return UIMenu(children: [copyAction])
    }
}

복사 작업에 대한  "랩타임 기록 전체 복사하기"라는 UIAction을 생성하고 , 클로저로 실제 복사 작업을 정의했다.

copyBoard라는 String Array를 별도로 만들어서 랩 데이터들을 반복하며 lapTableViewData의 indexNum을 이용해서 Array에 추가를 시켜주는 방법을 사용했다.

UIPasteboard.general.strings = copyBoard 👉 이 부분이 copyBoard Array의 내용을 복사하는 코드이다!

 

 

 

이렇게 위 코드들을 이용해 작업 메뉴에서 "랩타임 기록 전체 복사하기"를 선택했을 때,

해당 기록을 복사하여 클립 보드에 저장하는 기능을 구현해 봤다.

아래 결과 화면에서는 클릭 시 작업메뉴가 나타나고 copy 기능을 확인할 수 있다.

 

 

Copy 결과 🔖

Lap
5 00:07:44 00:01:47
4 00:06:67 00:01:13
3 00:05:30 00:01:32
2 00:03:49 00:00:69
1 00:01:51 00:00:69