Макет экрана плеера

Рубрики: Информация | 02.10.2016 Нет комментариев

Итак, карта текстур обновлена, остается дело за малым — поправить отступы и цвета у некоторых элементов в макетах. Я рассмотрю процесс редактирования только главного экрана плеера.

Итак, поехали, открываем main.player.xml:

<com.aimp.skinengine.controls.SkinnedContainer 
    background_color="255 64 64 64"
>
    <com.aimp.skinengine.controls.SkinnedContainer
        background_color="255 48 48 48"
        placement_anchors="1 1 1 0"
        placement_size="0 80"
    >
        <com.aimp.skinengine.controls.SkinnedButton 
          skin0="483 760 563 840"
          skin1="564 760 644 840"
          placement_anchors="1 1 0 0"
          placement_size="80 80" 
          name="btnShowNavigator"
        /> 

        <com.aimp.skinengine.controls.SkinnedLabel 
          text_color="255 255 255 255"
          text_size="24"
          placement_anchors="1 1 1 0"
          placement_margins="88 8 70 0" 
          placement_size="0 40" 
          name="tcSongName"
        /> 
 
        <com.aimp.skinengine.controls.SkinnedLabel 
          text_color="255 150 150 150"
          text_size="20"
          placement_anchors="1 1 1 0"
          placement_margins="88 36 70 0" 
          placement_size="0 40" 
          name="tcSongInfo"
        /> 

        <com.aimp.skinengine.controls.SkinnedButton
          skin0="483 679 563 759"
          skin1="564 679 644 759"
          placement_anchors="0 1 1 0"
          placement_size="80 80" 
          name="btnMenu"
        /> 
 
     </com.aimp.skinengine.controls.SkinnedContainer>
 
     <com.aimp.skinengine.controls.SkinnedControl
        skin0="00 777 080 857"
        skin1="81 777 161 857"
        placement_anchors="1 1 0 0"
        placement_margins="20 80 0 0"
        placement_size="80 80" 
        name="btnShuffle" 
     />

     <com.aimp.skinengine.controls.SkinnedLabel
        text_color="255 120 120 120"
        text_size="22"
        text_align="1"
        placement_margins="110 100 110 0" 
        placement_anchors="1 1 1 0"
        placement_size="200 40" 
        name="tcQueueInfo"
     /> 
 
    <com.aimp.skinengine.controls.SkinnedControl
        skin0="162 777 242 857"
        skin1="243 777 323 857"
        skin2="324 777 404 857"
        placement_anchors="0 1 1 0"
        placement_margins="0 80 20 0"
        placement_size="80 80" 
        name="btnRepeat" 
    />
 
    <com.aimp.skinengine.controls.SkinnedImageDisplay 
        background_color="255 75 75 75"
        placement_anchors="1 1 1 1"
        placement_margins="0 160 0 190" 
        keepSquareAspectRatio="false"
        name="ivCAD"
    /> 
 
    <com.aimp.skinengine.controls.SkinnedSlider
        skin="416 194 422 232"
        skin_sizing_margins="0 16 0 16"
        skin_progress="377 194 383 232"
        skin_progress_sizing_margins="0 16 0 16"
        skin_thumb="322 194 360 232"
        placement_anchors="1 0 1 1"
        placement_margins="40 0 40 140"
        placement_size="0 40"
        name="sbSeekBar"
    /> 
 
    <com.aimp.skinengine.controls.SkinnedLabel 
        text_color="255 120 120 120"
        text_size="20"
        placement_anchors="1 0 0 1"
        placement_margins="40 0 0 110" 
        placement_size="100 30" 
        name="tcTrackPosition"
    /> 
 
    <com.aimp.skinengine.controls.SkinnedLabel 
        text_color="255 120 120 120"
        text_size="20"
        text_align="2"
        placement_anchors="0 0 1 1"
        placement_margins="0 0 40 110" 
        placement_size="100 30" 
        name="tcTrackDuration"
    />
 
    <com.aimp.skinengine.controls.SkinnedContainer
        background_color="255 48 48 48"
        placement_anchors="1 0 1 1"
        placement_size="0 96"
    >
 
         <com.aimp.skinengine.controls.SkinnedButton
             skin0="322 0 482 96"
             skin1="322 97 482 193"
             placement_anchors="1 0 0 1"
             placement_size="160 96"
             name="btnPrev"
         /> 

         <com.aimp.skinengine.controls.SkinnedButton
             skin0="161 0 321 96"
             skin1="161 97 321 193"
             placement_anchors="0 0 0 1"
             placement_size="160 96"
             name="btnPause"
         /> 
 
         <com.aimp.skinengine.controls.SkinnedButton
             skin0="0 0 160 96"
             skin1="0 97 160 193"
             placement_anchors="0 0 0 1"
             placement_size="160 96"
             name="btnPlay"
         /> 

         <com.aimp.skinengine.controls.SkinnedButton
             skin0="0 194 160 290"
             skin1="161 194 321 290"
             placement_anchors="0 0 1 1"
             placement_size="160 96"
             name="btnNext"
         /> 

     </com.aimp.skinengine.controls.SkinnedContainer>

