代码之家 › 专栏 › 技术社区 › Duc Trung Mai

如何创建什么样的应用程序预览动画?

swift ios

-1

Duc Trung Mai · 技术社区 · 6 年前

我想知道如何制作像WhatsApp这样的预览,这是演示:

https://imgur.com/a/IKj88Zg

似乎它不是偷看和弹出,因为我们只需要做长按,然后它就会显示出来。

注意:您可以在本机iOS消息应用程序上进行测试(如果您不安装WhatsApp,它们具有相同的动画)

谢谢

0 回复 | 直到 6 年前

Saifan Nadaf 6 年前

就是 UIContextMenuConfiguration 支持 iOS13 向前

长按tableViewCell可以看到预览和菜单。您可以显示任何 viewController 或任何 customView 作为菜单的预览组件。

我已将viewController显示为预览。

// MainViewController is first ViewController and DetailsViewController is second ViewController
class MainViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    var castNameArr = ["Professor", "Berlin", "Nairobi", "Tokiyo", "Rio", "Denver", "Mosco", "Requel", "Helsinki", "Arturo"]
    var selectedCast = ""
    var detailVc = DetailsViewController()

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Money Heist Casts"
        detailVc = self.storyboard?.instantiateViewController(withIdentifier: "DetailsViewController") as! DetailsViewController
        }
}

使用 contextMenuConfigurationForRowAt 方法,我们可以创建菜单和预览。

  func tableView(_ tableView: UITableView, contextMenuConfigurationForRowAt indexPath: IndexPath, point: CGPoint) -> UIContextMenuConfiguration? {
        selectedCast = castNameArr[indexPath.row]
        let identifier = "\(indexPath.row)" as NSString

        return UIContextMenuConfiguration(
            identifier: identifier,
            previewProvider: makePreview) { _ in

                let optionOne = UIAction(
                    title: "Option 1",
                    image: UIImage(systemName: "arrowshape.turn.up.right")){ _ in
                        //This will get called when you tap on Option 1
                }

                let optionTwo = UIAction(
                    title: "Option 2",
                    image: UIImage(systemName: "book.fill")){ _ in
                        //This will get called when you tap on Option 2
                }

                return UIMenu(title: "", image: nil, children: [optionOne, optionTwo])
        }
    }

// This will return a viewController which we want to display as preview
    func makePreview() -> UIViewController {
        detailVc.castNameStr = selectedCast
        return detailVc
    }

使用 willPerformPreviewActionForMenuWith 方法将在交互即将“提交”时被调用,以响应用户点击预览。

func tableView(_ tableView: UITableView, willPerformPreviewActionForMenuWith configuration: UIContextMenuConfiguration, animator: UIContextMenuInteractionCommitAnimating) {
    DispatchQueue.main.async {
        print(configuration.identifier as? String)
        self.navigationController?.pushViewController(self.detailVc, animated: true)
    }
}

这是显示为预览的DetailsViewController

class DetailsViewController: UIViewController {

    @IBOutlet weak var titleLbl: UILabel!
    @IBOutlet weak var castImgView: UIImageView!
    var castNameStr = ""
    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func viewWillAppear(_ animated: Bool) {
        titleLbl.text = "This is \(castNameStr)"
        castImgView.image = UIImage(named: castNameStr)
    }

从下载演示 Here

https://medium.com/better-programming/creating-a-context-menu-and-sf-symbol-in-swift-e45459f5f704