Каскадные таблицы стилей (CSS), отвечающие за внешний вид экранов приложения
Расположение: device/<application_name>/Style/Default/
Для того, что бы задать таблицу стилей по умолчанию, необходимо объявить ее в файле конфигурации:
<?xml version="1.0" encoding="utf-8" ?> <c:Configuration xmlns:c="BitMobile.Configuration" xmlns:s="BitMobile.ValueStack"> ... <c:Style> <c:DefaultStyles> <c:DefaultStyle File="default.css" /><!-- Стили по умолчанию --> <s:If Test="$isTablet"> <c:DefaultStyle File="tablet.css" /><!-- Стили, специфичные для планетов --> </s:If> <s:Else> <c:DefaultStyle File="phone.css" /><!-- Стили, специфичные для телефонов--> </s:Else> <s:If Test="$common.OS == 'Android'"> <c:DefaultStyle File="android.css" /><!-- Стили, специфичные для Android устройств--> </s:If> <s:If Test="$common.OS == 'IOS'"> <c:DefaultStyle File="ios.css" /><!-- Стили, специфичные для IOS устройств--> </s:If> <c:DefaultStyle File="common.css" /><!-- Общие стили --> </c:DefaultStyles> </c:Style> ... </c:Configuration>
Кроме того, таблицу стилей можно задать для каждого конкретного экрана через атрибут StyleSheet в компоненте <c:Screen/>:
<c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack" StyleSheet="Main.css"> ... </c:Screen>
В случае пересечения стилей, приоритет остается за последним описанным или заданным для конкретного экрана стилем.
Зададим внешний вид по умолчанию для кнопки:
Button{ height: 4mm; width: 100%; font: 80% arial; }
Укажем, что в Android устройствах кнопки должны быть высотой 5mm и поменяем их шрифт на специфичный для платформы:
Button{ height: 5mm; font-family: roboto; }
Так как common.css объявлена позже остальных таблиц стилей, мы можем описывать в ней специфичные классы, стили которых будут переопределять заданные по умолчанию:
.menu-button{ font-size: 70%; }
Но, таблица стилей, заданная для экрана имеет максимальный приоритет:
Button{ font-size: 50%; } .menu-button{ font: 80% arial; }
0 Комментариев