|
|
« Предыдущая тема | Следующая тема » |
Опции темы | Опции просмотра |
|
|
|||||
Позиционирование элементов в скинованном ActionBar (flex mobile)
Убил уже на эту проблему полдня, и мозг уже вообще не соображает, поэтому пишу сюда. Есть в приложении заскинованный ActionBar который сейчас выглядит вот так:
А нужно чтобы он выглядел вот так: То есть проблема в позиционировании компонента «крестик с циферкой» который сделан во флеше и просто заэддчайлден в классе UIComponent Как все сделано сейчас Скин присвоен в css: s|ActionBar { chromeColor: #d9e0e7; titleAlign: center; skinClass: ClassReference("theme.ActionBarSkin"); paddingBottom: 0; paddingLeft: 10; paddingRight: 0; paddingTop: 2; } В классе Main содержимое ActionBar вставляется так: <s:navigationContent> <s:Image smooth="true" left="15" top="2" source="@Embed('../assets/actionBar/header.png')"/> </s:navigationContent> <s:actionContent> <s:Image id="menuBack" smooth="true" width="100%" height="100%" source="@Embed('../assets/actionBar/menuBtn.png')" click="navigator.popToFirstView();"/> </s:actionContent> <s:titleContent> <as3comps:SmallSelectedIcon width="100%" height="100%" click="navigator.pushView(views.Selected)" /> </s:titleContent> <s:actionContent> <s:Image id="menuBack" name="menuBack" smooth="true" width="100%" height="100%" source="@Embed('../assets/actionBar/menuBtn.png')" click="navigator.popToFirstView();"/> </s:actionContent> titleGroup = new Group(); hLayout = new HorizontalLayout(); hLayout.horizontalAlign = HorizontalAlign.RIGHT; // было LEFT hLayout.verticalAlign = VerticalAlign.MIDDLE; hLayout.gap = 0; hLayout.paddingLeft = hLayout.paddingRight = layoutTitleGroupHorizontalPadding; hLayout.paddingTop = hLayout.paddingBottom = 0; titleGroup.layout = hLayout; titleGroup.id = "titleGroup"; |
|
|||||
1. Уберите вот это: "и внес в него все необходимые мне изменения."
2. Откройте документацию. 3. Обратите внимание на свойства actionLayout и navigationLayout. 4. Прочитайте наконец то что написано по ссылкам в разделах "Дополнительные примеры" и "Дополнительно" в документации на этот компонент (они находятся вверху страницы, сразу после раздела "Синтаксис MXML"). 5. Если все еще будет непонятно, где вы ошиблись, напишите об этом, попробую объяснить вам своими словами.
__________________
משיח לא בא משיח גם לא מטלפן |
|
|||||
Спасибо! В принципе этот вопрос я уже решил, в классе скина я выцепляю этот компонент по getChildByName, отрубаю лейаут и позиционирую его сам, но есть сильное ощущение что этот подход очень кривой и может еще вылезти боком, поэтому спасибо за наводку, сейчас приходится другим проектом заниматься, но на той неделе я попробую сделать все правильно и отпишу о результатах.
|
|
|||||
Это не решение. В принципе.
Для позиционирования дочерних элементов в ActionBar вам нет необходимости модифицировать его скин (если речь не идет о изменении позиционирования navigationGroup, titleGroup или actionGroup, что не является вашим случаем). О существовании getChildByName в контексте spark компонентов, можете вообще забыть, как и о существовании свойства name.
__________________
משיח לא בא משיח גם לא מטלפן |
|
|||||
В общем появилось время на эксперименты, перечитал еще раз документацию, сделал все так как там написано, поместил нужные мне компоненты таким вот образом:
<s:actionContent> <s:Button icon="{ new SmallSelectedIcon() }" click="navigator.pushView(views.Selected);"/> <s:Button icon="@Embed('../assets/actionBar/menuBtn.png')" click="navigator.popToFirstView();"/> </s:actionContent> и непонятно как растянуть icon (а точнее Button, я так понимаю иконка во всю кнопку и так растянута) в высоту всего ActionBar? Присвоение height="100%" ничего не меняет. Ничего на эту тему я в документации не нашел Последний раз редактировалось PainKiller; 01.04.2014 в 13:59. |
|
|||||
Вот в этом случае можете сделать свой скин для Button. Хотя по уму у вас должна быть иконка соответствующего размера. Вот вам еще дополнительное чтиво.
__________________
משיח לא בא משיח גם לא מטלפן |
|
|||||
Понял, спасибо большое. С иконками разного DPI все равно ничего не получается, они просто делают кнопку более крупной, а пустая окантовка по краям все равно остается. В общем буду делать скин кнопки.
Добавлено через 1 час 38 минут И еще один вопрос по скинованию кнопки с компонентом. В общем я сделал так: [Bindable] public static var selIcon:SmallSelectedIcon = new SmallSelectedIcon(); <s:actionContent> <s:Button icon="{ selIcon }" skinClass="theme.ActionBtnSkinComp" click="navigator.pushView(views.Selected);"/> </s:actionContent> <?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <!-- host component --> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <!-- states --> <s:states> <s:State name="disabled" /> <s:State name="down" /> <s:State name="over" /> <s:State name="up" /> </s:states> <s:BitmapImage id="iconDisplay" left="0" right="0" top="0" bottom="0" /> <!-- SkinParts name=iconDisplay, type=spark.primitives.BitmapImage, required=false name=labelDisplay, type=spark.core.IDisplayText, required=false --> </s:SparkSkin> Добавлено через 1 час 57 минут В принципе я это тоже исправил скопировав из мобильной темы класс ButtonSkin.as, и внеся в него необходимые мне изменения, затем присвоил его моей кнопке. Но если есть подходы получше, просьба ими поделиться)) Последний раз редактировалось PainKiller; 01.04.2014 в 18:36. |
Часовой пояс GMT +4, время: 21:23. |
|
« Предыдущая тема | Следующая тема » |
|
|