ساخت کیبورد سفارشی برای اندروید با Xamarin Forms — از صفر تا صد

1namespace CustomKeyboard
2{
3    public class EntryWithCustomKeyboard : Entry
4    {
5        public static readonly BindableProperty EnterCommandProperty = BindableProperty.Create(
6            nameof(EnterCommand),
7            typeof(ICommand),
8            typeof(EntryWithCustomKeyboard),
9            default(ICommand),
10            BindingMode.OneWay
11        );
12
13        public ICommand EnterCommand
14        {
15            get => (ICommand)GetValue(EnterCommandProperty);
16            set => SetValue(EnterCommandProperty, value);
17        }
18    }
19}

1namespace CustomKeyboard.Droid
2{
3    [Activity(
4        Label = "CustomKeyboard",
5        Icon = "@mipmap/icon",
6        Theme = "@style/MainTheme",
7        MainLauncher = true,
8        ScreenOrientation = ScreenOrientation.Portrait,
9        ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,
10        WindowSoftInputMode = SoftInput.StateAlwaysHidden,
11        LaunchMode = LaunchMode.SingleTask)]
12    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
13    {
14        protected override void OnCreate(Bundle savedInstanceState)
15        {
16            TabLayoutResource = Resource.Layout.Tabbar;
17            ToolbarResource = Resource.Layout.Toolbar;
18
19            base.OnCreate(savedInstanceState);
20            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
21
22            LoadApplication(new App());
23
24            Window.SetSoftInputMode(SoftInput.StateAlwaysHidden);
25        }
26    }
27}

1<?xml version="1.0" encoding="utf-8"?>
2<android.inputmethodservice.Keyboard
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    android:id="@+id/keyboard"
5    android:layout_width="match_parent"
6    android:layout_height="wrap_content"
7    android:layout_alignParentBottom="true"
8    android:keyPreviewLayout="@null"
9    android:keyBackground="@drawable/keyboard_background"
10    android:textColor="@android:color/white"
11    android:background="@android:color/white" />

1<?xml version="1.0" encoding="UTF-8" ?>
2<selector xmlns:android="http://schemas.android.com/apk/res/android">
3    <item
4        android:state_focused="false"
5        android:state_selected="false"
6        android:state_pressed="false"
7        android:drawable="@drawable/normal" />
8    <item
9        android:state_pressed="true"
10        android:drawable="@drawable/pressed" />
11</selector>

1<?xml version="1.0" encoding="UTF-8" ?>
2<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3    <item android:left="2dp" android:right="2dp">
4        <shape android:shape="rectangle">
5            <solid android:color="#FFFFFF" />
6        </shape>
7    </item>
8    
9    <item android:bottom="2dp">
10        <shape android:shape="rectangle">
11            <solid android:color="#FF6A00" />
12        </shape>
13    </item>
14</layer-list>

1<?xml version="1.0" encoding="UTF-8" ?>
2<shape xmlns:android="http://schemas.android.com/apk/res/android">
3    <solid android:color="#FF8C00" />
4</shape>

1<?xml version="1.0" encoding="UTF-8" ?>
2<resources>
3    <item
4        name="customKeyboard"
5        type="id" />
6</resources>

1<?xml version="1.0" encoding="utf-8"?>
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="rectangle" >
4    <stroke android:width="1dp" />
5    <size android:height="2dp" />
6</shape>

