Question

我有一个聊天应用程序。当前，有一个用于添加聊天文本的Entry控件。现在，我想提供类似Whatsapp的多行Entry。

如果用户键入多行，它将自动将文本换行到下一行。
如果用户单击移动键盘中的“下一行”按钮，则应转到下一行。
输入高度应自动增加到3行，如果用户删除文本，输入高度也应减小。

为此，我尝试将Entry替换为Editor并实现以下功能。

1-将编辑器替换为Entry。 2-实施使键盘保持打开状态的功能，直到用户单击“消息列表”屏幕或“后退”按钮为止。

现在，我正在尝试实现自动高度功能，但是当用户尝试键入内容时，Editor会出现在键盘后面。有人可以建议我如何保持编辑器打开和自动调整大小吗？

当前代码：

XAML：

<Grid x:Name="MessageControls" RowSpacing="1" ColumnSpacing="2" Padding="5"
 Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <local:ChatEditorWithPlaceholder  x:Name="txtMessage" Grid.Column="0"  TextChanged="EnableSend" Text="{Binding OutGoingText}"/>
    <Frame x:Name="SendButton" Grid.Column="1" Margin= "0" Padding="0" HasShadow="false" HeightRequest="25"
BackgroundColor="Transparent" HorizontalOptions="FillAndExpand">
        <Frame.GestureRecognizers>
            <TapGestureRecognizer Tapped="SendMessage_Click" NumberOfTapsRequired="1" />
        </Frame.GestureRecognizers>
        <Label Text="Send" x:Name="sendButton" TextColor="#1f88b7" HeightRequest="20"
    HorizontalOptions="Center" VerticalOptions="Center"/>
    </Frame>
</Grid>

编辑器

public class ChatEditorWithPlaceholder : Editor
{
    public ChatEditorWithPlaceholder()
    {
        this.TextChanged += (sender, e) => { this.InvalidateMeasure(); };
    }
}

编辑器渲染器：

public class ChatEditorRenderer : EditorRenderer
{
    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
    }
}

protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
{
    base.OnElementChanged(e);
    if(Control != null) {
        Control.ScrollEnabled = false;
    }
    var element = this.Element as ChatEditorWithPlaceholder;

    Control.InputAccessoryView = null;
    Control.ShouldEndEditing += DisableHidingKeyboard;

    MessagingCenter.Subscribe<ConversationPage>(this, "FocusKeyboardStatus", (sender) =>
    {

        if (Control != null)
        {
            Control.ShouldEndEditing += EnableHidingKeyboard;
        }

        MessagingCenter.Unsubscribe<ConversationPage>(this, "FocusKeyboardStatus");
    });
}
private bool DisableHidingKeyboard(UITextView textView)
{
    return false;
}

private bool EnableHidingKeyboard(UITextView textView)
{
    return true;
}

屏幕截图：

Answer 1

尝试使用此ios渲染器。

using System;  
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;   

[assembly:ExportRenderer( typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace YourNameSpace.iOS
{
    public class CustomEditorRenderer: EditorRenderer
    {
        public ChatEntryRenderer()
        {   
            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
                }

            }); 
        }
    }
}

对于android，在MainActivity中添加

 App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().
    UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);

Answer 2

对于Ios，有一个插件。您可以使用它。链接为Here。

对于Andorid，您只需在LoadApplication（new App（））方法之后在MainActivity中设置以下代码即可。

App.Current.On<Xamarin.Forms.PlatformConfiguration.Android().
UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);

更新的iOS答案：

对于IOS，您可以使用以下自定义渲染器解决键盘重叠问题。并且请从项目中删除keyboardoverlap nuget程序包。

using System;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using HBIClientFacingApp;
using HBIClientFacingApp.iOS;

[assembly:ExportRenderer( typeof(CustomEditor), typeof(CustomEditorRenderer))]
namespace YourNameSpace.iOS
{
    public class CustomEditorRenderer: EditorRenderer
    {
        public ChatEntryRenderer()
        {   
            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
                }

            }); 
        }
    }
}

Answer 3

您可以尝试更改此行：

<local:ChatEditorWithPlaceholder  x:Name="txtMessage" Grid.Column="0"  TextChanged="EnableSend" Text="{Binding OutGoingText}"/>

为此：

<Editor x:Name="txtMessage" Grid.Column="0" AutoSize="TextChanges" TextChanged="EnableSend" Text="{Binding OutGoingText}"/>

如何防止编辑器进入Xamarin.Forms的键盘后面？

编辑器

编辑器渲染器：

3 个答案: