How do I get TextField like this

问题

I've checked properties of UITextField and tried out to get a design for it like below. But I didn't succeed.

I thought to add one more UIView to get that black dim color which is around it. But I didn't know whether any properties are there in UITextField.

What do I need to do to get the same design as above.

UPDATE : This is my code

    self.txtUserName = [[UITextField alloc]initWithFrame:CGRectMake(Padding, height/3.5, width - (Padding*2), TextFieldHeight)];
    self.txtUserName.backgroundColor = [UIColor whiteColor];
    self.txtUserName.textColor = [UIColor whiteColor];
    self.txtUserName.borderStyle = UITextBorderStyleRoundedRect;
    [self.txtUserName.layer setBorderColor: [[[UIColor grayColor] colorWithAlphaComponent:0.5] CGColor]];
    [self.txtUserName.layer setBorderWidth: 5.0];
    [self.txtUserName.layer setCornerRadius:5];

Thanks for your time.

EDIT: I have the graphic assets and I want to utilize them programatically.

回答1:

Interface Builder:

Step 01 - adding the container views: add two views (and setup the suitable constraints) and connect them to the ViewController -as IBOutlets-:

Step 02 - adding the background gradient imageViews: add an "ImageView" in each of containers (or "Views" if you want to create your gradient programmatically instead of images, I recommend to do it), then set set the gradient image for them, don't forget to setup the suitable constraints for them; finally, connect them to the ViewController -as IBOutlets-:

Step 03 - adding the textfields: add a "TextField" on top of each "ImageView", they should be the same size as the background ImageViews. make sure to change the TextFields border style to no border from the attributes inspector:

setup the suitable constraints for them, and finally, connect them to the ViewController -as IBOutlets-:

Coding: Now, you need to add those lines in the "ViewDidLoad":

override func viewDidLoad() {
    super.viewDidLoad()

    // adding corner radius to the container views:
    viewUsernameContainer.layer.cornerRadius = 5
    viewPasswordContainer.layer.cornerRadius = 5

    // adding corner radius to the background imageviews:
    imgUsernameBackground.clipsToBounds = true
    imgUsernameBackground.layer.cornerRadius = 5
    imgPasswordBackground.clipsToBounds = true
    imgPasswordBackground.layer.cornerRadius = 5
}

Run the application, it should look like this:

What about the "validation" border? you can add those lines of code for the checked textfield (adding a border for the background ImageView):

// adding border to the username background ImageView
imgUsernameBackground.layer.borderWidth = 2
// whatever color you want...
imgUsernameBackground.layer.borderColor = UIColor.black.cgColor

and finally, it should look like this:

For sure, you can play with sizes, border widths and gradient style to make it looks good for your application.

Cheers up!

回答2:

You need to add your UITextFields as subviews of separate UIViews.

Set the UIView background color to:

backView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5]

Then set the edge rounding using:

backView.clipsToBounds = YES;
backView.layer.cornerRadius = 4.0;

For your UITextFields you can also set the clipping and corner radius. If you also want the red line use something like:

textView.layer.borderWidth = 2.0;
textView.layer.borderColor = [UIColor redColor];

回答3:

Add Two Separate UIView
For TextFields.Change Their Background color to Gray.
Place Text Fields on UIView.
And For Yellow Color,Change ViewControllers Background Color.

There You go

Hope This will Help

回答4:

You can design the UITextField on the UImageView like I did here

My Code :

UIImageView *imgVw = [[UIImageView alloc] initWithFrame:CGRectMake(20, 100, [UIScreen mainScreen].bounds.size.width - 40, 50)];
imgVw.backgroundColor = [UIColor colorWithWhite:0.2 alpha:0.4];
imgVw.layer.cornerRadius = 5.0;
imgVw.userInteractionEnabled = YES;
[self.view addSubview:imgVw];

UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];

UITextField *txtFld = [[UITextField alloc] initWithFrame:CGRectMake(5, 5, CGRectGetWidth(imgVw.frame) - 10, CGRectGetHeight(imgVw.frame) - 10)];
txtFld.leftView = leftView;
txtFld.leftViewMode = UITextFieldViewModeAlways;
txtFld.delegate = self;
txtFld.layer.borderColor = [UIColor redColor].CGColor;
txtFld.layer.borderWidth = 2.0;
txtFld.layer.cornerRadius = 5.0;
[imgVw addSubview:txtFld];

Output :

I have given some dummy color code, you can design accordingly. Hope it helps

Happy coding ...

来源：https://stackoverflow.com/questions/39721910/how-do-i-get-textfield-like-this

标签

ios

objective-c

uitextfield