Change UIPopoverView background + arrow color

Question

Is there a way to simply change the UIPopoverView background color (including its arrow) on iOS8?

(I did read a couple of articles on customizing "UIPopoverControllers". Does this apply here too, meaning the answer is "no"?)

enter image description here

Isn't this something I should be able to address in the prepareForSegue method triggering the popover? How can I reach the according view to change its appearance?

score 61 · Accepted Answer · edited Jul 18 '20 at 07:18

61

I found the solution. Subclassing is not necessary anymore with iOS8! The background can be accessed and changed like this from within the tableview -> navigation -> popoverPresentationController

    self.navigationController?.popoverPresentationController?.backgroundColor = UIColor.redColor()

More information about this in WWDC session 2014.

edited Jul 18 '20 at 07:18

Satyam

15,493
31
131
244

answered Sep 10 '14 at 22:23

Bernd

11,133
11
65
98

I add this to viewDidLoad of the controller that invokes the popover and nothing happens. Where should this go? – Travis M. Oct 08 '15 at 17:33
@TravisM. the popoverPresentationController isn't available then. Try "viewWillAppear" instead. – Matthew Jan 03 '16 at 10:43
@Matthew, I did try that and it does not work. However, I can set `sourceRect` and `sourceView` at the same place. – vedrano Feb 12 '16 at 10:20
2

if your popover doesn't have a navigation controller then use `self.popoverPresentationController?.backgroundColor = UIColor.red` – Ely Feb 06 '17 at 19:25
1

this does not change arrow color – vishal dharankar Dec 14 '17 at 18:56
Is it working in iOS 15? – Coder_A_D Mar 23 '22 at 09:05

score 10 · Answer 2 · answered Jun 01 '16 at 09:08

You can simply modify popover like this:

    let popoverViewController = self.storyboard?.instantiateViewControllerWithIdentifier("popoverSegue")
    popoverViewController!.popoverPresentationController?.delegate = self
    popoverViewController!.modalPresentationStyle = .Popover


    let popoverSize = CGSize(width: 150, height: 60)
    popoverViewController!.preferredContentSize = popoverSize
    let popover = popoverViewController!.popoverPresentationController
    popover?.delegate = self
    popover?.permittedArrowDirections = .Up
    popover?.sourceView = self.view

    //change background color with arrow too!
    popover?.backgroundColor = UIColor.whiteColor()
    popover?.sourceRect = CGRect(x: self.view.frame.width, y: -10, width: 0, height: 0)
    presentViewController(popoverViewController!, animated: true, completion: nil)

score 6 · Answer 3 · answered Dec 13 '19 at 16:55

Seems like that popoverPresentationController.backgroundColor no longer works in iOS13.

Popover arrows now appear to take on the color of the popover viewController's view.backgroundColor.

Here's the whole code for the demo below:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if let sourceButton = sender as? UIButton, let popover = segue.destination.popoverPresentationController {
        popover.sourceView = sourceButton.superview
        popover.sourceRect = sourceButton.frame
        popover.permittedArrowDirections = [.left]
        popover.delegate = self
        segue.destination.preferredContentSize = CGSize(width: 100, height: 100)
        //popover.backgroundColor = sourceButton.tintColor  //old way
        segue.destination.view.backgroundColor = sourceButton.tintColor  //new way
    }
}

@IBAction func btnTap(_ sender: Any) {
    performSegue(withIdentifier: "popoverSegue", sender: sender)
}

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

score 3 · Answer 4 · answered Jul 02 '20 at 14:30

3

SwiftUI : Xcode 11.5

Add the .background modifier with the color and add .edgesIgnoringSafeArea modifier.

.popover(isPresented: self.$vm.presentMenu, content: {
        self.menuView
           .background(Color.bgGray.edgesIgnoringSafeArea(.all))
})

answered Jul 02 '20 at 14:30

Alexander

1,424
18
23

score 2 · Answer 5 · answered Feb 28 '20 at 18:17

Just adding that if you are using SwiftUI inside of a UIPopover or if you are using SwiftUI's popover modifier you can set the background color of the popover by just using a Color in the background, like as in a ZStack.

If you want the arrow colored you can add the .edgesIgnoringSafeArea(.all) modifier to the color in the background so it will extend into the arrow.

SwiftUI example:

import SwiftUI

struct PopoverTest: View {
    @State var showing: Bool = true
    var body: some View {
        Button("Show") {
            self.showing.toggle()
        }
        .popover(isPresented: $showing) {
            ZStack {
                Color.green.edgesIgnoringSafeArea(.all) // will color background and arrow
                Text("Popover!")
            }
        }
    }
}

struct PopoverTest_Previews: PreviewProvider {
    static var previews: some View {
        PopoverTest()
    }
}

Change UIPopoverView background + arrow color

5 Answers5

Linked