remove black border from UISearchController search bar swift - ios

I have a UISearchController in my tableView. Also note that there is a navigation item in the top.
My issue is that i have a black border in the top and bottom when I load the page, however, it is not present when I click the search bar.
Search bar on page load (with black border):
After clicking on search bar (no black border):
Here is the code related:
let searchController = UISearchController(searchResultsController: nil)
in viewDidLoad:
searchController.searchBar.barTintColor = UIColor.redColor()
searchController.searchBar.tintColor = UIColor.whiteColor()
I followed several similar questions and made the following changes after the above lines in viewDidLoad():
1) searchController.searchBar.backgroundImage = UIImage()
2) searchController.searchBar.searchBarStyle = UISearchBarStyle.Minimal
3) searchController.searchBar.layer.borderColor = UIColor.clearColor().CGColor
4)
searchBar.layer.borderWidth = 1
searchBar.layer.borderColor = UIColor.whiteColor().CGColor
None worked. Is this an issue with the order I am using the code, or how would I get rid of these lines?

Fixed this after a lot of search. Here's how i did it. In viewDidLoad, added the following lines:
self.searchController.searchBar.translucent = false
self.searchController.searchBar.backgroundImage = UIImage()
self.searchController.searchBar.barTintColor = UIColor.redColor()
self.searchController.searchBar.tintColor = UIColor.whiteColor()
After that in app.delegate file in didFinishLaunchingWithOptions added the following code:
let backgroundColor = UIColor.redColor()
let foregroundColor = UIColor.whiteColor()
UIApplication.sharedApplication().statusBarStyle = .LightContent
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().setBackgroundImage(backgroundColor.toImage(), forBarMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().tintColor = foregroundColor
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: foregroundColor]
Also need this extension on the app.delegate file (place outside of the class)
extension UIColor{
func toImage() -> UIImage {
let rect = CGRectMake(0, 0, 1, 1)
UIGraphicsBeginImageContextWithOptions(rect.size, true, 0)
self.setFill()
UIRectFill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
(Thanks to Noel for the extension taken from this answer)
And finally, the desired result:

I think it is the navigation bar you need to remove the border for.
How to hide iOS7 UINavigationBar 1px bottom line

For iOS 13 / Swift 5; the following line makes the trick:
UISearchBar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
Cheers!

Related

How to change search bar text color in iOS 11? [duplicate]

I want to change the color of the text and icon in the iOS 11 searchbar when it is embedded in the navigation bar. So placeholder text, search text and search icon.
if #available(iOS 11.0, *) {
navigationController?.navigationBar.prefersLargeTitles = false
let searchController = UISearchController(searchResultsController: nil)
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false
searchController.searchBar.placeholder = "Suchen"
searchController.searchBar.tintColor = .white
}
As you can see in the image, the text is grey on a deep blue background, which looks ugly. I want to text and icon to be at least white. (changing the blue background color also does not work really good, see my other question)
The only thing which works is changing the color of the blinking cursor and the "cancel" button, which is done with the .tintColor property.
Solutions which seems to work in iOS 10 and below seem not work anymore in iOS 11, so please post only solutions which you know working in iOS 11. Thanks.
Maybe I miss the point about this "automatic styling" in iOS 11. Any help is appreciated.
I just found out how to set also the rest of them: (with some help of Brandon, thanks!)
The "Cancel" text:
searchController.searchBar.tintColor = .white
The search icon:
searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.search, state: .normal)
The clear icon:
searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.clear, state: .normal)
The search text:
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [NSAttributedStringKey.foregroundColor.rawValue: UIColor.white]
Thanks for the help #Brandon!
The placeholder:
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).attributedPlaceholder = NSAttributedString(string: "placeholder", attributes: [NSAttributedStringKey.foregroundColor: UIColor.white])
The white background:
let searchController = UISearchController(searchResultsController: nil)
searchController.delegate = self
let searchBar = searchController.searchBar
searchBar.tintColor = UIColor.white
searchBar.barTintColor = UIColor.white
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.blue
if let backgroundview = textfield.subviews.first {
// Background color
backgroundview.backgroundColor = UIColor.white
// Rounded corner
backgroundview.layer.cornerRadius = 10;
backgroundview.clipsToBounds = true;
}
}
if let navigationbar = self.navigationController?.navigationBar {
navigationbar.barTintColor = UIColor.blue
}
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false
Taken from here.
Put
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
and
UISearchBar.appearance().tintColor = UIColor.white in the AppDelegate.
Alternatively, put them both in [UIViewController viewDidLoad:]
In addition to Darko's answer.
In my case I need to get pure white search textfield color.
Also I need a custom borderLine and cornerRadius.
So if I just set background color to white, set custom corner radius and custom border line I've got something like this.
The problem is that the search bar has some subviews and I've just removed them.
Here is my code:
#interface YourViewController () <UISearchBarDelegate, UISearchControllerDelegate>
// your properties
#property (nonatomic,strong) UISearchController *searchController;
#property (nonatomic,strong) UISearchBar *searchBar;
#end
- (void)viewDidLoad {
[super viewDidLoad];
_searchController = [[UISearchController alloc] initWithSearchResultsController:self.resultsTableController];
_searchController.delegate = self;
_searchController.searchBar.delegate = self;
_searchBar = self.searchController.searchBar;
if (#available(iOS 11.0, *)) {
UITextField *searchTextField = [_searchBar valueForKey:#"searchField"];
if (searchTextField != nil) {
searchTextField.layer.cornerRadius = 4.f;
searchTextField.layer.borderWidth = 1.f;
searchTextField.clipsToBounds = YES;
for (UIView *subView in searchTextField.subviews) {
[subView removeFromSuperview];
}
}
// Color for "Cancel" button
_searchBar.tintColor = [UIColor blackColor];
// Add searchController to navgationBar
_navigationItem.searchController = _searchController;
// Hide searchBar when scroll
_navigationItem.hidesSearchBarWhenScrolling = YES;
}
}
Now I've got a searchBar with pure white background, custom cornerRadius, custom border width. Also I've disabled grey highlight when tap.
Set Search Text Color
(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]) ).defaultTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
Set Search Placeholder Color
(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]) ).attributedPlaceholder = [NSForegroundColorAttributeName: UIColor.white]
my two cents for Swift 4.x, lightly cleaned up.
Add in controller or App Delegate:
appearance.backgroundColor = .green
let myFont = UIFont.italicSystemFont(ofSize: 12)
let attribs = [
NSAttributedString.Key(rawValue: NSAttributedString.Key.font.rawValue): myFont,
NSAttributedString.Key(rawValue: NSAttributedString.Key.foregroundColor.rawValue): UIColor.red
]
appearance.defaultTextAttributes = attribs
in controller:
self.searchBar.barTintColor = .blue
You will get Blue background, green search bar background, red italic font:
I tried Daroko solution, but i had a problem when changing the background to pure white color (it’s was grey).
My solution was to use the setSearchFieldBackgroundImage. also i don't want to rely on apple struct for getting the UITextField
if #available(iOS 11.0, *) {
let whiteImage = UIImage(color: UIColor.white, size: CGSize(width: searchController.searchBar.layer.frame.width, height: searchController.searchBar.layer.frame.height))
searchController.searchBar.setSearchFieldBackgroundImage(whiteImage, for: .normal)
self.navigationItem.searchController = searchController
self.navigationItem.hidesSearchBarWhenScrolling = true
}
public extension UIImage {
public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
let rect = CGRect(origin: .zero, size: size)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
color.setFill()
UIRectFill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
guard let cgImage = image?.cgImage else { return nil }
self.init(cgImage: cgImage)
} }
I used UIImage extension from :
Create UIImage with solid color in Swift
In case someone gets stuck wondering why Darkos solution doesn't work, try changing the UINavigationBar's style to default instead of black. Took me half a day to figure out ¯\_(ツ)_/¯
This code changes the background color of the text field
Swift 4
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
//background color of text field
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .cyan
}
edited: sample of a UISearchBar in cyan