1<?xml version="1.0" encoding="UTF-8" ?>
2<Keyboard xmlns:android="http://schemas.android.com/apk/res/android"
3    android:keyWidth="8%p"
4    android:keyHeight="50dp"
5    android:horizontalGap="1%p"
6    android:verticalGap="1%p">
7    
8    <Row android:keyHeight="4dp" android:rowEdgeFlags="top" android:verticalGap="1%p">
9        <Key android:codes="0" android:keyWidth="100%p" android:keyIcon="@drawable/kb_separator_line" />
10    </Row>
11    
12    <Row>
13        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="left" />
14        <Key android:codes="29" android:keyLabel="A" android:keyWidth="18%p" />
15        <Key android:codes="30" android:keyLabel="B" android:keyWidth="18%p" />
16        <Key android:codes="31" android:keyLabel="C" android:keyWidth="18%p" />
17        <Key android:codes="32" android:keyLabel="D" android:keyWidth="18%p" />
18        <Key android:codes="33" android:keyLabel="E" android:keyWidth="18%p" />
19        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="right"  />
20    </Row>
21
22    <Row>
23        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="left" />
24        <Key android:codes="8" android:keyLabel="1" android:keyWidth="18%p" />
25        <Key android:codes="9" android:keyLabel="2" android:keyWidth="18%p" />
26        <Key android:codes="10" android:keyLabel="3" android:keyWidth="18%p" />
27        <Key android:codes="11" android:keyLabel="4" android:keyWidth="18%p" />
28        <Key android:codes="12" android:keyLabel="5" android:keyWidth="18%p" />
29        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="right"  />
30    </Row>
31    
32    <Row>
33        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="left" />
34        <Key android:codes="13" android:keyLabel="6" android:keyWidth="18%p" />
35        <Key android:codes="14" android:keyLabel="7" android:keyWidth="18%p" />
36        <Key android:codes="15" android:keyLabel="8" android:keyWidth="18%p" />
37        <Key android:codes="16" android:keyLabel="9" android:keyWidth="18%p" />
38        <Key android:codes="7" android:keyLabel="0" android:keyWidth="18%p" />
39        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="right"  />
40    </Row>
41    
42    <Row>
43        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="left" />
44        <Key android:codes="67" android:keyLabel="DELETE" android:keyWidth="37%p" />
45        <Key android:codes="66" android:keyLabel="ENTER" android:keyWidth="56%p" />
46        <Key android:codes="0" android:keyWidth="0dp" android:horizontalGap="2%p" android:keyEdgeFlags="right"  />
47    </Row>
48</Keyboard>

1<?xml version="1.0" encoding="UTF-8" ?>
2<set xmlns:android="http://schemas.android.com/apk/res/android">
3    <translate android:fromYDelta="150%p" android:toYDelta="0" android:duration="200"/>
4    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="200" />
5</set>

