Xamarin.form 键盘出现时向上移动视图 [英] Xamarin.form Move up view when keyboard appear

问题描述

我正在尝试构建一个聊天应用 UI，布局的想法非常简单:

I'm trying to build a Chat app UI, the idea of the Layout was pretty simple:

当输入栏聚焦时，键盘出现并推"上聊天栏，因为它是一个网格，ListView 将调整大小以适应屏幕:

When the input bar is focused, keyboard show up and "push" up the chat bar, as it's a grid, the ListView will resize to fit the screen:

我更新输入栏的边距以推"它:

I update the input bar's margin to "push" it up:

NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
CGSize keyboardSize = result.RectangleFValue.Size;
if (Element != null){
Element.Margin = new Thickness(0, 0, 0,keyboardSize.Height); //push the entry up to keyboard height when keyboard is activated
}

结果如下:https://drive.google.com/file/d/1S9yQ6ks15BRH3hH0j_M8awjp/查看?usp=sharing

视图确实向上推并且 ListView 也按预期调整了大小，但是有两个问题我不知道如何解决:

The view did push up and the ListView also resized as expected, however there are two issues that I had no idea how to solve it:

1. 如何在调整大小后保留 ListView 滚动位置?
2. 缺乏向上推视图的动画

我在网上搜索过，尝试过 IQKeyboardManager 和 KeyboardOverLap，俯卧撑动画很好很流畅，但发生了奇怪的事情:

I have search over the web, tried IQKeyboardManager and KeyboardOverLap, The push up animation is nice and smooth, however strange things happened:

https://drive.google.com/file/d/1Zm0lMKB3wq07ve67wlcvLuNM_6Waad7R/view?usp=sharing

1. 这种方法不是调整ListView的大小，而是将整个ListView向上推，看不到前几项，当然滚动条可以滚出屏幕
2. ListView 底部的额外奇怪空格

任何帮助将不胜感激，谢谢！

Any help will be appreciated, thank you!

解决方案:

  void OnKeyboardShow(object sender, UIKeyboardEventArgs args)
    {
        NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
        CGSize keyboardSize = result.RectangleFValue.Size;
        if (Control != null)
        {
            int bottomMargin = 0;
            var sa = UIApplication.SharedApplication.KeyWindow.SafeAreaInsets;
            bottomMargin = (int)sa.Bottom;

            CGPoint offset = Control.ContentOffset;
            var difference = keyboardSize.Height - bottomMargin;

            if (Control.ContentSize.Height > Control.Frame.Height)
            {
                offset.Y += difference;
                Control.SetContentOffset(offset, true);
            }
            else if (Control.ContentSize.Height + keyboardSize.Height > Control.Frame.Height)
            {
                offset.Y += Control.ContentSize.Height + keyboardSize.Height - Control.Frame.Height - bottomMargin;
                Control.SetContentOffset(offset, true);
            }

            Control.ContentInset = new UIEdgeInsets(0, 0, difference, 0);
            Control.ScrollIndicatorInsets = Control.ContentInset;

        }

    }

    void OnKeyboardHide(object sender, UIKeyboardEventArgs args)
    {
        if (Control != null)
        {
            Control.ContentInset = new UIEdgeInsets(0, 0, 0, 0);
            Control.ScrollIndicatorInsets = new UIEdgeInsets(0, 0, 0, 0);
        }

    }

推荐答案

解决方案:

参考以下代码

在 iOS 自定义渲染器中

in iOS Custom Renderer

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

  if(Control!=null)
  {
     Control.KeyboardDismissMode = UIScrollViewKeyboardDismissMode.OnDrag;

     NSNotificationCenter.DefaultCenter.AddObserver(this, new Selector("KeyBoardWillShow:"), new NSString("UIKeyboardWillShowNotification"), null);

     NSNotificationCenter.DefaultCenter.AddObserver(this, new Selector("KeyBoardWillHide:"), new NSString("UIKeyboardWillHideNotification"), null);

  }

}


[Export("KeyBoardWillShow:")]
void KeyBoardWillShow(NSNotification note)
{
  NSValue keyboardRect = (NSValue)note.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
  Control.ContentInset = new UIEdgeInsets(0,0, keyboardRect.RectangleFValue.Size.Height,0);
}


[Export("KeyBoardWillHide:")]
void KeyBoardWillHide(NSNotification note)
{
  Control.ContentInset = UIEdgeInsets.Zero;
} 

这篇关于Xamarin.form 键盘出现时向上移动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！