围绕UIView的一些角落并围绕视图的图层边界 [英] Round some corners of UIView and round the view’s layer’s border too

问题描述

我试图围绕UIView的底部两个角落，并且图层的边框也显示为圆形。我目前正在做：

I am trying to round the bottom two corners of a UIView, and have the layer’s border show up rounded as well. I am currently doing:

UIRectCorners corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
CGSize radii = CGSizeMake(kThisViewCornerRadius, kThisViewCornerRadius);
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:myView.bounds
                                           byRoundingCorners:corners
                                                 cornerRadii:radii];

CAShapeLayer *maskLayer = [CAShapeLayer layer];
[maskLayer setPath:path.CGPath];
myView.layer.mask = maskLayer;

这适用于普通视图。但是， myView 的图层有 borderColor 和 borderWidth 设置，从截图中可以看出，图层的边框没有四舍五入：

This works fine for normal views. However, myView’s layer has its borderColor and borderWidth set, and as you can see from the screenshot, the layer’s border is not getting rounded:

我还尝试了子类化UIView并返回 [CAShapeLayer layer] 来自 + [Class layerClass] ，并将视图的图层设置为形状图层，但边框最终位于视图的子视图下方。

I also tried subclassing UIView and returning [CAShapeLayer layer] from +[Class layerClass], and setting up the view’s layer as a shape layer, but the border ended up beneath the view’s subviews.

是否可以围绕视图的某个角落，围绕视图的图层边框，并将子视图剪切到图层边框下方？

Is it possible to round some of a view’s corners, round the view’s layer’s border, and clip the subviews underneath the layer’s border?

请注意，不关于如何围绕某些角落而不是其他角落，而是如何使笔划正确行为。

Note that this is not about how to round some corners and not others, but rather how to get the stroke to behave correctly.

推荐答案

我想出了一种新的思考方式，感谢DavidRönnqvist的评论。

I figured out a new way of thinking about it, thanks to David Rönnqvist’s comment.

我试图在一个层中进行角落舍入和笔划。取而代之的是，我将其分为两层：一层用于遮盖视图的图层以圆角，另一层用于添加笔划。

I was trying to do the corner rounding and the stroke all in one layer. Instead, I broke it up into two layers: one to mask the view’s layer to round the corners, and the other in a view to add the stroke.

UIView *containerView = [[UIView alloc] initWithFrame:someFrame];

UIRectCorners corners = UIRectCornerBottomLeft | UIRectCornerBottomRight;
CGSize radii = CGSizeMake(kThisViewCornerRadius, kThisViewCornerRadius);

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:myView.bounds
                                           byRoundingCorners:corners
                                                 cornerRadii:radii];

// Mask the container view’s layer to round the corners.
CAShapeLayer *cornerMaskLayer = [CAShapeLayer layer];
[cornerMaskLayer setPath:path.CGPath];
containerView.layer.mask = cornerMaskLayer;

// Make a transparent, stroked layer which will dispay the stroke.
CAShapeLayer *strokeLayer = [CAShapeLayer layer];
strokeLayer.path = path.CGPath;
strokeLayer.fillColor = [UIColor clearColor].CGColor;
strokeLayer.strokeColor = [UIColor redColor].CGColor;
strokeLayer.lineWidth = 2; // the stroke splits the width evenly inside and outside,
                           // but the outside part will be clipped by the containerView’s mask.

// Transparent view that will contain the stroke layer
UIView *strokeView = [[UIView alloc] initWithFrame:containerView.bounds];
strokeView.userInteractionEnabled = NO; // in case your container view contains controls
[strokeView.layer addSublayer:strokeLayer];

// configure and add any subviews to the container view

// stroke view goes in last, above all the subviews
[containerView addSubview:strokeView];

这篇关于围绕UIView的一些角落并围绕视图的图层边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！