How to left align UISearchBar placeholder text

Question

This is the searchbar that the designers want me to create

I need to make a custom search bar like this. The problem I am having is left aligning the placeholder text, as well as placing the search icon in the right. I have a png of the search icon that I have tried to use in an UIImageView, and set that UIImageView as the rightView of the UISearchBar's UITextField. This solution has not worked, and I ran out of ideas. Does anyone have a solution?

Not sure about the alignment of the text, but you might consider making the search icon into a custom `UIButton`, placed on top of the search bar, that functions as an "Enter" button. I've encountered a few apps that do that, and I've always enjoyed having the option of not having to tap the search field, bring up the keyboard, and hit "Search" from there if I want to re-run the search. — Nerrolken, Dec 04 '13 at 19:19
I've answered this on a different question. Happy to receive feedback on how to improve it: http://stackoverflow.com/a/25827025/3746156 — bdv, Sep 13 '14 at 19:51

score 12 · Accepted Answer · answered Dec 04 '13 at 19:20

12

Don't use a UISearchBar if you need to do these kinds of customizations. You'll have to make your own using a UITextField and a UIImageView, and responding to the delegate calls.

answered Dec 04 '13 at 19:20

paulrehkugler

3,241
24
45

But note that UISearchController seems to require using an actual UISearchBar, or a subclass. – Pierre Houston Nov 18 '14 at 19:48
2

But I want all the other built-in functionality of the search bar (cancel and x button, e.g.) - I simply want to left align the the placeholder text - is that too much to ask? And why would that be so difficult to do? – jbyrd Jun 06 '16 at 22:55

score 2 · Answer 2 · answered Jun 02 '15 at 11:06

Based in Mohittomar answer, as asked by @DevC to add spaces to the end of the place holder, here the code in swift:

I subclass placeholder in the UISearchBar, after set the value, I check if the last character is a space. then get the size of one space and how many spaces I need to add to align left.

class SearchBar: UISearchBar, UISearchBarDelegate {
override var placeholder:String? {
    didSet {
        if let text = placeholder {
            if text.last != " " {

// get the font attribute
                let attr = UITextField.s_appearanceWhenContainedIn(SearchBar).defaultTextAttributes
// define a max size
                let maxSize = CGSizeMake(UIScreen.mainScreen().bounds.size.width - 60, 40)
// get the size of the text
                var widthText = text.boundingRectWithSize( maxSize, options: .UsesLineFragmentOrigin, attributes:attr, context:nil).size.width
// get the size of one space
                var widthSpace = " ".boundingRectWithSize( maxSize, options: .UsesLineFragmentOrigin, attributes:attr, context:nil).size.width
                let spaces = floor((maxSize.width - widthText) / widthSpace)
// add the spaces
                let newText = text + (" " * spaces)
// apply the new text if nescessary
                if newText != text {
                    placeholder = newText
                }
            }
        }
    }
}

score 2 · Answer 3 · edited May 23 '17 at 11:55

A working solution for Drix answer

import Foundation
import UIKit

class LeftAlignedSearchBar: UISearchBar, UISearchBarDelegate {
    override var placeholder:String? {
        didSet {
            if #available(iOS 9.0, *) {
                if let text = placeholder {
                    if text.characters.last! != " " {
                        // get the font attribute
                        let attr = UITextField.appearanceWhenContainedInInstancesOfClasses([LeftAlignedSearchBar.self]).defaultTextAttributes
                        // define a max size
                        let maxSize = CGSizeMake(UIScreen.mainScreen().bounds.size.width - 87, 40)
//                        let maxSize = CGSizeMake(self.bounds.size.width - 92, 40)
                        // get the size of the text
                        let widthText = text.boundingRectWithSize( maxSize, options: .UsesLineFragmentOrigin, attributes:attr, context:nil).size.width
                        // get the size of one space
                        let widthSpace = " ".boundingRectWithSize( maxSize, options: .UsesLineFragmentOrigin, attributes:attr, context:nil).size.width
                        let spaces = floor((maxSize.width - widthText) / widthSpace)
                        // add the spaces
                        let newText = text + ((Array(count: Int(spaces), repeatedValue: " ").joinWithSeparator("")))
                        // apply the new text if nescessary
                        if newText != text {
                            placeholder = newText
                        }
                    }
                }
            }
        }
    }
}

This method appearanceWhenContainedInInstancesOfClasses is not available in iOS 8, there is a workaround for iOS 8 here

score 2 · Answer 4 · answered Mar 02 '17 at 18:09

SWIFT 3

swift 3 does not allow to override placeholder property. This is the modified version of Drix answer.

func setPlaceHolder(placeholder: String)-> String
   {

       var text = placeholder
           if text.characters.last! != " " {

               //                         define a max size

               let maxSize = CGSize(width: UIScreen.main.bounds.size.width - 97, height: 40)

               //                        let maxSize = CGSizeMake(self.bounds.size.width - 92, 40)
               // get the size of the text
               let widthText = text.boundingRect( with: maxSize, options: .usesLineFragmentOrigin, attributes:nil, context:nil).size.width
               // get the size of one space
               let widthSpace = " ".boundingRect( with: maxSize, options: .usesLineFragmentOrigin, attributes:nil, context:nil).size.width
               let spaces = floor((maxSize.width - widthText) / widthSpace)
               // add the spaces
               let newText = text + ((Array(repeating: " ", count: Int(spaces)).joined(separator: "")))
               // apply the new text if nescessary
               if newText != text {
                   return newText
               }

           }

       return placeholder;
   }

and call the function as :

searchBar.placeholder = self.setPlaceHolder(placeholder: "your placeholder text");

