Storyboard y autolayout: cómo hacer una image circular

en storyboard (xcode 6) quiero un perfil circular de imágenes de usuario de Facebook.

Así que hago esta interfaz en el guión gráfico, usando la distribución automática:

introduzca la descripción de la imagen aquí

Luego, usando Facebook iOS SDK, tomo el perfil de usuario (usando swift):

var facebookProfileUrl = "http://graph.facebook.com/\(userId!)/picture?type=normal"; 

En el guión gráfico, he configurado la image en el modo "Ajustar escala". Para que la vista de la image sea circular, uso el siguiente código:

 self.facebookProfileImage.layer.cornerRadius = self.facebookProfileImage.frame.size.width / 2; self.facebookProfileImage.clipsToBounds = true; 

Cuando ejecuto el código, de todos modos la image no se ve circular:

introduzca la descripción de la imagen aquí

Supongo que el problema es el layout automático, pero no estoy seguro. ¿Cómo puedo hacer que la image sea perfectamente circular?

Dos pasos:

  1. Centre UIImageView agregando una restricción "Horizontal Center In Container" (Editor> Alinear> Centro horizontal en contenedor) a UIImageView.
  2. Elimine las restricciones iniciales y finales que ha configurado actualmente en UIImageView.

¿Por qué? El UIImageView se está estirando debido a que el Diseño automático necesita tener en count las restricciones iniciales y finales que establece en UIImageView. Para demostrar mi punto, establezca la prioridad de las restricciones iniciales y posteriores a algo menor que la prioridad de las restricciones de altura y anchura. Debería ver una image networkingondeada como espera, pero puede que no esté cinput.

Hice lo mismo hace un time y esto funcionó para mí

 self.imageView.image = [ImageHelper getImage]; //retrieve image self.imageView.layer.cornerRadius = self.imageView.frame.size.height / 2; self.imageView.layer.masksToBounds = YES; self.imageView.layer.borderWidth = 0; self.imageView.contentMode = UIViewContentModeScaleAspectFill; 

Cuando agregue la restricción, asegúrese de verificar la altura y el ancho para que se solucione. Al less eso que siempre hago.

introduzca la descripción de la imagen aquí

Has dado la leading constraint, trailing constraint y la width constraint. Por lo tanto, la image intentará dejar 130 píxeles antes y después de la image, lo que boostá el ancho de la image.

 So the solution is, remove either one of the leading or trailing constraint. 

La mejor solución es eliminar la restricción y agregar una restricción de centro horizontal, eso es lo que desea.

SWIFT 3.x Simplemente modifique su class personalizada de imageView con esto y disfrute.

 @IBDesignable class RoundedImageView:UIImageView { @IBInspectable var borderColor:UIColor = UIColor.white { willSet { layer.borderColor = newValue.cgColor } } override func layoutSubviews() { super.layoutSubviews() layer.cornerRadius = frame.height/2 layer.masksToBounds = true layer.borderWidth = 1 layer.borderColor = borderColor.cgColor } } 

Más pasos:

  1. Agregar restricción de relación de aspecto 1: 1
  2. marcar el clip de verificación en el atributo de límites en el inspector de attributes
  3. haga que su vista se vea en su class de controller
  4. establece el radio de la esquina a la mitad de su altura o ancho

    yourImageViewOutlet.layer.cornerRadius = yourImageViewOutlet.frame.size.width / 2.0

En el guión gráfico, he configurado la image en el modo "Ajustar escala"

Pero eso es un problema, ¿no? Significa: "Estira la image para que coincida con la forma en que se estira la vista de la image". Si eso no es lo que quieres, ¡no digas eso! Utilice Centrado, o al less use uno de los modos de contenido con "Aspecto" en su nombre para que su image no se estire.

En cuanto al círculo en sí mismo, establecer la cornerRadius no es una forma de hacer un círculo. La forma de crear un límite circular alnetworkingedor de una image es enmascarar la image. Puede volver a dibujar la image con la máscara circular como un límite de recorte, o puede aplicar la máscara circular a la vista de la image. (Ver, por ejemplo, mi respuesta aquí: https://stackoverflow.com/a/16475824/341994 ).

Es cierto que su vista de la image también se está estirando, porque le dio restricciones a ambos lados de la vista de supervisión. Puede evitar eso al darle una restricción de ancho en su lugar; ahora su ancho será absoluto. Pero aún debe hacer lo correcto en los otros dos temas.