Add bottom line to view in SwiftUI Swift Objective-C Xamarin

Question

I would like to keep the border at the bottom part only in UITextField  But I don t know how we can keep it on the bottom side   Can you please advise me

User · Answer

Objective C           txt layer setBackgroundColor    UIColor whiteColor  CGColor             txt layer setBorderColor    UIColor grayColor  CGColor             txt layer setBorderWidth  0 0            txt layer setCornerRadius 12 0f            txt layer setMasksToBounds NO            txt layer setShadowRadius 2 0f           txt layer shadowColor     UIColor blackColor  CGColor           txt layer shadowOffset   CGSizeMake 1 0f  1 0f           txt layer shadowOpacity   1 0f          txt layer shadowRadius   1 0f    Swift          txt layer backgroundColor   UIColor white cgColor         txt layer borderColor   UIColor gray cgColor         txt layer borderWidth   0 0         txt layer cornerRadius   5         txt layer masksToBounds   false         txt layer shadowRadius   2 0         txt layer shadowColor   UIColor black cgColor         txt layer shadowOffset   CGSize init width  1 0  height  1 0          txt layer shadowOpacity   1 0         txt layer shadowRadius   1 0

User · Answer

Updated Code   Swift 5 0  extension UITextField     func addUnderline         let layer   CALayer      layer backgroundColor    colorLiteral red  0 6666666865  green  0 6666666865  blue  0 6666666865  alpha  1     layer frame   CGRect x  0 0  y  self frame size height - 1 0  width  self frame size width  height  1 0     self clipsToBounds   true    self layer addSublayer layer     self setNeedsDisplay        Now call this func in viewDidLayoutSubviews    override func viewDidLayoutSubviews         textField addUnderline       NOTE  This method will only work in viewDidLayoutSubviews

User · Answer

I am creating custom textField to make it reusable component for SwiftUI SwiftUI struct CustomTextField  View       var placeHolder  String      Binding var value  String          var lineColor  Color     var width  CGFloat          var body  some View           VStack               TextField self placeHolder  text   value               padding                font  title                           Rectangle   frame height  self width                   padding  horizontal  20  foregroundColor self lineColor                     Usage   Binding var userName  String  Binding var password  String  var body  some View       VStack alignment   center            CustomTextField placeHolder   quot Username quot   value   userName  lineColor   white  width  2          CustomTextField placeHolder   quot Password quot   value   password  lineColor   white  width  2             Swift 5 0 I am using Visual Formatting Language  VFL  here  This will allow adding a line to any UIControl  You can create a UIView extension class like UIView Extention swift import UIKit  enum LinePosition       case top     case bottom    extension UIView       func addLine position  LinePosition  color  UIColor  width  Double            let lineView   UIView           lineView backgroundColor   color         lineView translatesAutoresizingMaskIntoConstraints   false    This is important          self addSubview lineView           let metrics     quot width quot    NSNumber value  width           let views     quot lineView quot    lineView          self addConstraints NSLayoutConstraint constraints withVisualFormat   quot H   lineView   quot   options NSLayoutConstraint FormatOptions rawValue  0   metrics metrics  views views            switch position           case  top              self addConstraints NSLayoutConstraint constraints withVisualFormat   quot V   lineView width   quot   options NSLayoutConstraint FormatOptions rawValue  0   metrics metrics  views views               break         case  bottom              self addConstraints NSLayoutConstraint constraints withVisualFormat   quot V  lineView width    quot   options NSLayoutConstraint FormatOptions rawValue  0   metrics metrics  views views               break                    Usage  textField addLine position   LINE POSITION BOTTOM  color   darkGray  width  0 5    Objective C  You can add this helper method to your global helper class I used global class method  or in the same view controller using an instance method   typedef enum   NSUInteger       LINE POSITION TOP      LINE POSITION BOTTOM   LINE POSITION    -  void  addLine  UIView   view atPosition  LINE POSITION position withColor  UIColor   color lineWitdh  CGFloat width          Add line     UIView  lineView     UIView alloc  init        lineView setBackgroundColor color        lineView setTranslatesAutoresizingMaskIntoConstraints NO        view addSubview lineView            NSDictionary  metrics       quot width quot     NSNumber numberWithFloat width        NSDictionary  views       quot lineView quot    lineView        view addConstraints  NSLayoutConstraint constraintsWithVisualFormat   quot H   lineView   quot  options  0 metrics metrics views views             switch  position            case LINE POSITION TOP               view addConstraints  NSLayoutConstraint constraintsWithVisualFormat   quot V  -0- lineView width   quot  options  0 metrics metrics views views                break                       case LINE POSITION BOTTOM               view addConstraints  NSLayoutConstraint constraintsWithVisualFormat   quot V  lineView width    quot  options  0 metrics metrics views views                break          default  break           Usage   self addLine self textField atPosition LINE POSITION TOP withColor  UIColor darkGrayColor  lineWitdh 0 5     Xamarin code   var border   new CALayer     nfloat width   2   border BorderColor   UIColor Black CGColor   border Frame   new CoreGraphics CGRect 0  textField Frame Size Height - width  textField Frame Size Width  textField Frame Size Height    border BorderWidth   width   textField Layer AddSublayer border    textField Layer MasksToBounds   true

