TextFieldの高さの最適化

Filed under AS3, Flash
Tagged as , ,

Flash(ActionScript3)のTextFieldの話。

TextFieldの高さを内容に合わせる

知りたかったのは、TextFieldの高さを、その内容に合わせて最適な高さにすることができるのか?ということ。
結論から言うと、できたので、まとめておきたいと思います。
要点は以下のようになります。

  • TextFieldにはtextHeightというテキストの高さを取得するパラメータが存在する
  • しかし、実際のTextFieldの高さはtextHeightに上下2pixelずつ足す必要がある

テスト@wonderfl

TextFieldを入力可能にして配置し、その内容の変化に合わせて、高さ調整を行うテストコードを書きwonderflにアップしてみました。

ちょっと問題になったのは、どのイベントで処理を行うか、ということ。
TextEvent.TEXT_INPUTで一見大丈夫そうでしたが、2つの問題が発生しました。
一つ目は、日本語入力で一気に行を超える文字を入力したとき、スクロールの問題が発生すること。しかしこれはEvent.SCROLLでキャッチして、TextField.scrollV=1; と強引に戻すことで対応は可能でした。
二つ目の問題は、BackSpaceキーで削除したときのこと。これは対策が思いつきませんでした。

イベント対応はEvent.CHANGEで

そこで元々キャッチしていたイベント自体が問題なのでは?と思い別のイベントで試したら問題なくTextFieldの高さを更新することができました。
そのイベントとは、Event.CHANGE
これなら日本語の時もBackSpaceで削除したときでも問題なくイベント処理で高さ更新ができました。

テストコード

Wonderflに投稿したコードを以下にも貼り付けておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package {
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.TextEvent;
  import flash.filters.DropShadowFilter;
  import flash.text.TextField;
  import flash.text.TextFieldType;
 
  [SWF(backgroundColor="#ffffff", frameRate="25")]
  public class Main extends Sprite {
    public var  _textfield:TextField;
 
    public function Main():void {
      _textfield  = new TextField();
      _textfield.x    = 100;
      _textfield.y    = 10;
      _textfield.width  = 200;
      _textfield.type      = TextFieldType.INPUT;
      _textfield.multiline  = true;  // 複数行.
      _textfield.wordWrap    = true;  // 折り返し.
      _textfield.backgroundColor  = 0xffefd5;
      _textfield.background    = true;
      _textfield.filters  = [ new DropShadowFilter(4, 45, 0x000000, 0.5, 8, 8) ];
      addChild( _textfield );
 
      addEventListener( Event.ADDED_TO_STAGE, init );
 
      _textfield.addEventListener( Event.CHANGE, updateTextFieldHeight );
      // ↑でキャッチするイベントをTextEvent.TEXT_INPUTにすると、
      // 日本語入力時、BackSpace時に高さ変更処理がうまくできないみたい.
      //_textfield.addEventListener( TextEvent.TEXT_INPUT, updateTextFieldHeight );
    }
 
    private function init(e:Event = null):void {
      _textfield.text  = "文字の行数に合わせてテキストフィールドの高さを変えるテストです。"
        + "何か入力してみてください。> ";
      updateTextFieldHeight(null);
 
      // 行末にカーソル移動してswf起動時にフォーカスを持ってくる.
      // ※Wonderflじゃうまく動かないけど..
      var numString:int  = _textfield.text.length;
      _textfield.setSelection( numString, numString );
      stage.focus  = _textfield;
    }
 
    private function updateTextFieldHeight(e:Event) :void {
      _textfield.scrollV  = 1;
      _textfield.height  = _textfield.textHeight + 4;
    }
  }
}

Foundation ActionScript 3.0 Image Effects (Foundations)

著者/訳者:Gerald YardFace

出版社:Apress( 2009-05-14 )

定価:¥ 4,698

Amazon価格:¥ 2,633

ペーパーバック ( 684 ページ )

ISBN-10 : 1430218711

ISBN-13 : 9781430218715


Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)