Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 232
S.Hary Avatar asked Jun 24 '16 13:06

S.Hary


2 Answers

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

like image 186
S.Hary Avatar answered Oct 28 '22 00:10

S.Hary


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

like image 22
Akshansh Thakur Avatar answered Oct 27 '22 22:10

Akshansh Thakur