Как сохранить круглое изображение с помощью автоматического макета?

К сожалению, вы не можете сделать это с помощью cornerRadius и автоматического раскладки - CGLayer не зависит от автоматического раскладки, поэтому любое изменение размера представления не повлияет на радиус, который был однажды установлен, что, как вы заметили, приведет к потере формы круга. .

Вы можете создать собственный подкласс UIImageView и переопределить layoutSubviews, чтобы устанавливать cornerRadius каждый раз при изменении границ просмотра изображения.

ИЗМЕНИТЬ

Пример может выглядеть примерно так:

class Foo: UIImageView {
    override func layoutSubviews() {
        super.layoutSubviews()

        let radius: CGFloat = self.bounds.size.width / 2.0

        self.layer.cornerRadius = radius
    }
}

И, очевидно, вам придется ограничить ширину экземпляра Foobar такой же, как и высота (чтобы сохранить круг). Вы, вероятно, также захотите установить contentMode экземпляра Foobar на UIViewContentMode.ScaleAspectFill, чтобы он знал, как рисовать изображение (это означает, что изображение, вероятно, будет обрезано).

Установка радиуса в viewWillLayoutSubviews решит проблему

override func viewWillLayoutSubviews() {
  super.viewWillLayoutSubviews()
  profileImageView.layer.cornerRadius = profileImageView.frame.height / 2.0
}

создайте новый интерфейс в вашем .h файле, например

@interface CornerClip : UIImageView

@end

и реализация в файле .m, например

@implementation cornerClip


-(void)layoutSubviews
{
    [super layoutSubviews];

    CGFloat radius = self.bounds.size.width / 2.0;

    self.layer.cornerRadius = radius;

}

@end

теперь просто дайте класс "CornerClip" вашему изображению. 100% работает ... Наслаждайтесь

Прежде всего, я должен упомянуть, что вы можете получить форму круга для своего UIView / UIImageView только, если ширина и высота будут равны. Это важно понять. Во всех остальных случаях (когда ширина! = Высота) вы не получите форму круга, потому что исходной формой вашего экземпляра пользовательского интерфейса был прямоугольник.

Итак, UIKit SDK предоставляет разработчикам механизм для управления экземпляром слоя UIview, чтобы каким-либо образом изменить любой из параметров слоя, включая настройку mask для замены исходной формы элемента UIView на пользовательскую. . Это IBDesignable / IBInspectable. Цель состоит в том, чтобы предварительно просмотреть наши пользовательские представления непосредственно через Interface Builder.

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

Например, давайте создадим класс, расширенный из UIImageView.

@IBDesignable
class UIRoundedImageView: UIImageView {

    @IBInspectable var isRoundedCorners: Bool = false {
        didSet { setNeedsLayout() }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        if isRoundedCorners {
            let shapeLayer = CAShapeLayer()
            shapeLayer.path = UIBezierPath(ovalIn:
                CGRect(x: bounds.origin.x, y: bounds.origin.y, width: bounds.width, height: bounds.height
            )).cgPath
            layer.mask = shapeLayer
        }
        else {
            layer.mask = nil
        }

    }

}

После установки имени класса для вашего элемента UIImageView (где находится изображение собаки) в раскадровке вы получите новую опцию, появившуюся в меню Attributes Inspector (подробности на скриншоте).

Окончательный результат должен быть таким.

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

Также в вашем случае, когда вы устанавливаете cornerRadius, используйте это: let radius: CGFloat = self.bounds.size.height / 2.0.

С моим хакерским решением вы получите плавную анимацию радиуса угла при изменении размера кадра.

Допустим, у вас есть ViewSubclass: UIView. Он должен содержать следующий код:

class ViewSubclass: UIView {
    var animationDuration : TimeInterval?
    let imageView = UIImageView()
    //some imageView setup code

    override func layoutSubviews() {
        super.layoutSubviews()

        if let duration = animationDuration {
            let anim = CABasicAnimation(keyPath: "cornerRadius")
            anim.fromValue = self.imageView.cornerRadius
            let radius = self.imageView.frame.size.width / 2
            anim.toValue = radius
            anim.duration = duration
            self.imageView.layer.cornerRadius = radius
            self.imageView.layer.add(anim, forKey: "cornerRadius")
        } else {
            imageView.cornerRadius = imageView.frame.size.width / 2
        }

        animationDuration = nil
    }
}

Затем вам нужно будет сделать это:

let duration = 0.4 //For example
instanceOfViewSubclass.animationDuration = duration
UIView.animate(withDuration: duration, animations: { 
    //Your animation
    instanceOfViewSubclass.layoutIfNeeded()
})

Это некрасиво и может не работать для сложных мультианимаций, но дает ответ на вопрос.

Swift 4+ чистое решение, основанное на ответе omaralbeik

import UIKit

extension UIImageView {

