如何正确设置像 Swift 中的 imageContacts 一样的圆形 imageView?

Posted

技术标签:

【中文标题】如何正确设置像 Swift 中的 imageContacts 一样的圆形 imageView?【英文标题】:How to set imageView in circle like imageContacts in Swift correctly? 【发布时间】:2014-08-30 23:46:17 【问题描述】:

我想像图片联系人一样在 imageView 中显示一张图片(在一个圆圈中)但是当我尝试显示这个时,imageView 重新调整了他的大小并且这个在一个圆圈中没有正确显示。

 image.layer.borderWidth=1.0
 image.layer.masksToBounds = false
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.clipsToBounds = true

我想这样显示:

但我明白了:

如何将图像调整为 UIImageView 大小以显示为圆形?

谢谢!

【问题讨论】:

这里是图像视图宽度与高度不同的情况的解决方案:***.com/questions/29685055/… 【参考方案1】:

这是我在我的应用中使用的解决方案:

var image: UIImage = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.whiteColor().CGColor
imageView.layer.cornerRadius = image.frame.size.width/2
imageView.clipsToBounds = true

斯威夫特 4.0

let image = UIImage(named: "imageName")
imageView.layer.borderWidth = 1.0
imageView.layer.masksToBounds = false
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.cornerRadius = image.frame.size.width / 2
imageView.clipsToBounds = true

【讨论】:

为什么这里的所有答案都获得如此高的投票率?使用cornerRadius是不是有点傻,图像不一定是方形的? "'UIImage 类型的值?'没有成员“框架”。嗯。【参考方案2】:

image 使用的 frame 大小是多少?如果我将框架设置为正方形,我可以得到一个完美的圆形。

let image = UIImageView(frame: CGRectMake(0, 0, 100, 100))

【讨论】:

我在尺寸检查器中的图像尺寸设置为 120 宽和 120 高,但是当我运行它时,它不是一个完美的圆圈,因为宽度结果有点长?为什么? 如果框架是正方形,将半径设置为宽度/高度的一半将始终为您提供圆形视图。如果要创建一个可以适应各种平方帧大小的自定义类,则不能对半径值进行硬编码。 这实际上是唯一正确的答案,如果您不将 imageView 设置为正方形,其他答案都不会起作用。 "'CGRectMake' 在 Swift 中不可用"。【参考方案3】:

快速简单解决方案。

如何在不使用 Swift 裁剪的情况下将UIImage屏蔽到 Circle。

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 = anyImage
  

如何调用:

let anyAvatarImage:UIImage = UIImage(named: "avatar")!
avatarImageView.maskCircle(anyAvatarImage)

【讨论】:

我找不到prepareImage() 方法。改了吗? @Antonio 这是他的自定义函数...你只需使用 self.image = anyImage 我删除了额外的功能。谢谢@BorisNikolić【参考方案4】:

试试这个对我有用,

设置 imageView 宽度和高度相同。

斯威夫特

imageview?.layer.cornerRadius = (imageview?.frame.size.width ?? 0.0) / 2     
imageview?.clipsToBounds = true
imageview?.layer.borderWidth = 3.0
imageview?.layer.borderColor = UIColor.white.cgColor

截图

目标 C

self.imageView.layer.cornerRadius = self.imageView.frame.size.width / 2;
self.imageView.clipsToBounds = YES;
self.imageView.layer.borderWidth = 3.0f;
self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;

希望这对某人有所帮助。

【讨论】:

【参考方案5】:

如果您使用 Autolayout,创建您的自定义圆圈 UIImageView 并在 layoutSubviews 下创建圆圈会有所帮助。

/*
      +-------------+
      |             |
      |             |
      |             |
      |             |
      |             |
      |             |
      +-------------+
  The IMAGE MUST BE SQUARE
*/
class roundImageView: UIImageView 

    override init(frame: CGRect) 
        // 1. setup any properties here
        // 2. call super.init(frame:)
        super.init(frame: frame)
        // 3. Setup view from .xib file
    

    required init?(coder aDecoder: NSCoder) 
        // 1. setup any properties here
        // 2. call super.init(coder:)
        super.init(coder: aDecoder)
        // 3. Setup view from .xib file
    

    override func layoutSubviews() 
        super.layoutSubviews()
        self.layer.borderWidth = 1
        self.layer.masksToBounds = false
        self.layer.borderColor = UIColor.white.cgColor
        self.layer.cornerRadius = self.frame.size.width/2
        self.clipsToBounds = true
    

【讨论】:

【参考方案6】:

我建议您首先将您的图像文件设置为完美的正方形。这几乎可以在任何照片编辑程序中完成。之后,这应该在 viewDidLoad 中工作。感谢video

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

【讨论】:

【参考方案7】:

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

        profilepic = UIImageView(frame: CGRectMake(0, 0, self.view.bounds.width * 0.19 , self.view.bounds.height * 0.1))
        profilepic.layer.borderWidth = 1
        profilepic.layer.masksToBounds = false
        profilepic.layer.borderColor = UIColor.blackColor().CGColor
        profilepic.layer.cornerRadius = profilepic.frame.height/2
        profilepic.clipsToBounds = true

【讨论】:

是否需要为此导入quartzcore @Supertecnoboff nope.!【参考方案8】:

这个扩展真的对我有用(包括在 swift 4+ 中)

extension UIImageView 
    func roundedImage() 
        self.layer.cornerRadius = (self.frame.size.width) / 2;
        self.clipsToBounds = true
        self.layer.borderWidth = 3.0
        self.layer.borderColor = UIColor.white.cgColor
    

然后简单地称它为

imageView.roundedImage() 

【讨论】:

【参考方案9】:

如果您使用UIViewController,以下是使用 Anchors 的方法。关键是像这样在viewWillLayoutSubviews中设置imageView的layer.cornerRadius

override func viewWillLayoutSubviews() 
    super.viewWillLayoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2

还要确保heightAnchorwidthAnchor 的大小相同。在我下面的示例中,它们都是100

代码:

let imageView: UIImageView = 
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.layer.borderWidth = 1.0
    imageView.clipsToBounds = true
    imageView.layer.borderColor = UIColor.white.cgColor
    return imageView
()


override func viewDidLoad() 
    super.viewDidLoad()

    view.addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")


override func viewWillLayoutSubviews() 
    super.viewWillLayoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2

如果您使用CollectionView Cell,则在layoutSubviews() 中设置imageView 的layer.cornerRadius

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

    addSubview(imageView)

    imageView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    imageView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 50).isActive = true

    imageView.image = UIImage(named: "pizzaImage")



override func layoutSubviews() 
    super.layoutSubviews() // call super.layoutSubviews()
    imageView.layer.cornerRadius = imageView.frame.size.width / 2

【讨论】:

将圆角半径代码添加到 viewWillLayoutSubviews 对我有用,使我的 ImageView 成为一个完美的圆 当 imageview 通过情节提要锚定时向 viewWillLayoutSubviews 添加圆角半径适用于所有设备,当它适用于 iPhone X 或更高版本但不适用于 iPhone 8 时,我遇到了问题。谢谢跨度> 【参考方案10】:
reviewerImage.layer.cornerRadius = reviewerImage.frame.size.width / 2;
reviewerImage.clipsToBounds = true

【讨论】:

【参考方案11】:

我发现你的图像视图的宽度和高度在除以 2 时必须返回一个偶数才能得到一个完美的圆,例如

let image = UIImageView(frame: CGRectMake(0, 0, 120, 120))

它不应该是这样的 let image = UIImageView(frame: CGRectMake(0, 0, 130, 130))

【讨论】:

【参考方案12】:

我得到了类似的结果(更像是椭圆而不是圆形)。事实证明,我在UIImageView 上设置的约束迫使它变成了椭圆形而不是圆形。修复后,上述解决方案有效。

【讨论】:

【参考方案13】:

试试这个。 快速代码

