友達のカスタムビューとキーボードの作り方

はじめに

「MyOffice」は最新のほとんどのプラットフォームで動作します。Windows、MacOS、Linux向けのWebクライアント、デスクトップバージョン、iOS、Android、Tizen向けのモバイルアプリケーションです。 また、長い間コンピューターアプリケーションを開発する際には、インターフェイス設計にアプローチするための基本的なルールがありますが、モバイルデバイス用のアプリケーションを作成する場合は、多くの機能を個別に検討する必要があります。



テキストエディターの開発時に、標準のEditTextを放棄し、TextureViewコンポーネントに基づいてテキストを入力および書式設定するためのコンポーネントを実装しました。 標準のメカニズムでは、テーブル、画像の追加、スタイル、色の適用、リストの操作、インデントなどができませんでした。 コンポーネントを使用すると、新しい機能を追加する柔軟性が得られ、コンポーネントのパフォーマンスを最適化できます。

コンポーネントのタスクの1つは、ユーザーがキーボードからデータを入力し、テキストを編集し、自動置換機能とテキスト修正を適用できるようにすることです。 次に、キーボードと対話するカスタム要素を実装し、入力されたテキストを取得し、キーボードに変更を送信する方法を説明します。 カスタムキーボードの作成は、この記事の範囲外です（ こちら 、 こちら、またはこちらをご覧ください ）。

CustomViewとキーボード

View要素とキーボードの対話のプロセス全体は、 InputConnectionインターフェイスを介して行われます。 Android SDKには、基本的な実装が既にあります。BaseInputConnectionを使用すると、キーボードからイベントを受信し、それらを処理して、コンポーネントに対して受信したデータの結果であるEditableインターフェースと対話できます。

しかし、順番に始めましょう。 キーボードに接続するには、まず、開発されたコンポーネントと対話するためのインターフェイスの実装を決定する必要があります-キーボードからイベントをサブスクライブするため。 さらに、キーボードの種類とその動作に影響する多くの設定をキーボード自体に転送できます。 そのため、実装を返すコンポーネントメソッドonCreateInputConnection（...）をオーバーライドする必要があります。 変更可能なキーボードパラメータは属性として提供されます。

@Override public InputConnection onCreateInputConnection(EditorInfo outAttrs) { //    outAttrs.inputType = InputType.TYPE_CLASS_TEXT; outAttrs.imeOptions = EditorInfo.IME_ACTION_DONE; outAttrs.initialSelEnd = outAttrs.initialSelStart = 0; //      return new BaseInputConnection(this, true); } 

指定された例では、メソッドはインターフェイスの基本実装を返します。 また、EditorInfoはキーボードのパラメーターを指定します。 ここのドキュメントでどのものが見つかるかについて。 たとえば、 inputTypeを使用して、キーボードの数値またはテキスト入力を指定できます。

inputTypeに値TYPE_NULL を渡すと、ソフトウェアキーボードの自動キーボードが無効になり、すべてのイベントが表示されることに注意してください 。 onKeyDown （および物理で作業するとき）。

すでに表示されているキーボード構成を変更する必要がある場合（たとえば、入力タイプが変更された場合）、 restartInputメソッドを呼び出す必要があります。 この場合、onCreateInputConnectionが再度呼び出され、新しい値をEditorInfoに渡すことができます。 ただし、これによりInputConnection自体も再作成されることを考慮する必要があります。

次のステップでは、 setFocusableInTouchMode （true）メソッドを呼び出します（たとえば、 onFinishInflate （）メソッドから、またはマークアップで属性を使用します ）。 これにより、コンポーネントはフォーカスをインターセプトできることを示します。 また、キーボードとの対話は、現在フォーカスされている要素でのみ可能です。 これが行われない場合、onCreateInputConnectionメソッドは呼び出されません。

 @Override protected void onFinishInflate() { super.onFinishInflate(); setFocusableInTouchMode(true); ... } 

さらに、コンポーネントを押すときは、キーボードを開く必要があることに注意してください。 これは自動的には行われないため、これに注意する必要があります。 これを行う1つのオプション：

  setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { InputMethodManager imm = (InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE); imm.showSoftInput(v, 0); } }); 

