明日から本気出す開発日記

2016/10/31 fc2ブログより引っ越しました。更新はまた明日から本気だす

AS3

【AIR for Android】Enterでフォーカス遷移

2016/10/31

TextInputに対して、StageTextとTextFieldベースのスキンを適用した場合のそれぞれの問題点。

StageText
・スクロールに対応していない
・背景色が変更できない

TextFieldベースのスキン
・Backボタンを押さないとソフトキーボードが閉じない
(StageTextなら背景をタップするだけでキーボードが閉じる)
・ソフトキーボードのタイプが指定できない

悩んだ末、スクロールに対応していないのでStageTextを捨てた。

StageTextを使うにしろ、TextFieldベースを使うにしろ、
Enterで次の項目へ移動は実装できるんだけど、
どちらかというとTextFieldベースを使ったほうが楽だったので紹介する。

Step1. TextInputを継承したCustomTextInputクラスを作る。

Step2. CustomTextInputの中身を書いていきます。まずはソフトキーボードを閉じる対策。

        override protected function createChildren(): void {
            super.createChildren();
            
            // TextFieldベースのスキンを適用
            this.setStyle("skinClass", TextInputSkin);
            // 背景をタップするだけでソフトキーボードが閉じるようにマウスアウトのイベントリスナーを用意
            this.addEventListener(MouseEvent.MOUSE_OUT, MouseOutHandler);
        }

        public function MouseOutHandler(event: MouseEvent): void {
            stage.focus = null;
        }

Step3. Enterキー押下時に次の項目に移動するようにする。(FLEXのとき書いてたソースをそのままコピペ)

override protected function keyDownHandler(event: KeyboardEvent): void {
var tabKeyEvent: FocusEvent;

// Enterキー押下時
if (event.keyCode == Keyboard.ENTER) {

// 次の項目にフォーカスを移す
tabKeyEvent = new FocusEvent(FocusEvent.KEY_FOCUS_CHANGE,
true, false, null, event.shiftKey, Keyboard.TAB);
dispatchEvent(tabKeyEvent);
}

super.keyDownHandler(event);
}

Step4. マニフェスト.xmlファイルの修正
せっかくEnterキーでスムーズにフォーカス遷移できても、ソフトキーボードの裏側にフォーカスが隠れてしまうことがあるので
これを回避します。
マニフェスト.xmlの中にsoftKeyboardBehaviorタグで囲まれた部分があるので、none⇒panに修正。

Step5. 画面を作成する
CustomTextInputを並べてみましょう。
tabIndexを設定するだけで、tabIndexの順番通りにフォーカス遷移します。

StageTextを使う場合には、画面毎にフォーカス順をマッピングする方法でしか今のところ上手くいってないです。
http://www.fxug.net/modules/xhnewbb/viewtopic.php?topic_id=4477

 

-AS3