iOS:带边框的圆角矩形颜色

问题描述 投票:18回答:7

通过将cornerRadius应用到UIImageView的图层,并通过borderWithborderColor添加边框,我正在绘制化身图片。像这样:

self.layer.masksToBounds = YES;
self.layer.cornerRadius = imageDimension / 2.f;
self.layer.borderWidth = 1.f;
self.layer.borderColor = borderColor.CGColor;

这很有效,除了边界外的这种微小但明显的内容出血,如下所示:

有没有办法让边界开始几个1/10点,或者插入的内容多于边界?


Solution

感谢FelixLam,我提出了一个很好的解决方案,并将其留在这里为后世界:

@interface MMRoundImageViewWithBorder : UIView

- (id)initWithImage:(UIImage *)image borderWidth:(CGFloat)borderWidth;

@property (strong, nonatomic) UIImageView *imageView;
@property (assign, nonatomic) CGFloat borderWidth;
@property (strong, nonatomic) UIColor *borderColor;

@end

@implementation MMRoundImageViewWithBorder

- (id)initWithImage:(UIImage *)image borderWidth:(CGFloat)borderWidth {
    if (self = [super init]) {
        self.borderWidth = borderWidth;
        self.borderColor = UIColor.whiteColor;

        self.imageView = [[UIImageView alloc] initWithImage:image];
        [self addSubview:self.imageView];

        self.imageView.layer.masksToBounds = YES;
        self.layer.masksToBounds = YES;
    }
    return self;
}

- (void)setBorderColor:(UIColor *)borderColor {
    _borderColor = borderColor;
    self.backgroundColor = borderColor;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    [self refreshDimensions];
}

- (void)refreshDimensions {
    self.layer.cornerRadius = CGRectGetWidth(self.bounds) / 2.f;

    self.imageView.frame = CGRectInset(self.bounds, _borderWidth, _borderWidth);
    self.imageView.layer.cornerRadius = CGRectGetWidth(self.imageView.bounds) / 2.f;
}

- (void)setBorderWidth:(CGFloat)borderWidth {
    _borderWidth = borderWidth;
    [self refreshDimensions];
}

- (void)setFrame:(CGRect)frame {
    [super setFrame:frame];
    [self refreshDimensions];
}

@end
ios uiimageview calayer
7个回答
14
投票

您可以尝试使用带圆形路径的CAShapelayer作为图层的蒙版,而不是使用角半径。

或者,您可以将图像视图放在具有边框并且大一个/两个像素的容器中。


1
投票

如评论中所述,您可以为图像添加透明边框,这样就可以了。这是一段代码(UIImageView的类别):

+ (UIImage *)imageWithImage:(UIImage *)image withTransparentBorderOfWidth:(CGFloat)width {
    CGSize size = image.size;
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(size.width + width * 2, size.height + width * 2), NO, 0.0);
    [image drawInRect:CGRectMake(width, width, size.width, size.height)];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

0
投票

OP的解决方案不必要地复杂化。更简单,更清洁的解决方案像上面一样创建一个UIView,剪切到边界,蒙版,边框和角半径,然后添加一个UIIamgeview作为该UIView的子视图。 UIIamgeview将被父视图剪裁,你不会有出血问题。


0
投票

我的UIButton需要一个圆角半径,导致锯齿状边缘。将borderStyle设置为.roundedRect修复它。

button.borderStyle = .roundedRect
button.layer.cornerRadius = 4
button.layer.borderWidth = 1
button.layer.borderColor = .red.cgColor

0
投票

这是UIImageView的一个子类,可以解决这个问题。

As the accepted answer suggests,它增加了一个圆形的CAShapeLayer,边界宽度和角落半径比“想要”大1px。它的框架从CGPoint(x: 1, y: 1)开始,高度比图像视图的高度大2px。这样,它涵盖了渗透。

Swift 3+解决方案

子类:

class BorderedRoundedImageView: UIImageView {
    let borderLayer = CALayer()

    var borderWidth: CGFloat!
    var borderColor: UIColor!

    func setUp() {
        borderLayer.borderWidth = borderWidth + 1
        borderLayer.borderColor = borderColor.cgColor
        layer.addSublayer(borderLayer)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        borderLayer.cornerRadius = layer.cornerRadius + 1
        borderLayer.frame = CGRect(x: -1, y: -1, width: frame.width + 2, height: frame.height + 2)
    }
}

用法:

@IBOutlet weak var imageView: UIImageView!

[...]

imageView.layer.cornerRadius = 20
imageView.borderWidth = 2
imageView.borderColor = .lightGray
imageView.setUp()

结果:

screenshot of the result


-1
投票

尝试设置:

[self setClipToBounds:YES]

-1
投票

我遇到了同样的问题,想要一个适用于Storyboard的解决方案。我所做的是将我的图像放在视图中,然后将它们都设置为控制行为的自定义类。我现在可以从故事板完全控制设计。

我把代码放在GitHub上。

https://github.com/brennanMKE/CircleButton

它的作用是覆盖UIView中的drawRect函数,用于UIButton和常规UIView,因此它可以处理许多视图。包装器视图还用于控制边框颜色和宽度。我只是确保包装视图和超视图之间有一些边距,并使用差异作为边框宽度。 superview的背景颜色成为边框颜色。现在,我可以在Storyboard中的许多场景中快速进行这些更改,而无需自定义每个实例的编码。

- (void)drawRect:(CGRect)rect {
    // round view and superview with a border using the background color of the superview
    self.layer.cornerRadius = CGRectGetWidth(self.frame) / 2;
    self.layer.masksToBounds = YES;

    if ([self.superview isKindOfClass:[SSTCircleWrapperView class]]) {
        self.superview.layer.cornerRadius = CGRectGetWidth(self.superview.frame) / 2;
        self.superview.layer.masksToBounds = YES;
        self.superview.layer.borderColor = self.superview.backgroundColor.CGColor;
        self.superview.layer.borderWidth = (CGRectGetWidth(self.superview.frame) - CGRectGetWidth(self.frame)) / 2;
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.