How to set two colors in navigation bar?

Question

Is there any way to split navigation bar into two parts or need to add any custom view, to add two colors in navigation bar like below-

If I put below code-

It applied on whole navigation bar, Not only left corner.

self.navigationController?.navigationBar.setBackgroundImage(UIImage(named: "triangle"),for:.default)

You have to show the community you tried something. Its a simple image. — Mojtaba Hosseini, Nov 21 '18 at 06:59
No, Its not a simple image. I put an image to overview, Actually on behalf of select a tableView cell, these both color will change. — iDeveloper, Nov 21 '18 at 07:03

score 3 · Answer 1 · answered Nov 21 '18 at 07:02

3

Sure, design your two-color image beforehand or draw it in code and call setBackgroundImage(_:for:barMetrics:).

https://developer.apple.com/documentation/uikit/uinavigationbar/1624968-setbackgroundimage

answered Nov 21 '18 at 07:02

matt

515,959
87
875
1,141

But I want to change both colors on the selection of the different cell, I can't put an image – iDeveloper Nov 21 '18 at 07:07
gradients ? @matt – Mohmmad S Nov 21 '18 at 07:18
When the selection changes change the image! – matt Nov 21 '18 at 07:23

score 1 · Answer 2 · answered Nov 21 '18 at 09:10

You have to change the background image of navigation bar like this:

if condition {
    navigationController?.navigationBar.setBackgroundImage(#imageLiteral(resourceName: "bg1"), for: .default)
} else {
    navigationController?.navigationBar.setBackgroundImage(#imageLiteral(resourceName: "bg2"), for: .default)
}

where bg1 is:

and bg 2 is:

and the result is:

Keep in mind:

You can color your image in code if you want more dynamic range of colors.
You can use multiple imageViews behind navigation bar and set colors un them. (One for left part and one for right). And hide the navigation bar background image. So the illusion looks same.

Rizwan · Answer 3 · 2018-11-21T07:41:07.993

You can draw required gradient (OR two distinct non-gradient color) image with swift code first and then set it to the header.

Creating an Image with an Image Renderer

Use the image(actions:) method to create an image (UIImage object) with an image renderer. https://developer.apple.com/documentation/uikit/uigraphicsimagerenderer https://developer.apple.com/library/archive/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/BezierPaths/BezierPaths.html

https://stackoverflow.com/a/30761714/8238512

To set created image above you already know

Use the above generated image to set in navigationBar

self.navigationController?.navigationBar.setBackgroundImage(< *useAboveGeneratedImage* >),for:.default)

score 0 · Answer 4 · answered Nov 21 '18 at 08:40

0

I would suggest to create a custom navigation bar. Make a UIView and add some delegates for back buttons, hamburger menu (if required).

answered Nov 21 '18 at 08:40

vinbhai4u

1,329
3
19
36

How to set two colors in navigation bar?

4 Answers4