¿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/
ios
swift
uiimageview
Pixel
fuente
fuente
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í.Respuestas:
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 ...
fuente
image.clipsToBounds = true
era exactamente lo que necesitaba :-)image.layer.borderColor = UIColor.blackColor().CGColor
se convierte enimage.layer.borderColor = UIColor.black.cgColor
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:
fuente
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
ViewController
con:fuente
Si quiere hacer una circular UIImageView en Swift, puede usar este código:
imageView.layer.cornerRadius = imageView.frame.height / 2 imageView.clipsToBounds = true
fuente
image.clipsToBounds = true
, la imagen no se escalará.self.view.layoutIfNeeded()
antes.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
fuente
Para Swift 4 :
import UIKit extension UIImageView { func makeRounded() { let radius = self.frame.width/2.0 self.layer.cornerRadius = radius self.layer.masksToBounds = true } }
fuente
Todas las respuestas anteriores no pudieron resolver el problema en mi caso. Mi
ImageView
se colocó en un personalizadoUITableViewCell
. Por lo tanto, también llamé allayoutIfNeeded()
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; }
fuente
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
UIViewController
sviewDidLoad()
. Esto no es correcto , ya que no se sabe cuál será el cuadro final.fuente
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)
fuente
Para desarrolladores de Swift3 / Swift4:
let radius = yourImageView.frame.width / 2 yourImageView.layer.cornerRadius = radius yourImageView.layer.masksToBounds = true
fuente
struct CircleImage: View { var image: Image var body: some View { image .clipShape(Circle()) } }
Esto es correcto para
SwiftUI
fuente
// 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!)
fuente
imageView.layer.cornerRadius = imageView.frame.height/2 imageView.clipToBounds = true
fuente
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).
fuente