Cómo configurar la imagen en círculo en Swift

78

¿Cómo puedo hacer una imagen circular con Swift?

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

Mi profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100)) no hacer nada ..

Ejemplo: http://www.appcoda.com/ios-programming-circular-image-calayer/

Pixel
fuente
3
¿Qué significa "poner imagen en círculo"? ¿Puede describir con más precisión lo que quiere hacer? ¿Quizás hacer un dibujo de los resultados que desea?
Matt
1
profilPicture = UIImageView(frame: CGRectMake(0, 0, 100, 100))no "no hace nada". ¡Definitivamente hace algo! Pero lo que hace es bastante lamentable. Crea un UIImageView y lo asigna a una referencia débil. La vista de la imagen está vacía; no tiene imagen. Además, la referencia es débil, por lo que la vista de la imagen se desvanece inmediatamente en una nube de humo. Es difícil ver en este código lo que imaginaba que pasaría aquí.
Matt
Quiero hacer este resultado: appcoda.com/ios-programming-circular-image-calayer
Pixel
Entonces, ahora ha agregado un enlace a un tutorial que le indica cómo hacerlo. ¡Así que sigue las instrucciones de ese tutorial! Has respondido tu propia pregunta.
Matt
Trabajo rápido cuando sigo las instrucciones en el tutorial. Nada se adjunta: S
Pixel

Respuestas:

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

Si lo quieres en una extensión

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

Eso es todo lo que necesitas ...

Jon
fuente
8
eso image.clipsToBounds = trueera exactamente lo que necesitaba :-)
Dave Kliman
4
No funciona si UIImageView puede crecer o reducirse debido a limitaciones. En ese caso, debe estar dentro de viewDidLayoutSubviews ()
Georgevik
Descubrí que agregar el borde alrededor de la imagen redondeada deja un fantasma del rectángulo original en la pantalla. Esto era visible en Simulator 10.0 y puede que no ocurra en un dispositivo real, pero se pensó que era lo suficientemente significativo como para mencionarlo aquí.
ZacSketches
image.layer.borderColor = UIColor.blackColor().CGColor se convierte en image.layer.borderColor = UIColor.black.cgColor
George Pazdral
Trabaja perfecto en swift 4. 👍🏻
iGhost
35

Puede crear una extensión simple:

import UIKit

extension UIImageView {

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

y utilícelo de la siguiente manera:

imageView.setRounded()
Daniel Kuta
fuente
16

Basado en la respuesta de @DanielQ

Swift 4 y 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
    }
}

Puedes usarlo en cualquiera ViewControllercon:

imageView.setRounded()
MrMins
fuente
12

Si quiere hacer una circular UIImageView en Swift, puede usar este código:

imageView.layer.cornerRadius = imageView.frame.height / 2
imageView.clipsToBounds = true
Tom Spee
fuente
2
Si no lo hace image.clipsToBounds = true, la imagen no se escalará.
Jean-Baptiste Louazel
7
@Tom Spee cuando configuro el radio de la esquina a la mitad del ancho de las imágenes, obtengo una imagen en forma de diamante y no un círculo. ¿Alguna idea de por qué sería esto?
user2363025
@ user2363025 Sospecho que ya lo has descubierto, pero ¿has confirmado que usaste imageView y no la imagen ?
Scott Corscadden
@ScottCorscadden lo siento Scott, no tengo el código antiguo para mirar hacia atrás.
user2363025
Tal vez un poco tarde, pero la forma de un diamante puede ser causada por el diseño automático, por lo que es posible que deba llamar self.view.layoutIfNeeded()antes.
Tom Spee
6

No sé si esto ayuda a alguien, pero estuve luchando con este problema por un tiempo, ninguna de las respuestas en línea me ayudó. Para mí, el problema era que tenía diferentes alturas y anchos establecidos en la imagen en el guión gráfico. Probé todas las soluciones en la pila y resultó que era algo tan simple como eso. Una vez que puse ambos en 200, mi imagen de perfil de círculo fue perfecta. Este era el código entonces en mi VC.

profileImage2.layer.cornerRadius = profileImage2.frame.size.width/2
    profileImage2.clipsToBounds = true
Gracia
fuente
¡Dulce! Gracias. Esta debería ser la respuesta. Dos líneas limpias de código. No es necesario extender las clases ni nada extra.
user3286381
4

Para Swift 4 :

import UIKit

extension UIImageView {

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

Todas las respuestas anteriores no pudieron resolver el problema en mi caso. Mi ImageViewse colocó en un personalizado UITableViewCell. Por lo tanto, también llamé al layoutIfNeeded()método desde aquí. Ejemplo:

 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;
}
Nazar Medeiros
fuente
2

Esta es la forma menos costosa y siempre mantiene la vista de la imagen redondeada:

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

Las otras respuestas le dicen que haga que las vistas se redondeen según los cálculos de marcos establecidos en un método UIViewControllers viewDidLoad(). Esto no es correcto , ya que no se sabe cuál será el cuadro final.

J. Doe
fuente
1
Sugerir también podría agregar @IBDesignable
Fattie
1

Primero debe establecer el mismo ancho y alto para obtener Circular ImageView. A continuación, establezco el ancho y el alto como 100,100. Si desea establecer el mismo ancho y alto de acuerdo con el tamaño requerido, establezca aquí.

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

Entonces necesita establecer la altura / 2 para el radio de la esquina

 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)
usuario3182143
fuente
1

Para desarrolladores de Swift3 / Swift4:

let radius = yourImageView.frame.width / 2
yourImageView.layer.cornerRadius = radius
yourImageView.layer.masksToBounds = true
Achintya Ashok
fuente
no del todo, creo que está agregando una extensión a ImageView. Esto está cambiando la instancia de la clase directamente. Si no es útil, puedo quitarlo.
Achintya Ashok
1
struct CircleImage: View {
    var image: Image

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

Esto es correcto para SwiftUI

Michal Rogowski
fuente
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)
}
}

// para llamar a la función desde el controlador de vista

self.imgCircleSmallImage.maskCircle(imgCircleSmallImage.image!)
Ullas Pujary
fuente
0
imageView.layer.cornerRadius = imageView.frame.height/2
imageView.clipToBounds = true
Rishi jha
fuente
-1

Si su imagen está redondeada, tendría una altura y un ancho del mismo tamaño exacto (es decir, 120). Simplemente tome la mitad de ese número y utilícelo en su código (image.layer.cornerRadius = 60).

Raul gutierrez
fuente