Set rounded corners and circular images for iOS

Set rounded corners and circular images for iOS

Regular and positive styles tend to appear stiff, and the rounded corner styles lead to a different kind of intimacy. Nowadays, more and more rounded corners are used, and most images such as user portraits are displayed in circles, this article describes how to set the button, corner of the text box, and create a circular image.

 

Let's take a look:

As shown in, we made a circular avatar, a fully semi-circular corner button, a small rounded corner button, and a label with a border and a rounded border.

The general idea is as follows:

View has a layer attribute. We use some layer settings to achieve the rounded corner. Therefore, you can set the corresponding rounded corner for views such as UIImageView, UIButton, and UILabel.

 

To create a positive circle for a circular avatar, we need to first set the height and width of the UIImageView to the same, and then we can set the angle of the rounded corner to the height divided by 2, which is equivalent to 90 degrees. The Code is as follows:

 

// Circular Avatar UIImageView * avatarImgView = [[UIImageView alloc] initWithFrame: CGRectMake (SCREENWIDTH-75)/2,150, 75, 75)]; avatarImgView. image = [UIImage imageNamed: @ "icon"]; // The image is circular. The angle of the rounded corner is half of the height, while the width and height are consistent. Therefore, the positive circle avatarImgView can be formed. layer. masksToBounds = YES; avatarImgView. layer. cornerRadius = avatarImgView. frame. size. height/2; [self. view addSubview: avatarImgView];

 

For the second fully semi-circular corner, we also set the angle to the height of the general, so that we can sound the semi-circle on both sides, because the width and height are different, so it is not a positive circle:

 

// The button UIButton * btnOne = [[UIButton alloc] initWithFrame: CGRectMake (SCREENWIDTH-200)/2,250,200, 40); [btnOne setTitle: @ "Full rounded corner" forState: UIControlStateNormal]; [btnOne setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btnOne setBackgroundColor: [UIColor colorWithRed: 228.0/255.0 green: 117.0/255.0 blue: 97.0/255.0 alpha: 1.0]; // button arc, with half of the height as the rounded corner, the two sides form a complete semi-circle btnOne. layer. masksToBounds = YES; btnOne. layer. cornerRadius = btnOne. frame. size. height/2; [self. view addSubview: btnOne];

 

For the button with the third small rounded corner, we can directly set the rounded corner to a number. The size of the number determines the style of the button rounded corner. Here we set it to 4:

 

// The button UIButton * btnTwo = [[UIButton alloc] initWithFrame: CGRectMake (SCREENWIDTH-200)/2,315,200, 40)]; [btnTwo setTitle: @ "" forState: UIControlStateNormal]; [btnTwo setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btnTwo setBackgroundColor: [UIColor colorWithRed: 228.0/255.0 green: 117.0/255.0 blue: 97.0/255.0 alpha: 1.0]; // button arc, with half of the height as the rounded corner, the two sides form a complete semi-circle btnTwo. layer. masksToBounds = YES; btnTwo. layer. cornerRadius = 4.0; [self. view addSubview: btnTwo];

 

The fourth label, we need to add a border first. We can set the Border width to 1 to display the border, and then set the rounded corner to 4:

 

// Border rounded corner Label UILabel * label = [[UILabel alloc] initWithFrame: CGRectMake (SCREENWIDTH-200)/2,390,200, 40)]; label. text = @ "label with border rounded corner"; label. textAlignment = NSTextAlignmentCenter; label. textColor = [UIColor colorWithRed: 228.0/255.0 green: 117.0/255.0 blue: 97.0/255.0 alpha: 1.0]; // set the Border Width label. layer. borderWidth = 1.0; // set the border color label. layer. borderColor = [[UIColor colorWithRed: 228.0/255.0 green: 117.0/255.0 blue: 97.0/255.0 alpha: 1.0] CGColor]; // set the rounded corner [label. layer setCornerRadius: 4.0]; [self. view addSubview: label];

 

As shown above, the basic rounded corner settings are implemented, which is very simple and practical.