在Xamarin Forms中自定义键盘

Question

我已经阅读了论坛和StackOverflow等其他地方关于制作自定义键盘的许多帖子，但没有找到一种适用于我的Xamarin Forms跨平台项目的方法。它是以编程方式生成的。

例如，我建立了这个在几个地方推荐的键盘：

我尝试将其集成到我的Xamarin Forms应用程序中，但无法做到这一点：

https://github.com/Vaikesh/CustomKeyboard/blob/master/CustomKeyboard/Activity1.cs

它作为独立应用程序运行良好。

我想在我的应用程序中添加希伯来语键盘，就像这样

我会非常感激任何帮助。

谢谢。

- Ziyad Godil

---

你需要在本地平台上实现这个函数，然后才能使用自定义渲染器在Xamarin.Forms中使用它。 - York Shen

我如何为键盘创建自定义渲染器？ - Ziyad Godil

请参考：https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/entry/ - York Shen

是的，我可以为输入框创建自定义渲染器，但是如何为键盘创建呢？如果我为此设置赏金，你能分享一些代码给我吗？我想要实现这样的效果： https://play.google.com/store/apps/details?id=com.balintinfotech.hebrewkeyboardfree - Ziyad Godil

我会尽力帮助你解决这个问题。 - York Shen

Answer 1

Xamarin Forms中的自定义键盘

您可以创建一个PageRenderer，并使用本地的.axml布局文件来创建自定义的Keyboard。

例如，我的KeyboardPageRenderer：

[assembly: ExportRenderer(typeof(MyKeyboardPage), typeof(KeyboardPageRenderer))]
...
public class KeyboardPageRenderer : PageRenderer
{

    public CustomKeyboardView mKeyboardView;
    public EditText mTargetView;
    public Android.InputMethodServices.Keyboard mKeyboard;
    Activity activity;
    global::Android.Views.View view;

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

        if (e.OldElement != null || Element == null)
        {
            return;
        }

        try
        {
            SetupUserInterface();
            SetupEventHandlers();
            this.AddView(view);
        }
        catch (System.Exception ex)
        {
            System.Diagnostics.Debug.WriteLine(@"           ERROR: ", ex.Message);
        }
    }

    void SetupUserInterface()
    {
        activity = this.Context as Activity;
        view = activity.LayoutInflater.Inflate(Resource.Layout.activity_keyboard, this, false);

        mKeyboard = new Android.InputMethodServices.Keyboard(Context, Resource.Xml.keyboard);
        mTargetView = view.FindViewById<EditText>(Resource.Id.target);

        mKeyboardView = view.FindViewById<CustomKeyboardView>(Resource.Id.keyboard_view);
        mKeyboardView.Keyboard = mKeyboard;
    }

    void SetupEventHandlers()
    {
        mTargetView.Touch += (sender, e) =>
        {
            ShowKeyboardWithAnimation();
            e.Handled = false;
            mTargetView.ShowSoftInputOnFocus = false;
        };

        mKeyboardView.Key += async (sender, e) =>
        {
            long eventTime = JavaSystem.CurrentTimeMillis();
            KeyEvent ev = new KeyEvent(eventTime, eventTime, KeyEventActions.Down, e.PrimaryCode, 0, 0, 0, 0, KeyEventFlags.SoftKeyboard | KeyEventFlags.KeepTouchMode);

            DispatchKeyEvent(ev);

            await Task.Delay(1);

            mTargetView.RequestFocus();
        };
    }


    public void ShowKeyboardWithAnimation()
    {
        if (mKeyboardView.Visibility == ViewStates.Gone)
        {
            mKeyboardView.Visibility = ViewStates.Visible;
            Android.Views.Animations.Animation animation = AnimationUtils.LoadAnimation(
                Context,
                Resource.Animation.slide_in_bottom
            );
            mKeyboardView.ShowWithAnimation(animation);
        }
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);

        var msw = MeasureSpec.MakeMeasureSpec(r - l, MeasureSpecMode.Exactly);
        var msh = MeasureSpec.MakeMeasureSpec(b - t, MeasureSpecMode.Exactly);

        view.Measure(msw, msh);
        view.Layout(0, 0, r - l, b - t);
    }
}

效果：

.

我写了一个简单的演示，展示如何实现这个功能。你可以在这个GitHub存储库中查看。

我不懂希伯来语，如果你想要实现像图片一样的效果，你需要自定义keyboard.xml文件中的布局。

更新:

我已经完成了iOS部分，使用输入渲染器，所以只需要为Android部分做好准备。

我编写了一个EntryRenderer来实现这个功能，效果如此图，希望能帮到你。

