In this article we will learn how to create our own message kit like whatsapp, messanger using swift language.

We can customize the way we want like avatar, sender name, time label etc.




At the end of this article you can find full project link.

Let's get started.

First create new single view application in xcode project.

Then add UITableView to the view and give constraints.

Create Custom UITableViewCell, this is important to create chat bubble.

Sender Chat Bubble:

Sender cell needs to have th message text and time.

The following method will do the magic.

func setupSendersCell() {
    let offset = UIEdgeInsets(top: padding, left: padding, bottom: -padding, right: -padding)
    self.contentView.addSubview(bgView)
    bgView.edges([.right, .top, .bottom], to: self.contentView, offset: offset)
    bgView.layer.cornerRadius = 8
    bgView.backgroundColor = UIColor(displayP3Red: 0, green: 122/255, blue: 255/255, alpha: 1)
    
    self.bgView.addSubview(textView)
    textView.edges([.left, .right, .top], to: self.bgView, offset: .init(top: innerSpacing, left: innerSpacing, bottom: -innerSpacing, right: -innerSpacing))
    bgView.leadingAnchor.constraint(greaterThanOrEqualTo: self.contentView.leadingAnchor, constant: extraSpacing).isActive = true
    textView.isScrollEnabled = false
    textView.isEditable = false
    textView.isSelectable = true
    textView.font = UIFont.systemFont(ofSize: 14)
    textView.textColor = UIColor.white
    textView.text = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum"
    textView.backgroundColor = UIColor.clear
    
    self.bgView.addSubview(bottomLabel)
    bottomLabel.edges([.left, .bottom], to: self.bgView, offset: UIEdgeInsets(top: innerSpacing, left: secondaryPadding, bottom: -secondaryPadding, right: 0))
    bottomLabel.trailingAnchor.constraint(equalTo: textView.trailingAnchor, constant: -secondaryPadding).isActive = true
    bottomLabel.topAnchor.constraint(equalTo: textView.bottomAnchor, constant: -2).isActive = true
    bottomLabel.font = UIFont.systemFont(ofSize: 10)
    bottomLabel.textColor = UIColor.white
    bottomLabel.textAlignment = .right
    bottomLabel.text = "12:00 AM"
}

Receiver Chat Bubble:

Receiver cell same as sender cell but it subviews should algin to leading where sender cell subviews align to trailing of superview.

The following method will do the magic.

func setupReceiversCell() {
    let offset = UIEdgeInsets(top: padding, left: padding, bottom: -padding, right: -padding)
    self.contentView.addSubview(bgView)
    bgView.edges([.left, .top, .bottom], to: self.contentView, offset: offset)
    bgView.layer.cornerRadius = 8
    bgView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.1)
    
    self.bgView.addSubview(topLabel)
    topLabel.edges([.left, .top], to: self.bgView, offset: UIEdgeInsets(top: secondaryPadding, left: secondaryPadding, bottom: 0, right: 0))
    topLabel.font = UIFont.boldSystemFont(ofSize: 14)
    topLabel.textColor = UIColor.red
    topLabel.text = "Red"
    
    self.bgView.addSubview(textView)
    textviewTopConstraintToTopLabel = textView.topAnchor.constraint(equalTo: topLabel.bottomAnchor, constant: 0)
    textviewTopConstraintToTopLabel.isActive = true
    textviewTopConstraintToBg = textView.topAnchor.constraint(equalTo: bgView.topAnchor, constant: innerSpacing)
    textviewTopConstraintToBg.isActive = false
    textView.leadingAnchor.constraint(equalTo: bgView.leadingAnchor, constant: innerSpacing).isActive = true
    textView.trailingAnchor.constraint(equalTo: bgView.trailingAnchor, constant: -innerSpacing).isActive = true
    topLabel.trailingAnchor.constraint(lessThanOrEqualTo: textView.trailingAnchor, constant: 0).isActive = true
    bgView.trailingAnchor.constraint(lessThanOrEqualTo: self.contentView.trailingAnchor, constant: -extraSpacing).isActive = true
    textView.isScrollEnabled = false
    textView.isEditable = false
    textView.isSelectable = true
    textView.font = UIFont.systemFont(ofSize: 14)
    textView.text = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum"
    textView.backgroundColor = UIColor.clear
    
    self.bgView.addSubview(bottomLabel)
    bottomLabel.edges([.left, .bottom], to: self.bgView, offset: UIEdgeInsets(top: innerSpacing, left: secondaryPadding, bottom: -secondaryPadding, right: 0))
    bottomLabel.trailingAnchor.constraint(equalTo: textView.trailingAnchor, constant: -secondaryPadding).isActive = true
    bottomLabel.topAnchor.constraint(equalTo: textView.bottomAnchor, constant: -2).isActive = true
    bottomLabel.font = UIFont.systemFont(ofSize: 10)
    bottomLabel.textColor = UIColor.lightGray
    bottomLabel.textAlignment = .right
    bottomLabel.text = "12:00 AM"
}

Add the two cells to tableview and give some random messages.

Input TextView:

Adding texview is little bit tricky, here i created input textview like whatsapp.

The send button will show up when ever some text is there in textbox.

Finally project will looks like the following




Download sample project with example :