最後に行うことは、 onCheckIsTextEditorメソッドをオーバーライドし、 TRUE （デフォルトではfalse）を返すことです。 ドキュメントによると、これはシステムがキーボードを画面に自動的に表示するためのヒントです。

 public class CustomView extends View { ... @Override public boolean onCheckIsTextEditor() { return true; } … } 

その結果、キーボードとの相互作用を確立するには、以下を行う必要があります。

1. onCreateInputConnectionメソッドをオーバーライドして、対話インターフェースの実装とキーボードのパラメーターを示します。
2.コンポーネントが初期化されるときにsetFocusableInTouchMode （true）を呼び出します。
3. imm.showSoftInput（...）を呼び出して、コンポーネントを押したときにキーボードを表示します。
4. onCheckIsTextEditorメソッドでTRUEを返します。

これで、キーボードからイベントの受信を開始する方法が説明されました。 次に、これらのイベントの処理方法について説明します。

入力接続

以前、Android SDKにはInputConnectionインターフェースの基本実装であるBaseInputConnectionがあることに注意されました。 キーボードと対話し、受信したイベントを編集可能なオブジェクトに委任できる基本的なロジックを追加します。これにより、カスタムコンポーネントが今後動作するようになります。 開発のために、 それから継承してgetEditable （）メソッドをオーバーライドし、そこにEditable実装を渡すことをお勧めします。

  public class TestInputConnection extends BaseInputConnection { ... @Override public Editable getEditable() { return mCustomView.getEditable(); } ... } 

編集可能インターフェイスの詳細については、以下で説明します。 それまでの間、誰かに役立つかもしれないInputConnectionメソッドをいくつか考えたいと思います。 すべてのメソッドの完全なドキュメントは、 ここで見つけることができます 。 メソッド呼び出しのシーケンス、呼び出されるパラメーターの値は、デバイスへの入力時に使用されるキーボードの実装に依存し、異なる場合があることに注意してください。

beginBatchEdit（）およびendBatchEdit（）

キーボードからの一連のアクションの開始と終了について通知します。 たとえば、T9モードのキーボードでは、テキストの後にスペースが入力されます。 この場合、 finishComposingText（）およびcommitText（）の呼び出しは、同じバッチイベント内で順番に発生します。 つまり、シーケンスは次のようになります。

beginBatchEdit
finishComposingText
beginBatchEdit
endBatchEdit
commitText
beginBatchEdit
endBatchEdit
endBatchEdit

バッチのネストが許可されていることに注意してください。 つまり、プロセスが終了したかどうかを判断するには、開始されたコールの数と終了したコールの数を考慮する必要があります。 たとえば、 EditableInputConnectionの実装（TextViewの実装）を見ることができます。この実装では、開始時に増分が発生し、終了時に減分が発生します。

重要！ バッチが終了するまで、エディターからキーボードにイベントを送信することはお勧めしません（たとえば、カーソル位置の変更）。

setComposingText（）

このメソッドは、いわゆる複合テキストがキーボードから入力されたときに呼び出されます。 たとえば、音声入力、オートコレクトモードでのテキスト入力など。 つまり、キーボードで調整/置換できるテキスト。

testという単語を入力する例：

setComposingText t 1
setComposingText te 1
setComposingText tes 1
setComposingTextテスト1

メソッドのパラメーターとして、複合テキストの新しい値があります。 さらに、この値は編集可能に転送され、特別なスパン（テキストを構成する開始および終了マーク）でマークされます。 新しい複合テキストごとに、マークされたスパンに従って以前の複合テキストが削除されます。 したがって、自動置換テキストが発生します。

finishComposingText（）

ここではすべてが非常に簡単です。このメソッドは、テキストがこれ以上修正されず、ユーザーによって最終バージョンが入力されるとキーボードが判断した時点で呼び出されます。 同時に、テキストの作成に関するすべての情報が編集可能から削除されます。

commitText（）

