Introduction

This post is linked to my previous one about the keyboard (available here). The idea now is to manage InputTextView size and scrolling correctly. It’s a nightmare to scroll inside a small input. That is the reason why the scrolling is disabled until the height reach the middle of the screen. In the screenshot bellow you can see a preview of your future result.

Xamarin IOS Scrolling Top
Xamarin IOS Scrolling Top
Xamarin IOS Scrolling Bottom
Xamarin IOS Scrolling Bottom

I saw different way to achieve this goal on Internet but it was always too complicated! So I propose an easy way to accomplish this behavior.

As you can see bellow we need two constraint with a name. In red, the height of the input. In green, the height of the footer view. The other part of the screen is a table view in my case, let’s call it CommentTableView.

Xamarin IOS IntPutTextView Size
Xamarin IOS IntPutTextView Size

Implementation

First you should enable the scrolling because the goal is to manage InputTextView size and scrolling. Don’t forget that 😉

In a second part, we should add an observer to the InputTextView to detect when the size change. (AddObserver)

Here is the logic inside the method OnSizeChanged: First we define if the size of the inputTextView increase or decrease (the user writes text or deletes text). It gives us a simple Boolean, the famous isIncreasing.

When isIncreasing equals true. There is one check newValue.Height > CommentTableView.Frame.Height. It allows you to know if the rest of the screen (CommentTableView) still has a valid height (in our case we want to stay in the middle of the screen). Depending on this information, we allow the increasing of the footer or not.

When isIncreasing equals false, you update the height to the new value. In our case, the footer view (the container of the InputTextView) has always a height equals to the InputTextView plus 32 (as a custom margin).

Conclusion

Finally, you are now able to manage InputTextView size and scrolling. Nothing can stop you to implement your own chat or comment page! So let’s go!