Styjun

I'm trying to make my search bar look like this

A white background with a thin grey border.

On Xcode, I can set Search style to default (which gives the white background) and Bar tint to grey (which gives the grey border.)

But the result I get is this

How do I change the thickness of the bar to reflect the design I'm going for?

(also, is there a way to change just the font of the search bar? I only found ways to change the font size)

Follow this below steps -

1.Choose UITextField from the object library

2.Drag to your storyboard

3.Choose border style as none.

4.Create a Swift file and add this below extension -

extension UIView 

 @IBInspectable var cornerRadius: CGFloat 

 get 

 return layer.cornerRadius

 

 set 

 layer.cornerRadius = newValue

 layer.masksToBounds = newValue > 0

 



 @IBInspectable var borderWidth: CGFloat 

 get 

 return layer.borderWidth

 

 set 

 layer.borderWidth = newValue

 



 @IBInspectable var borderColor: UIColor? 

 get 

 return UIColor(cgColor: layer.borderColor!)

 

 set 

 layer.borderColor = newValue?.cgColor

 

 





extension UIButton 

 func roundedButton()

 let maskPAth1 = UIBezierPath(roundedRect: self.bounds,

 byRoundingCorners: [.topLeft , .topRight],

 cornerRadii:CGSize(width:8.0, height:8.0))

 let maskLayer1 = CAShapeLayer()

 maskLayer1.frame = self.bounds

 maskLayer1.path = maskPAth1.cgPath

 self.layer.mask = maskLayer1

 



extension UITextField 

 func setLeftPaddingPoints(_ amount:CGFloat)

 let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))

 self.leftView = paddingView

 self.leftViewMode = .always


 func setRightPaddingPoints(_ amount:CGFloat) 
 let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))
 self.rightView = paddingView
 self.rightViewMode = .always
 


extension UITextField 

 @IBInspectable var maxLength: Int 
 get 
 if let length = objc_getAssociatedObject(self, &kAssociationKeyMaxLength) as? Int 
 return length
 else 
 return Int.max
 
 
 set 
 objc_setAssociatedObject(self, &kAssociationKeyMaxLength, newValue, .OBJC_ASSOCIATION_RETAIN)
 addTarget(self, action: #selector(checkMaxLength), for: .editingChanged)
 


@objc func checkMaxLength(textField: UITextField) 
 guard let prospectiveText = self.text,
 prospectiveText.count > maxLength
 else 
 return
 

 let selection = selectedTextRange

 let indexEndOfText = prospectiveText.index(prospectiveText.startIndex, offsetBy: maxLength)
 let substring = prospectiveText[..<indexEndOfText]
 text = String(substring)

 selectedTextRange = selection
 

5.Now you can access this extensions either from storyboard or from code to change the values and see the effects.

6.You can change the corner radius, border width, border colour for UITextField.

Hope this method also helps.

The style UISearchBar.Style.minimal provides no default background color or image

and use UITextFiled instead search bar so you can customise icon location

YourTextFiled.rightView = UIImageView(image: UIImage(named: "search-icon"))

YourTextFiled.rightViewMode = UITextField.ViewMode.always