如何正确设置像 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
还要确保heightAnchor
和widthAnchor
的大小相同。在我下面的示例中,它们都是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 中的第一个视图控制器?