CODEWITHSUNDEEP
iosobjective-c
amin akbarzade
amin akbarzade

Reputation: 227

Creating Label like an Image in Objective C,iOS

how can I create a label below like this image in iOS (Objective-c)?

sample label

My problem is not all corners, because I can round top-left & bottom-right corners by writing codes like this:

CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.customView.bounds
                                       byRoundingCorners:UIRectCornerBottomRight | UIRectCornerTopLeft
                                             cornerRadii:(CGSize){7.0, 7.0}].CGPath;
self.customLabel.layer.mask = maskLayer;

and the result is this: my sample label

Now how can I write codes for top-right & bottom-left to reach the goal?

Upvotes: 2

Views: 201

Answers (4)

hasan
hasan

Reputation: 24205

Update:

I didn't use the height as a variable in my equations it may affect the results.

Better results

enter image description here

- (void)drawRect:(CGRect)rect
{
    CGFloat curveWidth = 40;
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;

//    UIEdgeInsets insets = {0, curveWidth, 0, curveWidth};
//    [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];

    UIBezierPath *path = [UIBezierPath bezierPath];
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor setFill];

    [path moveToPoint:CGPointMake(0, height)];
    [path addCurveToPoint:CGPointMake(curveWidth*2, 0) controlPoint1:CGPointMake(curveWidth*0.75, height) controlPoint2:CGPointMake(curveWidth*0.25, 0)];

    [path addLineToPoint:CGPointMake(width, 0)];
    [path addCurveToPoint:CGPointMake(width-curveWidth*2, height) controlPoint1:CGPointMake(width-curveWidth*0.75, 0) controlPoint2:CGPointMake(width-curveWidth*0.25, height)];

    [path closePath];
    [path fill];

    [super drawRect: rect];
}

Original Answer:

I wrote the code for you. follow the steps:

enter image description here

  1. Create a custom UILabel by subclassing it. (code below)
  2. Add a UILabel to your view using interface builder.
  3. Add your constraints.
  4. In the Identifier inspector tab, change class to your.

--

@implementation CurvedLabel

- (id)initWithCoder:(NSCoder *)aDecoder
{
    if (self = [super initWithCoder:aDecoder])
    {

    }
    return self;
}

- (void)drawRect:(CGRect)rect
{
    CGFloat curveWidth = 30;
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;

//    UIEdgeInsets insets = {0, curveWidth, 0, curveWidth};
//    [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];

    UIBezierPath *path = [UIBezierPath bezierPath];
    UIColor *fillColor = [UIColor orangeColor];
    [fillColor setFill];

    [path moveToPoint:CGPointMake(0, height)];
    [path addCurveToPoint:CGPointMake(curveWidth*2, 0) controlPoint1:CGPointMake(curveWidth, height) controlPoint2:CGPointMake(0, 0)];

    [path addLineToPoint:CGPointMake(width, 0)];
    [path addCurveToPoint:CGPointMake(width-curveWidth*2, height) controlPoint1:CGPointMake(width-curveWidth, 0) controlPoint2:CGPointMake(width, height)];

    [path closePath];
    [path fill];

    [super drawRect: rect];
}

@end

Upvotes: 2

Simon Degn
Simon Degn

Reputation: 968

Sure you can do it with a UIBezierPath. I have made a pretty simple setup you can use. 

// This is the parallelogram's corner structure 
//    1------2
//   /      /
//  /      /
// 4------3 

 int xOffset = 150; // x Offset on the parent view - here self.view
    int yOffset = 50; // y Offset on the parent view - here self.view
    int flatten = 50; // The difference from center of curve to spike point (try to adjust it and see what it does)
    int width = 200; 
    int height = 100;

    UIBezierPath * maskLayer = [UIBezierPath bezierPath];

    // Start at corner 1
    [maskLayer moveToPoint: CGPointMake(xOffset+flatten, yOffset)];

    // Go to corner 2
    [maskLayer addLineToPoint: CGPointMake(xOffset+width+flatten, yOffset)];

    // Curve it down to corner 3
    [maskLayer addCurveToPoint: CGPointMake(xOffset+width-flatten, height+yOffset) controlPoint1: CGPointMake(xOffset+width, yOffset) controlPoint2:CGPointMake(xOffset+width, height+yOffset)];

    // Go straight to corner 4
    [maskLayer addLineToPoint: CGPointMake(xOffset, height+yOffset)];

    // Curve it back to corner 1
    [maskLayer addCurveToPoint: CGPointMake(xOffset+(2*flatten), yOffset)  controlPoint1:CGPointMake(xOffset+flatten, yOffset+height) controlPoint2: CGPointMake(xOffset+flatten, yOffset)];

    // Create the shape and fill it with a color 
    CAShapeLayer *maskShapeLayer = [CAShapeLayer layer];
    maskShapeLayer.path = maskLayer.CGPath;
    maskShapeLayer.fillColor = [UIColor redColor].CGColor;

    // add the layer to a view's layer (here self.view.layer)
    [self.view.layer addSublayer:maskShapeLayer];

If you wanna make the two ´spikes´ more rounded, you can make the y-value in the addCurveToPoint points closer to the parallelogram's y-center-axis (height/2).

Upvotes: 1

Munahil
Munahil

Reputation: 2419

You will have to useaddCurveToPoint of UIBezierPath to make it curvy by giving it controlPoint1 and controlPoint2

For reference, you can look at Apple's Documentation

Also, this is a helpful reference too. You will have to play around with UIBezierPath's properties

Upvotes: 0

iCediCe
iCediCe

Reputation: 1722

I don't believe there is any simple way of doing that, you could use a png file, if that is not a option you should look in to UIBezierPath, check this link out: ios drawing concepts

Upvotes: 1

Related Questions