Раскадровка и автоспуск: как сделать круговое изображение

Question

в раскадровке (xcode 6) Я хочу, чтобы круговой профиль изображения пользователя взял из Facebook.

Так я есть сделать этот интерфейс в раскадровке, с помощью автоматической компоновки:

Затем с помощью Facebook IOS SDK я взять профиль пользователя (используя быстрые):

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

В раскадровка Я установил изображение в режим «Масштабировать в соответствии». Чтобы сделать вид изображений циркуляра я использую следующий код:

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

Когда я запускаю код, в любом случае изображение не выглядит круговым:

Я полагаю, что проблема заключается в авто но я не уверен. Как я могу сделать изображение совершенно круговым?

Answer 1

В раскадровке я поставил изображение в «Масштабировать» режим

Но это проблема, не так ли? Это означает: «Растянуть изображение так, чтобы оно соответствовало тому, как растягивается изображение». Если это не то, что вы хотите, не говорите об этом! Используйте Centered или, по крайней мере, используйте один из режимов содержимого с «Aspect» в его имени, чтобы ваше изображение не растягивалось.

Что касается самого круга, установка cornerRadius не способ сделать круг. Способ создания круговой границы вокруг изображения - маска изображение. Вы можете перерисовать изображение с помощью круговой маски в качестве границы отсечения, или вы можете применить круговую маску к представлению изображения. (См., Например, мой ответ здесь: https://stackoverflow.com/a/16475824/341994.)

Это правда, что ваш образ также растягивается, потому что вы дали ему ограничения для обеих сторон супервизора. Вы можете предотвратить это, указав вместо этого ограничение ширины; теперь его ширина будет абсолютной. Но вы должны еще делать правильные вещи по другим двум вопросам.

Answer 2

Я сделал то же самое время немного назад, и это работало для меня

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

При добавлении ограничения, просто убедитесь, что вы проверить высоту и ширину, так что это будет исправить. По крайней мере, это то, что я всегда делаю.

Answer 4

Два шага:

1. Центрирование UIImageView, добавив "Горизонтальный центр В Таре" ограничение (Редактор> Align> Горизонтальный центр в контейнер) в UIImageView.
2. Удалите основные и конечные ограничения, которые вы установили в UIImageView.

Почему?UIImageView становится растянутым, потому что Auto Layout должен учитывать основные и конечные ограничения, установленные в UIImageView. Чтобы доказать свою точку зрения, установите приоритет ведущих и конечных ограничений на что-то меньшее, чем приоритет ограничений высоты и ширины. Вы должны увидеть округленное изображение, как вы ожидаете, но оно не может быть сосредоточено.

Answer 5

Вы указали leading constraint, trailing constraint и width constraint. Таким образом, изображение попытается оставить 130 пикселей до и после изображения, что увеличит ширину изображения.

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

Лучшим решением проблемы является устранение ограничения и добавление ограничения по горизонтальному центру, которое вы хотите.

Answer 6

SWIFT 3.x Просто измените свое изображение. Ознакомьтесь с обычным классом и наслаждайтесь этим.

@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

Другие шаги:

1. Добавить соотношение сторон ограничений 1: 1
2. галочка клип на границы атрибутов в атрибуте инспектор
3. делают выход вашей точки зрения в вы класс контроллера

4. установить радиус закругления до половины либо его высоты или ширины

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