CALayer边框出现在子视图上方(我认为与Z顺序有关) [英] CALayer Border is appearing above subview (Z-order related, I think)

问题描述

我已经搜索了，但找不到此行为的原因.

I have searched but could not find the reason for this behavior.

我有一个要设置其图像的UIButton.按钮的显示方式如下.请注意，这只是预期按钮设计的photoshop:

I have a UIButton whose image I am setting. Here is how the button should appear. Note that this is just a photoshop of the intended button design:

从本质上讲，这是一个方形的自定义UIButton，带有白色边框和一些环绕的阴影.在右上角有一个"X"标记，它将以编程方式添加为子视图.

Essentially, it is a square custom UIButton with a white border and a little surrounding shadow. In the upper right corner, there is a "X" mark, that will be added programmatically as a subview.

这是实际应用中按钮的屏幕截图.此时，我仅添加了阴影和X标记作为子视图:

Here is the screenshot of the button within the actual app. At this point, I have only added a shadow and the X mark as a subview:

当我尝试添加白色边框时，外观如下所示:

How, when I try to add the white border, here is what it looks like:

在X标记子层上方似乎出现了白色边框.我不知道为什么.

It seems that the white border is appearing above the X mark sublayer. I don't know why.

这是我正在使用的代码:

Here is the code that I am using:

// selectedPhotoButton is the UIButton with UIImage set earlier
// At this point, I am adding in the shadow
[selectedPhotoButton layer] setShadowColor:[[UIColor lightGrayColor] CGColor]];
[[selectedPhotoButton layer] setShadowOffset: CGSizeMake(1.0f, 1.0f)];
[[selectedPhotoButton layer] setShadowRadius:0.5f];
[[selectedPhotoButton layer] setShadowOpacity:1.0f]; 

// Now add the white border    
[[selectedPhotoButton layer] setBorderColor:[[UIColor whiteColor] CGColor]];
[[selectedPhotoButton layer] setBorderWidth:2.0];

// Now add the X mark subview
UIImage *deleteImage = [UIImage imageNamed:@"nocheck_photo.png"];
UIImageView *deleteMark = [[UIImageView alloc] initWithFrame:CGRectMake(53, -5, 27, 27)];
deleteMark.contentMode = UIViewContentModeScaleAspectFit;
[deleteMark setImage:deleteImage];
[selectedPhotoButton addSubview:deleteMark];
[deleteMark release];

我不明白为什么边框会出现在deleteMark子视图上方.有什么方法可以达到预期的效果吗?

I don't understand why the border is appearing above the deleteMark subview. Is there any way to get the intended effect?

谢谢！

推荐答案

摘自CALayer上Apple的文档:

From Apple's docs on CALayer:

边框是从接收者的边界按borderWidth绘制的.它在接收者的内容和子层之上进行了合成，并包含cornerRadius属性的效果.

The border is drawn inset from the receiver’s bounds by borderWidth. It is composited above the receiver’s contents and sublayers and includes the effects of the cornerRadius property.

为了获得所需的效果，建议您将图像放入自己的子视图/子图层中，并设置该子图层的borderWidth属性.

In order to get the effect you want, I suggest you put the image into an own subview/sublayer and set that sublayer's borderWidth property.

这篇关于CALayer边框出现在子视图上方(我认为与Z顺序有关)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！