追加されたテキストが承認されたとき、つまり調整が計画されていない場合、 メソッドはパラメーターCharSequence text int newCursorPositionを使用して呼び出されます。 たとえば、提案はキーボードから選択されます。 この場合、テキストの値が表示されます。この値は、現在のカーソルの場所に追加する必要があります（存在する場合は、作成テキストの代わりに）。 エディターの新しいカーソル位置に関する情報と同様。 値> 0（たとえば、1）は、新しいテキストの最後のカーソルの位置を示します。 その他の意味は最初にあります。

deleteSurroundingText（）

このメソッドは、2つのパラメーター（ int beforeLength、int afterLength）で呼び出され 、現在のカーソル位置の前後のテキストの一部を削除する必要があることを通知します。 さらに、テキストの選択がある場合、これらの文字は無視されます。

たとえば、T9モードのユーザーがエディターでテキストをクリックし、プロンプトのリストから選択した単語を置き換えると、このメソッドが呼び出されます。

編集可能な実装

BaseInputConnectionは、Editableインターフェースと密接に連携し、その実装はgetEditable（）メソッドで渡す必要があります。 すべてのインターフェイスメソッドは、3つのタイプに分類できます。

*テキストの変更と受信。
*スパンで動作します。
*フィルターの適用。

TextViewの実装を見ると、 getText（）メソッドがEditableを返すことがわかります。 より正確には、 SpannableStringBuilder実装です。これはメインであり、テキストを保存および変更し、フィルタおよびスパンを操作する準備ができています。

何らかの理由で標準実装が適切でない場合は、独自の実装が可能です。 テキストの変更を扱う主な方法はreplace（...）です。 すべての挿入、追加、削除など 特定のセクションのテキストを新しいものに置き換えます。 ただし、置換する前に、テキストに一連のフィルターを適用する必要があることを忘れないでください。 さらに、カーソルの位置、テキストの選択、構成領域（自動置換の領域の開始と終了）などのタグをハングアップできるスパンを正しく操作することが重要です。

テキストウォッチャー

キーボードおよび標準のEditableとの対話の標準的な実装に満足しているとしましょう。 開発中のコンポーネントに戻り、編集可能な変更をサブスクライブします。 これは、 TextWatcherオブジェクトに特別なスパンを追加することで非常に簡単に実行されます。

 mEditable.setSpan(mMyTextWatcher, 0, mEditable.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE); 

その後、編集可能な変更については、通知が届きます。 フラグ-SPAN_INCLUSIVE_INCLUSIVEを指定することが重要です。これにより、 clearSpans（）メソッドを呼び出すときにリスナーを削除できなくなります（たとえば、finishComposingTextが発生したときに呼び出されます）。

通知を受け取ったら、次の情報を取得できます。

* mEditable。 toString（）はすべてのテキストを返します。 UIに表示できます-これはユーザーが入力したものです。
*カーソルと選択に関する情報を取得するには、 Selectionクラスのメソッドが必要です。

setText（）

コンポーネントにsetText（）メソッドがあるとします。 開発したコンポーネントの編集可能な値を更新し、キーボードバッファー内の前のテキストが無効であることをキーボードに通知する必要があります。 これを行うには、新しいEditableオブジェクトを作成し、 restartInputメソッドを呼び出します。

  public void setText(@NonNull String newText) { mEditable = Editable.Factory.getInstance().newEditable(newText); mImm.restartInput(this); } 

カーソル位置を変更する

キーボードと完全に対話するには、カーソル位置のサポートを追加する必要があります。 setComposingText（）およびcommitText（） メソッドでのテキスト入力の場合、値はcursorPositionパラメーターに含まれます。このパラメーターは、カーソルを追加するテキストの先頭または末尾に配置するかどうかを決定します。 BaseInputConnectionを介した実装の場合、カーソル位置を管理する必要はありません。ロジックは既に内部に実装されています。 Selectionメソッドを使用するだけで十分です。 getSelectionStartおよびgetSelectionEndを使用して位置を見つけます。

カーソル変更の後方サポートを追加することは非常に重要です。 たとえば、開発中のコンポーネントがカーソルを表示でき、その位置を変更できる場合、変更するたびにキーボードに通知する必要があります。 これが行われない場合、キーボードからの後続のテキスト入力は、変更された位置を無視します。 また、T9モードでの単語の置換は正しく機能しません。