override func viewWillAppear(_ animated: Bool) 
    super.viewWillAppear(true)
    perform(#selector(self.setCircleForImage(_:)), with: pickedImage, afterDelay: 0)



 @objc func setCircleForImage(_ imageView : UIImageView)
    imageView.layer.cornerRadius = pickedImage.frame.size.width/2
    imageView.clipsToBounds = true

【讨论】:

【参考方案14】:

我在修改视图时修复了它:

    转到您的 Main.storyboard 点击您的图片 视图 -> 模式 -> 纵横填充

完美运行

【讨论】:

【参考方案15】:

这对我来说非常适合。 行的顺序是重要的

func circularImage(photoImageView: UIImageView?)

    photoImageView!.layer.frame = CGRectInset(photoImageView!.layer.frame, 0, 0)
    photoImageView!.layer.borderColor = UIColor.grayColor().CGColor
    photoImageView!.layer.cornerRadius = photoImageView!.frame.height/2
    photoImageView!.layer.masksToBounds = false
    photoImageView!.clipsToBounds = true
    photoImageView!.layer.borderWidth = 0.5
    photoImageView!.contentMode = UIViewContentMode.ScaleAspectFill

使用方法:

    @IBOutlet weak var photoImageView: UIImageView!
    ...
    ...
    circularImage(photoImageView)

【讨论】:

【参考方案16】:

这也适用于我。对于完美的圆形结果,宽度和高度使用相同的大小。喜欢image.frame = CGRect(0,0,200, 200)

对于非完美的圆,宽度和高度不应像下面的代码一样。

 image.frame = CGRect(0,0,200, 160)
 image.layer.borderColor = UIColor.whiteColor().CGColor
 image.layer.cornerRadius = image.frame.size.height/2
 image.layer.masksToBounds = false
 image.layer.clipsToBounds = true
 image.contentMode = .scaleAspectFill

【讨论】:

【参考方案17】:

使用此代码使图像变圆

     self.layoutIfNeeded()
     self.imageView.layer.cornerRadius = 
     self.imageView.frame.width/2
     self.imageView.layer.masksToBounds = true

【讨论】:

【参考方案18】:

您可以将此文件扩展名添加到您的项目中,并且不要忘记使您的图像方形“宽度=高度”,您可以通过提供图像宽度和纵横比来授予它(1:1)

import Foundation
import UIKit


extension UIView 
    @IBInspectable
    var cornerRadius: CGFloat 
        get 
            return layer.cornerRadius
        
        set 
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        
    
    
    @IBInspectable
    var borderWidth: CGFloat 
        get 
            return layer.borderWidth
        
        set 
            layer.borderWidth = newValue
        
    
    
    @IBInspectable
    var borderColor: UIColor? 
        get 
            let color = UIColor(cgColor: layer.borderColor!)
            return color
        
        set 
            layer.borderColor = newValue?.cgColor
        
    
    

然后您将在单元格或视图控制器或您使用图像的任何地方写下此

imageViewCountryImage.cornerRadius = imageViewCountryImage.frame.height / 2

你会发现你的图片非常圆

【讨论】:

【参考方案19】:
// MARK: ImageView extension to make rounded   
@IBDesignable extension UIImageView 

    @IBInspectable var masksToBounds: Bool 
        set 
            layer.masksToBounds = newValue
        
        get 
            return layer.masksToBounds
        
    

    @IBInspectable var borderWidth: CGFloat 
        set 
            layer.borderWidth = newValue
        
        get 
            return layer.borderWidth
        
    
    
    @IBInspectable var cornerRadius: CGFloat 
        set 
            layer.cornerRadius = newValue
        
        get 
            return layer.cornerRadius
        
    
    
    @IBInspectable var borderColor: UIColor? 
        set 
            guard let uiColor = newValue else  return 
            layer.borderColor = uiColor.cgColor
        
        get 
            guard let color = layer.borderColor else  return nil 
            return UIColor(cgColor: color)
        
    

【讨论】:

【参考方案20】:

您需要确保高度和宽度应与您的图像/视图相同。比如 100 宽和 100 高的尺寸。

【讨论】:

【参考方案21】:

您可以将此扩展添加到您的代码中

import Foundation
import UIKit


extension UIView 
    @IBInspectable
    var cornerRadius: CGFloat 
        get 
            return layer.cornerRadius
        
        set 
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        
    
    
    @IBInspectable
    var borderWidth: CGFloat 
        get 
            return layer.borderWidth
        
        set 
            layer.borderWidth = newValue
        
    
    
    @IBInspectable
    var borderColor: UIColor? 
        get 
            let color = UIColor(cgColor: layer.borderColor!)
            return color
        
        set 
            layer.borderColor = newValue?.cgColor
        
    
    

【讨论】:

【参考方案22】:

只需添加此扩展程序 扩展:

extension UIImageView  

    func circleImageView() 
       layer.borderColor = UIColor.white.cgColor
       layer.borderWidth = 2
       contentMode = .scaleAspectFill
       layer.cornerRadius = self.frame.height / 2
       layer.masksToBounds = false
       clipsToBounds = true
    

控制器:

self.imageView?.circleImageView()

还有一件事,为了使图像圆,我们必须将宽度和高度设置为彼此相等。

【讨论】:

以上是关于如何正确设置像 Swift 中的 imageContacts 一样的圆形 imageView?的主要内容,如果未能解决你的问题,请参考以下文章

如何正确设置 Core Data Stack 到 iOS 和 Swift 中的第一个视图控制器?

swift 1.2 中的 JSON 解析问题

如何在 Swift 3 中正确设置 MPNowPlayingInfoCenter

如何在 Swift 中正确存储用户设置?

如何使用 Swift 正确设置圆形 imageView?

如何在 Swift 中正确设置 imageView,如 imageContacts?