Adding View/Buttons on JSQMessageViewController's inputToolbar

Question

i am trying add an additionalButton in inputToolbar of the JSQMessageViewController , but the problem is whenever inputToolbar resign or become firstResponder the frames of inputToolbar's contentView reFrames itself and additionalButton appears over the textview. can anyone help me what do in this situation by which the additionalButton and inputToolbar's textview not overlaps each other.

this is the following code:

@viewDidAppear

CGRect leftBtnFrame = self.inputToolbar.contentView.leftBarButtonContainerView.frame;
btnRabbit = [[UIButton alloc]initWithFrame:CGRectMake(leftBtnFrame.origin.x + leftBtnFrame.size.width +5 , leftBtnFrame.origin.y, leftBtnFrame.size.width, leftBtnFrame.size.height)];
[btnRabbit addTarget:self action:@selector(btnRabbitPressed) forControlEvents:UIControlEventTouchUpInside];
[btnRabbit setImage:[UIImage imageNamed:@"donkey_icon"] forState:UIControlStateNormal];



textViewFrame =  self.inputToolbar.contentView.textView.frame;
textViewFrame.origin.x = textViewFrame.origin.x +btnRabbit.frame.origin.x - self.inputToolbar.contentView.leftContentPadding;
textViewFrame.origin.y = textViewFrame.origin.y;
textViewFrame.size.height = textViewFrame.size.height;
textViewFrame.size.width = textViewFrame.size.width - btnRabbit.frame.origin.x;

[self setToolBar];

@setToolBar

 [UIView animateWithDuration:0.2 animations:^{
  [self.inputToolbar.contentView addSubview:btnRabbit];
} completion:^(BOOL finished) {
    [self.inputToolbar.contentView.textView setFrame:textViewFrame];
}];

and i am calling setToolBar in the following keyboard notification observer delegate

-(void)keyboardWillShow:(NSNotification *)notification {
    [self setToolBar ];
}

]2]2]3

share your code and screenshots of where the problem occurs.... — Vignesh Davins, Jul 12 '17 at 11:03
thanks for respond just added screenshots and code. Please have a look. — iNoob, Jul 12 '17 at 11:23
Initially is it perfect?? and the issue occurs only when you touch the textView???? — Vignesh Davins, Jul 12 '17 at 11:36
yes i am using two objects globally , a CGRect ( for textview's frame ) and button object. and the issue arises when textview is becoming or resigning firstresponder — iNoob, Jul 12 '17 at 11:41

score 0 · Answer 1 · answered Jul 12 '17 at 11:42

Here is how I've implemented

- (void)setupRightBarButtonItems {
    UIButton *sendButton = [UIButton buttonWithType:UIButtonTypeCustom];
    self.inputToolbar.contentView.rightBarButtonItem = sendButton;
    sendButton.translatesAutoresizingMaskIntoConstraints = NO;
    [sendButton setImage:[UIImage imageNamed:@"sendButtonActive"] forState:UIControlStateNormal];
    [sendButton setImage:[UIImage imageNamed:@"sendButton"] forState:UIControlStateDisabled];
    sendButton.contentMode = UIViewContentModeRight;
    sendButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
    [sendButton setImageEdgeInsets:UIEdgeInsetsMake(0, -4, 0, 0)];
    [sendButton removeConstraints:sendButton.constraints];

    //Autolayout
    [sendButton setTrailingConstant:0];
    [sendButton setTopConstant:0];
    [sendButton setBottomConstant:0];
    [sendButton setWidthConstant:54];
    self.sendButton = sendButton;

    self.inputToolbar.contentView.rightBarButtonItemWidth = 114;

    self.videoButton = [UIButton buttonWithType:UIButtonTypeCustom];
    self.videoButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.inputToolbar.contentView.rightBarButtonContainerView addSubview:self.videoButton];
    [self.videoButton setImage:[UIImage imageNamed:@"videoButton"] forState:UIControlStateNormal];
    self.videoButton.contentMode = UIViewContentModeRight;
    self.videoButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;

    [self.videoButton addTarget:self
                         action:@selector(didTappedVideoButton:)
               forControlEvents:UIControlEventTouchUpInside];

    //Autolayout
    [self.videoButton setHorizontalSpacing:0 fromView:self.sendButton];
    [self.videoButton setTopConstant:0];
    [self.videoButton setBottomConstant:0];
    [self.videoButton setWidthConstant:30];
    //

    self.photoButton = [UIButton buttonWithType:UIButtonTypeCustom];
    self.photoButton.translatesAutoresizingMaskIntoConstraints = NO;
    [self.inputToolbar.contentView.rightBarButtonContainerView addSubview:self.photoButton];
    [self.photoButton setImage:[UIImage imageNamed:@"photoButton"] forState:UIControlStateNormal];
    self.photoButton.contentMode = UIViewContentModeRight;
    self.photoButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
    [self.photoButton addTarget:self
                         action:@selector(didTappedPhotoButton:)
               forControlEvents:UIControlEventTouchUpInside];

    //Autolayout
    [self.photoButton setHorizontalSpacing:0 fromView:self.videoButton];
    [self.photoButton setTopConstant:0];
    [self.photoButton setBottomConstant:0];
    [self.photoButton setWidthConstant:30];

    self.inputToolbar.contentView.rightContentPadding = 0;
}

And the result:

score 0 · Answer 2 · answered Jul 13 '17 at 21:30

Setup your button

let btnRabbit = UIButton()
btnRabbit.setImage(#imageLiteral(resourceName: "Rabbit"), for: .normal)

place it in toolbar with this:

self.inputToolbar?.contentView?.leftBarButtonItem = btnRabbit

That will put it where you want and adjust the text input correctly.

Adding View/Buttons on JSQMessageViewController's inputToolbar

2 Answers2