You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To add a customized button to the input view, you need to change messageInputView. Specifically, you need to insert a new view in inputHStackView and modify the icon position by adjusting the index in insertArrangedSubview.
To handle the tap event from the giphyButton, define a custom delegate. You can relay the event externally by executing a delegate method inside the button's action.
classLeftButtonAddedMessageInputView:SBUMessageInputView{overridefunc setupViews(){
super.setupViews()self.inputHStackView.insertArrangedSubview(self.giphyButton, at:1)}public lazy vargiphyButton:UIButton={letgiphyIcon=UIImage(named:"giphy.icon")// Change to your asset nameletbutton=UIButton(type:.custom)
button.setImage(giphyIcon, for:.normal)
button.addTarget(self, action: #selector(onTapCustomButton(_:)), for:.touchUpInside)
button.isHidden = false
button.alpha =1return button
}()overridefunc setupLayouts(){
super.setupLayouts()self.giphyButton.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([self.giphyButton.widthAnchor.constraint(equalToConstant:32),self.giphyButton.heightAnchor.constraint(equalToConstant:38)])}@objcfunc onTapCustomButton(_ sender:Any){
if let delegate,let customDelegate = delegate as?CustomMessageInputViewDelegate{
customDelegate.messageInputViewDidSelectGiphyButton(self)}}}
2
Now, create the CustomGroupChannelModuleInputComponent class with the custom input view, LeftButtonAddedMessageInputView. All we need to do is switching its messageInputView to our LeftButtonAddedMessageInputView instance while setupView is in progress.
Don't forget to implement CustomMessageInputViewDelegate to monitor tap events, and also declare CustomGroupChannelModuleInputDelegate to further relay these events outside of the component, to the view controller in this example.
classCustomGroupChannelModuleInputComponent:SBUGroupChannelModule.Input{overridefunc setupViews(){self.messageInputView =LeftButtonAddedMessageInputView()
super.setupViews()}}extensionCustomGroupChannelModuleInputComponent:CustomMessageInputViewDelegate{func messageInputViewDidSelectGiphyButton(_ messageInputView:SBUMessageInputView){
if let delegate,let customDelegate = delegate as?CustomGroupChannelModuleInputDelegate{
customDelegate.groupChannelModuleDidTapGiphyButton(self)}}}
3
For the next step, implement the CustomGroupChannelModuleInputDelegate within your CustomGroupChannelViewController. This will allow you to monitor tap events on the giphyButton.
If you have obtained the URL of a GIF from your codes, use the viewModel's sendFileMessage method to transmit the GIF file. You just need to pass the URL to the FileMessageCreateParams constructor in the fileURL to send a message.
classCustomGroupChannelViewController:SBUGroupChannelViewController{// ...}extensionCustomGroupChannelViewController:CustomGroupChannelModuleInputDelegate{// Respond to the tap event on the Giphy buttonfunc groupChannelModuleDidTapGiphyButton(_ inputComponent:SBUGroupChannelModule.Input){searchGiphy()}func searchGiphy(){letsendGiphy:(URL)->Void={ giphyURL inletparams=FileMessageCreateParams(fileURL: giphyURL.absoluteString)// Utilizing the viewModel to send the GIF messageself.viewModel?.sendFileMessage(messageParams: params)}// Call Giphy SDK's search method// The GiphyURL is generated, call the sendGiphy block to send the message.}}
4
Lastly, you need to update SBUModuleSet and SBUViewControllerSet like below:
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
Guide & Snippet
1.
To add a customized button to the input view, you need to change
messageInputView
. Specifically, you need to insert a new view ininputHStackView
and modify the icon position by adjusting the index ininsertArrangedSubview
.To handle the tap event from the
giphyButton
, define a custom delegate. You can relay the event externally by executing a delegate method inside the button's action.2
Now, create the
CustomGroupChannelModuleInputComponent
class with the custom input view,LeftButtonAddedMessageInputView
. All we need to do is switching itsmessageInputView
to ourLeftButtonAddedMessageInputView
instance whilesetupView
is in progress.Don't forget to implement
CustomMessageInputViewDelegate
to monitor tap events, and also declareCustomGroupChannelModuleInputDelegate
to further relay these events outside of the component, to the view controller in this example.3
For the next step, implement the
CustomGroupChannelModuleInputDelegate
within yourCustomGroupChannelViewController
. This will allow you to monitor tap events on thegiphyButton
.If you have obtained the URL of a GIF from your codes, use the
viewModel
'ssendFileMessage
method to transmit the GIF file. You just need to pass the URL to theFileMessageCreateParams
constructor in thefileURL
to send a message.4
Lastly, you need to update
SBUModuleSet
andSBUViewControllerSet
like below:References
Beta Was this translation helpful? Give feedback.
All reactions