iOS 11 customise search bar in navigation bar

I want to change the color of the text and icon in the iOS 11 searchbar when it is embedded in the navigation bar. So placeholder text, search text and search icon.
if #available(iOS 11.0, *) {
navigationController?.navigationBar.prefersLargeTitles = false
let searchController = UISearchController(searchResultsController: nil)
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false
searchController.searchBar.placeholder = "Suchen"
searchController.searchBar.tintColor = .white
}
As you can see in the image, the text is grey on a deep blue background, which looks ugly. I want to text and icon to be at least white. (changing the blue background color also does not work really good, see my other question)
The only thing which works is changing the color of the blinking cursor and the "cancel" button, which is done with the .tintColor property.
Solutions which seems to work in iOS 10 and below seem not work anymore in iOS 11, so please post only solutions which you know working in iOS 11. Thanks.
Maybe I miss the point about this "automatic styling" in iOS 11. Any help is appreciated.
I just found out how to set also the rest of them: (with some help of Brandon, thanks!)
The "Cancel" text:
searchController.searchBar.tintColor = .white
The search icon:
searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.search, state: .normal)
The clear icon:
searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.clear, state: .normal)
The search text:
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [NSAttributedStringKey.foregroundColor.rawValue: UIColor.white]
Thanks for the help #Brandon!
The placeholder:
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).attributedPlaceholder = NSAttributedString(string: "placeholder", attributes: [NSAttributedStringKey.foregroundColor: UIColor.white])
The white background:
let searchController = UISearchController(searchResultsController: nil)
searchController.delegate = self
let searchBar = searchController.searchBar
searchBar.tintColor = UIColor.white
searchBar.barTintColor = UIColor.white
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.blue
if let backgroundview = textfield.subviews.first {
// Background color
backgroundview.backgroundColor = UIColor.white
// Rounded corner
backgroundview.layer.cornerRadius = 10;
backgroundview.clipsToBounds = true;
}
}
if let navigationbar = self.navigationController?.navigationBar {
navigationbar.barTintColor = UIColor.blue
}
navigationItem.searchController = searchController
navigationItem.hidesSearchBarWhenScrolling = false
Taken from here.
Put
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
and
UISearchBar.appearance().tintColor = UIColor.white in the AppDelegate.
Alternatively, put them both in [UIViewController viewDidLoad:]
In addition to Darko's answer.
In my case I need to get pure white search textfield color.
Also I need a custom borderLine and cornerRadius.
So if I just set background color to white, set custom corner radius and custom border line I've got something like this.
The problem is that the search bar has some subviews and I've just removed them.
Here is my code:
#interface YourViewController () <UISearchBarDelegate, UISearchControllerDelegate>
// your properties
#property (nonatomic,strong) UISearchController *searchController;
#property (nonatomic,strong) UISearchBar *searchBar;
#end
- (void)viewDidLoad {
[super viewDidLoad];
_searchController = [[UISearchController alloc] initWithSearchResultsController:self.resultsTableController];
_searchController.delegate = self;
_searchController.searchBar.delegate = self;
_searchBar = self.searchController.searchBar;
if (#available(iOS 11.0, *)) {
UITextField *searchTextField = [_searchBar valueForKey:#"searchField"];
if (searchTextField != nil) {
searchTextField.layer.cornerRadius = 4.f;
searchTextField.layer.borderWidth = 1.f;
searchTextField.clipsToBounds = YES;
for (UIView *subView in searchTextField.subviews) {
[subView removeFromSuperview];
}
}
// Color for "Cancel" button
_searchBar.tintColor = [UIColor blackColor];
// Add searchController to navgationBar
_navigationItem.searchController = _searchController;
// Hide searchBar when scroll
_navigationItem.hidesSearchBarWhenScrolling = YES;
}
}
Now I've got a searchBar with pure white background, custom cornerRadius, custom border width. Also I've disabled grey highlight when tap.
Set Search Text Color
(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]) ).defaultTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
Set Search Placeholder Color
(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]) ).attributedPlaceholder = [NSForegroundColorAttributeName: UIColor.white]
my two cents for Swift 4.x, lightly cleaned up.
Add in controller or App Delegate:
appearance.backgroundColor = .green
let myFont = UIFont.italicSystemFont(ofSize: 12)
let attribs = [
NSAttributedString.Key(rawValue: NSAttributedString.Key.font.rawValue): myFont,
NSAttributedString.Key(rawValue: NSAttributedString.Key.foregroundColor.rawValue): UIColor.red
]
appearance.defaultTextAttributes = attribs
in controller:
self.searchBar.barTintColor = .blue
You will get Blue background, green search bar background, red italic font:
I tried Daroko solution, but i had a problem when changing the background to pure white color (it’s was grey).
My solution was to use the setSearchFieldBackgroundImage. also i don't want to rely on apple struct for getting the UITextField
if #available(iOS 11.0, *) {
let whiteImage = UIImage(color: UIColor.white, size: CGSize(width: searchController.searchBar.layer.frame.width, height: searchController.searchBar.layer.frame.height))
searchController.searchBar.setSearchFieldBackgroundImage(whiteImage, for: .normal)
self.navigationItem.searchController = searchController
self.navigationItem.hidesSearchBarWhenScrolling = true
}
public extension UIImage {
public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
let rect = CGRect(origin: .zero, size: size)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
color.setFill()
UIRectFill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
guard let cgImage = image?.cgImage else { return nil }
self.init(cgImage: cgImage)
} }
I used UIImage extension from :
Create UIImage with solid color in Swift
In case someone gets stuck wondering why Darkos solution doesn't work, try changing the UINavigationBar's style to default instead of black. Took me half a day to figure out ¯\_(ツ)_/¯
This code changes the background color of the text field
Swift 4
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
//background color of text field
UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .cyan
}
edited: sample of a UISearchBar in cyan

