How to change Send button image in JSQMessagesController

Question

How can I change JSQMessagesController "Send" button from just String to UIImageView?

Now it looks like:

Can I change this "Send" to image?

I've tried:

let sendButton = JSQMessagesInputToolbar()
sendButton.contentView?.rightBarButtonItem?.imageView?.image = UIImage(named: "send.png")

but I thing it's wrong, because it did not work =/

Dreda

Answer 1

Create an UIButton and set it as the right bar button item of input toolbar.

let rightButton = UIButton(frame: CGRectZero)
let sendImage = UIImage(named: "send_button.png")
rightButton.setImage(sendImage, forState: UIControlState.Normal)

self.inputToolbar.contentView.rightBarButtonItemWidth = CGFloat(34.0)

self.inputToolbar.contentView.rightBarButtonItem = rightButton

Hope that helps!

Stereopticon

Answer 2

No need to create another button, you can reuse the existing one:

  override func viewDidLoad() {
    super.viewDidLoad()

    let imageWidth: CGFloat = 21
    let image = UIImage(named: "image-name")

    inputToolbar.contentView.rightBarButtonItemWidth = imageWidth
    inputToolbar.contentView.rightBarButtonItem.setImage(image, for: .normal)

  }

---

But if you want to have more control of the button, you should create a custom one:

override func viewDidLoad() {
    super.viewDidLoad()

    let buttonWidth = CGFloat(40)
    let buttonHeight = inputToolbar.contentView.leftBarButtonContainerView.frame.size.height

    let customButton = UIButton(frame: CGRect(x: 0, y: 0, width: buttonWidth, height: buttonHeight))
    customButton.backgroundColor = .red
    customButton.setImage(UIImage(named: "send-message"), for: .normal)
    customButton.imageView?.contentMode = .scaleAspectFit

    inputToolbar.contentView.rightBarButtonItemWidth = buttonWidth
    inputToolbar.contentView.rightBarButtonItem = customButton 
}

Whisky

Answer 3

It can be set directly using the rightBarButtonItem. Your code is not working cause you are not setting the state of the button.

 self.inputToolbar?.contentView.rightBarButtonItem?.setImage(UIImage(named: "send"), for: .normal)

Phipps