iOS開發之Context Menus

介紹

• WWDC 2019 推出了上下文菜單（Context Menus）成為 3DTouch 的替代品。
• 需要通過長按方式觸發。
• 如果要啟用上下文菜單，需要建立一個 UIContextMenuInteraction 并将其添加給某個觸發的 UIView，然後指定 delegate，實作代理方法。
• 代理方法需要傳回一個

  UIContextMenuConfiguration

  ，其構造函數如下

  init(identifier: NSCopying?, previewProvider: UIContextMenuContentPreviewProvider?, actionProvider: UIContextMenuActionProvider? = nil)

  ，最主要是第三個參數，需要在其中建立

  UIMenu

  。
• 案例

class ViewController: UIViewController {
    
    // 需要打開User Interaction
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 建立UIContextMenuInteraction
        let interaction = UIContextMenuInteraction(delegate: self)
        // 添加UIContextMenuInteraction
        imageView.addInteraction(interaction)
    }
}

// 代理方法
extension ViewController: UIContextMenuInteractionDelegate {
    func contextMenuInteraction(_ interaction: UIContextMenuInteraction, configurationForMenuAtLocation location: CGPoint) -> UIContextMenuConfiguration? {
        
        // 第一個菜單
        let favorite = UIAction(title: "Favorite", image: UIImage(systemName: "heart.fill")) { action in
            print("favorite")
        }
        
        // 第二個菜單
        let share = UIAction(title: "Share", image: UIImage(systemName: "square.and.arrow.up.fill")) { action in
            print("share")
        }
        
        // 第三個菜單
        let delete = UIAction(title: "Delete", image: UIImage(systemName: "trash.fill"), attributes: [.destructive]) { action in
            print("delete")
        }
        
        // 傳回UIContextMenuConfiguration
        return UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { _ in
            UIMenu(title: "Actions", children: [favorite, share, delete])
        }
    }
}           

複制

• 效果

效果

UITableView和UICollectionView

iOS 13 以後，UITableView 和 UICollectionView 也支援 Context Menus，使用起來特别簡單，隻需要實作相應的代理方法，傳回

UIContextMenuConfiguration

即可。

• UITableView

func tableView(_ tableView: UITableView, contextMenuConfigurationForRowAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? {
    // 第一個
    let favorite = UIAction(title: "Favorite", image: UIImage(systemName: "heart.fill")) { action in
        print("favorite")
    }
    
    let share = UIAction(title: "Share", image: UIImage(systemName: "square.and.arrow.up.fill")) { action in
        print("share")
    }
    
    let delete = UIAction(title: "Delete", image: UIImage(systemName: "trash.fill"), attributes: [.destructive]) { action in
        print("delete")
    }
    
    return UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { _ in
        UIMenu(title: "Actions", children: [favorite, share, delete])
    }
}           

複制

• UICollectionView

func collectionView(_ collectionView: UICollectionView, contextMenuConfigurationForItemAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? { 
    // 第一個
    let favorite = UIAction(title: "Favorite", image: UIImage(systemName: "heart.fill")) { action in
        print("favorite")
    }
    
    let share = UIAction(title: "Share", image: UIImage(systemName: "square.and.arrow.up.fill")) { action in
        print("share")
    }
    
    let delete = UIAction(title: "Delete", image: UIImage(systemName: "trash.fill"), attributes: [.destructive]) { action in
        print("delete")
    }
    
    return UIContextMenuConfiguration(identifier: nil, previewProvider: nil) { _ in
        UIMenu(title: "Actions", children: [favorite, share, delete])
    }
}           

複制