how to change UISearchBar from round to rectangle?

Question

i will like to know how do i need to change a UISearchBar from the default round curve to a rectangle.

Answer 1

    for (UIView *searchBarSubview in [mySearchBar subviews]) {
        if ([searchBarSubview conformsToProtocol:@protocol(UITextInputTraits)]) {
            @try {

                [(UITextField *)searchBarSubview setBorderStyle:UITextBorderStyleRoundedRect];
            }
            @catch (NSException * e) {
                // ignore exception
            }
        }
    }

Swift 4:

mySearchBar.subviews().forEach { searchBarSubview in
  if searchBarSubview is UITextInputTraits {
    do {
        (searchBarSubview as? UITextField)?.borderStyle = .roundedRect
    } catch {
        // ignore exception
    }
  }
}

Answer 2

Simple add background image, left view and right view for your TextField.

Example below

UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 10., nameField.bounds.size.height)];
nameField.leftView = leftView;
nameField.leftViewMode = UITextFieldViewModeAlways;
leftView release];

Answer 3

UISearchBar has the round curve, and it is fix if you like to make it rectangle you have to use custom search bar with rectangular image as like of search bar and 1 uibutton and UItextfield, and your own searching logic

Answer 4

Much better in my opinion:

UITextField *txfSearchField = [_searchBar valueForKey:@"_searchField"];
txfSearchField.borderStyle = UITextBorderStyleNone;

Answer 5

In the target image I don't see the default shadow, so I'll mention that setting the background property to nil will remove it. I needed to do this in my project and removing the image and manipulating the border works well. I had to cast the control to get to the background property.

UITextField * x = (UITextField*)searchBarSubview;
x.background = nil;

@Keller thanks for the tip for finding the control.

Answer 6

I would use a UIView, with these features:
- set your frame.
- import CoreGraphics in your class
- set a white background of the view
- set view.layer.cornerRadius=10;
- set view.layer.borderWidth=8;
- set view.layer.borderColor=[UIColor blackColor].CGColor;
- insert a label(with a clear background) inside the created view
For the button on the left i would use an uiimage, for the right button set textField.clearButtonMode= UITextFieldViewModeAlways;

Hope this helps.

Answer 7

Why not use the UIAppearance protocol?

[[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setBorderStyle:UITextBorderStyleRoundedRect];

Answer 8

In our earlier project we also tried to implement in such manner but customization is not possible.

Answer 9

Could you try this.

    for (UIView *searchBarSubview in [search_bar subviews]) {
        if ([searchBarSubview conformsToProtocol:@protocol(UITextInputTraits)]) {
            if([searchBarSubview isKindOfClass:[UITextField class]])
            {
                [(UITextField *)searchBarSubview setBorderStyle:UITextBorderStyleRoundedRect];
            }
        }
    }

Answer 10

I also recently achieved this in a project by traversing the subviews of the UISearchBar object. However, the text field was not an immediate child as the accepted answer suggested, but a subview of another subview of it. The inner view hierarchy was probably changed at some point. (SDK 8.4)

+ (void)setSearchBar:(UISearchBar *)searchBar cornerRadius:(CGFloat)radius {
    //set searchbar corner radius
    for(UIView *possibleSearchBarTextFieldSuperview in [searchBar subviews]) {
        if([[possibleSearchBarTextFieldSuperview subviews] count] > 0) {
            for(UIView *possibleInnerSearchBarTextField in [possibleSearchBarTextFieldSuperview subviews]) {
                if([possibleInnerSearchBarTextField conformsToProtocol:@protocol(UITextInputTraits)]) {
                    possibleInnerSearchBarTextField.layer.cornerRadius = radius;
                    possibleInnerSearchBarTextField.layer.masksToBounds = YES;
                    return;
                }
            }
        }
    }
}

This method does not use any undocumented methods so it's probably App Store safe, although it is susceptible to stop working with future changes to the SDK.

Answer 11

Swift 3

    let textFieldInsideUISearchBar = searchBar.value(forKey: "searchField") as? UITextField
    textFieldInsideUISearchBar?.borderStyle = .none
    textFieldInsideUISearchBar?.backgroundColor = UIColor.white

Answer 12

The way that it worked with me on Swift 4 is to Subclass the UISearchBar and make the necessary adjustment there without any kind of hacking or workaround ... I have used the Subclass used in this tutorial and it worked like charm

Here is the code from the example used

//
//  SearchBar.swift
//  Yomu
//
//  Created by Sendy Halim on 9/3/17.
//  Copyright © 2017 Sendy Halim. All rights reserved.
//

import Foundation
import UIKit

class SearchBar: UISearchBar {
  override func willMove(toSuperview newSuperview: UIView?) {
    super.willMove(toSuperview: newSuperview)

    searchBarStyle = .minimal

    // Create search icon
    let searchIcon = UIImageView(image: #imageLiteral(resourceName: "search"))
    let searchImageSize = searchIcon.image!.size
    searchIcon.frame = CGRect(x: 0, y: 0, width: searchImageSize.width + 10, height: searchImageSize.height)
    searchIcon.contentMode = UIViewContentMode.center

    // Configure text field
    let textField = value(forKey: "_searchField") as! UITextField
    textField.leftView = searchIcon
    textField.borderStyle = .none
    textField.backgroundColor = UIColor(hex: "#F7F7F7")
    textField.clipsToBounds = true
    textField.layer.cornerRadius = 6.0
    textField.layer.borderWidth = 1.0
    textField.layer.borderColor = textField.backgroundColor!.cgColor
    textField.textColor = UIColor(hex: "#555555")
  }
}