UIButton圆角时为啥会有粗糙的黑边？

Posted 2023-03-21

【中文标题】UIButton圆角时为啥会有粗糙的黑边？

【英文标题】：Why is there a rough black edge when rounding corner of UIButton?UIButton圆角时为什么会有粗糙的黑边？

【发布时间】：2014-06-08 13:36:47

【问题描述】：

我正在向导航栏添加UIButton（带背景图片）并设置带边框的圆角。我在拐角处看到一个奇怪的黑色轮廓：

这是我用来从viewDidLoad 创建按钮的代码：

ProfileImageService *profileImageService = [ProfileImageService getService];

CGRect frame = CGRectMake(0, 0, 32, 32);
UIButton *button = [[UIButton alloc] initWithFrame:frame];
[button setBackgroundImage:profileImageService.profileImage forState:UIControlStateNormal];
[button addTarget:self action:@selector(showMenu) forControlEvents:UIControlEventTouchUpInside];

button.layer.cornerRadius = button.frame.size.height / 2.0;
button.layer.masksToBounds = YES;
button.clipsToBounds = YES;
button.layer.borderWidth = 3;
button.layer.borderColor = [UIColor colorWithRed:0 green:0.67 blue:0.97 alpha:1].CGColor;

self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:button];

如何使边框平滑并消除细微的黑色轮廓？

【问题讨论】：

用 UIButtonTypeCustom 制作一个按钮（这样你会得到一个没有样式的按钮），然后设置它的框架。试试看。

@pawan 我尝试使用UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; 创建按钮，然后设置框架，但我仍然遇到完全相同的问题。还有其他想法吗？

【参考方案1】：

您看到的是您的个人资料图片（人的脸）从边缘渗出。这是因为边框是抗锯齿的，因此具有少量的透明度，个人资料图像可能会流血。

由于您将个人资料图片和边框剪裁在一起，因此没有什么可以阻止个人资料图片延伸穿过边框。 （即 clipsToBounds 不会将内容剪辑到边框内部；它会将所有内容剪辑到边框外部）您可以使用亮红色图像来证明这一点：您会看到亮红色边缘。

如果您可以事先将个人资料图片设置为圆形和正确的尺寸（离线或在代码中），那么您将避免此问题。

我看到的其他解决方案是实现您自己的 drawRect: 方法并自己进行绘图，或者创建按钮的另一个子层来保存以相同方式剪切但没有边框的图像。 （无论哪种方式，您可能需要为此制作自己的 UIControl 而不是使用 UIButton，因为操作按钮的图层可能会导致奇怪的行为。）

编辑：这里还有一些其他解决方案：ios: Rounded rectangle with border bleeds color