Storyboard e autolayout: come creare un'immagine circolare

Question

nello storyboard (xcode 6) voglio un profilo di immagine utente circolare preso da Facebook.

quindi devo fare questa interfaccia storyboard, utilizzando il layout automatico:

Poi, utilizzando Facebook iOS SDK prendo il profilo utente (utilizzando swift):

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

In storyboard ho impostato l'immagine sulla modalità "Adatta alla scala". Per rendere la circolare visualizzazione dell'immagine io uso il seguente codice:

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

Quando eseguo il codice, in ogni caso l'immagine non sembra circolare:

Suppongo che il problema è auto layout ma non sono sicuro. Come posso rendere l'immagine perfettamente circolare ??

Answer 1

In storyboard ho impostare l'immagine a "Adatta alla" modalità

ma questo è un problema, non è vero? Significa: "Allunga l'immagine in modo che corrisponda al modo in cui la vista dell'immagine viene allungata." Se quello non è quello che vuoi, non dirlo! Usa Centrato o almeno utilizza una delle modalità di contenuto con "Aspetto" nel suo nome in modo che l'immagine non sia allungata.

Come per il cerchio stesso, l'impostazione di cornerRadius non è un modo per fare una circonferenza. Il modo per creare un contorno circolare attorno a un'immagine è la maschera l'immagine. È possibile ridisegnare l'immagine con la maschera circolare come contorno di ritaglio o applicare la maschera circolare alla vista dell'immagine. (Vedere, ad esempio, la mia risposta qui: https://stackoverflow.com/a/16475824/341994.)

È vero che anche la visualizzazione delle immagini viene allungata, perché gli hai assegnato vincoli su entrambi i lati della superview. Puoi impedirlo dandogli invece un vincolo di larghezza; ora la sua larghezza sarà assoluta. Ma devi ancora fare la cosa giusta sugli altri due problemi.

Answer 2

Ho fatto la stessa cosa che un po 'di tempo fa e questo ha funzionato per me

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; 

Answer 3

Quando si aggiunge il vincolo, basta assicurarsi che si controlla l'altezza e la larghezza in modo che sarà correzione. Almeno quello che faccio sempre.

Answer 4

due fasi:

1. Centro UIImageView con l'aggiunta di un "orizzontale rispetto al centro nel container" vincolo (Editor> Allinea> orizzontale rispetto al centro in contenitore) al UIImageView.
2. Rimuovere i vincoli iniziali e finali attualmente impostati su UIImageView.

Perché?UIImageView si allunga perché Layout automatico deve tenere conto dei vincoli iniziali e finali impostati su UIImageView. Per dimostrare il mio punto, imposta la priorità dei vincoli iniziale e finale su qualcosa di meno della priorità dei vincoli di altezza e larghezza. Dovresti vedere un'immagine arrotondata come ti aspetti, ma potrebbe non essere centrata.

Answer 5

Hai dato leading constraint, trailing constraint e il width constraint. Così l'immagine proverà a lasciare 130 pixel prima e dopo l'immagine che aumenterà la larghezza dell'immagine.

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

La soluzione migliore è rimuovere entrambi i vincoli e aggiungere un vincolo di centro orizzontale, ovvero ciò che si desidera.

Answer 6

SWIFT 3.x Basta cambiare la tua classe personalizzata imageView con questo e divertiti.

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

Answer 7

Ulteriori passi:

1. Aggiungi proporzioni vincolo 1: 1
2. clip di controllo mark to limiti attributo in attributo ispettore
3. fanno presa della visualizzazione in classe controller

4. set raggio d'angolo alla metà di una sua altezza o larghezza

   yourImageViewOutlet.layer.cornerRadius = yourImageViewOutlet.frame.size.width/2,0