</com.aimp.skinengine.controls.SkinnedContainer>

В главном экране почти все готово — осталось поправить внешний вид верхней и нижней панелей, текстуру и положение элемента, что отвечает за показ обложки альбома.

Верхняя панель здесь представлена вторым элементом типа SkinnedContainer:

    <com.aimp.skinengine.controls.SkinnedContainer
        background_color="255 48 48 48"
        placement_anchors="1 1 1 0"
        placement_size="0 80"
    >

Нас интересует атрибут background_color — как вы видите, в Bliss панель рисуется просто цветом, в Pandemic-е — текстурой с тенью снизу, которую мы добавили выше в нашу карту. Вместо цвета указываем ссылку на карту текстур и задаем параметры растягивания:

 <com.aimp.skinengine.controls.SkinnedContainer
     skin="0 482 18 567"
     skin_sizing_margin="0 0 0 10"
     placement_anchors="1 1 1 0"
     placement_size="0 80"
 >

Для тех, кто знаком с редактором скинов для ПК версии, будет не сложно разобраться со свойствами и параметрами элементов — в мобильной версии все практически то же самое, только без высокоуровневой автоматизации. Ниже я представлю список всех возможных типов элементов и их свойств с кратким описанием.

Аналогичным образом поступаем с нижней панелью (последний элемент с типом SkinnedContainer в списке) — но вместо указания текстуры меняем цвет с темно-серого на оранжевый:

 <com.aimp.skinengine.controls.SkinnedContainer
     background_color="255 246 141 16"
     placement_anchors="1 0 1 1"
     placement_size="0 96"
 >

Остался элемент, отображающий обложки альбомов. Находим его в файле по имени ivCAD. Так же, как и у верхней панели, задаем ему текстуру и параметры растягивания:

    <com.aimp.skinengine.controls.SkinnedImageDisplay 
        skin="356 858 404 906" 
        skin_sizing_margins="10 10 10 10"
        placement_anchors="1 1 1 1"
        placement_margins="30 160 30 190" 
        keepSquareAspectRatio="true"
        image_padding="9 9 9 9"
        name="ivCAD"
    />

Так же я дописал свойство image_padding — оно позволяет указать скин-движку, в какой области рисовать содержимое элемента — обложку альбома, чтобы оно не залезало на рамку, которую мы задали с помощью текстуры.

Аналогичным образом я прошел макеты всех остальных окон и обновил их под стиль старого Pandemic-а. Как и оригинальные обложки Bliss, Pandemic можно скачать здесь.

Описание свойств элементов

Общие свойства

• name — имя элемента, только для чтения.
• placement_anchors — значение якорей в формате «left top right bottom», каждое из значений может принимать 0 или 1*
• placement_margins — отступ от соответствующего края предка в формате «left top right bottom» *
• placement_margins_is_in_percents — указывает, что отступы для соответствующей стороны заданы в %, задаются в формате «left top right bottom», каждое из значений может принимать 0 или 1*
• placement_size — размеры элемента в формате «width height»*

* Позиционирование элементов работает по той же схеме, что и в версии для ПК. Для подробностей смотрите статью «позиционирование элементов» в справке к редактору обложек.

SkinnedControl

• skinX — координаты текстуры в карте skin.png, задаются в формате «left top right bottom»
• skinX_sizing_margins — отступы от краев при растяжении текстуры, задаются в формате «left top right bottom»
• background_colorX — цвет фона для состояния X, используется только в том случае, если для этого состояния отсутствует свойство skinX. Задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255