1[assembly: ExportRenderer(typeof(EntryWithCustomKeyboard), typeof(EntryWithCustomKeyboardRenderer))]
2namespace CustomKeyboard.Droid.Renderers
3{
4    public class EntryWithCustomKeyboardRenderer : EntryRenderer, IOnKeyboardActionListener
5    {
6        private Context context;
7
8        private EntryWithCustomKeyboard entryWithCustomKeyboard;
9
10        private Android.InputMethodServices.KeyboardView mKeyboardView;
11        private Android.InputMethodServices.Keyboard mKeyboard;
12
13        private InputTypes inputTypeToUse;
14
15        private bool keyPressed;
16
17        public EntryWithCustomKeyboardRenderer(Context context) : base(context)
18        {
19            this.context = context;
20        }
21
22        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
23        {
24            base.OnElementChanged(e);
25
26            var newCustomEntryKeyboard = e.NewElement as EntryWithCustomKeyboard;
27            var oldCustomEntryKeyboard = e.OldElement as EntryWithCustomKeyboard;
28
29            if (newCustomEntryKeyboard == null && oldCustomEntryKeyboard == null)
30                return;
31
32            if (e.NewElement != null)
33            {
34                this.entryWithCustomKeyboard = newCustomEntryKeyboard;
35                this.CreateCustomKeyboard();
36
37                this.inputTypeToUse = this.entryWithCustomKeyboard.Keyboard.ToInputType() | InputTypes.TextFlagNoSuggestions;
38                
39                // Here we set the EditText event handlers
40                this.EditText.FocusChange += Control_FocusChange;
41                this.EditText.TextChanged += EditText_TextChanged;
42                this.EditText.Click += EditText_Click;
43                this.EditText.Touch += EditText_Touch;
44            }
45
46            // Dispose control
47            if (e.OldElement != null)
48            {
49                this.EditText.FocusChange -= Control_FocusChange;
50                this.EditText.TextChanged -= EditText_TextChanged;
51                this.EditText.Click -= EditText_Click;
52                this.EditText.Touch -= EditText_Touch;
53            }
54        }
55
56        protected override void OnFocusChangeRequested(object sender, VisualElement.FocusRequestArgs e)
57        {
58            e.Result = true;
59
60            if (e.Focus)
61                this.Control.RequestFocus();
62            else
63                this.Control.ClearFocus();
64        }
65
66        // Event handlers
67        private void Control_FocusChange(object sender, FocusChangeEventArgs e)
68        {
69            // Workaround to avoid null reference exceptions in runtime
70            if (this.EditText.Text == null)
71                this.EditText.Text = string.Empty;
72
73            if (e.HasFocus)
74            {
75                this.mKeyboardView.OnKeyboardActionListener = this;
76
77                if (this.Element.Keyboard == Keyboard.Text)
78                    this.CreateCustomKeyboard();
79
80                this.ShowKeyboardWithAnimation();
81            }
82            else
83            {
84                // When the control looses focus, we set an empty listener to avoid crashes
85                this.mKeyboardView.OnKeyboardActionListener = new NullListener();
86
87                this.HideKeyboardView();
88            }
89        }
90
91        private void EditText_TextChanged(object sender, Android.Text.TextChangedEventArgs e)
92        {
93            // Ensure no key is pressed to clear focus
94            if (this.EditText.Text.Length != 0 && !this.keyPressed)
95            {
96                this.EditText.ClearFocus();
97                return;
98            }
99        }
100
101        private void EditText_Click(object sender, System.EventArgs e)
102        {
103            ShowKeyboardWithAnimation();
104        }
105
106        private void EditText_Touch(object sender, TouchEventArgs e)
107        {
108            this.EditText.InputType = InputTypes.Null;
109
110            this.EditText.OnTouchEvent(e.Event);
111
112            this.EditText.InputType = this.inputTypeToUse;
113
114            e.Handled = true;
115        }
116
117        // Keyboard related section
118
119        // Method to create our custom keyboard view
120        private void CreateCustomKeyboard()
121        {
122            var activity = (Activity)this.context;
123
124            var rootView = activity.Window.DecorView.FindViewById(Android.Resource.Id.Content);
125            var activityRootView = (ViewGroup)((ViewGroup)rootView).GetChildAt(0);
126
127            this.mKeyboardView = activityRootView.FindViewById<Android.InputMethodServices.KeyboardView>(Resource.Id.customKeyboard);
128
129            // If the previous line fails, it means the keyboard needs to be created and added
130            if (this.mKeyboardView == null)
131            {
132                this.mKeyboardView = (Android.InputMethodServices.KeyboardView)activity.LayoutInflater.Inflate(Resource.Layout.CustomKeyboard, null);
133                this.mKeyboardView.Id = Resource.Id.customKeyboard;
134                this.mKeyboardView.Focusable = true;
135                this.mKeyboardView.FocusableInTouchMode = true;
136
137                this.mKeyboardView.Release += (sender, e) => { };
138
139                var layoutParams = new Android.Widget.RelativeLayout.LayoutParams(LayoutParams.MatchParent, LayoutParams.WrapContent);
140                layoutParams.AddRule(LayoutRules.AlignParentBottom);
141                activityRootView.AddView(this.mKeyboardView, layoutParams);
142            }
143
144            this.HideKeyboardView();
145
146            this.mKeyboard = new Android.InputMethodServices.Keyboard(this.context, Resource.Xml.special_keyboard);
147
148            this.SetCurrentKeyboard();
149        }
150
151        private void SetCurrentKeyboard()
152        {
153            this.mKeyboardView.Keyboard = this.mKeyboard;
154        }
155
156        // Method to show our custom keyboard
157        private void ShowKeyboardWithAnimation()
158        {
159            // First we must ensure that keyboard is hidden to
160            // prevent showing it multiple times
161            if (this.mKeyboardView.Visibility == ViewStates.Gone)
162            {
163                // Ensure native keyboard is hidden
164                var imm = (InputMethodManager)this.context.GetSystemService(Context.InputMethodService);
165                imm.HideSoftInputFromWindow(this.EditText.WindowToken, 0);
166
167                this.EditText.InputType = InputTypes.Null;
168
169                var animation = AnimationUtils.LoadAnimation(this.context, Resource.Animation.slide_in_bottom);
170                this.mKeyboardView.Animation = animation;
171
172                this.mKeyboardView.Enabled = true;
173                
174                // Show custom keyboard with animation
175                this.mKeyboardView.Visibility = ViewStates.Visible;
176            }
177        }
178        
179        // Method to hide our custom keyboard
180        private void HideKeyboardView()
181        {
182            this.mKeyboardView.Visibility = ViewStates.Gone;
183            this.mKeyboardView.Enabled = false;
184
185            this.EditText.InputType = InputTypes.Null;
186        }
187        
188        // Implementing IOnKeyboardActionListener interface
189        public void OnKey([GeneratedEnum] Keycode primaryCode, [GeneratedEnum] Keycode[] keyCodes)
190        {
191            if (!this.EditText.IsFocused)
192                return;
193            
194            // Ensure key is pressed to avoid removing focus
195            this.keyPressed = true;
196
197            // Create event for key press
198            long eventTime = JavaSystem.CurrentTimeMillis();
199
200            var ev = new KeyEvent(eventTime, eventTime, KeyEventActions.Down, primaryCode, 0, 0, 0, 0,
201                                  KeyEventFlags.SoftKeyboard | KeyEventFlags.KeepTouchMode);
202                                  
203            // Ensure native keyboard is hidden
204            var imm = (InputMethodManager)this.context.GetSystemService(Context.InputMethodService);
205            imm.HideSoftInputFromWindow(this.EditText.WindowToken, HideSoftInputFlags.None);
206
207            this.EditText.InputType = this.inputTypeToUse;
208
209            switch(ev.KeyCode)
210            {
211                case Keycode.Enter:
212                    // Sometimes EditText takes long to update the HasFocus status
213                    if (this.EditText.HasFocus)
214                    {
215                        // Close the keyboard, remove focus and launch command asociated action
216                        this.HideKeyboardView();
217
218                        this.ClearFocus();
219
220                        this.entryWithCustomKeyboard.EnterCommand?.Execute(null);
221                    }
222
223                    break;
224            }
225
226            // Set the cursor at the end of the text
227            this.EditText.SetSelection(this.EditText.Text.Length);
228
229            if (this.EditText.HasFocus)
230            {
231                this.DispatchKeyEvent(ev);
232
233                this.keyPressed = false;
234            }
235        }
236
237        public void OnPress([GeneratedEnum] Keycode primaryCode)
238        {
239        }
240
241        public void OnRelease([GeneratedEnum] Keycode primaryCode)
242        {
243        }
244
245        public void OnText(ICharSequence text)
246        {
247        }
248
249        public void SwipeDown()
250        {
251        }
252
253        public void SwipeLeft()
254        {
255        }
256
257        public void SwipeRight()
258        {
259        }
260
261        public void SwipeUp()
262        {
263        }
264        
265        private class NullListener : Java.Lang.Object, IOnKeyboardActionListener
266        {
267            public void OnKey([GeneratedEnum] Keycode primaryCode, [GeneratedEnum] Keycode[] keyCodes)
268            {
269            }
270
271            public void OnPress([GeneratedEnum] Keycode primaryCode)
272            {
273            }
274
275            public void OnRelease([GeneratedEnum] Keycode primaryCode)
276            {
277            }
278
279            public void OnText(ICharSequence text)
280            {
281            }
282
283            public void SwipeDown()
284            {
285            }
286
287            public void SwipeLeft()
288            {
289            }
290
291            public void SwipeRight()
292            {
293            }
294
295            public void SwipeUp()
296            {
297            }
298        }
299    }
300}

