はじめに
Visual Studio 2017 community(2017/9/22時点)のXamarin.iOSを使ってiOS向けのカスタムキーボードを作る方法およびコツをまとめます。
1.新規ソリューションを立ち上げる
![説明1.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2Fcb25f18c-743d-c4cb-0eb1-13cfad82dae7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=49d802531249b5e66321402857213778)
![説明2.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2Fc2a5f62c-af1d-316c-6a40-d2fea3919658.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d3c2bdec246993afbd240d65a18adfa1)
![説明3.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F66ce6eee-d848-7c98-816b-078883aa91ed.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e49cfa015a360b7ea00bfb603834edb1)
![説明4.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2Fd2cd0ad1-4766-1303-2bc7-8d8378461b4a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8ba1a520a710a2eef0117b2bcae02aaa)
2.キーボードのExtensionプロジェクトを追加する
![説明5.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F619cf4ce-390b-b762-737d-7371a581b06a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3b915642174d24f0ed85471a83277feb)
![説明6.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2Fbc1b9dfe-978a-3199-2661-179a302db308.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f74cb2e4a9ee02a758010cb3dbdfbb06)
![説明7.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F6e2a659f-273a-1951-5125-553e9a9229ff.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=afa06a9ad0ccdc4f9b4cb2edc6dfc5c2)
![説明8.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F5739f135-c960-aa9f-7052-f5d63119aeb5.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=52186035c07e6d3c705d65f652076c29)
![説明9.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F4b2a38d9-d096-0171-f6d0-1e26f21979fb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5b433615dc0393d57fcd9061c46c41c1)
そのまま次へを選択すると、Custom Keyboardのプロジェクトが追加されます。
3.キーボードのViewとそれを司るクラスファイルを作成する
![説明10.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2Fc68403ab-0c86-eecb-f977-f1e83e114048.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0013a5fd47fe4354c4571aa7f24d683e)
![説明11.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F857bf44b-1654-e1f4-7a9e-5a3e36503b68.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=dbcbd9723df3e15c9bf4d089b322bd86)
![説明12.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F2f5d5aeb-c67d-339a-6ca4-fd9fabbe8bf6.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=0312933f410f6607e9eaf43842c89c48)
ここで、KeyboardView.csを選択してください。
KeyboardView.csの最低限の編集を行います。
もともとのソースコードは、
using System;
using Foundation;
using UIKit;
namespace iOSCustomKeyboard
{
public partial class KeyboardView : UITableViewCell
{
public static readonly NSString Key = new NSString("KeyboardView");
public static readonly UINib Nib;
static KeyboardView()
{
Nib = UINib.FromName("KeyboardView", NSBundle.MainBundle);
}
protected KeyboardView(IntPtr handle) : base(handle)
{
// Note: this .ctor should not contain any initialization logic.
}
}
}
上のようになっていると思います。これを下のように書き換えてください。
using System;
using Foundation;
using UIKit;
namespace TestKeyboard
{
public partial class KeyboardView : UIView
{
static KeyboardView()
{
}
protected KeyboardView(IntPtr handle) : base(handle)
{
}
}
}
namespaceと親クラスを変更するのを忘れないでください。
![説明13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F4f2b570b-1631-1683-f76b-dad176b5ed5d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=387677ea5b0ea422071f63bc27dd9b33)
![説明14.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F34a22a6d-a5af-0c60-c57d-6514b1dc4bb3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5a68a68c446d7398cd70df22fdcc88f3)
![説明13.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F14f16db1-f52d-b789-095b-ec4beff79ff4.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6f4e984dc630eeb5a20b3270cbefdbd8)
![説明15.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F12cd5134-9609-b494-6212-b7c8c95e65fe.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8142b32fb5c3501ad24910218ae2a54d)
このタイミングでKeyboardView.designer.csを選択してnamespaceをTestKeyboardに変更してください。
using Foundation;
namespace TestKeyboard
{
[Register("KeyboardView")]
partial class KeyboardView
{
void ReleaseDesignerOutlets()
{
}
}
}
そうしたらKeyboardView.xibを開いてください。
![説明16.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F43371089-1247-bc8a-6d1c-9bc3ec26f4fe.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a502a7f411732cfd67752848a5f4cb9a)
これで下準備は完了です。
4.キーボードのViewをレイアウトする
引き続きKeyboardView.xibを編集します。
![説明17.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F51ae3534-af8c-3a17-97e7-07acf737440b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1d5b1bc3239e16e6e8b94b79f43386d6)
左上のVIEW ASがGenericとなっているので、iPhone6など自分のデザインしやすいものにしてください。
![説明18.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F7c6993e2-d253-eb2c-3dec-e2f80d9a72c2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=00f6b3c5eaa59b3b97e29713c839fefc)
![説明19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2Ff085d83f-79ca-0a28-de56-4a12aee54a3e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f66797f7aba27ce838ac6f91ea267b29)
![説明20.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2Fb9ddca42-a96b-16cb-5f46-2c833b028052.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=25c0b71670562f46461a077de008f453)
![説明21.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F1791b7ee-fbee-c124-5132-0b9fe9b0cc70.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b80c09b342ac9402041ac49736003ce7)
![説明22.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F06fe2b9d-ffe9-2291-07ab-45c9b1f45eb1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=94f912c53a278914fdbea3b6463189ea)
![説明23.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F67153%2F4b1c041b-d0f5-3c07-e524-b327e5f1ed6d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=c01546427474111cdf647271d19002b3)
今度はBボタンを選択し、Aボタンと同じイベントハンドラに接続します。
すでに一度作ってあるイベントハンドラは候補から選択できます。
同様にしてNextボタンはPushNext、SpaceボタンはPushSpaceというイベントハンドラ名でコードと関連付けを行ってください。
結果KeyboardView.csはこのようになります。
using System;
using Foundation;
using UIKit;
namespace TestKeyboard
{
public partial class KeyboardView : UIView
{
static KeyboardView()
{
}
protected KeyboardView(IntPtr handle) : base(handle)
{
}
partial void PushKey(UIButton sender)
{
throw new NotImplementedException();
}
partial void PushNext(UIButton sender)
{
throw new NotImplementedException();
}
partial void PushSpace(UIButton sender)
{
throw new NotImplementedException();
}
}
}
ちなみにKeyboardView.designer.csの方は自動で編集が進み、このようになっています。
using Foundation;
using System;
using System.CodeDom.Compiler;
namespace TestKeyboard
{
[Register ("KeyboardView")]
partial class KeyboardView
{
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton AButton { get; set; }
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton BButton { get; set; }
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton NextButton { get; set; }
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton SpaceButton { get; set; }
[Action ("PushKey:")]
[GeneratedCode ("iOS Designer", "1.0")]
partial void PushKey (UIKit.UIButton sender);
[Action ("PushNext:")]
[GeneratedCode ("iOS Designer", "1.0")]
partial void PushNext (UIKit.UIButton sender);
[Action ("PushSpace:")]
[GeneratedCode ("iOS Designer", "1.0")]
partial void PushSpace (UIKit.UIButton sender);
void ReleaseDesignerOutlets ()
{
if (AButton != null) {
AButton.Dispose ();
AButton = null;
}
if (BButton != null) {
BButton.Dispose ();
BButton = null;
}
if (NextButton != null) {
NextButton.Dispose ();
NextButton = null;
}
if (SpaceButton != null) {
SpaceButton.Dispose ();
SpaceButton = null;
}
}
}
}
最後にボタンがわかるように背景色を設定しましょう。
Viewやボタンを選択してプロパティのWidgetのViewのBackground項目を設定すると背景色を変更できます。
レイアウト周りの下準備は以上です。
5.コーディング
KeyboardView.csを開きます。まずは下のように追記してください。
using System;
using Foundation;
using UIKit;
namespace TestKeyboard
{
public interface KeyboardViewDelegate
{
void selectKey(string key);
void selectNext();
void selectSpace();
}
public partial class KeyboardView : UIView
{
public KeyboardViewDelegate delegate_;
static KeyboardView()
{}
protected KeyboardView(IntPtr handle) : base(handle)
{}
public override void AwakeFromNib()
{
AButton.Layer.CornerRadius = 10;
BButton.Layer.CornerRadius = 10;
NextButton.Layer.CornerRadius = 10;
SpaceButton.Layer.CornerRadius = 10;
}
partial void PushKey(UIButton sender)
{
delegate_.selectKey(sender.CurrentTitle);
}
partial void PushNext(UIButton sender)
{
delegate_.selectNext();
}
partial void PushSpace(UIButton sender)
{
delegate_.selectSpace();
}
}
}
続いて、KeyboardViewController.csを編集します。
まずは余計なものを消して綺麗にしましょう。
using System;
using ObjCRuntime;
using Foundation;
using UIKit;
namespace TestKeyboard
{
public partial class KeyboardViewController : UIInputViewController
{
protected KeyboardViewController(IntPtr handle) : base(handle)
{}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
}
public override void UpdateViewConstraints()
{
base.UpdateViewConstraints();
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
}
public override void TextWillChange(IUITextInput textInput)
{}
public override void TextDidChange(IUITextInput textInput)
{}
}
}
綺麗にできたら下のように追記してください。
using System;
using ObjCRuntime;
using Foundation;
using UIKit;
namespace TestKeyboard
{
public partial class KeyboardViewController : UIInputViewController, KeyboardViewDelegate
{
KeyboardView kv;
protected KeyboardViewController(IntPtr handle) : base(handle)
{}
public override void DidReceiveMemoryWarning()
{
base.DidReceiveMemoryWarning();
}
public override void UpdateViewConstraints()
{
base.UpdateViewConstraints();
}
public override void ViewDidLoad()
{
base.ViewDidLoad();
kv = UINib.FromName("KeyboardView", null).Instantiate(this, null)[0] as KeyboardView;
kv.delegate_ = this;
View.AddSubview(kv);
}
public override void TextWillChange(IUITextInput textInput)
{}
public override void TextDidChange(IUITextInput textInput)
{}
public void selectKey(string key)
{
TextDocumentProxy.InsertText(key);
}
public void selectNext()
{
AdvanceToNextInputMode();
}
public void selectSpace()
{
TextDocumentProxy.InsertText(" ");
}
}
}
コーディングは以上です。
6.実行
レイアウトをしたサイズのiPhoneをシミュレータで指定して実行しましょう。真っ白な画面が出てくると思います。
ホームボタンを押すか、shift + command + H でホーム画面を表示して、環境設定を開き、一般->言語->キーボードから自作したiOSCustomKeyboardを追加しましょう。
リマインダアプリなどでキーボードの動作を確認できます。
7.終わりに
XamarinでのiOSカスタムキーボード開発の基礎の基礎ですが、なんとかやり方を確立できてよかったです。