通知のために、ピンの新しい位置に関する情報が送信されるupdateSelectionメソッドが使用されます。 InputConnectionのバッチが終了するまで、通知を送信しないことを忘れないでください。

単語をT9に置き換えます

ユーザーがT9でキーボードを使用する場合の小さな例です。 エディターにいくつかの単語が入力され、そのうちの1つがクリックされたとします。 標準のEditTextを使用する場合、キーボードにヒントが表示され、クリックすると単語が完全に置き換えられます。


EditTextを使用すると、キーボードは新しいカーソル位置に関する情報を受け取り、 setComposingRegionメソッドを介して現在選択されている作成テキストに関する情報をエディターに送り返します 。これにより、引き続き動作する単語、つまりカーソルの下の単語をマークします。 プロンプトの1つを選択すると、メソッドが呼び出されます。現在の単語を削除して新しい単語を挿入します。

しかし、調査によると、updateSelectionメソッドを1回呼び出すだけでは不十分です。 単語は置換されませんが、setComposingRegionが呼び出されないため、カーソルで現在の位置に追加されます。

解決策を見つけるには、EditTextを操作するときに呼び出されるInputMethodManagerメソッドのシーケンスを確認する必要があります。これは次のようになります。

 inputMethodManager.viewClicked(view); inputMethodManager.updateSelection(view, cursorPosition, cursorPosition, cursorPosition, cursorPosition); //    -1  composing region  . inputMethodManager.updateSelection(view, cursorPosition, cursorPosition, -1, -1); 

ここで、コンポーネントをクリックする処理に指定された行を追加すると、キーボードがsetComposingRegionの呼び出しを開始し、テキストが正しく置き換えられます。

コード例

 public class CustomView extends View { @NonNull private Editable mEditable; @NonNull private final InputMethodManager mImm; @NonNull private final MyTextWatcher mMyTextWatcher = new MyTextWatcher(); /** *   ,     .  > 0 -  . */ private int mBatch; public CustomView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mImm = (InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE); //  editable. mEditable = Editable.Factory.getInstance().newEditable(""); Selection.setSelection(mEditable, 0); //    setFocusableInTouchMode(true); //     setOnClickListener(v -> mImm.showSoftInput(v, 0)); //       Editable mEditable.setSpan(mMyTextWatcher, 0, mEditable.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE); } @Override public InputConnection onCreateInputConnection(EditorInfo outAttrs) { outAttrs.inputType = InputType.TYPE_CLASS_TEXT; outAttrs.imeOptions = EditorInfo.IME_ACTION_DONE; outAttrs.initialSelEnd = outAttrs.initialSelStart = 0; //    . return new BaseInputConnection(this, true) { @Override public Editable getEditable() { return mEditable; } @Override public boolean endBatchEdit() { mBatch++; return super.endBatchEdit(); } @Override public boolean beginBatchEdit() { mBatch--; return super.beginBatchEdit(); } }; } @Override public boolean onCheckIsTextEditor() { return true; } /** *      . */ public void setText(@NonNull String newText) { mEditable = Editable.Factory.getInstance().newEditable(newText); mImm.restartInput(this); } @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_UP && mBatch == 0) { int cursorPosition = 0; //    (   ) // notify keyboard that cursor position has changed. mImm.viewClicked(this); mImm.updateSelection(this, cursorPosition, cursorPosition, cursorPosition, cursorPosition); mImm.updateSelection(this, cursorPosition, cursorPosition, -1, -1); } return super.onTouchEvent(event); } private class MyTextWatcher implements TextWatcher { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {} @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { Log.d("CustomView", "Current text: " + mEditable); } @Override public void afterTextChanged(Editable editable) {} } } 

まとめ

EditTextから継承されない独自のエディターコンポーネントを作成することは、かなりまれなタスクです。 しかし、それに遭遇した場合は、キーボードのサポートに対処する必要があります。 既に記事で述べたように、最も簡単な方法はSDKにある既製の実装を使用することです。 しかし、何らかの理由で適合しない場合は、まず記事に記載されている方法に依存する価値があります-これが基本です。 さらに、ドキュメントをより詳細に調べることができます。 そして最も効果的な方法は、TextViewのソースコードを調べることです。