Mixed use of UIview Shadows and fillets

Shadow blending with rounded corners

Do a project encountered a problem is in the rounded corners of the keys on the shadow failed and then there is this log.

Making UIView rounded is simple, requiring only three lines of code

CALayer * layer = [avatarImageView layer];

[layer setMasksToBounds:YES];

[layer setCornerRadius:9.0];

However, if you want to shadow a rounded view, traditional shading methods will not work.

The traditional method is:

avatarImageView.layer.shadowColor = [UIColor blackColor].CGColor;

avatarImageView.layer.shadowOffset = CGSizeMake(0, 1);

avatarImageView.layer.shadowOpacity = 1;

Because setMasksToBounds means that the content outside the frame has been reduced, only the content inside the frame can be displayed. Because the shadow added by this method is outside the frame, it is clipped.

The traditional method does not work, so we can put the rounded avatarImageView into a UIView of the same size as it, so that this view has shadows, and the effect looks the same.

CGRect rect;

rect = CGRectMake(0, 0, 48, 48);

avatarImageView = [[UIImageView alloc] initWithFrame:rect];

avatarImageView.p_w_picpath = [UIImage p_w_picpathNamed:@"test.png"];

//Round the corners

CALayer * layer = [avatarImageView layer];

[layer setMasksToBounds:YES];

[layer setCornerRadius:9.0];

//Add a shadow by wrapping the avatar into a container

UIView * shadow = [[UIView alloc] initWithFrame: rect];

avatarImageView.frame = CGRectMake(0,0,rect.size.width, rect.size.height);

// setup shadow layer and corner

//Shadow

shadow.layer.shadowColor = [UIColor blackColor].CGColor;

shadow.layer.shadowOffset = CGSizeMake(4, 1);//Offset

shadow.layer.shadowOpacity = 0.8;//Transparency

shadow.layer.shadowRadius = 4;//shadow radius

shadow.clipsToBounds = NO;

btn.layer.cornerRadius=40;

btn.clipsToBounds=YES;

// combine the views

[shadow addSubview: avatarImageView];

The rounded shadow effect appears.