Navigation Controller Black when trying to make transparent

Completely stumped. I've looked all over and implemented every solution I could find. I can't seem to get the navigation bar to become transparent.
When trying to set the background color, I just get a black bar at the top. Same as if I try to set the background images. I've tried all of these and all of there many variations.
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor.clear
I'm using it in
viewWillAppear() and in an animation when scrolling. The navigation bar is transparent, and then as you scroll navigation bar gets a white background with gray text.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
self.navigationController?.navigationBar.barStyle = .default
let offset = self.tableView.contentOffset.y
if offset > 250.0 {
self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.darkGray]
self.navigationController?.navigationBar.topItem?.title = spot!.Name
self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.tintColor = UIColor.darkGray
self.navigationController?.isNavigationBarHidden = false
self.navigationController?.navigationBar.barTintColor = UIColor.white
}
else {
self.navigationController?.navigationBar.topItem?.title = nil
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.isNavigationBarHidden = false
self.navigationController?.navigationBar.tintColor = UIColor.white
self.navigationController?.navigationBar.barTintColor = UIColor.white
self.navigationController?.navigationBar.shadowImage = UIImage()
}
}
I've also tried setting the background color to white, and changing the alpha = 0, but that doesn't work either.
Any help greatly appreciated.
This is because the window's background color is black and
You should set window?.backgroundColor = UIColor.white
in the AppDelegate application didFinishLauchingWithOptions method

