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?

Achaean

that seems to work: #6868714 has been tried by this user: jslim.net/blog/2014/07/14/… – Wharf

Answer 1

For iOS 7+:

searchBar.backgroundImage = UIImage()

Otherwise this will work on all iOS versions:

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

Coefficient

The otherwise part should work for iOS 7+ too, according to this source: jslim.net/blog/2014/07/14/… – Wharf

Yeah you're right. However, I prefer the top one. It's cleaner and doesn't require you to have the color on hand. – Coefficient

Just did this 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)' – Achaean

@Achaean whoops. Try that. – Coefficient

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... – Achaean

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. – Achaean

Try the second one again. I couldn't remember if cgcolor was converted to a property as opposed to a function. – Coefficient

Top one does not work on ipad or ipod. Only the bottom one. – Carmel

Answer 2

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

Shew

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) – Trichinopoly

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 – Shew

yeah i got it working after like 8 hours... thanks anyways. upvoted yesterday – Trichinopoly

Answer 3

In Xcode 8.3 and Swift 3

1. Create an outlet from your search bar to your ViewController (I called mine searchBarOutlet for this example).

2. 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).

Braun

Answer 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)

Towrope

The question was Swift related, not C#. – Foresaid

Answer 5

in Xcode 13

select the search bar and change the search Style to Minimal

Boomer

Answer 6

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()

Thyme

Answer 7

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.

Independent

Answer 8

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

Pemmican