User · Answer

let border   CALayer        let lineWidth   CGFloat 0 3       border borderColor   UIColor lightGray cgColor      border frame   CGRect x  0  y  emailTextField frame size height - lineWidth  width   emailTextField frame size width  height  emailTextField frame size height       border borderWidth   lineWidth      emailTextField layer addSublayer border       emailTextField layer masksToBounds   true   Tutorial

User · Answer

On Swift 3  You can create an extension and add after your view class   extension UITextField       func setBottomBorder borderColor  UIColor                 self borderStyle   UITextBorderStyle none         self backgroundColor   UIColor clear         let width   1 0          let borderLine   UIView           borderLine frame   CGRect x  0  y  Double self frame height  - width  width  Double self frame width   height  width           borderLine backgroundColor   borderColor         self addSubview borderLine

User · Answer

None of these solutions really met my expectations  I wanted to subclass the TextField since I don t want to set the border manually all the time  I also wanted to change the border color e g  for an error  So here s my solution with Anchors   class CustomTextField  UITextField        var bottomBorder   UIView        override func awakeFromNib                     Setup Bottom-Border              self translatesAutoresizingMaskIntoConstraints   false              bottomBorder   UIView init frame  CGRect x  0  y  0  width  0  height  0               bottomBorder backgroundColor   UIColor rgb  0xE2DCD1     Set Border-Color             bottomBorder translatesAutoresizingMaskIntoConstraints   false              addSubview bottomBorder               bottomBorder bottomAnchor constraint equalTo  bottomAnchor  isActive   true             bottomBorder leftAnchor constraint equalTo  leftAnchor  isActive   true             bottomBorder rightAnchor constraint equalTo  rightAnchor  isActive   true             bottomBorder heightAnchor constraint equalToConstant  1  isActive   true    Set Border-Strength            ---- Optional ----  To change the color add sth like this to the CustomTextField Class    IBInspectable var hasError  Bool   false       didSet            if  hasError                 bottomBorder backgroundColor   UIColor red            else                bottomBorder backgroundColor   UIColor rgb  0xE2DCD1                        And to trigger the Error call this after you created an instance of CustomTextField  textField hasError    textField hasError     Hope it helps someone

User · Answer

You can create this extension outside class and replace width with whatever borderWidth you want    Swift 4  extension UITextField       func setBottomBorder withColor color  UIColor                self borderStyle   UITextBorderStyle none         self backgroundColor   UIColor clear         let width  CGFloat   1 0          let borderLine   UIView frame  CGRect x  0  y  self frame height - width  width  self frame width  height  width           borderLine backgroundColor   color         self addSubview borderLine            Original  extension UITextField       func setBottomBorder borderColor  UIColor                self borderStyle   UITextBorderStyle None         self backgroundColor   UIColor clearColor           let width   1 0          let borderLine   UIView frame  CGRectMake 0  self frame height - width  self frame width  width           borderLine backgroundColor   borderColor         self addSubview borderLine            and then add this to your viewDidLoad replacing yourTextField with your UITextField variable and with any color you want in the border  yourTextField setBottomBorder UIColor blackColor      This basically adds a view with that color at the bottom of the text field

