Форум Flasher.ru

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

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

- - TabBar skin (http://www.flasher.ru/forum/showthread.php?t=144328)

Есть сложность создания скина для закладок.
На картинки показана проблема:
http://lh5.ggpht.com/_266X1AuWjcs/TI...DFbXw/tabs.jpg

Подскажите способ реализации подобного.
Пока на ум пришло только перекрывать метод рисования верхнего бордера у NavigatorContent... Может есть более простые способы?

На самом деле это не так просто сделать, точнее, объяснить не получится.
У вас шаблон в векторе ?

Можете скинуть свой шаблон, я попытаюсь сделать, это как вариант.

Bond007, доброго времни суток.
К сожалению у меня растр.
Скин для табов рисовал с помощью <s:Rect ... radiusX="6">

Может что-то скинуть другое? Проблема стоит довольно остро.
Спасибо.

В скине проверьте, скорее всего ваш бордер просто перекрывается, либо выложите код скина.

Код:

Код AS3:

<mx:ViewStack id="myViewStack" width="100%" bottom="0" top="25"> 

    <s:NavigatorContent id="search" label="Search" skinClass="TabSkin" visible="false"> 

        <s:Label text="Search Screen"/> 

    </s:NavigatorContent> 

 

    <s:NavigatorContent id="custInfo" label="Customer Info" skinClass="TabSkin"> 

        <s:Label text="Customer Info"/> 

    </s:NavigatorContent>

</mx:ViewStack>

<s:TabBar dataProvider="{myViewStack}" skinClass="skins.TestTabBarSkin" styleName="title-level2" height="24" left="0" />

TabBar:

Код AS3:

<s:Skin ...>

    <!-- host component -->

    ...    

    <!-- states -->

    ...

    <s:DataGroup id="dataGroup" width="100%" height="100%">

        <s:layout>

            <s:ButtonBarHorizontalLayout gap="1"/>

        </s:layout>

        <s:itemRenderer>

            <fx:Component>

                <s:ButtonBarButton skinClass="skins.TabBarButtonSkin" />

            </fx:Component>

        </s:itemRenderer>

    </s:DataGroup>

</s:Skin>

TabBarButton:

Код AS3:

<s:SparkSkin ...>

    <!-- host component -->

    ...    

    <!-- states -->

    ...

    <!-- up -->

    <s:Rect top="0" left="0" right="0" bottom="0" topLeftRadiusX="6" topRightRadiusX="6" includeIn="up">

        <s:fill>

            <s:LinearGradient rotation="90">

                <s:GradientEntry color="#00abed"/>

                <s:GradientEntry color="#006abc"/>

            </s:LinearGradient>

        </s:fill>

        <s:stroke>

            <s:SolidColorStroke color="#00aef0"/>

        </s:stroke>

    </s:Rect>

 

    <!-- selected -->

    <s:Rect id="selectedStates" top="0" left="0" right="0" bottom="-2" topLeftRadiusX="6" topRightRadiusX="6" includeIn="selectedStates, overStates">

        <s:fill>

            <s:SolidColor color="#000000" alpha="0.5" />

        </s:fill>

    </s:Rect>

 

    <s:Label ...>...</s:Label>

</s:SparkSkin>

Tab:

Код AS3:

<s:Skin ...>

    <!-- host component -->

    ...    

    <!-- states -->

    ...

    <!-- полупрозрачный tab -->

    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="6" topLeftRadiusX="0">

        <s:fill>

            <s:SolidColor color="#000000" alpha="0.5" />

        </s:fill>

        <s:stroke>

            <s:SolidColorStroke color="#ff0000" alpha="1" />

        </s:stroke>

    </s:Rect>

 

    <s:Group ...>...</s:Group>

 

</s:Skin>

Вся проблема в том что если делать выделенную кнопку полупрозрачной (как это нарисовано на макете) то под этой кнопкой просвечивается бордер самого таба:
http://lh5.ggpht.com/_266X1AuWjcs/TI...hQMlE/tabs.jpg

Похоже я вас неправильно понял в первый раз. Если вам нужно сделать так что бы бордюр не был виден, то вариантов всего три.
1. Отказаться от прозрачности, т.е. сделать псевдопрозрачность (фон ставится в скин элементов управления).
2. Отказаться от бордюра, или переписать метод рисования бордюра у контейнера.
3. Имитировать бордюр фильтрами (затратно для процессора, контур вокруг всего элемента управления)

Добавлено через 4 минуты
P.S. Есть еще один вариант, рисовать бордюр отдельно, опираясь на координаты и положения контейнера и табов (под табом я понимаю TabButton)

Ну или рисовать border с пробелом, или можно его стирать (BlendMode.ERASE у стриающего элемента, BlendMode.LAYER у контейнера, который с border'ом). Муторно, конечно

alatar, фон к сожалению делать в скине нельзя, пока сделан градиент от черного к прозрачному который закрывает артефакт - но смотрится конечно плохо.

fljot, в доке написано что "This process requires that the blendMode property of the parent display object be set to flash.display.BlendMode.LAYER" (BlendMode.ERASE) - но viewstack не является parent'ом для TabBar.

Попробовал в скине
Tab:

Код AS3:

<s:Rect blendMode="layer" ...

а для TabBarButton:

Код AS3:

<!-- selected -->

    <s:Rect blendMode="erase" ...

Но эффекта нет (как и ожидалось) - у выделенной кнопки просто пропадает Rect, а бордер у таба не исчезает...

Может что-то надо в коде перестроить?
Или сделать обернуть ViewStack и TabBar в контейнер с тем самым бордером и кнопке делать erase уже... Попробую...

Добавлено через 2 часа 2 минуты
Помог совет fljot, добавить только обший контейнер надо для бордера:
Код:

Код AS3:

<s:SkinnableContainer blendMode="layer" ... skinClass="skins.TabBorder">

        <mx:ViewStack ...>...</mx:ViewStack>

        <s:TabBar ... />

</s:SkinnableContainer>

skins.TabBorder:

Код AS3:

<s:Rect left="0" right="0" top="25" bottom="0" radiusX="6" topLeftRadiusX="0">

        <s:stroke>

                <s:SolidColorStroke color="#ffffff" alpha="0.3" />

        </s:stroke>

</s:Rect>

skins.TabBarButtunSkin:

Код AS3:

<!-- черная плашка затирающия под собой все -->

<s:Rect blendMode="erase" top="0" left="0" right="0" bottom="-2" topLeftRadiusX="6" topRightRadiusX="6" includeIn="selectedStates, overStates">

        <s:fill>

                <s:SolidColor color="#000000" />

        </s:fill>

</s:Rect>

Все вроде неплохо. Только компонент обрастает лишним контейнером.
И есть еще одна небольшая проблема - у выделенной кнопки должен быть бордер - но только на left, top, right сторонах.

Подскажите как задать s:stroke только на нужных сторонах, или исключить его на bottom?

Я вообще-то думал эту затиралку добавить во ViewStack) и LAYER задавать ViewStack'у же

А какому элементу blendMode="erase" и как определять его ширину?
Небольшой пример, если можно?