1<?xml version="1.0" encoding="utf-8"?>
2<ContentPage
3    xmlns="http://xamarin.com/schemas/2014/forms"
4    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5    xmlns:local="clr-namespace:CustomKeyboard"
6    x:Class="CustomKeyboard.MainPage">
7    <ScrollView>
8        <StackLayout
9            Orientation="Vertical">
10            
11            <local:EntryWithCustomKeyboard
12                x:Name="entry1"
13                HorizontalOptions="FillAndExpand"
14                Margin="0, 0, 0, 20"
15                Keyboard="Text"
16                TextColor="Black"
17                Placeholder="Custom Keyboard entry..." />
18
19            <local:EntryWithCustomKeyboard
20                x:Name="entry2"
21                HorizontalOptions="FillAndExpand"
22                Keyboard="Text"
23                TextColor="Black"
24                Placeholder="Custom Keyboard entry 2..." />
25
26        </StackLayout>
27    </ScrollView>
28</ContentPage>

1namespace CustomKeyboard
2{
3    public partial class MainPage : ContentPage
4    {
5        public MainPage()
6        {
7            InitializeComponent();
8
9            // Here we implement the action of the Enter button on our custom keyboard
10            this.entry1.EnterCommand = new Command(() => this.entry2.Focus());
11            this.entry2.EnterCommand = new Command(() => this.entry1.Focus());
12        }
13    }
14}