CODEWITHSUNDEEP
iosswiftuitextfieldbordershadow
S.Hary
S.Hary

Reputation: 165

UITextField without borders and with shadows

I am struggling with a silly thing I guess... Here is my problem. I want to get rid of my rounded gray border make it hidden or transparent so we can only see the shadows.

Here is my situation:

Actual Result

with this following code: 

 private func styleTextField(textField: UITextField)
{
    textField.borderStyle = UITextBorderStyle.RoundedRect
   //textField.layer.cornerRadius = 5.0
   // textField.borderStyle = UITextBorderStyle.None
    textField.layer.borderWidth = 0.0
    textField.layer.masksToBounds = false
    textField.layer.shadowRadius = 4.0
    textField.layer.borderColor = UIColor.whiteColor().CGColor
    textField.layer.shadowColor = UIColor.grayColor().CGColor
    textField.layer.shadowOffset = CGSizeMake(0.0, 0.0)
    textField.layer.shadowOpacity = 0.4
    //textField.layer.borderColor = UIColor.clearColor().CGColor
}

But I want this following result:

Final wanted result

Of course, I think I can achieve that but embed it inside a view, but It's not clean at all especially for this kind of things.

Any idea on how to achieve that ? Or Fix this ?

EDIT 1 : Actual code after suggestions. If this can help.

`class SignUpViewController: UIViewController {

@IBOutlet weak var facebookButton: UIButton!
@IBOutlet weak var connectButton: UIButton!
@IBOutlet weak var passField: UITextField!
@IBOutlet weak var emailField: UITextField!
@IBOutlet weak var nomField: UITextField!
@IBOutlet weak var prenomField: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()


    emailField = self.styleTextField(emailField)
    passField = self.styleTextField(passField)
    nomField = self.styleTextField(nomField)
    prenomField = self.styleTextField(prenomField)

    self.styleButton(self.connectButton)
    self.styleButton(self.facebookButton)
}


private func styleTextField(textField: UITextField) -> UITextField
{
    textField.borderStyle = UITextBorderStyle.RoundedRect
    textField.layer.borderWidth = 2.0
    textField.layer.borderColor = UIColor.clearColor().CGColor


    textField.layer.masksToBounds = false
    textField.layer.shadowColor = UIColor.lightGrayColor().CGColor
    textField.layer.shadowOpacity = 0.5
    textField.layer.shadowRadius = 4.0
    textField.layer.shadowOffset = CGSizeMake(0.0, 1.0)

    return textField
}

}`

EDIT 2: Type of border when I create it in my Storyboard. Border type at creation Regards,

Hary

Upvotes: 5

Views: 3542

Answers (3)

S.Hary
S.Hary

Reputation: 165

UPDATE FOR SWIFT 4.2:

Made it work using those lines by concentrating everything on the layer: 

private func styleTextField(textField: UITextField){
    textField.borderStyle = .none
    textField.layer.masksToBounds = false
    textField.layer.cornerRadius = 5.0;
    textField.layer.backgroundColor = UIColor.white.cgColor
    textField.layer.borderColor = UIColor.clear.cgColor
    textField.layer.shadowColor = UIColor.black.cgColor
    textField.layer.shadowOffset = CGSize(width: 0, height: 0)
    textField.layer.shadowOpacity = 0.2
    textField.layer.shadowRadius = 4.0
}

Thanks for your help guys !

Regards,

Hary

Upvotes: 7

Digvijay Gida
Digvijay Gida

Reputation: 89

Swift 4.2 code is IBDesignable Shadow class easily use with storyboard and view all change

@IBDesignable
class CustomTextfiled: UITextField {

override func awakeFromNib() {
    super.awakeFromNib()
}

override func layoutSubviews() {
    super.layoutSubviews()
}


@IBInspectable var borderColor: UIColor = UIColor.black {
    didSet {

        layer.borderColor = borderColor.cgColor
        borderStyle = UITextField.BorderStyle.none
        layer.masksToBounds = false
        layer.cornerRadius = 5.0;
        layer.backgroundColor = UIColor.white.cgColor
        layer.borderColor = UIColor.clear.cgColor
        layer.shadowColor = borderColor.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowOpacity = 0.15
        layer.shadowRadius = 4.0

    }
}

Upvotes: 0

Akshansh Thakur
Akshansh Thakur

Reputation: 5331

try this :

textField.layer.borderColor = UIColor.clearColor().CGColor
    textField.layer.masksToBounds = false

    textField.layer.shadowColor = UIColor.blackColor().CGColor

    textField.layer.shadowOpacity = 1.0
    textField.layer.shadowRadius = 50.0

and then continue enter image description here

Upvotes: 1

Related Questions