如何制作像 Instagram 故事个人资料图像一样的圆形图像

Posted 2023-03-11

【中文标题】如何制作像 Instagram 故事个人资料图像一样的圆形图像

【英文标题】：How to make Circle image like Instagram's story profile image

【发布时间】：2017-05-25 21:39:18

【问题描述】：

我想创建类似于 Instagram 故事个人资料图片中的圆形图片。它应该有两个圆圈，内圈是白色，外圈颜色是本色而不是渐变。我已经尝试过该代码，但只有一个圆圈。如何将第二个圆圈添加到 imageView 层？

 self.imageView.layer.cornerRadius = 30;
 self.imageView.layer.borderWidth = 3;
 self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;
 self.imageView.layer.masksToBounds = YES;

你能帮帮我吗？

谢谢:)

【参考方案1】：

您可以使用此第 3 方 library，它为 UIImageView 提供多个边框。

而且，如果你想自己做，你可以把UIImageView 变成subView 的UIView。然后将UIView 设为圆形并设置borderWidth 并为其着色。对UIImageView 执行相同操作。

这是一个例子：

像这样添加您的UIView 和UIImageView。

然后添加这段代码：

-(void)viewDidLayoutSubviews 
    [super viewDidLayoutSubviews];

    _profileImage.layer.cornerRadius = 30;
    _profileImage.layer.borderWidth = 3;
    _profileImage.layer.borderColor = [UIColor whiteColor].CGColor;
    _profileImage.layer.masksToBounds = YES;

    _profileImage.clipsToBounds = true;
    _profileImage.layer.cornerRadius = _profileImage.frame.size.height/2;

    _superViewImage.clipsToBounds = true;
    _superViewImage.layer.masksToBounds = true;
    _superViewImage.layer.cornerRadius = _superViewImage.frame.size.height/2;
    _superViewImage.layer.borderWidth = 0.5;
    _superViewImage.layer.borderColor = (__bridge CGColorRef _Nullable)([UIColor greenColor]);

结果图像将是这样的：

为两个边框设置所需的颜色。

希望对您有所帮助。 :)