public class MyEntry2Renderer :  ViewRenderer<MyEntry, TextInputLayout>,
    ITextWatcher,
    TextView.IOnEditorActionListener
{
    private bool _hasFocus;

    public CustomKeyboardView mKeyboardView;
    public Android.InputMethodServices.Keyboard mKeyboard;

    ViewGroup activityRootView;

    protected EditText EditText => Control.EditText;

    public bool OnEditorAction(TextView v, ImeAction actionId, KeyEvent e)
    {
        if ((actionId == ImeAction.Done) || ((actionId == ImeAction.ImeNull) && (e.KeyCode == Keycode.Enter)))
        {
            Control.ClearFocus();
            //HideKeyboard();
            ((IEntryController)Element).SendCompleted();
        }
        return true;
    }

    public virtual void AfterTextChanged(IEditable s)
    {
    }

    public virtual void BeforeTextChanged(ICharSequence s, int start, int count, int after)
    {
    }

    public virtual void OnTextChanged(ICharSequence s, int start, int before, int count)
    {
        if (string.IsNullOrWhiteSpace(Element.Text) && (s.Length() == 0)) return;
        ((IElementController)Element).SetValueFromRenderer(Entry.TextProperty, s.ToString());
    }

    protected override TextInputLayout CreateNativeControl()
    {
        var textInputLayout = new TextInputLayout(Context);
        var editText = new EditText(Context);

        #region Add the custom Keyboard in your Page
        var activity = Forms.Context as Activity;
        var rootView = activity.Window.DecorView.FindViewById(Android.Resource.Id.Content);

        activity.Window.SetSoftInputMode(SoftInput.StateAlwaysHidden);

        activityRootView = ((ViewGroup)rootView).GetChildAt(0) as ViewGroup;
        mKeyboardView = new CustomKeyboardView(Forms.Context, null);

        Android.Widget.RelativeLayout.LayoutParams layoutParams =
            new Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.WrapContent); // or wrap_content
        layoutParams.AddRule(LayoutRules.AlignParentBottom);
        activityRootView.AddView(mKeyboardView, layoutParams);
        #endregion

        //First open the current page, hide the Keyboard
        mKeyboardView.Visibility = ViewStates.Gone;

        //Use the custom Keyboard
        mKeyboard = new Android.InputMethodServices.Keyboard(Context, Resource.Xml.keyboard2);
        mKeyboardView.Keyboard = mKeyboard;

        mKeyboardView.Key += async (sender, e) =>
        {
            long eventTime = JavaSystem.CurrentTimeMillis();
            KeyEvent ev = new KeyEvent(eventTime, eventTime, KeyEventActions.Down, e.PrimaryCode, 0, 0, 0, 0, KeyEventFlags.SoftKeyboard | KeyEventFlags.KeepTouchMode);

            DispatchKeyEvent(ev);

            await Task.Delay(1);
        };

        textInputLayout.AddView(editText);
        return textInputLayout;
    }


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

        if (e.OldElement != null)
            if (Control != null)
                EditText.FocusChange -= ControlOnFocusChange;

        if (e.NewElement != null)
        {
            var ctrl = CreateNativeControl();
            SetNativeControl(ctrl);

            EditText.ShowSoftInputOnFocus = false;

            EditText.FocusChange += ControlOnFocusChange;
        }
    }

    private void ControlOnFocusChange(object sender, FocusChangeEventArgs args)
    {
        _hasFocus = args.HasFocus;
        if (_hasFocus)
        {
            EditText.Post(() =>
            {
                EditText.RequestFocus();
                ShowKeyboardWithAnimation();
            });
        }
        else
        {
            //Hide the Keyboard
            mKeyboardView.Visibility = ViewStates.Gone;
        }
    }

    public void ShowKeyboardWithAnimation()
    {
        if (mKeyboardView.Visibility == ViewStates.Gone)
        {
            mKeyboardView.Visibility = ViewStates.Visible;
            Android.Views.Animations.Animation animation = AnimationUtils.LoadAnimation(
                Context,
                Resource.Animation.slide_in_bottom
            );
            mKeyboardView.ShowWithAnimation(animation);
        }
    }
}

- York Shen

---

为什么使用Pagerender？是否可能只使用Entryrender完成相同的事情？ - Ziyad Godil

感谢您的帮助，如果您使用entry render，将更加感激。 - Ziyad Godil

我已经使用输入渲染完成了iOS部分，所以只需要尝试完成Android部分。 - Ziyad Godil

@ZiyadGodil，我已经更新了我的答案，请查看。 - York Shen

谢谢@York，我会检查并告诉你。 - Ziyad Godil