UIEditMenuInteraction

 

정의

 

메뉴를 이용한 편집 기능을 제공하는 인터렉션이라고한다.

 

설명으로는 아직 어떤 기능인지 명확하지 않다. 하지만 우리는 이 기능을 무의식적으로 많이 써봤다. 바로 다음 사진과 같이 말이다.

 

사진을 보니 바로 이해가 된다. 바로 LongPress를 할 때 등장하는 저 메뉴들이 오늘의 주인공인 UIEditMenuInteraction이다.

 

iOS를 훨씬 전부터 공부했던 사람들은 UIMenuController로 알려져있는데 

 

 

보다시피 iOS 16을 기점으로 더 이상 지원하지 않는다.

 

---

구현

우리는 크게 2가지 방법을 통해 커스텀을 해보려고한다.

첫 번째는 가장 많이 쓰이는 UITextField 또는 UITextView에서 커스텀을 해보는 것

두 번째는 그 외의 뷰에 메뉴를 띄우는 동작으로 나눠 진행해보자.

 

1. UIText Prefix View 

첫번 째는 UIText로 시작하는 UITextField와 UITextView를 커스텀해보자.

처음으로 위 뷰들을 다루는 이유는 이미 구현이 되어있기 때문에 원하는 메뉴를 단순히 추가해주면 된다

 

두 VIew모두 델리게이트에 다음과 같은 함수가 있다.

 

extension EditorView: UITextViewDelegate {
    
    // UIMenu Configuration
    func textView(_ textView: UITextView, editMenuForTextIn range: NSRange, suggestedActions: [UIMenuElement]) -> UIMenu? {
    	...
    }
    
 }
 
 extension EditorView: UITextFieldDelegate {
    func textField(_ textField: UITextField, editMenuForCharactersIn range: NSRange, suggestedActions: [UIMenuElement]) -> UIMenu? {
        ...
    }
}

 

여기서 우리는 띄워줘야할 메뉴를 생성함과 동시에 메뉴를 눌렀을 때 동작하는 Action까지 같이 지정을 알려준다.

여기서 range라는 파라미터가 존재하는데 사용자가 메뉴를 띄우기위해 LongPross를 한 텍스트 위치를 나타낸다.

 

 

 

만약 다음과 같은 커서에서 눌렀다면 다음과 같이 4를 받게 된다.

 

또한 suggestedActions 파라미터는 말 그대로 위 뷰의 기본적으로 제공되는 메뉴들이다. 이 메뉴들을 같이 사용할 것인지
사용하지 않을 것인지 역시 내가 결정할 수 있다.

 

그러면 예로 다음과 같이 코드를 짜보자.

    // UIMenu Configuration
    func textView(_ textView: UITextView, editMenuForTextIn range: NSRange, suggestedActions: [UIMenuElement]) -> UIMenu? {
        let insertPhotoAction = UIAction(title: "Insert Photo", image: nil) { [weak self] _ in
            guard let self else { return }
            
            print("OUT: \(range) \(suggestedActions)")
            self.delegate?.insertPhotoButtonDidTap(self.contentTextView)
        }
        
        return UIMenu(title: "메뉴", children: [insertPhotoAction])
    }

 

- suggestedActions을 사용하지고 insert Photo라는 나의 커스텀 Menu만 띄우기를 원하면 결과는 왼쪽

- suggestedActions과 같이 사용한 결과는 오른쪽 

---

2. Other Views 

이번에는 나머지 뷰에 적용시키는 방법을 배워보자.

나머지 뷰들은 LongPress를 기본적으로 인식하고 있지 않아 앞서 해줬던 작업보다 몇 단계가 필요하다.

 

1. UILongPress를 인식하게 한다.
2. 커스텀 UIMenu 등록한다. 해당 메뉴가 눌렀을 때 Action을 처리한다.

1. UILongPress 인식

    func registerLongPress() { // reconizer 등록
        editMenuInteraction = UIEditMenuInteraction(delegate: self) // 인터렉션과 함께 델리게이트 생성
        tempView.addInteraction(editMenuInteraction!) // 등록 
        let longPress = UILongPressGestureRecognizer() 
        longPress.minimumPressDuration = 1
        longPress.addTarget(self, action: #selector(didLongPress(_:)))
        tempView.addGestureRecognizer(longPress)
    }
    
    @objc func didLongPress(_ recognizer: UIGestureRecognizer) { // handler
        let location = recognizer.location(in: tempView)
        let config = UIEditMenuConfiguration(identifier: nil, sourcePoint: location)
        config.preferredArrowDirection = .left // 에로우 포인트 (화살표 방향)
        
        if let interaction = editMenuInteraction{
            interaction.presentEditMenu(with: config) // menu show
        }
    }

2. 커스텀 UIMenu 등록 및 Action 처리

extension RootViewController: UIEditMenuInteractionDelegate {
    func editMenuInteraction(_ interaction: UIEditMenuInteraction, menuFor configuration: UIEditMenuConfiguration, suggestedActions: [UIMenuElement]) -> UIMenu? {
        let insertPhotoAction = UIAction(title: "Insert Photo", image: nil) { [weak self] _ in
               guard let self else { return }
                print("Tap Insert Photo")
           }
           
           return UIMenu(title: "메뉴", children: [insertPhotoAction])
        
    }
}

 

UIMenu 및 Action처리는 UIText Prefix 쪽에서 했던 부분과 거의 일치한다.

 

결과를 보면 다음과 같다. arrowDirection을 집중해서 보자.

 

재대로 왼쪽으로 가르키고 있다.  원래는 SearchBar쪽도 건드릴 수 있나 찾아봤지만 저기는 건드릴 수 없다고한다.
만약 SearchBar에 UIMenu를 주고 싶으면 UITextField를 상속받은 커스텀 SearchBar를 만들어야 할 것 같다.

 

 

참고

UIEditMenuInteraction | Apple Developer Documentation

 

iOS 에서 메뉴 구현하기