How get textfield with some corners rounded?

Question

I use next code:

- (void)setMaskByRoundingCorners:(UIRectCorner)corners withCornerRadius:(float)radius
    {
        UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)];

        CAShapeLayer* shape = [[CAShapeLayer alloc] init];
        [shape setPath:rounded.CGPath];
        shape.frame = self.bounds;
        self.layer.mask = shape;
    }

But now I see this strange effect.

I call it from viewcontroller, after didlayoutsubviews. I do that for main thread updating.

- (void)viewDidLayoutSubviews
{
    [self initUIfeatures];
}

- (void)initUIfeatures
{
    [authTextField setMaskByRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft) withCornerRadius:8.0f]; 
}

The issue is rounded corners getting cutoff.

@alexburtnik - (void)viewDidLayoutSubviews { [self initUIfeatures]; } - (void)initUIfeatures { [authTextField setMaskByRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft) withCornerRadius:8.0f]; } — Viktorianec, Nov 07 '16 at 09:55
Possible duplicate of [how to set cornerRadius for only top-left and top-right corner of a UIView?](http://stackoverflow.com/questions/10167266/how-to-set-cornerradius-for-only-top-left-and-top-right-corner-of-a-uiview) — Mohammad Zaid Pathan, Nov 07 '16 at 10:04
What is your issue? Are you asking about the gap in the corners?? If so, just give your radius value some what less. like give radius value 4.0f. Let me know then. — Janmenjaya, Nov 07 '16 at 10:05
@ZaidPathan it's not duplicate! My problem is with textfield not with simple UIView. I use my function for all others children of uiview and it's works fine, but here i have a bug. — Viktorianec, Nov 07 '16 at 10:09
You mean to say the inner and outer line of the border should be rounded type. Because your code make the outer border line rounded.? — Janmenjaya, Nov 07 '16 at 10:11
@Viktorianec , you could try given answer above and make your textfield border style to plain. — Mohammad Zaid Pathan, Nov 07 '16 at 10:11
@ZaidPathan it's plain style. And I am trying it before. But someone downvote my question. — Viktorianec, Nov 07 '16 at 10:12
@Janmenjaya it's textfield. Do you mean that's here two types of corners? — Viktorianec, Nov 07 '16 at 10:12
Possible duplicate of [UITextField with rounded corners only on top](http://stackoverflow.com/questions/23504269/uitextfield-with-rounded-corners-only-on-top) — Annie Gupta, Nov 07 '16 at 10:14
Is this what you want? https://drive.google.com/a/andolasoft.co.in/file/d/0Bz4NajACoTP0YlFodi0teHRUbU0/view?usp=sharing — Janmenjaya, Nov 07 '16 at 10:31
@Viktorianec Is this what you want ? SourceCode : https://drive.google.com/file/d/0B4mGZw4MNicDZG1seWYtaVk3Yjg/view?usp=sharing Image : https://drive.google.com/file/d/0B4mGZw4MNicDRUhVZGY1WXYyVVk/view?usp=sharing — Mohammad Zaid Pathan, Nov 07 '16 at 10:59
@ZaidPathan yes, please add this function to answer and I marked it right. Great work:) Thank you. — Viktorianec, Nov 07 '16 at 11:31

score 1 · Accepted Answer · edited May 23 '17 at 12:01

Add these functions,

-(void)roundCorners:(UIRectCorner)corners radius:(CGFloat)radius
{
    CGRect bounds = _IBtxtField.bounds;
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:bounds
                                                   byRoundingCorners:corners
                                                         cornerRadii:CGSizeMake(radius, radius)];

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = bounds;
    maskLayer.path = maskPath.CGPath;

    _IBtxtField.layer.mask = maskLayer;

    CAShapeLayer*   frameLayer = [CAShapeLayer layer];
    frameLayer.frame = bounds;
    frameLayer.path = maskPath.CGPath;
    frameLayer.strokeColor = [UIColor blackColor].CGColor;
    frameLayer.fillColor = nil;

    [_IBtxtField.layer addSublayer:frameLayer];
}

-(void)roundCornersRadius:(CGFloat)radius
{
    [self roundCorners:(UIRectCornerTopLeft|UIRectCornerTopRight | UIRectCornerBottomLeft) radius:radius];
}

Use like this,

[self roundCornersRadius:10];

Ref

SourceCode

score 0 · Answer 2 · answered Nov 07 '16 at 10:07

I have made custom class for the same. You can use below code any can change in storyboard as you want and the corner radius you want.

import UIKit

@IBDesignable
class CustomRoundedTextField: UITextField {

    @IBInspectable var lColor: UIColor = UIColor(red: (37.0/255.0), green: (252.0/255), blue: (244.0/255.0), alpha: 1.0)
    @IBInspectable var lWidth: CGFloat = 1
    @IBInspectable var lCornerRadius: CGFloat = 8
    @IBInspectable var sColor:UIColor = UIColor(red: (37.0/255.0), green: (252.0/255), blue: (244.0/255.0), alpha: 1.0)
    @IBInspectable var TLRCorner:Bool = false
    @IBInspectable var TRRCorner:Bool = false
    @IBInspectable var BLRCorner:Bool = false
    @IBInspectable var BRRCorner:Bool = false
    @IBInspectable var XInset:CGFloat = 10
    @IBInspectable var YInset:CGFloat = 10

    required internal init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override internal func drawRect(rect: CGRect) {
        addBorderFieldRect()
    }

    override func textRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectInset(bounds, XInset, 0)
    }

    override func editingRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectInset(bounds, YInset, 0)
    }

    func addBorderFieldRect() {
        let rectanglePath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: [
            TLRCorner ? .TopLeft : [],
            TRRCorner ? .TopRight : [],
            BLRCorner ? .BottomLeft : [],
            BRRCorner ? .BottomRight : []
            ], cornerRadii: CGSizeMake(lCornerRadius, lCornerRadius))
        rectanglePath.closePath()
        self.lColor.setFill()
        rectanglePath.fill()
        self.sColor.setStroke()
        rectanglePath.lineWidth = lWidth
        rectanglePath.stroke()
    }

}

How get textfield with some corners rounded?

2 Answers2