如何在Flex中正確對齊工具提示文本3

我在表格中有一個下拉列表（作爲自定義渲染器）。由於屏幕上有一些空間限制，某些選項太長而無法顯示在表格或下拉菜單中。不過，我們確實有一個顯示全文的工具提示。如何在Flex中正確對齊工具提示文本3

問題是這是表中的最後一列，用戶的PC也有一些解析約束。現在，工具提示顯示，並在用戶監視器上切斷其一部分。

現在我可以去調整工具提示的X位置（-150）。

private function createToolTip(event:ListEvent):void {   
    tip = ToolTipManager.createToolTip("THE TEXT", this.parentApplication.mouseX - 150, this.parentApplication.mouseY) as ToolTip;     
}

現在這個按預期工作，但如果文字很短，它在中間沒有任何地方顯示。

所以我添加（200）的寬度給工具提示

private function createToolTip(event:ListEvent):void {   
    tip = ToolTipManager.createToolTip("THE TEXT", this.parentApplication.mouseX - 150, this.parentApplication.mouseY) as ToolTip; 
    tip.width = 200;     
}

現在與正在顯示至少旁邊的下拉文本此顯示確定。

但問題是，只要長度超過200的文本存儲在數據庫中，它將不會顯示全文。

有誰知道如何讓工具提示右對齊而不是左。這樣，無論文本多長時間，它都會顯示在左側。

來源

2013-01-31 Chrispie

如果文本不是多行的，對您來說可以嗎？我只爲這種情況提供解決方案。 – Anton

這將是偉大的。現在我們遇到的問題是，這些工具提示是由數據庫驅動的，並且可能很長。雖然目前的不是。如果它是多行的，那麼數據庫描述可以儘可能長。如果你可以分享，我會很高興嗎？ Thx – Chrispie

我有一個好消息，我有它多行！稍等一會。 – Anton

這是一個解決方案，它實現了右對齊的單行和多行工具提示。

enter image description here

要做到這一點，你應該讓兩個步驟：創建自己的工具提示類，使ToolTipManager會使用它。

//Tooltip.as

package com.tooltip 
{ 
import flash.text.TextFieldAutoSize; 
import flash.text.TextFormat; 
import flash.text.TextFormatAlign; 
import mx.controls.ToolTip; 

public class MyToolTip extends ToolTip 
{ 
    public var align:String = "left"; //left or right 

    public function MyToolTip() 
    { 
     super(); 
    } 

    override protected function commitProperties():void 
    { 
     super.commitProperties(); 
    } 

    override protected function measure():void 
    { 
     super.measure(); 

     var tf:TextFormat = textField.getTextFormat(); 

     if (align == "right") 
      tf.align = TextFormatAlign.RIGHT 
     else 
      tf.align = TextFormatAlign.LEFT; 

     textField.setTextFormat(tf); 
    } 

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

     textField.autoSize = TextFieldAutoSize.NONE; 
     textField.width = this.width - 2*textField.x; 
    } 
} 
}

第二步並不簡單。

TooltipManager有一個屬性「toolTipClass」，它表示它應該使用哪個類來創建工具提示。

ToolTipManager.toolTipClass = MyToolTip;

SDK中有一個錯誤，它阻止了它的正確實現。它在網絡中經常被討論。

當創建新的工具提示時，不會考慮「toolTipClass」。相應的代碼行的樣子：

var toolTip:ToolTip = new ToolTip();

但應該是這樣的一個：

var toolTip:IToolTip = new ToolTipManager.toolTipClass();

糾正這種行爲的唯一方法是做ToolTipManagerImpl類猴子修補。這是描述here非常好。

現在你可以使用你的提示在應用程序中：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute" 
minWidth="955" minHeight="600" > 
<mx:Script> 
    <![CDATA[ 
     import com.tooltip.MyToolTip; 
     import mx.controls.ToolTip; 
     import mx.managers.ToolTipManager; 

     private const TOOLTIP_WIDTH:int = 200; 

     protected function onBtnClick(event:MouseEvent):void 
     { 
      ToolTipManager.toolTipClass = MyToolTip; 
      ToolTip.maxWidth = TOOLTIP_WIDTH; 

      var tip:MyToolTip; 

      tip = ToolTipManager.createToolTip("Your text", this.mouseX - 150, this.mouseY) as MyToolTip; 

      tip.align = "right"; 
      tip.width = TOOLTIP_WIDTH; 
     } 

    ]]> 
</mx:Script> 

<mx:Button id="myBtn" x="194" y="145" label="Show Tooltip" click="onBtnClick(event)"/> 
</mx:Application>

它同時使用「寬度」和「maxWidth」性質非常重要。改變對齊到「左」的使用

tip.align = "left";

在這行代碼的順序也很重要。

我希望它能幫助你！

//編輯

Here你可以找到ToolTipManagerImpl的補丁版本。把它放到你的項目的根目錄下。軟件包名稱與SDK中相同，因此係統將採用此名稱。

來源

2013-02-04 10:25:52 Anton

如何在Flex中正確對齊工具提示文本3

回答

相關問題