It is necessary to leave only the bottom border at UITextField. For some reason my code does not work.
let bottomLine = CALayer()
bottomLine.frame = CGRect(x:0.0, y:1.0, width: myTextField.frame.width,
height: myTextField.frame.height - 1)
bottomLine.backgroundColor = UIColor.white.cgColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)
Replace this
bottomLine.frame = CGRect(x:0.0, y:1.0, width: myTextField.frame.width,height: myTextField.frame.height - 1)
with
bottomLine.frame = CGRect(x:0.0, y:myTextField.frame.height - 1, width: myTextField.frame.width,height: 1)
In my case work with adding :
myTextFeld.wantsLayer = true
Related
I'm trying to create two UITextFields that both only have the bottom border, I got some code from another StackOverflow and it worked. However, when I copy and pasted the code again for my second TextField it only shows one TextField with the bottom border.
Here is the code:
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.gray.cgColor
border.frame = CGRect(x: 0, y: emailText.frame.size.height -
width, width: emailText.frame.size.width, height:
emailText.frame.size.height)
border.frame = CGRect(x: 0, y: passwordText.frame.size.height
- width, width: passwordText.frame.size.width, height:
passwordText.frame.size.height)
border.borderWidth = width
passwordText.layer.addSublayer(border)
passwordText.layer.masksToBounds = true
border.borderWidth = width
emailText.layer.addSublayer(border)
emailText.layer.masksToBounds = true
Thanks for the help!
CALayers are instance-based, that means if you added the layer to a view, you cannot add it to a new one without removing it from the first view. Create two instances of CALayers or better yet, make an extension that produces the desired result.
Create separate border object for email textfield and username textfield.
let emailborder = CALayer()
let passwordborder = CALayer()
let width = CGFloat(2.0)
emailborder.borderColor = UIColor.gray.cgColor
emailborder.frame = CGRect(x: 0, y: emailText.frame.size.height -
width, width: emailText.frame.size.width, height:
emailText.frame.size.height)
passwordborder.frame = CGRect(x: 0, y: passwordText.frame.size.height
- width, width: passwordText.frame.size.width, height:
passwordText.frame.size.height)
passwordborder.borderWidth = width
passwordText.layer.addSublayer(passwordborder)
passwordText.layer.masksToBounds = true
emailborder.borderWidth = width
emailText.layer.addSublayer(emailborder)
emailText.layer.masksToBounds = true
You cant use the same view for both textfield. Use a copy of border for the second one. Easiest way to make this work is to refine a variable as border2 and set it up and sublayer it. Don't forget to remove your duplicate frame assign for boarder.
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.gray.cgColor
border.frame = CGRect(x: 0, y: emailText.frame.size.height - width, width: emailText.frame.size.width, height: emailText.frame.size.height)
let border2 = CALayer() border2.borderColor = border.borderColor border2.frame = border.frame;
border.borderWidth = width
passwordText.layer.addSublayer(border)
passwordText.layer.masksToBounds = true
border.borderWidth = width
emailText.layer.addSublayer(border2)
emailText.layer.masksToBounds = true
The best you could without writing redundant code is that you create a function, pass the textfields you want to border as parameters and keep the styling code in there like so:
func setBorder(tf: UITextField) {
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.gray.cgColor
border.frame = CGRect(x: 0, y: tf.frame.size.height - width,
width: tf.frame.size.width, height:
tf.frame.size.height)
border.borderWidth = width
tf.layer.addSublayer(border)
tf.layer.masksToBounds = true
}
Call this function in viewDidLoad:
setBorder(tf: emailText)
setBorder(tf: passwordText)
Hope this helps!
I want to make a border to imageview and here is my code
let view = UIImageView()
view.layer.borderWidth = 4
view.layer.borderColor = UIColor(red: 1, green: 1, blue: 1, alpha:0.4).cgColor
view.layer.cornerRadius = 40
view.layer.masksToBounds = true
But this only adds border inside of imageview,how can i make it outside?
This can help you. Add a border layer using CALayer you can customize border color and border frame, also the other parameters.
let borderLayer = CALayer()
let borderFrame = CGRect(x: -1.0, y: -1.0, width: imageView.frame.size.height + 2.0, height: imageView.frame.size.height + 2.0)
borderLayer.backgroundColor = UIColor.clear.cgColor
borderLayer.frame = borderFrame
borderLayer.cornerRadius = 5.0
borderLayer.borderWidth = 2.0
borderLayer.borderColor = UIColor.red.cgColor
imageView.layer.addSublayer(borderLayer)
There are 2 ways to do it.
1. Using storyboard
If you are doing it in the storyboard, you can give the layer related properties directly in User Defined Runtime Attributes column in the storyboard itself.
Screenshot:
2. Using Code
let imageView = UIImageView(frame: CGRect(x: 50, y: 50, width: 240, height: 128))
imageView.image = UIImage(named: "Image")
imageView.layer.borderWidth = 4
imageView.layer.cornerRadius = 40
imageView.layer.borderColor = UIColor.red.cgColor
imageView.layer.masksToBounds = true
self.view.addSubview(imageView)
Output:
Edit:
Screenshot after changing alpha of borderColor
Create a UIView and make it slightly larger than the image, then add the image to the center. Setting the background color will make the border a different color.
let border = UIView(frame: CGRect(x: 0, y: 0, width: 251, height: 251))
border.backgroundColor = UIColor.red
let image = UIImageView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
image.center = border.center
image.image = ...
border.addSubview(image)
How can I create a textField with transparent background and only border bottom?
I have tried this code:
textField.backgroundColor = .clear
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGrayColor().CGColor
border.frame = CGRect(x: 0, y: textField.frame.size.height - width, width: textField.frame.size.width, height: textField.frame.size.height)
border.borderWidth = width
textField.layer.addSublayer(border)
textField.layer.masksToBounds = true
But it isn't working.
Here's an alternative implementation using a UIView rather than a CALayer.
let line = UIView()
line.frame.size = CGSize(width: textField.frame.size.width, height: 1)
line.frame.origin = CGPoint(x: 0, y: textField.frame.maxY - line.frame.height)
line.backgroundColor = UIColor.darkGray
line.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
textField.addSubview(line)
Your code is correct. Problem is only with your border height which is now "textField.frame.size.height" change it to 1.0.(Change your border frame code).
Please try this :
txtField .borderStyle = .none
It may help you.... :)
extension UITextField {
func setBottomBorder(borderColor: CGColor = UIColor.white.cgColor,
backgroundColor: CGColor = UIColor.clear.cgColor) {
self.borderStyle = .none
self.layer.backgroundColor = backgroundColor
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = borderColor
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
}
}
This worked for me.
Then you can just call
yourTextField.SetBottomBorder(borderColor: UIColor.white.cgColor, backgroundColor: UIColor.clear.cgColor)
Just add this line with your code :-
border.backgroundColor = UIColor.black.cgColor
This code seems to be working fine for me though, setting the backgroundColor to clear fix this
textField.backgroundColor = .clear
let bottomBorder = CALayer()
let borderWidth = CGFloat(1.0)
bottomBorder.borderColor = UIColor(hex: 0xf5f5f5).CGColor
bottomBorder.frame = CGRect(x: 0, y: summary.frame.size.height - borderWidth, width: summary.frame.size.width, height: summary.frame.size.height)
bottomBorder.borderWidth = borderWidth
self.summary.layer.addSublayer(bottomBorder)
self.summary.layer.masksToBounds = true
I know how to add a bottom border, but when I apply the same principle to "topBorder", one of them disappears.
You can add top and bottom boarder using following code. you code have just framing issue.
let topBorder = CALayer()
let topHeight = CGFloat(1.0)
topBorder.borderColor = UIColor.blackColor().CGColor
topBorder.frame = CGRect(x: 0, y: 0, width: summary.frame.size.width, height: topHeight)
topBorder.borderWidth = summary.frame.size.width
self.summary.layer.addSublayer(topBorder)
let bottomBorder = CALayer()
let borderHeight = CGFloat(1.0)
bottomBorder.borderColor = UIColor.blackColor().CGColor
bottomBorder.frame = CGRect(x: 0, y: summary.frame.size.height - borderHeight, width: summary.frame.size.width, height: borderHeight)
bottomBorder.borderWidth = summary.frame.size.width
self.summary.layer.addSublayer(bottomBorder)
self.summary.layer.masksToBounds = true
I think it's your frames, review and modify this as necessary:
*Note this function was added as an extension to UITextView
func addBorders(color:UIColor) {
let bottomBorder = CALayer()
bottomBorder.backgroundColor = color.CGColor
bottomBorder.frame = CGRectMake(0, CGRectGetHeight(bounds) - 1, CGRectGetWidth(bounds), 1)
bottomBorder.name = "BottomBorder"
layer.addSublayer(bottomBorder)
let topBorder = CALayer()
topBorder.backgroundColor = color.CGColor
topBorder.frame = CGRectMake(0, 0, CGRectGetWidth(bounds), 1)
topBorder.name = "TopBorder"
layer.addSublayer(topBorder)
}
var bottomBorder = CALayer()
bottomBorder.frame = CGRect(x:0.0, y:self.descriptionTextView.frame.size.height - 1, width:self.descriptionTextView.frame.size.width, height: 1.0)
bottomBorder.backgroundColor = UIColor(hex:K.NODD_RED_HEX).cgColor
self.descriptionTextView.layer.addSublayer(bottomBorder)
iOS noob here
When I add a default UITextField to the ViewController, it looks like this:
My designer would like me to make the UITextField look like this (i.e. background is transparent, and just has an underline:
How do I do this? Should be asking my designer for an image to set as background for the UITextField. What should the image look like? Should the image be = the blue background + the underline (minus the number i guess)
Is that right?
UPDATE:
Based on direction below (from #Ashish Kakkad), added this code in Swift to ViewDidLoad:
var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, view.frame.height - 1, view.frame.width, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
tf_editPassword.borderStyle = UITextBorderStyle.None
tf_editPassword.layer.addSublayer(bottomLine)
This almost works, but the problem is that all side borders disappear, I want just the bottom line to stay.
Try this code :
Obj-C
CALayer *bottomLine = [CALayer layer];
bottomLine.frame = CGRectMake(0.0f, self.frame.size.height - 1, self.frame.size.width, 1.0f);
bottomLine.backgroundColor = [UIColor whiteColor].CGColor;
[myTextField setBorderStyle:UITextBorderStyleNone];
[myTextField.layer addSublayer:bottomLine];
Swift
var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, view.frame.height - 1, view.frame.width, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)
Hope it helps
If you are using the auto-layout then try to do this code inside the viewDidLayoutSubviews method.
#Ashish Kakkad has posted the right code but the reason it might not be working for #user1406716 is because when there is no text in the textfield, the height and width of the frame are 0 so maybe you can try the following :
Obj-C :
CALayer *bottomLine = [CALayer layer];
bottomLine.frame = CGRectMake(0.0f, 75 - 1, 300, 1.0f);
bottomLine.backgroundColor = [UIColor whiteColor].CGColor;
[myTextField setBorderStyle:UITextBorderStyleNone];
[myTextField.layer addSublayer:bottomLine];
Swift :
var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, 75 - 1, 300, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)
This will ensure that the line is visible even when there is no text in the textfield.
Use this Extension for UITextField
extension UITextField {
func setUnderLine() {
let border = CALayer()
let width = CGFloat(0.5)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width - 10, height: self.frame.size.height)
border.borderWidth = width
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
}
Call the above function in ViewDidLoad() and display the textfield with an underline.
myTextField.setUnderLine()
To update this with Swift 3:
let bottomLine = CALayer()
bottomLine.frame = CGRect(origin: CGPoint(x: 0, y:first.frame.height - 1), size: CGSize(width: first.frame.width, height: 1))
bottomLine.backgroundColor = UIColor.white.cgColor
first.borderStyle = UITextBorderStyle.none
first.layer.addSublayer(bottomLine)
Delete borders and add underline - Swift 5:
extension UITextField {
func addUnderLine () {
let bottomLine = CALayer()
bottomLine.frame = CGRect(x: 0.0, y: self.bounds.height + 3, width: self.bounds.width, height: 1.5)
bottomLine.backgroundColor = UIColor.lightGray.cgColor
self.borderStyle = UITextField.BorderStyle.none
self.layer.addSublayer(bottomLine)
}
}