Skip to content

Instantly share code, notes, and snippets.

@Katafalkas
Created December 12, 2014 15:03
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save Katafalkas/eb5e840df1ace981c359 to your computer and use it in GitHub Desktop.
Save Katafalkas/eb5e840df1ace981c359 to your computer and use it in GitHub Desktop.
Swift UITableViewCell custom subclass simple Chat Bubble
class Cell: UITableViewCell {
override func drawRect(rect: CGRect) {
var bubbleSpace = CGRectMake(20.0, self.bounds.origin.y, self.bounds.width - 20, self.bounds.height)
let bubblePath1 = UIBezierPath(roundedRect: bubbleSpace, byRoundingCorners: .TopLeft | .TopRight | .BottomRight, cornerRadii: CGSize(width: 20.0, height: 20.0))
let bubblePath = UIBezierPath(roundedRect: bubbleSpace, cornerRadius: 20.0)
UIColor.greenColor().setStroke()
UIColor.greenColor().setFill()
bubblePath.stroke()
bubblePath.fill()
var triangleSpace = CGRectMake(0.0, self.bounds.height - 20, 20, 20.0)
var trianglePath = UIBezierPath()
var startPoint = CGPoint(x: 20.0, y: self.bounds.height - 40)
var tipPoint = CGPoint(x: 0.0, y: self.bounds.height - 30)
var endPoint = CGPoint(x: 20.0, y: self.bounds.height - 20)
trianglePath.moveToPoint(startPoint)
trianglePath.addLineToPoint(tipPoint)
trianglePath.addLineToPoint(endPoint)
trianglePath.closePath()
UIColor.greenColor().setStroke()
UIColor.greenColor().setFill()
trianglePath.stroke()
trianglePath.fill()
}
override init(style: UITableViewCellStyle, reuseIdentifier: String!) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func layoutSubviews() {
super.layoutSubviews()
// var backgroundImage = UIImageView(image: UIImage(named: "star"))
// backgroundImage.contentMode = UIViewContentMode.ScaleAspectFit
// self.backgroundView = backgroundImage
}
}
@achron
Copy link

achron commented Jun 23, 2015

Thanks for code! How to make the answer version? I mean with the triangle on the right.

@manikandan07081995
Copy link

bubblePath1 not used

@manikandan07081995
Copy link

Kindly update the latest version of swift 4.0 code

@mehroozpl
Copy link

class ChatBubbleViewCell: UITableViewCell {

override func draw(_ rect: CGRect) {
    var bubbleSpace = CGRect(x: 20.0,y: self.bounds.origin.y,width : self.bounds.width - 20,height : self.bounds.height)
    let bubblePath1 = UIBezierPath(roundedRect: bubbleSpace, byRoundingCorners: [.topLeft,.topRight ,.bottomRight], cornerRadii: CGSize(width: 20.0, height: 20.0))
    
    let bubblePath = UIBezierPath(roundedRect: bubbleSpace, cornerRadius: 20.0)
    
    UIColor.green.setStroke()
    UIColor.green.setFill()
    bubblePath.stroke()
    bubblePath.fill()
    
    var triangleSpace = CGRect(x : 0.0, y : self.bounds.height - 20,width : 20,height : 20.0)
    var trianglePath = UIBezierPath()
    var startPoint = CGPoint(x: 20.0, y: self.bounds.height - 40)
    var tipPoint = CGPoint(x: 0.0, y: self.bounds.height - 30)
    var endPoint = CGPoint(x: 20.0, y: self.bounds.height - 20)
    trianglePath.move(to: startPoint)
    trianglePath.addLine(to: tipPoint)
    trianglePath.addLine(to: endPoint)
    trianglePath.close()
    UIColor.green.setStroke()
    UIColor.green.setFill()
    trianglePath.stroke()
    trianglePath.fill()
}

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String!) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    
}

required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)!
}

override func layoutSubviews() {
    super.layoutSubviews()
    //        var backgroundImage = UIImageView(image: UIImage(named: "star"))
    //        backgroundImage.contentMode = UIViewContentMode.ScaleAspectFit
    //        self.backgroundView = backgroundImage
}

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment