Home > プログラミング > Flexでテキスト内容に合わせてフォントサイズを自動調整するラベル

Flexでテキスト内容に合わせてフォントサイズを自動調整するラベル

Flexでテキスト内容に合わせてフォントサイズを自動調整するラベルを作りました。

環境
OS WindowsXP SP3
Flex Flex Builder 3 with SDK 3.3.0

仕様

  • ラベルに設定されているテキストの内容が、ラベルの大きさより大きい場合に、フォントを小さくして表示する。
  • 複数行は考慮しない。

実装

Flex には、テキストフィールド内のテキストに関する情報を持つTextLineMetrics クラスがあり、TextField#getLineMetrics() で取得することができます。
Flex の mx.control.Label クラスは内部でレンダリング用に保持しているIUITextFieldを textField プロパティ( protected )で参照することができるので、この TextLineMetrics を使用して、テキスト内容が全て表示される大きさのフォントサイズを計算します。

var metrics: TextLineMetrics = textField.getLineMetrics(0);

TextField#getLineMetrics() の第1引数は行のインデックスで 0 から始まります。
複数行を表示するラベルを作成したときは、この実装を変更してください。

ソースコード

package com.ikemasa.controls
{

import flash.text.TextFormat;
import flash.text.TextLineMetrics;

import mx.controls.Label;

public class FitLabel extends Label
{

    public function FitLabel()
    {
        super();
        // ... でテキストを切りつめるのをやめる
        truncateToFit = false;
    }

    /**
     *  テキスト内容に合わせてフォントサイズを調整する。
     *  フォントを小さくしていき、ラベルに表示できる大きさになるまで再帰的に呼び出される。
     */
    private function adjustFontSize(): void
    {
        var metrics: TextLineMetrics = textField.getLineMetrics(0);

        if(width < metrics.width || height < metrics.height) {
            var format: TextFormat = textField.getTextFormat();
            if(format.size <= 1) return;

            format.size = uint(format.size)-1;
            textField.setTextFormat(format);

            adjustFontSize();
        }

    }

    override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        adjustFontSize();
    }

}

}

Home > プログラミング > Flexでテキスト内容に合わせてフォントサイズを自動調整するラベル

検索
Feeds
アーカイブ

Return to page top