Inconsistent text view font about messageviewcontroller HOT 20 CLOSED

@rnystrom I'll work on that upcoming weekend.

from messageviewcontroller.

Yup makes sense. While you're fixing that, any chance you can decouple the font property from setting the font for text view and all buttons? I'd prefer to set the fonts individually

from messageviewcontroller.

@rnystrom I'm still seeing really strange layout and font issues on 0.2.1.

On load:

After typing:

And here's my config:

        // Setup the button using text or an icon
        messageView.showLeftButton = false

        // Right button
        messageView.setButton(title: "Send".uppercased(), for: .normal, position: .right)
        messageView.setButton(font: UIFont(barstool: .branding, size: 14), position: .right)
        messageView.addButton(target: self, action: #selector(handleSendButtonTapped), position: .right)
        messageView.rightButtonTint = .barstoolBrightBlue

        // Change the appearance of the text view and its content
        messageView.font = UIFont(barstool: .branding, size: 14)
        messageView.textView.font = UIFont(barstool: .regular, size: 14)
        messageView.textView.placeholderText = "Type comment..."
        messageView.textView.placeholderTextColor = .lightGray
        messageView.textView.tintColor = .barstoolBrightBlue
        messageView.applyBorder(.top, color: .separator, size: 0.5)
        messageView.inset = UIEdgeInsets(top: 20, left: 16, bottom: 20, right: 16)

        // Capsule view
        let containerView = UIView()
        containerView.backgroundColor = UIColor(red: 0.945, green: 0.945, blue: 0.945, alpha: 1)
        containerView.borderColor = .separator
        containerView.borderWidth = 1
        containerView.cornerRadius = 3

        messageView.insertSubview(containerView, at: 0)
        containerView.snp.makeConstraints {
            $0.top.equalToSuperview().inset(8)
            $0.leading.equalToSuperview().inset(8)
            $0.trailing.equalToSuperview().inset(8)
            if #available(iOS 11, *) {
                $0.bottom.equalTo(messageView.safeAreaLayoutGuide.snp.bottom).inset(8)
            } else {
                $0.bottom.equalToSuperview().inset(8)
            }
        }

from messageviewcontroller.

@AndrewBarba I had the same problem. You can fix this by settings your inset before your settings the left- and right button properties.

// Set messageView inset
messageView.inset = UIEdgeInsets(top: 20, left: 8, bottom: 20, right: 16)
messageView.font = UIFont.preferredFont(forTextStyle: .body)

// Right button
messageView.setButton(title: "Send".uppercased(), for: .normal, position: .right)
messageView.setButton(font: UIFont.systemFont(ofSize: 14), position: .right)
messageView.addButton(target: self, action: #selector(onRightButton), position: .right)
messageView.rightButtonTint = .blue

If you set the inset afterwards you get weird behaviour indeed because the calculation rely on the insets.

from messageviewcontroller.

@rnystrom Never mind, my bad. I was thinking the same code was used in the example but that works fine.

I did find the problem, the textview uses an attributed string and uses different font sizes. The first character is the correct font but all the other after that use pointSize 17.0. If I input a simple text: Jj and print the attributes we can see the difference between the 2 letters. The reason why is unclear to me yet. Any suggestions?

attributes >> Optional(J{
    NSFont = "<UICTFont: 0x7fa416c1f850> font-family: \".SFUIText\"; font-weight: normal; font-style: normal; font-size: 14.00pt";
}j{
    NSFont = "<UICTFont: 0x7fa416c17de0> font-family: \".SFUIText\"; font-weight: normal; font-style: normal; font-size: 17.00pt";
    "com.messageviewcontroller.autocompletekey" = 0;
})

from messageviewcontroller.

Blame #33 cc @lenkaiser

from messageviewcontroller.

@AndrewBarba does it repro in the example if you just disable the left button?

from messageviewcontroller.

@AndrewBarba I can't seem to repro this in the example. Can you give some more details? Are you also setting the left button inset?

from messageviewcontroller.

Simply updating the library (no other code changes), went from this:

To this:

And then typing notice how the first letter is a completely different font than the rest, and the text view just became a larger size (probably due to font change):

Adding one line of code to disable the left button (messageView.showLeftButton = false) produced this:

from messageviewcontroller.

Okay this stuff for text view frame based on insets is all just completely wrong:

        // adjust by bottom offset so content is flush w/ text view
        let leftButtonFrame = CGRect(
            x: insetBounds.minX,
            y: (insetBounds.minY + textViewHeight) - leftButtonSize.height + leftButton.bottomHeightOffset,
            width: leftButtonSize.width,
            height: leftButtonSize.height
        )
        leftButton.frame = (showLeftButton) ? leftButtonFrame : .zero
        
        let textViewFrame = CGRect(
            x: ((showLeftButton) ? leftButtonFrame.maxX : 0) + leftButtonInset,
            y: insetBounds.minY,
            width: insetBounds.width - ((showLeftButton) ? leftButtonSize.width : 0) - leftButtonInset - rightButtonSize.width,
            height: textViewHeight
        )
        textView.frame = textViewFrame

        // adjust by bottom offset so content is flush w/ text view
        let rightButtonFrame = CGRect(
            x: textViewFrame.maxX + leftButtonInset,
            y: textViewFrame.maxY - rightButtonSize.height + rightButton.bottomHeightOffset,
            width: rightButtonSize.width,
            height: rightButtonSize.height
        )
        rightButton.frame = rightButtonFrame

from messageviewcontroller.

Why not just use a stack view for this?

from messageviewcontroller.

Ya fixing the inset stuff now. It's wrong.

Why not just use a stack view for this?

Not going to involve AL layout hooks in this, I want fine control over what layout happens and when so that I can control when the text view resizes.

from messageviewcontroller.

Agree, stripping that part

from messageviewcontroller.

I’ll try to repro the font issue today and send another patch, I actually didn’t see this issue so didn’t make any change for it.

_{Sent with GitHawk}

from messageviewcontroller.

@rnystrom Thanks for the initial fix. I do think we can optimise the code a bit. If the left button properties are set but the flag showLeftButton = false, the view still shows the needed insets. I'll try to work on that this asap.

@AndrewBarba You can change your inset to:

messageView.inset = UIEdgeInsets(top: 20, left: 8, bottom: 20, right: 16)

Even when you're enabling the left button there is the correct space between left button and the textview. The original example uses this inset as well. You'll get this:

from messageviewcontroller.

Okay thanks. Still need to figure out that initial right button position and the font issues. You can see the font issue in the screen you posted above. Is it the order I’m setting the fonts? Really strange

from messageviewcontroller.

@rnystrom I’ll have a look at the font issue today. I think we need to update the readme because it uses a 16px inset. What do you think?

from messageviewcontroller.

Seems like we need to lock off the exact same layout mechanisms for any of these property changes.

@lenkaiser not sure I follow about the readme

_{Sent with GitHawk}

from messageviewcontroller.

@lenkaiser what’s the best way to repro the issue? If we can reproduce it in a failing unit test then fix the test that’d be ideal.

_{Sent with GitHawk}

from messageviewcontroller.

Should be fixed in #59

from messageviewcontroller.