1

How can you create a circle image on a table cell? For example:

enter image description here

This is our storyboard with the arrow pointing to where we are trying to draw a circle when we want to highlight the row:

enter image description here


Update:

Decided to do this using a custom font and associatedSwift library. As Leo pointed out it is overkill to generate a circle when you can use an image (or font). Was as easy as adding a new label and setting the font/icon:

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {    ..    if doHighlight {        cell.statusLabel.setFAIcon(icon: .FACircle, iconSize: 6)    }    ..
askedFeb 18, 2017 at 13:10
Marcus Leon's user avatar
0

5 Answers5

2

The most performant way is to add an image that is round. Setting thecornerRadius will work, but it is a performance hog and it's an overkill for a simple colored circle.

answeredFeb 18, 2017 at 15:49
Léo Natan's user avatar
Sign up to request clarification or add additional context in comments.

Comments

1

if height & width = 50

   View.clipsToBounds = true   View.layer.cornerRadius= View.frame.size.width/2
answeredFeb 18, 2017 at 13:21
Uma Madhavi's user avatar

Comments

1

You can make a view that adds aCAShapeLayer with a circle:

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

Note, that is@IBDesignable, so you'll be able to use it in Interface Builder. Just create a separate target ("File" - "New" - "Target...") and choose "Cocoa Touch Framework" and give it an appropriate name (e.g. if your app is "Foo", you'd call this framework "FooKit"). Then add the aboveUIView subclass to that framework, and you can reference this class in IB (just add aUIView object and change its base class toCircleView):

circle in IB

answeredFeb 18, 2017 at 15:24
Rob's user avatar

Comments

0

Add a UIView instance and set itslayer.cornerRadius to half its width/height.

answeredFeb 18, 2017 at 13:15
Gereon's user avatar

Comments

0
class CircularImageView: UIImageView {override func layoutSubviews() {    super.layoutSubviews()    let radius: CGFloat = self.bounds.size.width / 2.0    self.layer.cornerRadius = radius    self.clipsToBounds = true} }

you can also make a circular image view which is subclass of UIImageView so you can set it directly to UIImageView...

answeredFeb 18, 2017 at 13:49
Muhammad Ahmed Baig's user avatar

Comments

Your Answer

Sign up orlog in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

By clicking “Post Your Answer”, you agree to ourterms of service and acknowledge you have read ourprivacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.