Форум Flasher.ru - Позиционирование элементов в скинованном ActionBar (flex mobile)

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- Flex (http://www.flasher.ru/forum/forumdisplay.php?f=84)

Позиционирование элементов в скинованном ActionBar (flex mobile)

Убил уже на эту проблему полдня, и мозг уже вообще не соображает, поэтому пишу сюда. Есть в приложении заскинованный ActionBar который сейчас выглядит вот так:
http://www.flasher.ru/forum/attachme...1&d=1395841193
А нужно чтобы он выглядел вот так:
http://www.flasher.ru/forum/attachme...1&d=1395841193
То есть проблема в позиционировании компонента «крестик с циферкой» который сделан во флеше и просто заэддчайлден в классе UIComponent
Как все сделано сейчас
Скин присвоен в css:

Код:

s|ActionBar

{

        chromeColor: #d9e0e7;

        titleAlign: center;

        skinClass: ClassReference("theme.ActionBarSkin");

        paddingBottom: 0;

        paddingLeft: 10;

        paddingRight: 0;

        paddingTop: 2;

}

Класс скина я просто скопировал из мобильной темы, и внес в него все необходимые мне изменения.
В классе Main содержимое ActionBar вставляется так:

Код AS3:

<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>

То есть картинка-лейбл слева вставляется в navigationContent, синяя кнопка возврата в меню в actionContent. Компонент я решил вставить в titleContent, соотвественно во view, где он появляется, я вписываю следующее:

Код AS3:

<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 примерно так (строчка с комментарием):

Код AS3:

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";

однако обнаружил что изменения вносимые в лейаут в скине, ни напрямую в код, ни через css, никак не проявляются, компонент остается на своем месте. Все остальные способы поменять его место (впихнуть в actionGroup и т.д.) оказались глючными или нерабочими. В общем на этом примере я остро ощутил свое непонимание принципов позиционирования компонентов во Flex, очень надеюсь что кто нибудь прояснит хотя бы в каком направлении копать.

1. Уберите вот это: "и внес в него все необходимые мне изменения."
2. Откройте документацию.
3. Обратите внимание на свойства actionLayout и navigationLayout.
4. Прочитайте наконец то что написано по ссылкам в разделах "Дополнительные примеры" и "Дополнительно" в документации на этот компонент (они находятся вверху страницы, сразу после раздела "Синтаксис MXML").
5. Если все еще будет непонятно, где вы ошиблись, напишите об этом, попробую объяснить вам своими словами.

Спасибо! В принципе этот вопрос я уже решил, в классе скина я выцепляю этот компонент по getChildByName, отрубаю лейаут и позиционирую его сам, но есть сильное ощущение что этот подход очень кривой и может еще вылезти боком, поэтому спасибо за наводку, сейчас приходится другим проектом заниматься, но на той неделе я попробую сделать все правильно и отпишу о результатах.

Это не решение. В принципе.
Для позиционирования дочерних элементов в ActionBar вам нет необходимости модифицировать его скин (если речь не идет о изменении позиционирования navigationGroup, titleGroup или actionGroup, что не является вашим случаем). О существовании getChildByName в контексте spark компонентов, можете вообще забыть, как и о существовании свойства name.

В общем появилось время на эксперименты, перечитал еще раз документацию, сделал все так как там написано, поместил нужные мне компоненты таким вот образом:

Код AS3:

<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>

где new SmallSelectedIcon() это как раз тот самый компонент "плюсик с цифрой" о котором шла речь. Как изменять его состояние я думаю разберусь (сделаю bindable), вопрос теперь заключается в другом. ActionBar теперь выглядит вот так:
http://www.flasher.ru/forum/attachme...1&d=1396340724
и непонятно как растянуть icon (а точнее Button, я так понимаю иконка во всю кнопку и так растянута) в высоту всего ActionBar? Присвоение height="100%" ничего не меняет. Ничего на эту тему я в документации не нашел

Вот в этом случае можете сделать свой скин для Button. Хотя по уму у вас должна быть иконка соответствующего размера. Вот вам еще дополнительное чтиво.

Понял, спасибо большое. С иконками разного DPI все равно ничего не получается, они просто делают кнопку более крупной, а пустая окантовка по краям все равно остается. В общем буду делать скин кнопки.

Добавлено через 1 час 38 минут
И еще один вопрос по скинованию кнопки с компонентом. В общем я сделал так:

Код AS3:

[Bindable]

public static var selIcon:SmallSelectedIcon = new SmallSelectedIcon();

 

<s:actionContent>

                <s:Button icon="{ selIcon }" skinClass="theme.ActionBtnSkinComp" click="navigator.pushView(views.Selected);"/>

        </s:actionContent>

и все нормально, обновляю как мне надо компонент, все ок. Проблема со скином, вот его класс (ActionBtnSkinComp):

Код AS3:

<?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, и внеся в него необходимые мне изменения, затем присвоил его моей кнопке. Но если есть подходы получше, просьба ими поделиться))