Pregunta Storyboard y autolayout: cómo hacer una imagen circular


en el guión gráfico (xcode 6) quiero una imagen de usuario circular tomada de Facebook.

Así que tengo que hacer esta interfaz en el guión gráfico, usando el diseño automático:

enter image description here

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 imagen en el modo "Ajustar a la escala". Para hacer circular la vista de imagen, 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 imagen no se ve circular:

enter image description here

Supongo que el problema es el diseño automático, pero no estoy seguro. ¿Cómo puedo hacer la imagen perfectamente circular?


5
2018-01-27 23:49


origen


Respuestas:


Dos pasos:

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

¿Por qué? UIImageView se está estirando porque Auto Layout necesita tener en cuenta las restricciones iniciales y finales que configuras en UIImageView. Para demostrar mi punto, establezca la prioridad de las restricciones inicial y final en algo menor que la prioridad de las restricciones de altura y ancho. Debería ver una imagen redondeada como espera, pero puede que no esté centrada.


4
2018-04-14 04:44



Más pasos:

  1. Añadir relación de aspecto restricción 1: 1 
  2. marcar el clip de verificación para límites atributo en atributo inspector
  3. hacer salida de su vista en su clase de controlador
  4. conjunto radio de esquina a la mitad de su altura o anchura

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


2
2017-09-02 18:00



He hecho lo mismo hace poco tiempo 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;

1
2018-01-27 23:58



Al agregar la restricción, solo asegúrese de verificar el alto y el ancho para que se corrija. Al menos eso es lo que siempre hago.

enter image description here


1
2018-01-28 01:18



Tu has dado leading constraint, trailing constraint y el width constraint. Por lo tanto, la imagen intentará dejar 130 píxeles antes y después de la imagen, lo que aumentará el ancho de la imagen.

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 central horizontal, eso es lo que desea.


1
2018-04-14 04:56



SWIFT 3.x Simplemente cambie su clase personalizada 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
    }
}

1
2017-09-02 17:46



En el guión gráfico, configuré la imagen en el modo "Ajustar a escala"

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

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

Es cierto que su vista de imagen 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; ahora su ancho será absoluto. Pero deberías todavía hacer lo correcto en los otros dos temas.


0
2018-01-27 23:53



Preguntas populares