iOS UITextField Underline Style in swift
-1
I've added this image, I hope you can see it, of a user interface login. Notice the text field is transparent with the exception of the line at the bottom. What code do I put in to get that affect? Can I put the necessary information in the "user defined runtime attributes"?
ios swift uitextfield
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
add a comment |
-1
I've added this image, I hope you can see it, of a user interface login. Notice the text field is transparent with the exception of the line at the bottom. What code do I put in to get that affect? Can I put the necessary information in the "user defined runtime attributes"?
ios swift uitextfield
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
Just use a image as the background, the image contains a line at the bottom, and the above is transparent. This kind of image will fit your demand.
– childrenOurFuture
Jul 11 '16 at 9:35
add a comment |
-1
-1
-1
1
I've added this image, I hope you can see it, of a user interface login. Notice the text field is transparent with the exception of the line at the bottom. What code do I put in to get that affect? Can I put the necessary information in the "user defined runtime attributes"?
ios swift uitextfield
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
I've added this image, I hope you can see it, of a user interface login. Notice the text field is transparent with the exception of the line at the bottom. What code do I put in to get that affect? Can I put the necessary information in the "user defined runtime attributes"?
ios swift uitextfield
ios swift uitextfield
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
edited Nov 15 '18 at 5:45
Hitesh Surani
2,736928
2,736928
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
asked Jul 11 '16 at 9:30
Scott PerryScott Perry
2116
2116
Just use a image as the background, the image contains a line at the bottom, and the above is transparent. This kind of image will fit your demand.
– childrenOurFuture
Jul 11 '16 at 9:35
add a comment |
Just use a image as the background, the image contains a line at the bottom, and the above is transparent. This kind of image will fit your demand.
– childrenOurFuture
Jul 11 '16 at 9:35
Just use a image as the background, the image contains a line at the bottom, and the above is transparent. This kind of image will fit your demand.
– childrenOurFuture
Jul 11 '16 at 9:35
Just use a image as the background, the image contains a line at the bottom, and the above is transparent. This kind of image will fit your demand.
– childrenOurFuture
Jul 11 '16 at 9:35
add a comment |
1 Answer
1
active
oldest
votes
8
Just create sub class of UITextField as below, And simply set this class in your storyboard to UItextField
Swift 4.2 Support With @IBInspectable
import UIKit
class HSUnderLineTextField: UITextField , UITextFieldDelegate {
let border = CALayer()
@IBInspectable open var lineColor : UIColor = UIColor.black {
didSet{
border.borderColor = lineColor.cgColor
}
}
@IBInspectable open var selectedLineColor : UIColor = UIColor.black {
didSet{
}
}
@IBInspectable open var lineHeight : CGFloat = CGFloat(1.0) {
didSet{
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
}
required init?(coder aDecoder: (NSCoder?)) {
super.init(coder: aDecoder!)
self.delegate=self;
border.borderColor = lineColor.cgColor
self.attributedPlaceholder = NSAttributedString(string: self.placeholder ?? "",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = lineHeight
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func draw(_ rect: CGRect) {
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
override func awakeFromNib() {
super.awakeFromNib()
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
self.delegate = self
}
func textFieldDidBeginEditing(_ textField: UITextField) {
border.borderColor = selectedLineColor.cgColor
}
func textFieldDidEndEditing(_ textField: UITextField) {
border.borderColor = lineColor.cgColor
}
}
Set Property Using storyboard. Please find below screenshots for reference.
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
Rather than making wholeclass, why don't you makeextension?
– Sohil R. Memon
Jul 11 '16 at 9:45
If i have create class then no need to write any code, simply we can use in storyboard file And i have create extension then we need to write code in view-controller class where we use text field.
– Hitesh Surani
Jul 12 '16 at 5:21
Let me get this strait. I'm suppose to create a custom cocoa class that's named UItextField and is a subclass of UItextField?
– Scott Perry
Jul 12 '16 at 14:04
Name of this class is not UItextField but it is subclass of UItextField. You can give a any name of this class like UITextField_BottomBorder then set it in your storyboard file
– Hitesh Surani
Jul 13 '16 at 5:03
That worked almost perfectly. Thanks so much! Though I do have one request on this and that is changing the color so something of a hex value or an RGB value. How can I change "border.borderColor = UIColor.darkGrayColor().CGColor" to be something with an RGB value or a hex value?
– Scott Perry
Jul 14 '16 at 5:29
|
show 9 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38303520%2fios-uitextfield-underline-style-in-swift%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
8
Just create sub class of UITextField as below, And simply set this class in your storyboard to UItextField
Swift 4.2 Support With @IBInspectable
import UIKit
class HSUnderLineTextField: UITextField , UITextFieldDelegate {
let border = CALayer()
@IBInspectable open var lineColor : UIColor = UIColor.black {
didSet{
border.borderColor = lineColor.cgColor
}
}
@IBInspectable open var selectedLineColor : UIColor = UIColor.black {
didSet{
}
}
@IBInspectable open var lineHeight : CGFloat = CGFloat(1.0) {
didSet{
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
}
required init?(coder aDecoder: (NSCoder?)) {
super.init(coder: aDecoder!)
self.delegate=self;
border.borderColor = lineColor.cgColor
self.attributedPlaceholder = NSAttributedString(string: self.placeholder ?? "",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = lineHeight
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func draw(_ rect: CGRect) {
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
override func awakeFromNib() {
super.awakeFromNib()
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
self.delegate = self
}
func textFieldDidBeginEditing(_ textField: UITextField) {
border.borderColor = selectedLineColor.cgColor
}
func textFieldDidEndEditing(_ textField: UITextField) {
border.borderColor = lineColor.cgColor
}
}
Set Property Using storyboard. Please find below screenshots for reference.
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
Rather than making wholeclass, why don't you makeextension?
– Sohil R. Memon
Jul 11 '16 at 9:45
If i have create class then no need to write any code, simply we can use in storyboard file And i have create extension then we need to write code in view-controller class where we use text field.
– Hitesh Surani
Jul 12 '16 at 5:21
Let me get this strait. I'm suppose to create a custom cocoa class that's named UItextField and is a subclass of UItextField?
– Scott Perry
Jul 12 '16 at 14:04
Name of this class is not UItextField but it is subclass of UItextField. You can give a any name of this class like UITextField_BottomBorder then set it in your storyboard file
– Hitesh Surani
Jul 13 '16 at 5:03
That worked almost perfectly. Thanks so much! Though I do have one request on this and that is changing the color so something of a hex value or an RGB value. How can I change "border.borderColor = UIColor.darkGrayColor().CGColor" to be something with an RGB value or a hex value?
– Scott Perry
Jul 14 '16 at 5:29
|
show 9 more comments
8
Just create sub class of UITextField as below, And simply set this class in your storyboard to UItextField
Swift 4.2 Support With @IBInspectable
import UIKit
class HSUnderLineTextField: UITextField , UITextFieldDelegate {
let border = CALayer()
@IBInspectable open var lineColor : UIColor = UIColor.black {
didSet{
border.borderColor = lineColor.cgColor
}
}
@IBInspectable open var selectedLineColor : UIColor = UIColor.black {
didSet{
}
}
@IBInspectable open var lineHeight : CGFloat = CGFloat(1.0) {
didSet{
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
}
required init?(coder aDecoder: (NSCoder?)) {
super.init(coder: aDecoder!)
self.delegate=self;
border.borderColor = lineColor.cgColor
self.attributedPlaceholder = NSAttributedString(string: self.placeholder ?? "",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = lineHeight
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func draw(_ rect: CGRect) {
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
override func awakeFromNib() {
super.awakeFromNib()
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
self.delegate = self
}
func textFieldDidBeginEditing(_ textField: UITextField) {
border.borderColor = selectedLineColor.cgColor
}
func textFieldDidEndEditing(_ textField: UITextField) {
border.borderColor = lineColor.cgColor
}
}
Set Property Using storyboard. Please find below screenshots for reference.
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
Rather than making wholeclass, why don't you makeextension?
– Sohil R. Memon
Jul 11 '16 at 9:45
If i have create class then no need to write any code, simply we can use in storyboard file And i have create extension then we need to write code in view-controller class where we use text field.
– Hitesh Surani
Jul 12 '16 at 5:21
Let me get this strait. I'm suppose to create a custom cocoa class that's named UItextField and is a subclass of UItextField?
– Scott Perry
Jul 12 '16 at 14:04
Name of this class is not UItextField but it is subclass of UItextField. You can give a any name of this class like UITextField_BottomBorder then set it in your storyboard file
– Hitesh Surani
Jul 13 '16 at 5:03
That worked almost perfectly. Thanks so much! Though I do have one request on this and that is changing the color so something of a hex value or an RGB value. How can I change "border.borderColor = UIColor.darkGrayColor().CGColor" to be something with an RGB value or a hex value?
– Scott Perry
Jul 14 '16 at 5:29
|
show 9 more comments
8
8
8
Just create sub class of UITextField as below, And simply set this class in your storyboard to UItextField
Swift 4.2 Support With @IBInspectable
import UIKit
class HSUnderLineTextField: UITextField , UITextFieldDelegate {
let border = CALayer()
@IBInspectable open var lineColor : UIColor = UIColor.black {
didSet{
border.borderColor = lineColor.cgColor
}
}
@IBInspectable open var selectedLineColor : UIColor = UIColor.black {
didSet{
}
}
@IBInspectable open var lineHeight : CGFloat = CGFloat(1.0) {
didSet{
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
}
required init?(coder aDecoder: (NSCoder?)) {
super.init(coder: aDecoder!)
self.delegate=self;
border.borderColor = lineColor.cgColor
self.attributedPlaceholder = NSAttributedString(string: self.placeholder ?? "",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = lineHeight
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func draw(_ rect: CGRect) {
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
override func awakeFromNib() {
super.awakeFromNib()
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
self.delegate = self
}
func textFieldDidBeginEditing(_ textField: UITextField) {
border.borderColor = selectedLineColor.cgColor
}
func textFieldDidEndEditing(_ textField: UITextField) {
border.borderColor = lineColor.cgColor
}
}
Set Property Using storyboard. Please find below screenshots for reference.
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
Just create sub class of UITextField as below, And simply set this class in your storyboard to UItextField
Swift 4.2 Support With @IBInspectable
import UIKit
class HSUnderLineTextField: UITextField , UITextFieldDelegate {
let border = CALayer()
@IBInspectable open var lineColor : UIColor = UIColor.black {
didSet{
border.borderColor = lineColor.cgColor
}
}
@IBInspectable open var selectedLineColor : UIColor = UIColor.black {
didSet{
}
}
@IBInspectable open var lineHeight : CGFloat = CGFloat(1.0) {
didSet{
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
}
required init?(coder aDecoder: (NSCoder?)) {
super.init(coder: aDecoder!)
self.delegate=self;
border.borderColor = lineColor.cgColor
self.attributedPlaceholder = NSAttributedString(string: self.placeholder ?? "",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = lineHeight
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func draw(_ rect: CGRect) {
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
override func awakeFromNib() {
super.awakeFromNib()
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
self.delegate = self
}
func textFieldDidBeginEditing(_ textField: UITextField) {
border.borderColor = selectedLineColor.cgColor
}
func textFieldDidEndEditing(_ textField: UITextField) {
border.borderColor = lineColor.cgColor
}
}
Set Property Using storyboard. Please find below screenshots for reference.
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
edited Jan 24 at 5:05
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
answered Jul 11 '16 at 9:38
Hitesh SuraniHitesh Surani
2,736928
2,736928
Rather than making wholeclass, why don't you makeextension?
– Sohil R. Memon
Jul 11 '16 at 9:45
If i have create class then no need to write any code, simply we can use in storyboard file And i have create extension then we need to write code in view-controller class where we use text field.
– Hitesh Surani
Jul 12 '16 at 5:21
Let me get this strait. I'm suppose to create a custom cocoa class that's named UItextField and is a subclass of UItextField?
– Scott Perry
Jul 12 '16 at 14:04
Name of this class is not UItextField but it is subclass of UItextField. You can give a any name of this class like UITextField_BottomBorder then set it in your storyboard file
– Hitesh Surani
Jul 13 '16 at 5:03
That worked almost perfectly. Thanks so much! Though I do have one request on this and that is changing the color so something of a hex value or an RGB value. How can I change "border.borderColor = UIColor.darkGrayColor().CGColor" to be something with an RGB value or a hex value?
– Scott Perry
Jul 14 '16 at 5:29
|
show 9 more comments
Rather than making wholeclass, why don't you makeextension?
– Sohil R. Memon
Jul 11 '16 at 9:45
If i have create class then no need to write any code, simply we can use in storyboard file And i have create extension then we need to write code in view-controller class where we use text field.
– Hitesh Surani
Jul 12 '16 at 5:21
Let me get this strait. I'm suppose to create a custom cocoa class that's named UItextField and is a subclass of UItextField?
– Scott Perry
Jul 12 '16 at 14:04
Name of this class is not UItextField but it is subclass of UItextField. You can give a any name of this class like UITextField_BottomBorder then set it in your storyboard file
– Hitesh Surani
Jul 13 '16 at 5:03
That worked almost perfectly. Thanks so much! Though I do have one request on this and that is changing the color so something of a hex value or an RGB value. How can I change "border.borderColor = UIColor.darkGrayColor().CGColor" to be something with an RGB value or a hex value?
– Scott Perry
Jul 14 '16 at 5:29
Rather than making whole
class, why don't you make extension?– Sohil R. Memon
Jul 11 '16 at 9:45
Rather than making whole
class, why don't you make extension?– Sohil R. Memon
Jul 11 '16 at 9:45
If i have create class then no need to write any code, simply we can use in storyboard file And i have create extension then we need to write code in view-controller class where we use text field.
– Hitesh Surani
Jul 12 '16 at 5:21
If i have create class then no need to write any code, simply we can use in storyboard file And i have create extension then we need to write code in view-controller class where we use text field.
– Hitesh Surani
Jul 12 '16 at 5:21
Let me get this strait. I'm suppose to create a custom cocoa class that's named UItextField and is a subclass of UItextField?
– Scott Perry
Jul 12 '16 at 14:04
Let me get this strait. I'm suppose to create a custom cocoa class that's named UItextField and is a subclass of UItextField?
– Scott Perry
Jul 12 '16 at 14:04
Name of this class is not UItextField but it is subclass of UItextField. You can give a any name of this class like UITextField_BottomBorder then set it in your storyboard file
– Hitesh Surani
Jul 13 '16 at 5:03
Name of this class is not UItextField but it is subclass of UItextField. You can give a any name of this class like UITextField_BottomBorder then set it in your storyboard file
– Hitesh Surani
Jul 13 '16 at 5:03
That worked almost perfectly. Thanks so much! Though I do have one request on this and that is changing the color so something of a hex value or an RGB value. How can I change "border.borderColor = UIColor.darkGrayColor().CGColor" to be something with an RGB value or a hex value?
– Scott Perry
Jul 14 '16 at 5:29
That worked almost perfectly. Thanks so much! Though I do have one request on this and that is changing the color so something of a hex value or an RGB value. How can I change "border.borderColor = UIColor.darkGrayColor().CGColor" to be something with an RGB value or a hex value?
– Scott Perry
Jul 14 '16 at 5:29
|
show 9 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38303520%2fios-uitextfield-underline-style-in-swift%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just use a image as the background, the image contains a line at the bottom, and the above is transparent. This kind of image will fit your demand.
– childrenOurFuture
Jul 11 '16 at 9:35