Как сделать изображение круглым в виде таблицы в Swift

Question

В шутку c cellForRowAt:

userCell.img.layer.cornerRadius = userCell.img.frame.size.width / 2.0
userCell.img.layer.borderWidth = 3.0

Я пробовал так, но изображение не в идеальной круглой форме.

Answer 1

Существует две проблемы:

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

   • подклассов UIImageView;
   • применить cornerRadius в методе layoutSubviews; и
   • укажите этот класс как «базовый класс» для представления изображения в вашей ячейке.

   Например:

   @IBDesignable
   class RoundedImageView: UIImageView {
       override func layoutSubviews() {
           super.layoutSubviews()
           layer.cornerRadius = min(bounds.width, bounds.height) / 2
           layer.borderWidth = 3
       }
   }
   

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

   

   В качестве альтернативы вы можете реализовать отображение, которое будет применять круглую маску в пределах bounds вида изображения, а затем добавление круговой границы в качестве отдельного подслоя, например

   @IBDesignable
   class CircularImageView: UIImageView {
       @IBInspectable var borderWidth: CGFloat = 3 { didSet { setNeedsLayout() } }
   
       private var borderLayer: CAShapeLayer?
   
       override func layoutSubviews() {
           super.layoutSubviews()
           let maskRadius = min(bounds.width, bounds.height) / 2
           let borderRadius = maskRadius - borderWidth / 2
           let center = CGPoint(x: bounds.midX, y: bounds.midY)
   
           let mask = CAShapeLayer()
           mask.path = UIBezierPath(arcCenter: center, radius: maskRadius, startAngle: 0, endAngle: 2 * .pi, clockwise: true).cgPath
           mask.fillColor = UIColor.white.cgColor
           layer.mask = mask
   
           borderLayer?.removeFromSuperlayer()
           let border = CAShapeLayer()
           border.path = UIBezierPath(arcCenter: center, radius: borderRadius, startAngle: 0, endAngle: 2 * .pi, clockwise: true).cgPath
           border.lineWidth = borderWidth
           border.strokeColor = UIColor.black.cgColor
           border.fillColor = UIColor.clear.cgColor
           layer.addSublayer(border)
           self.borderLayer = border
       }
   }
   

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

   

Оба эти подхода Насладитесь преимуществом использования метода cellForRowAt для настройки деталей представления изображения. И, разумеется, хотя приведенные выше снимки экрана не представлены в виде таблиц, идея базового c работает везде, где у вас есть представления изображений (при условии, что вы соответствующим образом задаете базовый класс).