User · Answer

For View    Most Recommended  It works for all type of UIView subclass  view  textfiled  label  etc     using UIView extension  It is more simple and convenient  But the only condition is the view must contain an auto layout   extension UIView       enum Line Position           case top         case bottom            func addLine position   Line Position  color  UIColor  height  Double            let lineView   UIView           lineView backgroundColor   color         lineView translatesAutoresizingMaskIntoConstraints   false    This is important          self addSubview lineView           let metrics     width    NSNumber value  height           let views     lineView    lineView          self addConstraints NSLayoutConstraint constraints withVisualFormat   H   lineView     options NSLayoutConstraint FormatOptions rawValue  0   metrics metrics  views views            switch position           case  top              self addConstraints NSLayoutConstraint constraints withVisualFormat   V   lineView width     options NSLayoutConstraint FormatOptions rawValue  0   metrics metrics  views views               break         case  bottom              self addConstraints NSLayoutConstraint constraints withVisualFormat   V  lineView width      options NSLayoutConstraint FormatOptions rawValue  0   metrics metrics  views views               break                     How to use      UILabel self lblDescription addLine position   bottom  color  UIColor blue  height  1 0     and     UITextField self txtArea addLine position   bottom  color  UIColor red  height  1 0

User · Answer

Swift 5 You can use a UIView extension so that you can add bottom border to any view  extension UIView        func addBottomLine width  CGFloat  color  UIColor            let lineView  UIView                 let view   UIView               view translatesAutoresizingMaskIntoConstraints   false             view backgroundColor   color             return view                     addSubview lineView          NSLayoutConstraint activate               lineView heightAnchor constraint equalToConstant  width               lineView leadingAnchor constraint equalTo  leadingAnchor               lineView trailingAnchor constraint equalTo  trailingAnchor               lineView bottomAnchor constraint equalTo  bottomAnchor

User · Answer

What I did was to create an extension to UITextField and added a Designer editable property  Setting this property to any color would change the border  bottom  to that color  setting other borders to none    Since this also requires to change the place holder text color  I also added that to the extension        extension UITextField         IBInspectable var placeHolderColor  UIColor            get               return self placeHolderColor                   set               self attributedPlaceholder   NSAttributedString string self placeholder    nil   self placeholder        attributes  NSForegroundColorAttributeName  newValue                           IBInspectable var bottomBorderColor  UIColor            get               return self bottomBorderColor                   set               self borderStyle   UITextBorderStyle None              let border   CALayer               let width   CGFloat 0 5              border borderColor   newValue  CGColor             border frame   CGRect x  0  y  self frame size height - width    width   self frame size width  height  self frame size height               border borderWidth   width             self layer addSublayer border              self layer masksToBounds   true

User · Answer

If you want to do without knowing frames beforehand  without subclassing and without Autolayout  Swift 5     Swift 4 x    Swift 3 x extension UITextField     func setBottomBorder         self borderStyle    none     self layer backgroundColor   UIColor white cgColor      self layer masksToBounds   false     self layer shadowColor   UIColor gray cgColor     self layer shadowOffset   CGSize width  0 0  height  1 0      self layer shadowOpacity   1 0     self layer shadowRadius   0 0        Call as yourTextField setBottomBorder   from anywhere without making sure of the frames to be right  The Result looks like this     Swift UI struct MyTextField  View     var myPlaceHolder  String    Binding var text  String    var underColor  Color   var height  CGFloat    var body  some View       VStack           TextField self myPlaceHolder  text   text           padding            font  title           Rectangle   frame height  self height               padding  horizontal  24  foregroundColor self underColor

User · Answer

SwiftUI in SwiftUI  there is a View called Divider that is perfectly matched for this  You can add it below any view by embedding them into a simple VStack  VStack       Text  quot This could be any View quot       Divider

User · Answer

Here myTF is outlet for MT TEXT FIELD             let border   CALayer           let width   CGFloat 2 0          border borderColor   UIColor darkGray cgColor         border frame   CGRect x  0  y  self myTF frame size height - width  width   self myTF frame size width  height  self myTF frame size height           border borderWidth   width         self myTF layer addSublayer border          self myTF layer masksToBounds   true

