如何快速设置圆形图像

Posted 2023-03-10

【中文标题】如何快速设置圆形图像

【英文标题】：How to set image in circle in swift

【发布时间】：2015-01-21 18:54:55

【问题描述】：

我怎样才能让我用swift画圈？

我的视图控制器：

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/

【问题讨论】：

“将图像设置成圆圈”是什么意思？你能更准确地描述你想要做什么吗？也许画出你想要的结果？

profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100)) 不是“什么都不做”。它肯定会有所作为！但它的所作所为是相当不幸的。它创建一个 UIImageView 并将其分配给一个弱引用。图像视图为空；它没有图像。此外，参考很弱，因此图像视图立即消失在一阵烟雾中。从这段代码中很难看出你想象中会发生什么。

我想做这个结果：appcoda.com/ios-programming-circular-image-calayer

所以，现在您已经添加了一个指向教程的链接，该教程告诉您如何操作。因此，只需按照该教程中的说明进行操作！您已经回答了自己的问题。

当我按照教程中的说明进行操作时，我会迅速工作，没有任何附加内容：S

【参考方案1】：

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() 

        self.layer.borderWidth = 1
        self.layer.masksToBounds = false
        self.layer.borderColor = UIColor.black.cgColor
        self.layer.cornerRadius = self.frame.height / 2
        self.clipsToBounds = true
    

这就是你所需要的......

【讨论】：

image.clipsToBounds = true 正是我所需要的 :-)

如果 UIImageView 会因为约束而增长或缩小，它就不起作用了。在这种情况下，它必须在 viewDidLayoutSubviews()

内

我发现在圆形图像周围添加边框会在屏幕上留下原始矩形的重影。这在 Simulator 10.0 上是可见的，在真实设备上可能不会发生，但认为这足以在此处提及。

image.layer.borderColor = UIColor.blackColor().CGColor 变成image.layer.borderColor = UIColor.black.cgColor

在 swift 4 中完美工作。??

【参考方案2】：

您可以简单地创建扩展：

import UIKit

extension UIImageView 

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

并按如下方式使用：

imageView.setRounded()

【参考方案3】：

基于@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()

【参考方案4】：

如果您想在 Swift 中制作 UIImageView 循环，您可以使用以下代码：

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true

【讨论】：

如果不做image.clipsToBounds = true，图片将无法缩放。

@Tom Spee 当我将角半径设置为图片宽度的一半时，我得到的是菱形图像而不是圆弧。知道为什么会这样吗？？

@user2363025 我怀疑你现在已经弄明白了，但你确定你使用的是 imageView 而不是 image？跨度>

@ScottCorscadden 对不起，斯科特，我没有旧代码可以回顾。

可能有点晚了，但自动布局可能会导致菱形，所以您可能需要先致电self.view.layoutIfNeeded()。

【参考方案5】：

不知道这是否对任何人有帮助，但我在这个问题上苦苦挣扎了一段时间，网上的答案都没有帮助我。对我来说，问题是我在情节提要的图像上设置了不同的高度和宽度。我尝试了堆栈上的所有解决方案，结果证明就是这么简单。一旦我将它们都设置为 200，我的圈子头像就完美了。这是当时在我的 VC 中的代码。

profileImage2.layer.cornerRadius = profileImage2.frame.size.width/2
    profileImage2.clipsToBounds = true

【讨论】：

甜蜜！谢谢。这应该是答案。两行干净的代码。无需扩展类或其他任何东西。

【参考方案6】：

对于 Swift 4：

import UIKit

extension UIImageView 

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

【参考方案7】：

这种方式是最便宜的方式，并且始终保持您的图像视图四舍五入：

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
    

其他答案是告诉您根据UIViewControllers viewDidLoad() 方法中设置的框架计算对视图进行四舍五入。 这是不正确的，因为它不确定最终帧会是什么。

【讨论】：

建议不妨加上@IBDesignable

【参考方案8】：

以上所有答案都无法解决我的问题。我的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;

【参考方案9】：

struct CircleImage: View 
    var image: Image

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

这对于SwiftUI 是正确的

【参考方案10】：

首先你需要设置相等的宽度和高度以获得圆形ImageView。下面我设置宽度和高度为100,100。如果你想根据你需要的大小设置相等的宽度和高度，请在此处设置。

 var imageCircle = UIImageView(frame: CGRectMake(0, 0, 100, 100))

那么你需要为拐角半径设置 height/2

 imageCircle.layer.cornerRadius = imageCircle.frame.size.height/2
 imageCircle.layer.borderWidth = 1
 imageCircle.layer.borderColor = UIColor.blueColor().CGColor
 imageCircle.clipsToBounds = true
 self.view.addSubview(imageCircle)

【参考方案11】：

对于 Swift3/Swift4 开发者：

let radius = yourImageView.frame.width / 2
yourImageView.layer.cornerRadius = radius
yourImageView.layer.masksToBounds = true

【讨论】：

不完全是，我认为他正在向 ImageView 添加扩展。这是直接更改类的实例。如果没有帮助，我可以删除它。

【参考方案12】：

// code to make the image round


import UIKit

extension UIImageView 
public func maskCircle(anyImage: UIImage) 


    self.contentMode = UIViewContentMode.ScaleAspectFill
    self.layer.cornerRadius = self.frame.height / 2
    self.layer.masksToBounds = false
    self.clipsToBounds = true




    // make square(* must to make circle),
    // resize(reduce the kilobyte) and
    // fix rotation.
    //        self.image = prepareImage(anyImage)

// 从视图控制器调用函数

self.imgCircleSmallImage.maskCircle(imgCircleSmallImage.image!)

【参考方案13】：

imageView.layer.cornerRadius = imageView.frame.height/2
imageView.clipToBounds = true

【参考方案14】：

对于圆形图像，扩展中只需以下代码即可：

self.layoutIfNeeded() // 在 autolayout 的情况下（Tom Spee 在评论中提到）。

还要确保 UIImageView contentMode 的属性设置正确才能得到结果。 在我的情况下是：

imageView.contentMode = .scaleAspectFit


extension UIImageView 
    func setRounded() 
            self.layoutIfNeeded()
            self.layer.cornerRadius = self.frame.height / 2
            self.clipsToBounds = true
    

【参考方案15】：

如果您的图片是圆形的，那么它的高度和宽度将完全相同（即 120）。您只需取该数字的一半并在您的代码中使用它（image.layer.cornerRadius = 60）。