Comment créer une forme de cercle dans UITableViewCell?

Question

Comment pouvez-vous créer une image circulaire sur une cellule de tableau? Par exemple:

Ceci est notre story-board avec la flèche pointant vers l'endroit où nous essayons de dessiner un cercle quand on veut mettre en évidence la ligne:

---

Mise à jour:

Décidé de le faire en utilisant une police personnalisée d associé Swift library. Comme Leo l'a souligné, il est trop difficile de générer un cercle lorsque vous pouvez utiliser une image (ou une police). Était aussi facile que l'ajout d'une nouvelle étiquette et le réglage de la police/icône:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    .. 
    if doHighlight { 
     cell.statusLabel.setFAIcon(icon: .FACircle, iconSize: 6) 
    } 
    .. 

Answer 1

La façon la plus performante est d'ajouter un image qui est ronde. Définir le cornerRadius fonctionnera, mais c'est un porc de performance et c'est une surcharge pour un cercle de couleur simple.

Answer 2

Ajouter une instance UIView et définir sa layer.cornerRadius à la moitié de sa largeur/hauteur.

Answer 3

si la hauteur & width = 50

View.clipsToBounds = true 
    View.layer.cornerRadius= View.frame.size.width/2 

Answer 4

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

    let radius: CGFloat = self.bounds.size.width/2.0 
    self.layer.cornerRadius = radius 
    self.clipsToBounds = true 
} } 

vous pouvez également faire une vue d'image circulaire qui est de la sous-classe UIImageView afin que vous puissiez le mettre directement à UIImageView ...

Answer 5

Vous pouvez faire une vue qui ajoute un CAShapeLayer avec un cercle:

@IBDesignable class CircleView: UIView { 

    @IBInspectable public var fillColor: UIColor = #colorLiteral(red: 0, green: 0, blue: 1, alpha: 1) { didSet { shapeLayer.fillColor = fillColor.cgColor } } 
    @IBInspectable public var strokeColor: UIColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0) { didSet { shapeLayer.strokeColor = strokeColor.cgColor } } 
    @IBInspectable public var lineWidth: CGFloat = 0 { didSet { setNeedsLayout() } } 

    lazy private var shapeLayer: CAShapeLayer = { 
     let _shapeLayer = CAShapeLayer() 
     _shapeLayer.fillColor = self.fillColor.cgColor 
     _shapeLayer.strokeColor = self.strokeColor.cgColor 
     self.layer.insertSublayer(_shapeLayer, at: 0) 
     return _shapeLayer 
    }() 

    override func layoutSubviews() { 
     super.layoutSubviews() 

     let center = CGPoint(x: bounds.midX, y: bounds.midY) 
     let radius = (min(bounds.size.width, bounds.size.height) - lineWidth)/2 
     shapeLayer.path = UIBezierPath(arcCenter: center, radius: radius, startAngle: 0, endAngle: .pi * 2, clockwise: true).cgPath 
     shapeLayer.lineWidth = lineWidth 
    } 
} 

N ote, c'est @IBDesignable, donc vous serez capable de l'utiliser dans Interface Builder. Créez simplement une cible séparée ("Fichier" - "Nouveau" - "Cible ...") et choisissez "Cocoa Touch Framework" et donnez-lui un nom approprié (par exemple, si votre application est "Foo", vous appelleriez ce framework "FooKit"). Ensuite, ajoutez la sous-classe UIView ci-dessus à ce cadre, et vous pouvez faire référence à cette classe dans IB (il suffit d'ajouter un objet UIView et changer sa classe de base à CircleView):