User · Answer

Here is swift3 code with  IBInspectable   create a new file Cocoa Touch Class Swift File  import UIKit   extension UIView     IBInspectable var cornerRadius  CGFloat       get           return layer cornerRadius           set           layer cornerRadius   newValue         layer masksToBounds   newValue  gt  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           IBInspectable var leftBorderWidth  CGFloat       get           return 0 0      Just to satisfy property           set           let line   UIView frame  CGRect x  0 0  y  0 0  width  newValue  height  bounds height           line translatesAutoresizingMaskIntoConstraints   false         line backgroundColor   UIColor cgColor  layer borderColor          line tag   110         self addSubview line           let views     line   line          let metrics     lineWidth   newValue          addConstraints NSLayoutConstraint constraints withVisualFormat     line   lineWidth     options      metrics  metrics  views  views           addConstraints NSLayoutConstraint constraints withVisualFormat   V   line     options      metrics  nil  views  views             IBInspectable var topBorderWidth  CGFloat       get           return 0 0      Just to satisfy property           set           let line   UIView frame  CGRect x  0 0  y  0 0  width  bounds width  height  newValue           line translatesAutoresizingMaskIntoConstraints   false         line backgroundColor   borderColor        line tag   110         self addSubview line           let views     line   line          let metrics     lineWidth   newValue          addConstraints NSLayoutConstraint constraints withVisualFormat     line     options      metrics  nil  views  views           addConstraints NSLayoutConstraint constraints withVisualFormat   V   line   lineWidth     options      metrics  metrics  views  views             IBInspectable var rightBorderWidth  CGFloat       get           return 0 0      Just to satisfy property           set           let line   UIView frame  CGRect x  bounds width  y  0 0  width  newValue  height  bounds height           line translatesAutoresizingMaskIntoConstraints   false         line backgroundColor   borderColor        line tag   110         self addSubview line           let views     line   line          let metrics     lineWidth   newValue          addConstraints NSLayoutConstraint constraints withVisualFormat    line   lineWidth      options      metrics  metrics  views  views           addConstraints NSLayoutConstraint constraints withVisualFormat   V   line     options      metrics  nil  views  views            IBInspectable var bottomBorderWidth  CGFloat       get           return 0 0      Just to satisfy property           set           let line   UIView frame  CGRect x  0 0  y  bounds height  width  bounds width  height  newValue           line translatesAutoresizingMaskIntoConstraints   false         line backgroundColor   borderColor       line tag   110         self addSubview line           let views     line   line          let metrics     lineWidth   newValue          addConstraints NSLayoutConstraint constraints withVisualFormat     line     options      metrics  nil  views  views           addConstraints NSLayoutConstraint constraints withVisualFormat   V  line   lineWidth      options      metrics  metrics  views  views            func removeborder           for view in self subviews              if view tag    110                    view removeFromSuperview                                 and replace the file with the below code and you will get the option in storyboard attribute inspector like this       Enjoy

User · Answer

extension UITextField       func setBottomBorder color String        self borderStyle   UITextBorderStyle None     let border   CALayer       let width   CGFloat 1 0      border borderColor   UIColor hexString  color   cgColor     border frame   CGRect x  0  y  self frame size height - width    width   self frame size width  height  self frame size height      border borderWidth   width     self layer addSublayer border      self layer masksToBounds   true          and then just do this     yourTextField setBottomBorder color    3EFE46

User · Answer

import UIkit   extension UITextField     func underlinedLogin           let border   CALayer        let width   CGFloat 1 0       border borderColor   UIColor black cgColor     border frame   CGRect x  0  y  self frame size height - width  width   self frame size width  height  self frame size height      border borderWidth   width     self layer addSublayer border      self layer masksToBounds   true        call method on viewdidload  mobileNumberTextField underlinedLogin    passwordTextField underlinedLogin      select like text field on mainstoryboard

User · Answer

