CODEWITHSUNDEEP
iosobjective-cuiviewios7uisearchbar
klcjr89
klcjr89

Reputation: 5902

How to add a 1 pixel gray border around a UISearchBar TextField

I'm trying to figure out how to add a 1 pixel stroke gray border to my UISearchBar in my app. The Facebook Messenger app accomplishes this quite well. (see pic below).

I know there is a background image property of UISearchBar, but I believe that is not the right thing to use, as it stretches the image out and repeats it across the entire view of the search bar.

I'd greatly appreciate pointers in the right direction.

enter image description here

Upvotes: 14

Views: 8825

Answers (6)

Rashid Latif
Rashid Latif

Reputation: 2901

Swift 5

Easy way to do

    @IBOutlet private weak var searchBar:UISearchBar!{
        didSet{
            if let searchTextfield = self.searchBar.value(forKey: "searchField") as? UITextField  {
                searchTextfield.layer.borderColor = UIColor.lightGray.cgColor
                searchTextfield.layer.borderWidth = 1
                searchTextfield.layer.cornerRadius = 10
            }
        }
    }

enter image description here

Upvotes: 4

Michael Dautermann
Michael Dautermann

Reputation: 89549

I upvoted Yaroslav's answer but it's broken as of iOS 13. Here is what works today:

    func changeSearchBarAppearance() {
        var searchTextField : UITextField?
        if #available(iOS 13, *) {
            // brand new searchTextField is available as of iOS 13
            searchTextField = searchBar.searchTextField
        } else {
            // Yaroslav's answer still works in iOS versions less than 13
            // here's a slightly different implementation:
            if let matchingTextField = searchBar.subviews[0].subviews.compactMap ({ $0 as? UITextField }).first {
                searchTextField = matchingTextField
            }
        }

        guard let validTextField = searchTextField else {
            return
        }

        validTextField.layer.cornerRadius = 16
        validTextField.layer.borderWidth = 1.0
        validTextField.layer.borderColor = UIColor.grey.cgColor
        validTextField.backgroundColor = .white
        validTextField.placeholder = "insert-some-placeholder-text"
    }

Upvotes: 2

Yaroslav Bai
Yaroslav Bai

Reputation: 1086

Swift 3 version

override func viewDidLoad() {
    super.viewDidLoad()

    for s in searchBar.subviews[0].subviews {
        if s is UITextField {
            s.layer.borderWidth = 1.0
            s.layer.borderColor = UIColor.gray.cgColor
        }
    }
}

To make it round you can use textField.layer.cornerRadius property

Upvotes: 11

iOS Dev
iOS Dev

Reputation: 4248

Try this code:

//First add the following import and macro:
#import <QuartzCore/QuartzCore.h>
#define SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(v) ([[[UIDevice currentDevice] systemVersion] compare:v options:NSNumericSearch] != NSOrderedAscending)

//Then change yourSearchBar border: 
if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0"))
{
    for (id object in [[[yourSearchBar subviews] objectAtIndex:0] subviews])
    {
        if ([object isKindOfClass:[UITextField class]])
        {
            UITextField *textFieldObject = (UITextField *)object;
            textFieldObject.layer.borderColor = [[UIColor grayColor] CGColor];
            textFieldObject.layer.borderWidth = 1.0;
            break;
        }
    }
}
else
{
    for (id object in [yourSearchBar subviews])
    {
        if ([object isKindOfClass:[UITextField class]])
        {
            UITextField *textFieldObject = (UITextField *)object;
            textFieldObject.layer.borderColor = [[UIColor grayColor] CGColor];
            textFieldObject.layer.borderWidth = 1.0;
            break;
        }
    }
}

Upvotes: 12

fabrizotus
fabrizotus

Reputation: 2978

This work fine:

UITextField *txtSearchField = [yourSearchBar valueForKey:@"_searchField"];
[txtSearchField setBorderStyle:UITextBorderStyleRoundedRect];
txtSearchField.layer.cornerRadius = 4;
txtSearchField.layer.borderWidth = 1.0f;
txtSearchField.layer.borderColor = [[UIColor colorWhatYouWant] CGColor];

do not forget #import <QuartzCore/QuartzCore.h>

Upvotes: 3

R00We
R00We

Reputation: 1981

try this

self.poundsTxt.layer.borderColor = [[UIColor whiteColor]CGColor];
self.poundsTxt.layer.borderWidth=2.0;

import Quartz Core Framework Reference into your project and add import <QuartzCore/QuartzCore.h> to your ViewController.m to work borderColor and borderWidth.

Upvotes: 2

Related Questions