Messagekit: How to add an InputBarButtonItem

[Jeyhey]

I've been trying for a few hours but can't seem to find how to add an InputBarButtonItem.

How do I instantiate the item with an UIImage? How do I add the item to the bar? I tried the following:

let image = UIImage(named: "plus")!
let button = InputBarButtonItem(frame: CGRect(origin: .zero, size: CGSize(width: image.size.width, height: image.size.height)))
button.image = image
messageInputBar.setStackViewItems([button], forStack: .left, animated: false)

[SD10]

@Jeyhey The documentation is non-existent. My goal is to improve this today. Can you take a look at the example app and see if that helps? There should be a method there to create a button using a UIImage.

[Jeyhey]

Thanks for the hint. I forgot, the example shows different input bar styles. I have my first version working using the iMessage example. To add a button on the left, I added the following code to iMessage():

let items = [
            makeButton(named: "plus").onSelected { b in
                self.didPressAccessoryButton(b)
            }
        ]
...
messageInputBar.setLeftStackViewWidthConstant(to: 36, animated: false)
messageInputBar.setStackViewItems(items, forStack: .left, animated: false)

[zoufishanmehdi]

Is there a way to adjust positioning of left stackview? I would like to adjust the y-positioning and make it more vertically and horizontally centered (in left stackview) relative to the inputbar. Thank you!

[nathantannar4]

@zoufishanmehdi You can adjust the base UIStackView properties such as alignment an axis, but you cannot adjust the constraints of how it sits in the MessgeInputBar

[austinwright]

@zoufishanmehdi, I achieved a similar adjustment by updating the UIStackView's layoutMargins property and setting the isLayoutMarginsRelativeArrangement property to true:

        messageInputBar.leftStackView.layoutMargins = UIEdgeInsets(top: 0, left: 0, bottom: 7, right: 0)
        messageInputBar.leftStackView.isLayoutMarginsRelativeArrangement = true

The stack's arranged subviews are aligned to the bottom of the stackview by default, which is constrained to the inputTextView's bottom. So the bottom inset of 7 means that the bottom of the items in the left stack view will be 7 points above the bottom of the leftStackView/inputTextView.

You could improve upon this by calculating those insets instead of statically setting them.

The onus is also on you to calculate how wide the left stack view needs to be, and to update that constraint yourself. You can calculate the width by adding together the width of your left stack view items, plus the stack view's spacing value * (stackViewItems.count - 1).

[IrelDev]

As @austinwright said, the stack's arranged subviews are aligned to the bottom of the stackView by default.
So, to center image I'd recommend setting stackView.alignment to .center, as shown below

let image = UIImage(named: "sendAttachment")!
let button = InputBarButtonItem(frame: CGRect(origin: .zero, size: CGSize(width: image.size.width, height: image.size.height)))
button.image = image
button.imageView?.contentMode = .scaleAspectFit

messageInputBar.setStackViewItems([button], forStack: .left, animated: false)
messageInputBar.setLeftStackViewWidthConstant(to: 50, animated: false)
messageInputBar.setRightStackViewWidthConstant(to: 50, animated: false)

messageInputBar.leftStackView.alignment = .center //HERE
messageInputBar.rightStackView.alignment = .center //HERE

reloadInputViews()