如何在我自己的应用程序中实现 Apple Music 中的迷你播放器？

Question

Apple introduced a new UI in Apple Music on iOS 8.4.

When an audio track begins to play, a miniplayer appears just above the tab bar, and it can be brought into full screen mode my dragging it up or tapping on it.

I imagine this is using the UIViewController containment APIs. Where can I start with my own implementation?

How might I implement something similar?

Answer 1

Funnily enough, I came across a framework that implemented this earlier this week. Give LNPopupController a look. It implements the behavior you're looking for (showing a mini bar, then tapping or dragging to present a view controller). If it doesn't quite fit your needs, maybe it can at least provide a starting point for you to implement your own thing.

Answer 2

Add a container view in your root view controller, for Apple Music uiTabBar controller.

func configureContainer() {
        
        // add container
        containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(containerView)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            containerView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: g.trailingAnchor),
            containerView.bottomAnchor.constraint(equalTo: tabBar.topAnchor),
            containerView.heightAnchor.constraint(equalToConstant: 64.0)
        ])
        
        // add child view controller view to container
        miniPlayer = MiniPlayerViewController()
        guard let miniPlayer = miniPlayer else { return }
        addChild(miniPlayer)
        miniPlayer.view.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(miniPlayer.view)
        
        
        // Create and activate the constraints for the child’s view.
        guard let miniPlayerView = miniPlayer.view else { return }
        NSLayoutConstraint.activate([
            miniPlayerView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            miniPlayerView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            miniPlayerView.topAnchor.constraint(equalTo: containerView.topAnchor),
            miniPlayerView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
        ])
        
        miniPlayer.didMove(toParent: self)
    }

In my case, I want to hide miniPlayer in one specific VC, so I use NotificationCenter to do it. Register a notification in root viewController.

NotificationCenter.default.addObserver(self, selector: #selector(miniPlayerVisibilityNeedsChange(notify:)), name: NSNotification.Name("miniPlayerVisibilityNeedsToBeUpdate"), object: nil)

Post it in your specific VC, that's it!

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        // hide miniPlayer for this vc
        NotificationCenter.default.post(name: NSNotification.Name("miniPlayerVisibilityNeedsToBeUpdate"), object: false)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        // show miniPlayer again when leaving this vc
        NotificationCenter.default.post(name: NSNotification.Name("miniPlayerVisibilityNeedsToBeUpdate"), object: true)
    }