    func setRounded(borderWidth: CGFloat = 0.0, borderColor: UIColor = UIColor.clear) {
        layer.cornerRadius = frame.width / 2
        layer.masksToBounds = true
        layer.borderWidth = borderWidth
        layer.borderColor = borderColor.cgColor
    }
}

Пример использования в UIViewController

1. просто закругленный UIImageView

override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        imageView.setRounded()
    }

2. закругленный UIImageView с шириной и цветом границы

override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        imageView.setRounded(borderWidth: 1.0, borderColor: UIColor.red)
    }

напишите этот код

override viewDidLayoutSubViews() {
profileImageView.layer.cornerRadius = profileImageView.frame.size.width / 2
profileImageView.clipsToBounds = true

}

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

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

1. ваш профильImageView в раскадровке
2. ваш profileImageView в viewDidLoad

размер границы и рамки в viewDidLoad и в раскадровке различаются просто потому, что размер представления изменяется для разных размеров устройства. Вы можете попробовать print(profileImageView.bounds.size) в viewDidLoad и viewDidAppear вы обнаружите, что размер в viewDidLoad, который вы установили cornerRadius, не является реальным "бегущим" размером.

совет для вас: вы можете использовать подкласс ImageView, чтобы избежать этого, или не использовать его в раскадровке,

Если вы создали подкласс UIImageView. Тогда просто добавьте в него этот кусок магического кода.

Написано на: Swift 3

override func layoutSubviews() {
    super.layoutSubviews()
    if self.isCircular! {
        self.layer.cornerRadius = self.bounds.size.width * 0.50
    }
}

Я новичок в разработке приложений для iOS, но у меня была та же проблема, и я нашел решение.

Итак, у зеленого фона есть следующие ограничения:

backgroundView.translatesAutoresizingMaskIntoConstraints = false
backgroundView.topAnchor.constraint(equalTo: superview!.safeAreaLayoutGuide.topAnchor).isActive = true
backgroundView.leftAnchor.constraint(equalTo: superview!.leftAnchor).isActive = true
backgroundView.widthAnchor.constraint(equalTo: superview!.widthAnchor).isActive = true
backgroundView.heightAnchor.constraint(equalTo: superview!.heightAnchor, multiplier: 0.2).isActive = true

Ограничения изображения:

avatar.translatesAutoresizingMaskIntoConstraints = false
avatar.heightAnchor.constraint(equalTo: backgroundView.heightAnchor, multiplier: 0.8).isActive = true
avatar.widthAnchor.constraint(equalTo: backgroundView.heightAnchor, multiplier: 0.8).isActive = true
avatar.centerYAnchor.constraint(equalTo: backgroundView.centerYAnchor, constant: 0).isActive = true
avatar.leadingAnchor.constraint(equalTo: backgroundView.leadingAnchor, constant: 20).isActive = true

в viewWillLayoutSubviews() методе я установил радиус угла равным

avatar.layer.cornerRadius = (self.frame.height * 0.2 * 0.8) / 2

По сути, я просто вычисляю высоту изображения, а затем делю ее на 2. 0,2 - множитель ограничения высоты backgroungView, а 0,8 - множитель ограничения ширины / высоты изображения.

Решение: Обрежьте изображение.

[imageView setImage:[[imageView image] imageWithRoundedCorners:imageView.image.size.width/2]];
imageView.contentMode = UIViewContentModeScaleAspectFill;

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

Опубликуйте это, даже если размер вашего просмотра изменится, изображение останется круглым и хорошо выглядит.

Добавьте к imageView ограничение соотношения сторон 1: 1, чтобы оно оставалось круглым, несмотря на любые изменения высоты или ширины.

Я добавил собственный IBInspectable cornerRadiusPercent, так что вы можете сделать это без кода.

class RoundButton: UIButton {

    override var bounds: CGRect {
        didSet {
            updateCornerRadius()
        }
    }


    //private var cornerRadiusWatcher : CornerRadiusPercent?
    @IBInspectable var cornerRadiusPercent: CGFloat = 0 {

        didSet {
            updateCornerRadius()
        }
    }

    func updateCornerRadius()
    {
        layer.cornerRadius = bounds.height * cornerRadiusPercent
    }

}

Это легко сделать, создав IBOutlet для ограничения, которое необходимо изменить во время выполнения. Ниже приведен код:

1. Создайте IBOutlet для ограничения, которое необходимо изменить во время выполнения.

   @IBOutlet var widthConstraint: NSLayoutConstraint!
   

2. Добавьте ниже код в viewDidLoad():

   self.widthConstraint.constant = imageWidthConstraintConstant()
   

Ниже функция определяет для типов устройств изменение ограничения ширины соответственно.

func imageWidthConstraintConstant() -> CGFloat {

    switch(self.screenWidth()) {

    case 375:
        return 100

    case 414:
        return 120

    case 320:
        return 77

    default:
        return 77
    }
}