CODEWITHSUNDEEP
iosswift3
LNI
LNI

Reputation: 3181

Showing a popover partially off screen

I am trying to recreate the effect that YouTube mobile app on iOS has, when a video is playing in full-screen, landscape mode. Just the top part of a window (next/recommended videos) is visible, and swiping up shows them overlapped with video (that keeps running in background). Swiping down hides them again.

So I added the following code within my video controller that shows the video in landscape mode:

    private func showPopover() {
    let popoverController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "popoverController")

    popoverController.modalPresentationStyle = .popover
    popoverController.popoverPresentationController?.permittedArrowDirections = UIPopoverArrowDirection(rawValue: 0)
    popoverController.popoverPresentationController?.delegate = self
    let desiredWidth:CGFloat = 200
    let desiredHeight:CGFloat = 300

    // Initially it's at low right corner
    let origin = CGPoint(x: (self.view.superview?.frame.width)! - desiredWidth - 10, y: (self.view.superview?.frame.height)! - 10)
    let size = CGSize(width: desiredWidth, height: desiredHeight)
    popoverController.popoverPresentationController?.sourceRect = CGRect(origin: origin, size: size)
    popoverController.popoverPresentationController?.sourceView = popoverController.view
    self.present(popoverController, animated: true, completion: nil)
}

func adaptivePresentationStyle(for controller: UIPresentationController) -> UIModalPresentationStyle {
    return .none
}

The popover shows up fine, but is always completely on screen. I need it to be only partially visible (just the top 10 pixels, if possible). But something is preventing the view controller from being positioned that way.

screenshot

How do I move the popover so that only top 10 pixels are visible? It should look something like in the image below (note: this was generating by editing image, not programmatically):

desired state

Upvotes: 0

Views: 932

Answers (2)

LNI
LNI

Reputation: 3181

Found a way, and it's ridiculously easy (with hindsight, of course!). Changed the last line of showPopover function to:

        self.present(popoverController, animated: true) {
        popoverController.popoverPresentationController?.presentedView?.center = CGPoint(x: (self.view.superview?.frame.width)! - desiredWidth - 10, y: (self.view.superview?.frame.height)! + 100)
    }

I will get a specific number instead of using 100 but the view moves to this position without any issues.

Upvotes: 0

The Mach System
The Mach System

Reputation: 6963

Replace this:

popoverController.popoverPresentationController?.sourceView = popoverController.view

with this:

popoverController.popoverPresentationController?.sourceView = self.view

UPDATE

Ok I understand now. My answer would be it is not possible to only show some part of the popover.

My suggestion here is using UITableViewController as your popover and making its height just enough to show the first row, which is the text in this case.

Then, in optional func scrollViewDidScroll(_ scrollView: UIScrollView) delegate method, implement logics to detect swiping up to show and swiping down to hide.

Upvotes: 1

Related Questions