my searchbar icon went out of search bar after 2-3 times resign keyboard. — guru, Jul 23 '18 at 13:11

score 2 · Answer 5 · answered May 31 '17 at 10:19

A working swift 3 solution for Drix answer:

import Foundation
    import UIKit

    class LeftAlignedSearchBar: UISearchBar, UISearchBarDelegate {
        override var placeholder:String? {
            didSet {
                if #available(iOS 9.0, *) {

                    if let text = placeholder {
                        if text.characters.last! != " " {
                            // get the font attribute
                            let attr = UITextField.appearance(whenContainedInInstancesOf: [LeftAlignedSearchBar.self]).defaultTextAttributes
                            // define a max size
                            let maxSize = CGSize(width: UIScreen.main.bounds.size.width - 87, height: 40)
                            // let maxSize = CGSize(width:self.bounds.size.width - 92,height: 40)
                            // get the size of the text
                            let widthText = text.boundingRect( with: maxSize, options: .usesLineFragmentOrigin, attributes:attr, context:nil).size.width
                            // get the size of one space
                            let widthSpace = " ".boundingRect( with: maxSize, options: .usesLineFragmentOrigin, attributes:attr, context:nil).size.width
                            let spaces = floor((maxSize.width - widthText) / widthSpace)
                            // add the spaces
                            let newText = text + ((Array(repeating: " ", count: Int(spaces)).joined(separator: "")))
                            // apply the new text if nescessary
                            if newText != text {
                                placeholder = newText
                            }
                        }
                    }
                }
            }
        }

        /*
        // Only override draw() if you perform custom drawing.
        // An empty implementation adversely affects performance during animation.
        override func draw(_ rect: CGRect) {
            // Drawing code
        }
        */

    }

score 0 · Answer 6 · answered Dec 04 '13 at 19:26

If you want your control to respond exactly how you want, you should probably make your own custom control. This control could be separated in three parts :

a background UIImageView
a UITextField
a UIButton for the the search icon if you want the user to interact with it

The easiest way to do that is probably to create a new class MySearchBar, with the three parts in the private interface :

@interface MySearchBar ()
@property (nonatomic, strong) UISearchBar* searchBar;
@property (nonatomic, strong) UITextField* textField;
@property (nonatomic, strong) UIButton* button;
@end

In your MySearchBar, you can create your component, customize it, add a better look & feel. To get back the search result, your control can have a delegate id<UISearchBarDelegate> (your UIViewController) which will basically simulate having a standard UISearchBar.

What remains is to create your MySearchBar in your controller and set the delegate to your view controller. The messages from the UISearchBarDelegate can either go to your MySearchBar to filter or do pre-treatment before sending to your UIViewController, or go directly to your UIViewController.

Thanks for the detailed answer, I will definitely be using this. — Chandler De Angelis, Dec 04 '13 at 19:43

score 0 · Answer 7 · answered Jun 05 '14 at 06:29

0

No need to any customization just do it...

    searchBar.placeholder=@"Search                                                        ";

searchbar has centeral text alignment for its place-hoder , so just give some big text. and if you text is small then just use some space after place-holder text.

answered Jun 05 '14 at 06:29

Mohit Tomar

5,173
2
33
40

3

if anyone down-vote any answer. first submit a correct answer. – Mohit Tomar Feb 23 '15 at 12:58
1

This works flawless only if you check the how many spaces you need and add dynamically. - overriding the placeholder var, and check the size of the text agains the size of the controller, than the size of one space. If some one want me to post the code, let me know. – Adriano Spadoni May 12 '15 at 16:58
1

Hey @DevC, I'll answer to be able to post the code, right now. – Adriano Spadoni Jun 02 '15 at 10:56
iOS 8 will trim the whitespace around the placeholder. – jbyrd Jun 06 '16 at 23:09

score 0 · Answer 8 · edited Mar 06 '17 at 09:13

Version for Xamarin

SearchBar.MovePlaceHolderLeft();

public static void MovePlaceHolderLeft(this UISearchBar  searchbar)
{
    NSAttributedString text = new NSAttributedString(searchbar.Placeholder ?? "");
    // define a max size
    var maxSize = new CGSize(width: UIScreen.MainScreen.Bounds.Size.Width - 97, height: 40);
    // get the size of the text
    var widthText = text.GetBoundingRect(maxSize, NSStringDrawingOptions.UsesLineFragmentOrigin, null).Size.Width;
    // get the size of one space
    var widthSpace = new NSAttributedString(" ").GetBoundingRect(maxSize, NSStringDrawingOptions.UsesLineFragmentOrigin, null).Size.Width;
    var spaces = Math.Floor((maxSize.Width - widthText) / widthSpace);
    // add the spaces
    string newText = searchbar.Placeholder;
    for (double i = 0; i < spaces; i++)
    {
        newText += " ";
    }
    searchbar.Placeholder = newText;
}

score 0 · Answer 9 · answered Aug 14 '19 at 18:57

0

it could be done from story board there is combo box with name semantic on attribute inspector of search bar if you set it to force right to left its done you have right align search bar and it has a similar thing for aligning from left

answered Aug 14 '19 at 18:57

cain

11
3

score -2 · Answer 10 · answered Feb 11 '16 at 09:43

It's too late, but if anyone is still wondering the solution, then you can follow this.

UITextField *searchTextField = [searchBarController.searchBar valueForKey:@"_searchField"];

You can get the search field using above code. Now simply use the properties you want to use, like.

searchTextField.layer.cornerRadius = 10.0f;
searchTextField.textAlignment = NSTextAlignmentLeft;

PS. Text alignment property is used for text and placeholder both. Thanks.

How to left align UISearchBar placeholder text

10 Answers10

Linked

Related