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)
著者/訳者:Todd Yard
出版社:Apress( 2009-05-20 )
定価:¥ 3,206
Amazon価格:¥ 2,627
ペーパーバック ( 684 ページ )
ISBN-10 : 1430218711
ISBN-13 : 9781430218715






One Comment
[...] ●TextFieldの高さの最適化 http://labs.torques.jp/2009/09/25/560/ [...]