如何快速将图像设置成圆圈


79

如何使我快速圈出图片?

我的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
“圈定图像”是什么意思?您能更精确地描述您想做什么吗?也许画出您想要的结果?
2015年

1
profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))不“什么都不做”。它肯定有作用!但是它所做的却很不幸。它创建一个UIImageView并将其分配给一个弱引用。图像视图为空;它没有图像。而且,参考强度很弱,因此在抽烟时图像视图立即消失。很难从这段代码中看到您想象的将在这里发生的事情。
马特2015年


因此,现在您已添加了指向教程的链接,该链接告诉您如何执行此操作。因此,只需按照该教程中的说明进行操作即可!您已经回答了自己的问题。
马特2015年

当我按照老师的指示做事时,我会很快工作:S
Pixel

Answers:


220
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
    }
}

那就是你所需要的...


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

4
如果UIImageView由于约束而增大或缩小,则将不起作用。在这种情况下,它必须位于viewDidLayoutSubviews()中
Georgevik

我发现在圆角图像周围添加边框会在屏幕上留下原始矩形的阴影。这在Simulator 10.0上可见,在实际设备上可能不会发生,但认为在此值得一提。
ZacSketches

image.layer.borderColor = UIColor.blackColor().CGColor 变成 image.layer.borderColor = UIColor.black.cgColor
乔治·帕兹德拉

快速完成工作完美4。–
iGhost,

35

您可以简单地创建扩展名:

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 2015年

7
@Tom Spee,当我将拐角半径设置为图片宽度的一半时,我得到的是菱形图像,而不是椭圆形。知道为什么会这样吗?
user2363025 2015年

@ user2363025我怀疑您现在已经知道了,但是您是否确认使用imageView而不是image
Scott Corscadden '17

@ScottCorscadden对不起Scott,我没有旧的代码可以回顾。
user2363025 '17

可能有点晚了,但是自动布局可能会导致菱形形状,因此可能需要先调用self.view.layoutIfNeeded()
汤姆·史培

6

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

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

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


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;
}

2

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

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
    }
}

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


1
建议不妨添加@IBDesignable
Fattie

1

首先,需要设置相等的宽度和高度才能获取圆形ImageView。下面,我将宽度和高度设置为100,100。如果要根据所需的大小设置相等的宽度和高度,请在此处进行设置。

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

然后您需要为角半径设置高度/ 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)

1

对于Swift3 / Swift4开发人员:

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

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


0
// 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!)

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.