logo标签列表

如何在Swift中将图像设置为圆形

iosswiftuiimageview
90
如何在Swift中制作圆形图片？
我的ViewController代码：

如何在Swift中制作圆形图片？

我的ViewController：

import UIKit
import Foundation

class FriendsViewController : UIViewController{

    @IBOutlet weak var profilPicture: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))
    }
}

我的profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))没有任何作用。

例如：http://www.appcoda.com/ios-programming-circular-image-calayer/

3
“set image in circle”的意思是“将图像置于圆形中”。您能否更准确地描述您想要做什么？也许您可以画出您所期望的结果的图片？ - matt
1
profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100)) 并不是“什么都不做”。它肯定会做一些事情！但它所做的事情相当不幸。它创建了一个UIImageView并将其分配给一个弱引用。这个图像视图是空的；它没有图像。此外，该引用是弱引用，因此图像视图立即消失。从这段代码中很难看出您想要发生什么。 - matt
我想要实现这个效果: http://www.appcoda.com/ios-programming-circular-image-calayer/ - Pixel
所以，现在你已经添加了一个链接到教程，告诉你如何做。所以只需按照那个教程中的说明进行操作！你已经回答了自己的问题。 - matt
我使用Swift编程语言，但是在按照教程中的指示操作时，什么也没有发生:S - Pixel
16个回答
251
import UIKit

class ViewController: UIViewController {
  @IBOutlet weak var image: UIImageView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    image.layer.borderWidth = 1
    image.layer.masksToBounds = false
    image.layer.borderColor = UIColor.black.cgColor
    image.layer.cornerRadius = image.frame.height/2
    image.clipsToBounds = true
}

如果您想要将其作为扩展功能

import UIKit

extension UIImageView {
    
    func makeRounded() {
        
        layer.borderWidth = 1
        layer.masksToBounds = false
        layer.borderColor = UIColor.black.cgColor
        layer.cornerRadius = self.frame.height / 2
        clipsToBounds = true
    }
}

那就是你所需的一切。

8
“image.clipsToBounds = true” 正是我所需要的 :-) （说明：这是一句英文句子，意思是“‘image.clipsToBounds = true’正是我所需要的”，句中的“image.clipsToBounds”是程序代码中的一个属性和值，表示当图片尺寸超出其所在容器的范围时是否裁剪掉超出部分。最后的表情符号“:-)”表示高兴的情感。） - Dave Kliman
4
如果UIImageView受到约束的影响而可以增长或缩小，则它将无法正常工作。在这种情况下，它必须放置在viewDidLayoutSubviews（）中。 - Georgevik
我发现在圆形图像周围添加边框会在屏幕上留下原始矩形的残影。这在模拟器10.0上是可见的，可能不会在真实设备上发生，但我认为这足够重要，在这里提一下。 - ZacSketches
image.layer.borderColor = UIColor.blackColor().CGColorturns into image.layer.borderColor = UIColor.black.cgColor - George Pazdral
在 Swift 4 中完美运行。 - iGhost
1
你可能需要使用DispatchQueue：DispatchQueue.main.async(execute:{ self.imageview.makeRounded() }) - Mahmut K.
40

您可以简单地创建扩展：

import UIKit

extension UIImageView {

   func setRounded() {
      let radius = CGRectGetWidth(self.frame) / 2
      self.layer.cornerRadius = radius
      self.layer.masksToBounds = true
   }
}

并按以下方式使用它：

imageView.setRounded()
16

基于@DanielQ的回答

Swift 4和Swift 3

import UIKit

extension UIImageView {

    func setRounded() {
        self.layer.cornerRadius = (self.frame.width / 2) //instead of let radius = CGRectGetWidth(self.frame) / 2
        self.layer.masksToBounds = true
    }
}

你可以在任何ViewController中使用它：

imageView.setRounded()
12

如果您想在Swift中使UIImageView成为圆形，只需使用以下代码：

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true
2
如果您不执行“image.clipsToBounds = true”，则图像将不会缩放。 - Jean-Baptiste Louazel
9
当我将图片角半径设置为图片宽度的一半时，我得到的是一个钻石形状的图像而不是圆形。你有什么想法为什么会这样？ - user2363025
@user2363025 我猜你现在已经弄清楚了，但是你确认使用的是 imageView 而不是 image 了吗？ - Scott Corscadden
@ScottCorscadden 抱歉 Scott，我没有旧代码可以回顾。 - user2363025
可能有点晚了，但是菱形形状可能是由于自动布局引起的，所以在此之前可能需要调用 self.view.layoutIfNeeded()。 - Tom Spee
6

不知道这是否能帮助到任何人，但我曾经为此问题苦苦挣扎，网上的答案都没有帮助到我。对我来说，问题在于故事板中的图像设置了不同的高度和宽度。我尝试了堆栈上的每个解决方案，结果发现问题竟然如此简单。一旦我将它们都设置为200，我的圆形头像就完美了。这是在我的VC中的代码。

profileImage2.layer.cornerRadius = profileImage2.frame.size.width/2
    profileImage2.clipsToBounds = true
太好了！谢谢。这应该是答案。只需要两行干净的代码，无需扩展类或任何额外的东西。 - user3286381
6
这种方法是最便宜的方法，而且始终保持您的图像视图是圆形的：
class RoundedImageView: UIImageView {

    override init(frame: CGRect) {
        super.init(frame: frame)

        clipsToBounds = true
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        clipsToBounds = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        assert(bounds.height == bounds.width, "The aspect ratio isn't 1/1. You can never round this image view!")

        layer.cornerRadius = bounds.height / 2
    }
}

其他答案告诉你要根据在UIViewController的viewDidLoad()方法中设置的框架计算来使视图变成圆角。 这是不正确的，因为它不能确定最终框架将是什么样子。

1
建议最好添加@IBDesignable。 - Fattie
4

对于 Swift 4：

import UIKit

extension UIImageView {

func makeRounded() {
    let radius = self.frame.width/2.0
    self.layer.cornerRadius = radius
    self.layer.masksToBounds = true
   }
}
3

以上所有答案都不能解决我这种情况下的问题。我的 ImageView 位于自定义的 UITableViewCell 中。因此，我还需要从这里调用 layoutIfNeeded() 方法。示例：

 class NameTableViewCell:UITableViewCell,UITextFieldDelegate { ...

 override func awakeFromNib() {

    self.layoutIfNeeded()
    profileImageView.layoutIfNeeded()

    profileImageView.isUserInteractionEnabled = true
    let square = profileImageView.frame.size.width < profileImageView.frame.height ? CGSize(width: profileImageView.frame.size.width, height: profileImageView.frame.size.width) : CGSize(width: profileImageView.frame.size.height, height:  profileImageView.frame.size.height)
    profileImageView.addGestureRecognizer(tapGesture)
    profileImageView.layer.cornerRadius = square.width/2
    profileImageView.clipsToBounds = true;
}
3
struct CircleImage: View {
    var image: Image

    var body: some View {
        image
           .clipShape(Circle())
    }
}

这对于 SwiftUI 是正确的。

2
extension UIImageView{
   
// Round Image
    func roundCorner() {
        self.layer.masksToBounds = true
        self.layer.borderWidth = 1.0
        self.layer.borderColor = UIColor.clear.cgColor
        self.layer.cornerRadius = self.frame.size.width/2
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接