CODEWITHSUNDEEP
iosxcodeswift
Idris
Idris

Reputation: 1698

Remove border between View and Search Bar

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

enter image description here

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

enter image description here

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?

Upvotes: 23

Views: 25225

Answers (8)

M_Khater
M_Khater

Reputation: 109

in Xcode 13

select the search bar and change the search Style to Minimal

enter image description here

Upvotes: 4

simotunes
simotunes

Reputation: 187

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

Upvotes: 1

Vivek
Vivek

Reputation: 5213

Swift 4

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

Sample image

enter image description here

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 enter image description here

Upvotes: 8

Robac
Robac

Reputation: 425

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

Upvotes: 6

KJ Newtown
KJ Newtown

Reputation: 347

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

Upvotes: 3

Jacobo Koenig
Jacobo Koenig

Reputation: 12514

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.

Upvotes: 1

Eduardo Amaral
Eduardo Amaral

Reputation: 89

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)

Upvotes: 4

Oxcug
Oxcug

Reputation: 6604

For iOS 7+:

searchBar.backgroundImage = UIImage()

Otherwise this will work on all iOS versions:

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

Upvotes: 54

Related Questions