How to customize the JSQMessagesToolbarContentView

[TheEngineerz]

I want to customize the JSQMessagesToolbarContentView . i have made a new class name ZLMessagesToolbarContentView and extend it to JSQMessagesToolbarContentView. but i am not able to add my custom subview becasue the left and right container view are read only .

Please suggest me the correct way to subclass it and customize it thanks

[YroJlbok]

hi,

I had same problem and resolved it in next way:

float height = self.inputToolbar.contentView.leftBarButtonContainerView.frame.size.height;
UIImage *image = [UIImage imageNamed:@"smileButton"];
UIButton* smileButton = [UIButton buttonWithType:UIButtonTypeCustom];
[smileButton setImage:image forState:UIControlStateNormal];
[smileButton addTarget:self action:@selector(smileButtonTouched:) forControlEvents:UIControlEventTouchUpInside];
[smileButton setFrame:CGRectMake(0, 0, 25, height)];

image = [UIImage imageNamed:@"attachButton"];
UIButton* attachButton = [UIButton buttonWithType:UIButtonTypeCustom];
[attachButton setImage:image forState:UIControlStateNormal];
[attachButton addTarget:self action:@selector(attachButtonTouched:) forControlEvents:UIControlEventTouchUpInside];
[attachButton setFrame:CGRectMake(30, 0, 25, height)];

self.inputToolbar.contentView.leftBarButtonItemWidth = 55;
self.inputToolbar.contentView.rightBarButtonItemWidth = 30;
[self.inputToolbar.contentView.leftBarButtonContainerView addSubview:smileButton];
[self.inputToolbar.contentView.leftBarButtonContainerView addSubview:attachButton];
[self.inputToolbar.contentView.rightBarButtonItem setImage:[UIImage imageNamed:@"sendButton"] forState:UIControlStateNormal];
[self.inputToolbar.contentView.rightBarButtonItem setTitle:@"" forState:UIControlStateNormal];
self.inputToolbar.contentView.leftBarButtonItem.hidden = YES;

That code hides left attach button and adds 2 custom buttons like subviews and changes width for left content view. Hope it will help you.

[jessesquires]

thanks for the answer @YroJlbok ! 😄

[HuppDevelopers]

@TheEngineerz Thanks for beautiful solution.
I have set my inputToolbar as per your code. Button effect is working fine but buttonImage is not visible. Do you have some idea, why?
Thanks...

[masterravi]

Swift 3 version for above code ;

       let height: Float = Float(inputToolbar.contentView.leftBarButtonContainerView.frame.size.height)
        var image = UIImage(named: "smileButton.png")
        let smileButton = UIButton(type: .custom)
        smileButton.setImage(image, for: .normal)
        smileButton.addTarget(self, action: #selector(self.addMessage), for: .touchUpInside)
        smileButton.frame = CGRect(x: 0, y: 0, width: 25, height: CGFloat(height))
        image = UIImage(named: "attachButton.png")
        let attachButton = UIButton(type: .custom)
        attachButton.setImage(image, for: .normal)
        attachButton.addTarget(self, action: #selector(self.addMessage), for: .touchUpInside)
        attachButton.frame = CGRect(x: 30, y: 0, width: 25, height: CGFloat(height))
        inputToolbar.contentView.leftBarButtonItemWidth = 55
        inputToolbar.contentView.leftBarButtonContainerView.addSubview(smileButton)
        inputToolbar.contentView.leftBarButtonContainerView.addSubview(attachButton)
        inputToolbar.contentView.leftBarButtonItem.isHidden = true

[iOSvarinder]

when we add third button it hides behind inputtoolbar , so how we can solve this issue...
and can we add custom top bar in jsqmessegeviewcontroller with navigation

[IgorRotaruSG]

hi @iOSvarinder , you should increase leftBarButtonItemWidth, calculate your left offset (width of 3 buttons with spacing) and assign new value.