How to make navigation bar transparent in iOS 10

I have the following code to make the navigation bar transparent but while still displaying the back button, this works on all versions of iOS but its stopped working with the iOS 10 beta
navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
navigationBar.shadowImage = UIImage()
navigationBar.isTranslucent = true
Has something changed with iOS 10 in this area?
Note its not possible to use navigationBar.isHidden as this would result in the navigation bar back button and title etc. disappearing also.
I don't know what has changed in iOS 10 to stop the previous code from working, but to fix it I created a transparent image (it only needs to be one pixel in dimension) and used the following code to make the navigation bar transparent (but still showing the back navigation button).
let transparentPixel = UIImage(named: "TransparentPixel")
navigationBar.setBackgroundImage(transparentPixel, for: UIBarMetrics.default)
navigationBar.shadowImage = transparentPixel
navigationBar.backgroundColor = UIColor.clear()
navigationBar.isTranslucent = true
Incidentally, if you want to change the color of the navigation bar, you can use the same principle:
let redPixel = UIImage(named: "RedPixel")
navigationBar.setBackgroundImage(redPixel, for: UIBarMetrics.default)
navigationBar.shadowImage = redPixel
navigationBar.isTranslucent = false
The solution #Essence provided works perfectly!
This is what I am using even to create the 1px transparent image by code:
class MainClass: UIViewController {
let transparentPixel = UIImage.imageWithColor(color: UIColor.clear)
override func viewWillAppear(_ animated: Bool) {
drawCustomNavigationBar()
}
func drawCustomNavigationBar() {
let nav = (self.navigationController?.navigationBar)!
nav.setBackgroundImage(transparentPixel, for: UIBarMetrics.default)
nav.shadowImage = transparentPixel
nav.isTranslucent = true
}
}
extension UIImage {
class func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRect(origin: CGPoint(x: 0, y:0), size: CGSize(width: 1, height: 1))
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()!
context.setFillColor(color.cgColor)
context.fill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
Swift 3.x
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = .clear
self.navigationController?.navigationBar.isTranslucent = true

Convert remove navigationBar border to swift

i'm trying to remove the navigationBar border in swift. This is done by using following code in objective-c:
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];
[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault]
How can this be done in swift?
i've tried this, but not working:
UINavigationBar.appearance().shadowImage = UIImage(named: "")
UINavigationBar.appearance().setBackgroundImage(UIImage(named: ""), forBarMetrics: UIBarMetrics.Default)
Try this:
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
To change the background, text and icons colors, and also remove the border/shadow of the navigation bar via the appearance proxy, insert this code in the didFinishLaunchingWithOptions: of AppDelegate:
// our colors
let backgroundColor = UIColor.blueColor()
let foregroundColor = UIColor.whiteColor()
// status bar text color (.LightContent = white, .Default = black)
UIApplication.sharedApplication().statusBarStyle = .LightContent
// solid or translucent background?
UINavigationBar.appearance().translucent = false
// remove bottom shadow
UINavigationBar.appearance().shadowImage = UIImage()
// background color
UINavigationBar.appearance().setBackgroundImage(backgroundColor.toImage(), forBarMetrics: UIBarMetrics.Default)
// controls and icons color
UINavigationBar.appearance().tintColor = foregroundColor
// text color
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: foregroundColor]
Note: As you can see, we need to convert the UIColor to UIImage, so you can use this extension:
extension UIColor{
func toImage() -> UIImage {
let rect = CGRectMake(0, 0, 1, 1)
UIGraphicsBeginImageContextWithOptions(rect.size, true, 0)
self.setFill()
UIRectFill(rect)
var image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
Use it like this: UIColor.redColor().toImage()
I have used the below code to remove the navigation bar shadow from the app.
self.navigationController?.navigationBar.clipsToBounds = true

Resources