Skin Engine v3.50: Режим AutoHide. Добавляем новые элементы по мере изменения размера окна

Мини-плеер (TrayControl) претерпел некоторые изменения в AIMP v3.50 – он был адаптирован под Full HD мониторы, и научился примагничиваться к верхнему и нижнему краям экрана. Вы могли заметить, что при прикреплении его к краю экрана, все элементы из всплывающей панели переезжают на основную, а сама всплывающая панель попросту исчезает. В этой заметке я хочу рассказать, как делать подобные интерфейсы.

 

Шаг 1: идея – как все должно работать?

В первую очередь нужно определиться, что именно вы хотите получить, как именно будет изменяться интерфейс при изменении размеров окна – какие контейнеры будут появляться / прятаться, в какой последовательности, какие элементы будут на них расположены.

В случае Пандемика идея была проста:

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

Затем, при достижении определенного размера, слайдер навигации по треку переползает с всплывающей панели на главную, а всплывающая панель скрывается:

Далее обе области – с бегущей строкой и дисплеем времени трека, и со слайдером навигации по треку – изменяют свой размер пропорционально изменению ширины окна.

 

Шаг 2: подготовка элементов

Как видно из шага 1, нам понадобятся два контейнера – контейнер с бегущей строкой и дисплеем времени трека, и контейнер со слайдером навигации по треку.

Контейнер №1

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

Добавим дочерний контейнер (с выравниванием laClient), этот контейнер и будет нашим первым целевым контейнером, на нем расположим все необходимые нам элементы:

Обратите внимание, что бегущая строка расположена в отдельном контейнере. Сделано это из-за того, что сам элемент бегущей строки не может быть меньше заданной ему текстуры. Контейнер в данном случае не дает ему выйти за пределы своих границ, тем самым позволяет нам “схлопнуть” бегущую строку до нуля. Контейнер имеет выравнивание laClient и спозиционирован так же, как TCDisplayGroup – с помощью маргин.

Ура, первый контейнер готов к работе! В принципе, уже сейчас можно собрать обложку и посмотреть, что у нас получилось: при увеличении размеров окна контейнер tcDisplayRunningLineContainer так же увеличит свои размеры и бегущая строка станет видна.

Контейнер №2

Создадим дочерний для TCDisplayContainer контейнер с выравниванием laClient, назовем его tcAdvDisplayContainer. Это будет наш второй целевой контейнер, на нем будет располагаться слайдер навигации по треку.

Выставляем у новосозданного контейнера AutoHide в True – это говорит движку, что панель может появляться / прятаться в зависимости от размеров окна, это необходимо для корректного расчета минимальных и максимальных размеров для окна.

Оба наших контейнера имеют Alignment = laClient, воспользоваться механизмом автоскрытия напрямую мы не сможем – движок не сможет определить, по какой из характеристик (ширине или высоте) нужно определять видимость контейнера. Действовать придется другим способом – создадим новый контейнер на уровне tcAdvDisplayContainer с Alignment = laLeft. Наш контейнер теперь имеет выравнивание по горизонтали, а значит движок уже знает, что в качестве характеристики для автоскрытия нужно брать ширину, а не высоту. Выставляем свойства AutoHide в True и AutoHodeParentSizeThresold в 520. Последний параметр определяет порог размера предка, при котором контейнер считается видимым.

Обратите внимание, что предком для tcDisplaySwitcher у нас является TCDisplayGroup (у которого выставлены маргины), а не окно. Т.е. для того, чтобы tcDisplaySwitcher стал видимым, размер окна должен быть больше или равен 804 (520 + 2 * 142).

Элементы готовы, переходим к следующему шагу.

 

Шаг 3: Биндинг

Скрываться у нас должны всего два контейнера – tcAdvDisplayContainer и TCINFO (всплывающая панель TrayControl-а). Источником данных для обоих из них будет выступать вспомогательный контейнер tcDisplaySwitcher:

Для первого контейнера связь прямая, без каких-либо преобразований, для второго – обратная (преобразование “not Value”).

Готово!

8 thoughts on “Skin Engine v3.50: Режим AutoHide. Добавляем новые элементы по мере изменения размера окна

  1. LS

    Про прикрепление трейконтрола – вообще крутяк. Расписали бы попонятней, а то я и не понял сразу. Давно ждал этого.
    Спасибо

  2. etnograf57

    Здравствуйте. Никак не могу определить как осуществить функцию звукозаписи. Все варианты кнопок перебрал. Подскажите.

  3. ELECTRON1CK

    Режим AutoHide с выставленным числовым значением AutoHideParentSizeThresold применяется только по горизонтали? Как на счёт вертикали хотелось бы скрыть элементы, как это сделать?

  4. Rusak

    Уже четыре года как пользуюсь только плеерами AIMP. Спасибо разработчикам.Огромное спасибо.

Leave a Reply