X — номер состояния, может принимать значения от 0 до 9

SkinnedContainer и SkinnedScrollView

Может содержать в себе другие элементы

• skin — координаты текстуры в карте skin.png, задаются в формате «left top right bottom»
• skin_sizing_margins — отступы от краев при растяжении текстуры, задаются в формате «left top right bottom»
• background_color — цвет фона, используется только в том случае, если отсутствует свойство skin. Задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255

SkinnedLabel

Текстовая метка, наследуется от SkinnedControl

• text_color — цвет текста, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• text_color_disabled — цвет текста для недоступного состояния элемента, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• text_size — размер шрифта
• text_align — выравнивание текста внутри элемента, 0 — по левому краю, 1 — по центру, 2 — по правому краю
• text_padding — отступы от краев элемента, где будет позиционироваться текст, задаются в формате «left top right bottom»
• wordwrap — указывает, поддерживает ли элемент перенос текста на новую строку по словам, возможные значения: 0 / 1
• text — отображаемый текст, не поддерживает локализацию, может отсутствовать

SkinnedButton

Кнопка, наследуется от SkinnedLabel. Поддерживает два состояния для фона: 0 — обычное, 1 — нажатое.

• Glyph — координаты текстуры в карте skin.png, задаются в формате «left top right bottom»

SkinnedListView и SkinnedDragSortListView

• skin — координаты текстуры в карте skin.png, задаются в формате «left top right bottom»
• skin_sizing_margins — отступы от краев при растяжении текстуры, задаются в формате «left top right bottom»
• background_color — цвет фона, используется только в том случае, если отсутствует свойство skin. Задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255

SkinnedProgress

• skin — координаты текстуры фона в карте skin.png, задаются в формате «left top right bottom»
• skin_sizing_margins — отступы от краев при растяжении текстуры фона, задаются в формате «left top right bottom»
• background_color — цвет фона, используется только в том случае, если отсутствует свойство skin. Задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• skin_progress — координаты текстуры прогресса в карте skin.png, задаются в формате «left top right bottom»
• skin_progress_sizing_margins — отступы от краев при растяжении текстуры прогресса, задаются в формате «left top right bottom»
• progress_color — цвет фона, используется только в том случае, если отсутствует свойство skin_progress. Задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• vertical — ориентация полосы прогресса, 0 — горизонтальная, 1 — вертикальная

SkinnedRichView

Текстовое поле для отображения многострочного текста с поддержкой форматирования

• text_color — цвет текста, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• text_size — размер шрифта

SkinnedSlider

Наследуется от SkinnedProgress

• skin_thumb — координаты текстуры для ползунка в карте skin.png, задаются в формате «left top right bottom»
• skin_thumb_sizing_margins — отступы от краев текстуры при ее растяжении, задаются в формате «left top right bottom»

SkinnedImageDisplay

• skin — координаты текстуры фона в карте skin.png, задаются в формате «left top right bottom»
• skin_sizing_margins — отступы от краев при растяжении текстуры фона, задаются в формате «left top right bottom»
• background_color — цвет фона, используется только в том случае, если отсутствует свойство skin. Задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• image_padding — отступы от границ фоновой текстуры, задают область, где будет рисоваться изображение. Задаются в формате «left top right bottom»
• KeepSquareAspectRatio — принимает значения 0 или 1. В случае 1 — элемент управления подгоняет свой размер в пределах установленной позиции так, чтобы содержимое всегда было квадратным

SkinnedPlaylistItem

• line1_text_color — цвет текста для первой строки, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• line1_text_size — размер шрифта
• line2_text_color — цвет текста для второй строки, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• line2_text_size — размер шрифта
• time1_text_color — цвет текста для области отображения времени в первой строке, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• time1_text_size — размер шрифта
• time2_text_color — цвет текста для области отображения времени во второй строке, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• time2_text_size — размер шрифта
• queue_text_color — цвет текста для области с номером трека в пользовательской очереди воспроизведения, отображается в первой строке, задается в формате «Alpha Red Green Blue», каждая из компонент может принимать значения от 0 до 255
• queue_text_size — размер шрифта
• queue_area_size — максимальный размер области с номером трека в пользовательской очереди воспроизведения
• time_area_size — размер областей для отображения времени в первой и второй строках