Summary of efficient ways to cut corners of common iOS components

Preface

Rounded corners (RounderCorner) are a very common viewing effect, which is softer and more graceful than right angles and is easy to accept. But many people don’t know the correct way and principle of how to set up rounded corners.

In iOS client development, you often encounter the need for rounded corner views. This article briefly summarizes some rounded corner cutting methods of UIView and its subclasses, and ensures that off-screen rendering is avoided. I won’t say much below, let’s take a look at the detailed introduction together.

UIView (excluding its subclasses)

UIView *view = [[UIView alloc] init];
 = [UIColor blackColor];
 = ;
// Write any line in the following two lines = NO;
 = NO;
// Do not add the following two lines! = YES;
 = YES;

Note:UIView Just set the cornerRadius property of the layer (if you don’t understand, you can check the description of cornerRadius in the official document). If set = YES, which will cause unnecessary off-screen rendering.

Text class view

UITextField

There are two ways to implement UITextField

// Naturally support the setting of rounded bordersUITextField *textField = [[UITextField alloc] init];
 = UITextBorderStyleRoundedRect;

// Similar to UIViewUITextField *textField = [[UITextField alloc] init];
 = cornerRadius;

UITextView

// Similar to UIViewUITextView *textView = [[UITextView alloc] init];
 = cornerRadius;

UILabel

UILabel *label = [[UILabel alloc] init];
// Here’s the point!  !  Set the layer background color of the view, never set it directly = [UIColor grayColor].CGColor;
 = cornerRadius;

other

UIButton

Description: If the background image of UIButton is a complex image, it can be realized by relying on UI cutting. If it is a simple solid background image, you can use the code to draw pictures with rounded corners.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
// Set the background image of UIButton.[button setBackgroundImage:image forState:UIControlStateNormal];

Background picture drawing method

+ (UIImage *)pureColorImageWithSize:(CGSize)size color:(UIColor *)color cornRadius:(CGFloat)cornRadius {
 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, , )];
  = color;
  = cornerRadius;
 // The following method, the first parameter indicates the area size.  The second parameter indicates whether it is non-transparent.  If you need to display a translucent effect, you need to pass NO, otherwise you will pass YES.  The third parameter is screen density UIGraphicsBeginImageContextWithOptions(, NO, [UIScreen mainScreen].scale);
 [ renderInContext:UIGraphicsGetCurrentContext()];
 UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();
 return image;
}

UIImageView

UIImageView has four ways to implement rounded corners:

Image capture method (good performance, basically no frame drops)

@implementation UIImage (extend)
- (UIImage *)drawRectWithRoundedCorner
{
 CGRect rect = CGRectMake(, , , ); 
 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius: * 0.5];
 UIGraphicsBeginImageContextWithOptions(, false, [UIScreen mainScreen].scale);
 CGContextAddPath(UIGraphicsGetCurrentContext(), );
 CGContextClip(UIGraphicsGetCurrentContext());
 [self drawInRect:rect];
 CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathFillStroke);
 UIImage *output = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext(); 
 return output;
}
@end

Bezier curve cuts rounded corners (not recommended, frame drop is severe)

- (UIImageView *)roundedRectImageViewWithCornerRadius:(CGFloat)cornerRadius {
 UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect: cornerRadius:cornerRadius];
 CAShapeLayer *layer = [CAShapeLayer layer];
  = ;
  = layer;
 return self;
}

Draw masks of four corners (use scenarios are limited)

Add a four corners to the UIImageView with content, and the other parts are transparent views, only the rounded corners of the UIImageView are blocked. However, it is necessary to ensure that the background color of the blocked part should be the same as the surrounding background to avoid being exposed. Therefore, when the UIImageView is in a complex background, it is not suitable to use this method.

The least recommended method (it is recommended when a page has only a small number of rounded corner pictures)

UIImageView *imageView = [[UIImageView alloc] init];
 = ;
 = YES;

References:

Core Animation Tutorial

Summarize

The above is a summary of the commonly used components in the development process. If there is a better method or something wrong in the article, please correct me and propose it. Thank you.

Okay, the above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.