CODEWITHSUNDEEP
iosobjective-cuitextfield
user1287145
user1287145

Reputation:

UITextField with rounded corners only on top

I want to implement an UITextField which has rounded corners only at top left and top right corner.

I know about the setter method setCornerRadius: which is a default option of UITextField, but this option only allows me to make all four corners of the txtfield round, but i only want the corners on the top to be round.

I'm now messing around since hours, I have read through Appple's docs a dozen of times, but I'm still unable to find out why my code wont work:

- (id) init
{
    // init elements
    UITextField *txt_password      = [[UITextField alloc] init];
    UIView *txt_password_paddingVc = [[UIView alloc] initWithFrame:CGRectMake(0,0,10,35)];

    // configure  txtfield
    [txt_password setSecureTextEntry:YES];
    [txt_password setDelegate:self];
    [txt_password setTag:100];
    [txt_password setPlaceholder:t(@"App Password")];
    [txt_password setLeftView:txt_password_paddingVc];
    [txt_password setRightView:txt_password_paddingVc];
    [txt_password setBackgroundColor:[UIColor whiteColor]];
    [txt_password setLeftViewMode:UITextFieldViewModeAlways];
    [txt_password setRightViewMode:UITextFieldViewModeAlways];
    [txt_password setTranslatesAutoresizingMaskIntoConstraints:NO];
    [txt_password setAutocapitalizationType:UITextAutocapitalizationTypeNone];
    [txt_password setAutocorrectionType:UITextAutocorrectionTypeNo];
    [txt_password.layer setBorderColor:[UIColor colorWithRed:228/255.0 green:228/255.0 blue:228/255.0 alpha:1].CGColor];
    [txt_password.layer setBorderWidth:1.0f];
    [txt_password.layer setShadowOpacity:0.0];
    [txt_password.layer setMasksToBounds:YES];

    // make round corners for txtfield
    CAShapeLayer *passwordMaskLayer = [[CAShapeLayer alloc] init];
    UIBezierPath *passwordMaskPathWithRadiusTop = [UIBezierPath bezierPathWithRoundedRect:txt_password.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(5.0, 5.0)];
    passwordMaskLayer.frame     = txt_password.bounds;
    passwordMaskLayer.path      = passwordMaskPathWithRadiusTop.CGPath;
    passwordMaskLayer.fillColor = [UIColor whiteColor].CGColor;
    [txt_password.layer.mask setMask:passwordMaskLayer];

    // add txtfield to view
    [self.view addSubview:txt_password];

return self;
}

Upvotes: 3

Views: 3237

Answers (2)

Trung
Trung

Reputation: 86

The line:

[txt_password.layer.mask setMask:passwordMaskLayer];

Should be:

[txt_password.layer setMask:passwordMaskLayer];

Upvotes: 4

Hanny
Hanny

Reputation: 1342

You can try this one. I hope this helps.

-(void)CustomizeTextField:(UITextField *)myTextField
{
    CGRect rect = myTextField.bounds;
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect
                                           byRoundingCorners:UIRectCornerTopLeft |UIRectCornerTopRight
                                                 cornerRadii:CGSizeMake(6.0, 6.0)];
   CAShapeLayer *layers = [CAShapeLayer layer];
   layers.frame = rect;
   layers.path = path.CGPath;
   myTextField.layer.mask = layers;
}

Upvotes: 5

Related Questions