2013-07-31 2 views
3

Я пытаюсь добавить ButtonBar в нижней части мобильного приложения Flex с помощью этого кода:Styling ButtonBar шрифта в Flex мобильного приложения - с экрана прилагается

CSS:

@namespace s "library://ns.adobe.com/flex/spark"; 

s|ActionBar, s|ButtonBar { 
    chromeColor: #0066CC; 
    color: #FFFFFF; 
    titleAlign: center; 
} 

ActionScript:

<s:ButtonBar requireSelection="true" 
      width="100%" 
      bottom="0" 
      skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"> 
    <s:ArrayCollection> 
     <fx:Object label="Распасы" /> 
     <fx:Object label="Пуля" icon="{MONEY}" /> 
     <fx:Object label="10" icon="{CALL}" /> 
    </s:ArrayCollection> 
</s:ButtonBar> 

К сожалению, шрифт выглядит emboiled или размыты на надписи на кнопках (в нижней части экрана) следующий:

enter image description here

ли кто-нибудь, пожалуйста, знать, как сделать ButtonBar этикетки шрифты регулярные снова?

Я не могу найти настройки CSS для этого.

ОБНОВЛЕНИЕ: Я искал исходный код AIR SDK (файлы, такие как ButtonBase.as, Label.as, ButtonBarSkin.as и т. Д.) И до сих пор не может найти ответ.

Итак, я добавляю simlified test case + еще один снимок экрана ниже и щедрость для этого вопроса.

enter image description here

TestApp.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       applicationDPI="160"> 
    <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 

     s|ActionBar, s|ButtonBar { 
      chromeColor: #0066CC; 
      color: #FFFFFF; 
      titleAlign: center; 
     } 
    </fx:Style> 

    <fx:Script> 
     <![CDATA[ 
      import spark.events.IndexChangeEvent; 
      import spark.skins.mobile.TabbedViewNavigatorTabBarSkin; 

      private function handleTabs(event:IndexChangeEvent):void { 
       _tabs[2].label = String(1 + _tabBar.selectedIndex); 
       _tabs.refresh(); 
      } 
     ]]> 
    </fx:Script> 
    <fx:Declarations> 
     <s:MultiDPIBitmapSource id="CHAT" 
      source160dpi="@Embed('chat.png')" 
      source240dpi="@Embed('chat.png')" 
      source320dpi="@Embed('chat.png')" /> 

     <s:ArrayCollection id="_tabs"> 
      <fx:Object label="One" /> 
      <fx:Object label="Two" /> 
      <fx:Object label="Three" icon="{CHAT}" /> 
     </s:ArrayCollection> 
    </fx:Declarations> 

    <s:ButtonBar id="_tabBar" 
       requireSelection="true" 
       width="100%" 
       bottom="0" 
       skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin" 
       dataProvider="{_tabs}" 
       change="handleTabs(event)"> 
    </s:ButtonBar> 

</s:Application> 

chat.png:

enter image description here

ответ

5

Хорошо, я обнаружил, что установка textShadowAlpha помогает:

s|ActionBar, s|ButtonBar { 
    chromeColor: #0066CC; 
    color: #FFFFFF; 
    titleAlign: center; 
    textShadowAlpha: 0; 
} 

И есть также textShadowColor доступны и используются мобильным/ActionBarSkin.as, мобильный/ButtonSkin.as и мобильным/supportClasses/ButtonSkinBase.as

+1

+1 это, теперь, когда я видел твое решение его напоминает мне, когда я столкнулся с той же проблемой. –

Смежные вопросы