Adobe Flex - un moyen de changer automatiquement la taille de la police pour tenir dans son conteneur?

Question

J'ai un composant dans Flex, et une partie de ce composant est une étiquette. Y at-il un moyen d'ajuster automatiquement la taille de la police pour tenir dans son conteneur?

Answer 1

Pas automatiquement (du moins pas que je sache), sans mettre en place une sorte de gestionnaire d'événements, et d'agir sur l'occurrence de certains événements. Voici une application simple AIR qui démontre une approche - dans ce cas, un événement resize déclenchant un changement dans la fontSize d'un Label:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="this_creationComplete()"> 

    <mx:Script> 
     <![CDATA[ 

      import mx.binding.utils.BindingUtils; 
      import mx.binding.utils.ChangeWatcher; 

      [Bindable] 
      public var myValue:int = 0; 

      private function this_creationComplete():void 
      { 
       setSize(); 

       addEventListener(Event.RESIZE, handleResize); 
      } 

      private function handleResize(event:Event):void 
      { 
       setSize(); 
      } 

      private function setSize():void 
      { 
       lbl.setStyle("fontSize", this.height/2); 
      } 

     ]]> 
    </mx:Script> 

    <mx:Label id="lbl" text="Hello, world!" /> 

</mx:WindowedApplication> 

Ici, lorsque l'application se redimensionnée, la propriété fontStyle de l'étiquette se change à la moitié de la taille de l'application; l'échelle de haut en bas et vous verrez comment cela fonctionne. Il y a certainement d'autres approches, comme toujours, mais comme il s'agit de styles et non de propriétés pouvant être liées, un petit codage personnalisé est très probablement nécessaire. J'espère que cela aide!

Answer 2

Si vous voulez dire une étiquette à une seule ligne, alors c'est le composant qui peut vous aider. Considérons qu'il ne peut que réduire la taille de la police (en réaction à la réduction de la largeur du conteneur).

import flash.events.Event; 
import flash.text.TextLineMetrics; 

import mx.controls.Label; 
import mx.events.FlexEvent; 

public class ElasticLabel extends Label { 
    private static const EXTRA_SPACE:Number = 2; 

    private static const MIN_FONT_SIZE:Number = 6; 

    private var fontResizeRequired:Boolean = false; 

    public function ElasticLabel() { 
     super(); 

     addEventListener("explicitMaxWidthChanged", triggerFontResize); 
     addEventListener(FlexEvent.VALUE_COMMIT, triggerFontResize); 
    } 

    private function triggerFontResize(event:Event):void { 
     fontResizeRequired = true; 
    } 

    private function get currentWidth():Number { 
     var textMetrics:TextLineMetrics = measureText(text); 
     var textWidth:Number = textMetrics.width; 
     var paddings:Number = 0; 
     var paddingLeft:Number = getStyle("paddingLeft"); 
     if (!isNaN(paddingLeft)) paddings += paddingLeft; 
     var paddingRight:Number = getStyle("paddingRight"); 
     if (!isNaN(paddingRight)) paddings += paddingRight; 
     return textWidth + paddings + EXTRA_SPACE; 
    } 

    private function resizeFont():void { 
     if (!isNaN(maxWidth) && maxWidth > 0) { 
      var fontSize:Number = getStyle("fontSize") as Number; 
      while (maxWidth < currentWidth 
        && fontSize > MIN_FONT_SIZE) { 
       fontSize -= 0.5; 
       setStyle("fontSize", fontSize); 
      } 
     } 
    } 

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

     if (fontResizeRequired) { 
      resizeFont(); 
      fontResizeRequired = false; 
     } 
    } 
}