I have looked at each of these solutions that also seem to work with one issue  Dark Mode and the background setting  The Background setting of the UITextField must match the background of the parent view or no line appears  So this will work on light mode To get to work in dark mode change the background color to black and it works Exclude back color and the line does not appear  let field   UITextField    field backgroundColor   UIColor white field bottomBorderColor   UIColor red   This ended up being the best solution for me  extension UITextField        func addPadding             let paddingView   UIView frame  CGRect x 0  y 0  width  10  height  self frame height           self leftView   paddingView         self leftViewMode    always                 IBInspectable var placeHolderColor  UIColor              get                 return self placeHolderColor                       set               self attributedPlaceholder   NSAttributedString string self placeholder    nil   self placeholder        attributes  NSAttributedString Key foregroundColor  newValue                                IBInspectable var bottomBorderColor  UIColor              get                 return self bottomBorderColor                       set               self borderStyle    none             self layer masksToBounds   false             self layer shadowColor   newValue  cgColor             self layer shadowOffset   CGSize width  0 0  height  1 0              self layer shadowOpacity   1 0             self layer shadowRadius   0 0

User · Answer

In SwiftUI  The simplest implementation would be  struct MyTextField  View     var myPlaceHolder  String    Binding var text  String    var underColor  Color   var height  CGFloat    var body  some View       VStack           TextField self myPlaceHolder  text   text           padding  horizontal  24           font  title           Rectangle   frame height  self height               padding  horizontal  24  foregroundColor self underColor               Usage  MyTextField myPlaceHolder   quot PlaceHolder quot   text  self  text  underColor   red  height  3

User · Answer

You can use this ORGANIZED and can also CUSTOMIZE this extension further       One Line Implementation  in viewDidAppear so that frame size will be correct        Add layer in your textfield     yourTextField addLayer  bottom  addPadding  left       Extension     extension UITextField        enum Position           case up  bottom  right  left                MARK  - Add Single Line Layer     func addLayer   position  Position  - gt  UITextField               bottom layer         let bottomLayer   CALayer              set width         let height   CGFloat 1 0          bottomLayer borderWidth   height            set color         bottomLayer borderColor   UIColor white cgColor            set frame            y position changes according to the position         let yOrigin   position     up   0 0   frame size height - height         bottomLayer frame   CGRect init x  0  y  yOrigin  width  frame size width  height  height          layer addSublayer bottomLayer          layer masksToBounds   true          return self               Add right left padding view in textfield     func addPadding   position  Position  withImage image  UIImage    nil            let paddingHeight   frame size height         let paddingViewFrame   CGRect init x  0 0  y  0 0  width  paddingHeight   0 6  height  paddingHeight          let paddingImageView   UIImageView init frame  paddingViewFrame          paddingImageView contentMode    scaleAspectFit          if let paddingImage   image               paddingImageView image   paddingImage                       Add Left Right view mode         switch position           case  left              leftView          paddingImageView             leftViewMode       always         case  right              rightView         paddingImageView             rightViewMode       always         default              break

User · Answer

You can create a subclass of UITextField as shown below   class TextField   UITextField        override var tintColor  UIColor             didSet               setNeedsDisplay                        override func draw   rect  CGRect             let startingPoint     CGPoint x  rect minX  y  rect maxY          let endingPoint       CGPoint x  rect maxX  y  rect maxY           let path   UIBezierPath            path move to  startingPoint          path addLine to  endingPoint          path lineWidth   2 0          tintColor setStroke            path stroke

User · Answer

you can create one image for bottom border and set it to the background of your UITextField     yourTextField backgroundColor    UIColor colorWithPatternImage  UIImage imageNamed   yourBorderedImageName       or set borderStyle to none and put image of line exactly equal length to textfield

User · Answer

Please have a look at the below code sample   Swift 4    IBDesignable class DesignableUITextField  UITextField        let border   CALayer         IBInspectable var borderColor  UIColor            didSet               setup                         IBInspectable var borderWidth  CGFloat   0 5           didSet               setup                        func setup             border borderColor   self borderColor  cgColor          border borderWidth   borderWidth         self layer addSublayer border          self layer masksToBounds   true            override func layoutSubviews             super layoutSubviews           border frame   CGRect x  0  y  self frame size height - borderWidth  width   self frame size width  height  self frame size height

[ios] Add bottom line to view in SwiftUI / Swift / Objective-C / Xamarin

Examples related to ios

Examples related to objective-c

Examples related to swift

Examples related to xamarin

Examples related to swiftui