Или упрощенно, написав свой собственный TopSheetBehavior с использованием модулей androidx. *

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

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

А что насчет вершины?

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

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

Программная часть

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

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

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

Как я уже сказал, здесь все происходит противоположно поведению нижнего листа. И еще одна важная вещь, которую нужно изменить, - это настройка состояния. Когда мы устанавливаем свернутое состояние, представление должно исчезнуть в верхней части экрана устройства, а его нижняя часть должна быть равна минимальному смещению. (Потому что иногда поведение верхнего листа нельзя было скрыть.) Вот фрагмент кода, показывающий, как функция set state должна быть изменена внутри.

Кажется, мы описали наиболее важные изменения, которые необходимо внести в код поведения нижнего листа. Итак, теперь давайте посмотрим, как это работает в нашем приложении.

Наши результаты использования

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

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

Резюме

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