Customise UISearchBar in Swift.

The UISearchBar class have textField control to text based search. The control providing a textfield for text search, a search button , cancel button , search symbol in search textfield. Search have its own delegate known as UISearchBar Delegate. But here only discuss about customise of UISearchBar.



This tutorial providing the code about the customisation of UISearchBar in swift.

Change placeholder color : 

Way 1 : code to change placeholder of textField of UISearchBar.
let placeholderAttributes: [String : AnyObject] = [NSForegroundColorAttributeName: UIColor.greenColor(), NSFontAttributeName: UIFont.systemFontOfSize(UIFont.systemFontSize())]
let attributedPlaceholder: NSAttributedString = NSAttributedString(string: "Search", attributes: placeholderAttributes)
let textFieldPlaceHolder = searchBarCustom.valueForKey("searchField") as? UITextField
textFieldPlaceHolder?.attributedPlaceholder = attributedPlaceholder


Way 2 : code to change placeholder of textField of UISearchBar.
let placeholderAttributes: [String : AnyObject] = [NSForegroundColorAttributeName: UIColor.blueColor(), NSFontAttributeName: UIFont.systemFontOfSize(UIFont.systemFontSize())]
let attributedPlaceholder: NSAttributedString = NSAttributedString(string: "Search", attributes: placeholderAttributes)
UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).attributedPlaceholder = attributedPlaceholder



Change textColor of  Search TextField :

Way 1 : Make one extension of UISearchBar to change color of textSearch. See the extension code. 
extension UISearchBar {
    public func setSerchTextcolor(color: UIColor) {
        let clrChange = subviews.flatMap { $0.subviews }
        guard let sc = (clrChange.filter { $0 is UITextField }).first as? UITextField else { return }
        sc.textColor = color
    }
}
Now Apply the code on UISearchBar.
searchBarCustom.setSerchTextcolor(UIColor.redColor())


Way 2 : direct fetch subview and change color of textSearch of UISearchBar.
let textFieldInsideSearchBar = searchBarCustom.valueForKey("searchField") as? UITextField
textFieldInsideSearchBar?.textColor = UIColor.orangeColor()


Way 3 : You can also change textcolor of UISearchBar using user define runtime attribute. so select your searchBar and click on identity inspector. set below value in user define runtime attribute.

KeyPath   : searchField.textColor
Type         : Color
Value       : RGB value from color Picker.



Change in Search iCon :

Way 1 : Change the color of search icon.
let textFieldInsideSearchBar = searchBarCustom.valueForKey("searchField") as? UITextField
let imageV = textFieldInsideSearchBar?.leftView as! UIImageView
imageV.image = imageV.image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
imageV.tintColor = UIColor.purpleColor()


Way 2 : Change the image of Search icon.
UISearchBar.appearance().setImage(UIImage(named: "new_search_icon"), forSearchBarIcon: UISearchBarIcon.Search, state: UIControlState.Normal)


 Change title and title color of Cancel Button :

UISearchBar have default title is Cancel, Here title change Cancel to Delete and also change color of Delete button.
UIBarButtonItem.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).title = "Delete"
UIBarButtonItem.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).tintColor = UIColor.orangeColor()


Change clear iCon in Search textField :  

Code for change image of clear button.
searchBarCustom.setImage(UIImage(named: "clear_button.png"), forSearchBarIcon: .Clear, state: UIControlState.Normal)





Please comment for more improve the document. I changed according to comment. Any missing you find also comment.

Thanks.

Customise UISearchBar in Swift. Customise UISearchBar in Swift. Reviewed by Kirit Modi on 00:39:00 Rating: 5

No comments:

Powered by Blogger.