Remove border between View and Search Bar

Question

So in Xcode I'm trying to create a seamless search bar. So I'm trying to replicate something like this

Note how the status bar is the same color as the search bar. Now here's the result to my approach.

What I did was add a View to cover up the default status bar with the blue background. Then I added a search bar and changed it's background to blue. For some reason I end up getting a black border between the two, which ruins the "seamless" design. Any ideas on how I can remove the black border in Swift?

that seems to work: https://stackoverflow.com/questions/6868214/remove-the-1px-border-under-uisearchbar/6868227#6868227 has been tried by this user: http://jslim.net/blog/2014/07/14/remove-the-1px-shadow-from-uisearchbar/ — TurboFish, Jul 25 '15 at 22:16

Oxcug · Accepted Answer · 2015-07-25T23:08:10.467

54

For iOS 7+:

searchBar.backgroundImage = UIImage()

Otherwise this will work on all iOS versions:

searchBar.layer.borderWidth = 1
searchBar.layer.borderColor = thatBlueColor.CGColor

edited Jul 25 '15 at 23:08

answered Jul 25 '15 at 22:16

Oxcug

6,524
2
31
46

The otherwise part should work for iOS 7+ too, according to this source: http://jslim.net/blog/2014/07/14/remove-the-1px-shadow-from-uisearchbar/ – TurboFish Jul 25 '15 at 22:18
Yeah you're right. However, I prefer the top one. It's cleaner and doesn't require you to have the color on hand. – Oxcug Jul 25 '15 at 22:20
Just did [this](http://pastebin.com/kypF0JTw) but I still get the border. Also when doing the first one I get an error: `Cannot invoke 'setBackgroundImage' with an argument list of type '(UIImage)'` – Idris Jul 25 '15 at 22:55
@Idris whoops. Try that. – Oxcug Jul 25 '15 at 22:57
1

I then end up getting `Invalid use of '()' to call a value of non-function type 'CGColor'`. I'm using Swift 2, if that makes a difference... – Idris Jul 25 '15 at 23:03
Also I just gave the first one a shot, which doesn't toss an error, but it returns a white search bar, instead of the desired color via interface builder. – Idris Jul 25 '15 at 23:06
Try the second one again. I couldn't remember if cgcolor was converted to a property as opposed to a function. – Oxcug Jul 25 '15 at 23:08
Top one does not work on ipad or ipod. Only the bottom one. – TM Lynch Feb 28 '20 at 20:28

score 8 · Answer 2 · edited Jun 20 '20 at 09:12

8

Swift 4

searchBar.barTintColor = UIColor.white
searchBar.setBackgroundImage(UIImage.init(), for: UIBarPosition.any, barMetrics: UIBarMetrics.default)

Sample image

Upate Sample code for navigation bar and search bar background color:

Navigation bar color

self.navigationController?.navigationBar.barTintColor = .blue

Search bar color

searchBarProperty.backgroundColor = self.navigationController?.navigationBar.barTintColor

Note : Navigation bar and search bar color must be same.

Sample image with blue navigation bar and blue search bar

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 04 '18 at 05:18

Vivek

4,916
35
40

this only seems to work for a white navigation bar. i'm trying it with a dark blue one and it still comes out white like in yours (and yes i have changed the barTintColor parameter) – David Seek Jul 22 '18 at 21:12
You should check navigation bar and search bar color,If both color are not same then you need to change navigation bar color and searchbar color, Please check my updated answer – Vivek Jul 23 '18 at 05:56
yeah i got it working after like 8 hours... thanks anyways. upvoted yesterday – David Seek Jul 23 '18 at 14:51

score 6 · Answer 3 · answered Aug 16 '17 at 12:41

In Xcode 8.3 and Swift 3

Create an outlet from your search bar to your ViewController (I called mine searchBarOutlet for this example).
Below viewDidLoad insert the following.

self.searchBarOutlet.backgroundImage = UIImage()

You should have the following:

    override func viewDidLoad() {
    super.viewDidLoad()

         self.searchBarOutlet.backgroundImage = UIImage()

When you run your app the lines will be gone (they will still be visible on storyboard).

score 4 · Answer 4 · edited Sep 03 '15 at 15:09

4

In my case, beyond the edge of search bar needed to take the edge off also the navigation bar.

C# code:

NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.SetBackgroundImage (new UIImage (), UIBarMetrics.Default);

Swift code:

self.navigationController.navigationBar.shadowImage = UIImage()
self.navigationController.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)

edited Sep 03 '15 at 15:09

Kirsteins

27,065
8
76
78

answered Sep 03 '15 at 12:44

Eduardo Amaral

79
7

1

The question was Swift related, not C#. – Michael Dorner Sep 03 '15 at 12:59

score 2 · Answer 5 · edited Apr 17 '17 at 21:19

2

The best solution to remove top and bottom default borders is:

To set a new empty searchBar background layout in viewDidLoad for example:

searchBar.backgroundImage = UIImage()

edited Apr 17 '17 at 21:19

David L

32,885
8
62
93

answered Apr 17 '17 at 20:58

KJ Newtown

328
1
16

score 2 · Answer 6 · answered Oct 23 '22 at 20:16

2

in Xcode 13

select the search bar and change the search Style to Minimal

answered Oct 23 '22 at 20:16

M_Khater

49
4

score 1 · Answer 7 · answered Oct 13 '16 at 15:43

1

I found these answers to be more complicated than they needed to be. You can just modify the constraint that is binding the searchBar view and the other view to -1pts so that it overlaps exactly by the height of the searchBar's margin.

answered Oct 13 '16 at 15:43

Jacobo Koenig

11,728
9
40
75

score 1 · Answer 8 · answered Nov 16 '18 at 09:51

I encountered the same situation when I set the statusBar and searchBar translucent. In this situation, I couldn't resolve with the answers written here however I could solve by the following approach.

put UIVisualEffectView on self.view (view of your VC)
make custom class of searchBar, which background is transparent
(also let statusBar transparent)

(swift4 code)

    class TransparentSearchBar: UISearchBar {
        override init(frame: CGRect) {
            super.init(frame: frame)
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            makeTransparentBackground()
        }

        private func makeTransparentBackground() {
            for view in self.subviews {
                view.backgroundColor = UIColor.clear
                for subview in view.subviews {
                    if let imageview = subview as? UIImageView {
                        imageview.image = nil
                    }
                }
            }
        }

    }

somewhere in viewDidLoad (statusBar)

    let statusWindow = UIApplication.shared.value(forKey:"statusBarWindow") as! UIView
    let statusBar = statusWindow.subviews[0] as UIView
    statusBar.backgroundColor = UIColor.clear

Remove border between View and Search Bar

8 Answers8

Swift 4

Note : Navigation bar and search bar color must be same.

Linked