Xamarin Forms: Spacing issue between keyboard and the bottom layout in chat page

Question

I am using a CustomEditorRenderer to solve the spacing issue between keyboard and Editor. I already posted a ticket related to that. Now I have attachment and send icons are in the same place. But when the keyboard appears, only Editor is showing on the UI, the attachment and send icons are not showing.

UI:

My XAML:

My CustomEditorRenderer in IOS:

public class CustomEditorRenderer : EditorRenderer
{
	public CustomEditorRenderer()
	{
		UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
		{
			if (Element != null)
			{
				Element.Margin = new Thickness(0, 0, 0, args.FrameEnd.Height); //push the entry up to keyboard height when keyboard is activated
			}
		});

		UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
		{
			if (Element != null)
			{
				Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
			}
		});
	}

	protected override void OnElementChanged(ElementChangedEventArgs e)
	{
		base.OnElementChanged(e);

		if (Control != null)
		{
			Control.Layer.CornerRadius = 10;
			Control.TextColor = UIColor.Black;
		}
	}
}

Is there any way to pull up the send and attachment icons when the keyboard appears?

Answer

Hello,

Your issue is that the grid with editor and images is covered by keyboard. There are two ways to solve the problem, the first one is to replace the parent element by ScrollView, it's a simple solution. The second one is to do some animation so that the parent element goes up/down when the keyboard is shown/hidden, how to calculate the exact offset is the key point.

First solution:

Second solution:

CustomRenderer

public CustomEditorRenderer()
        {
            UIKeyboard.Notifications.ObserveWillShow((sender, args) =>
            {
                NSDictionary userInfo = args.Notification.UserInfo;
                CGRect keyboardRect = args.FrameEnd;

                UIView view = Control.Superview;//get the superview

                keyboardRect = view.ConvertRectFromView(keyboardRect, null);

                var keyboardTop = keyboardRect.Y;

                CGRect rect = view.ConvertRectFromView(Control.Frame, view);

                NSNumber animationDurationValue = (NSNumber)userInfo.ObjectForKey(UIKeyboard.AnimationDurationUserInfoKey);

                if (keyboardTop < rect.GetMaxY())// compare if the view is covered by the keyboard
                {
                    var gap = keyboardTop - rect.GetMaxY();//calculate the offset and make animation
                    UIView.Animate((double)animationDurationValue, () =>
                    {
                        view.Superview.Superview.Superview.Frame = new CGRect(view.Superview.Superview.Superview.Frame.X, gap, view.Superview.Superview.Superview.Frame.Size.Width, view.Superview.Superview.Superview.Frame.Size.Height);// the view.Superview.Superview.Superview is pagecontainer (grid->stacklayout->page), if your XAML is different from mine, you can try to modify the superview to find the pagecontainer
                    });
                }

            });

            UIKeyboard.Notifications.ObserveWillHide((sender, args) =>
            {

                UIView view = Control.Superview;
                NSNumber animationDurationValue = (NSNumber)args.Notification.UserInfo.ObjectForKey(UIKeyboard.AnimationDurationUserInfoKey);
                UIView.Animate((double)animationDurationValue, () =>
                {
                    view.Superview.Superview.Superview.Frame = new CGRect(view.Superview.Superview.Superview.Frame.X, 0, view.Superview.Superview.Superview.Frame.Size.Width, view.Superview.Superview.Superview.Frame.Size.Height);// if the Safeara is enabled, you also should consider the height of Safeara 
                });
            });
        }

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Xamarin Forms: Spacing issue between keyboard and the bottom layout in chat page

1 answer