MessageKit / MessageInputBar

A powerful InputAccessoryView ideal for messaging applications
MIT License
64 stars 44 forks source link

How to rise the send button up? #22

Closed NikKovIos closed 5 years ago

NikKovIos commented 5 years ago

Please tell how to change the position of the send button on Y axis? 2019-02-27 1 23 57

nathantannar4 commented 5 years ago

What code did you use to style the bar? It looks like you need to set the size of the send button to be the same vertical height as your input text view.

Sent with GitHawk

NikKovIos commented 5 years ago
private func setupBottomBar() {
        let bar = MessageInputBar()
        bar.delegate = self
        bar.padding = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
        bar.isTranslucent = false

        bar.backgroundView.backgroundColor = UIColor.fc.lightGrayBackground

        bar.separatorLine.isHidden = false
        bar.separatorLine.backgroundColor = UIColor.fc.lightGrayBlue.withAlphaComponent(0.3)

        bar.inputTextView.backgroundColor = .white
        bar.inputTextView.autocorrectionType = .no
        bar.inputTextView.font = UIFont.fc.regularSFUIDisplayPro(size: 14)
        bar.inputTextView.placeholderTextColor = UIColor.fc.placeholderGray
        bar.inputTextView.textContainerInset = UIEdgeInsets(top: 16, left: 24, bottom: 16, right: 24)
        bar.inputTextView.placeholderLabelInsets = UIEdgeInsets(top: 16, left: 28, bottom: 16, right: 24)
        bar.inputTextView.placeholder = "blog.chat.placeholder".localized
        bar.inputTextView.layer.borderWidth = 0.5
        bar.inputTextView.layer.borderColor = UIColor.fc.mediumGray.cgColor
        bar.inputTextView.layer.cornerRadius = 26.0
        bar.inputTextView.layer.masksToBounds = true
        bar.inputTextView.tintColor = UIColor.fc.mainBlue
        bar.inputTextView.scrollIndicatorInsets = UIEdgeInsets(top: 16, left: 0, bottom: 16, right: 0)

        // Send button
        let sendButtonHeight: CGFloat = 40
        bar.setRightStackViewWidthConstant(to: sendButtonHeight + 10, animated: false)
        bar.setStackViewItems([bar.sendButton, InputBarButtonItem.fixedSpace(10)], forStack: .right, animated: false)
        bar.sendButton.backgroundColor = bar.tintColor
        bar.sendButton.cornerRadius = sendButtonHeight / 2
        bar.sendButton.setSize(CGSize(width: sendButtonHeight, height: sendButtonHeight), animated: false)
        bar.sendButton.image = "sendButtonIcon".image!
        bar.sendButton.title = nil

        bar.textViewPadding.right = -sendButtonHeight - 6

        messageInputBar = bar

        reloadInputViews()
    }

If i change size there is a result: simulator screen shot - iphone 8 plus - 2019-02-28 at 12 09 28

nathantannar4 commented 5 years ago

So becauss your InputTextView is bigger than normal it looks like the send button is mis aligned but it's correct. The right stack view is set to align the items at the bottom, so, you need to make the send button a bit more taller so that it fills the height of the text input. You won't be able to get a circular blue background this way since the size would no longer be square but more of a tall rectangular. I recommend inserting a circular subview to achieve the same result.

Sent with GitHawk

NikKovIos commented 5 years ago

Thanks a ton!