Картинка в картинке

Иллюстрация, демонстрирующая символ «картинка в картинке» и логотип Play.

Режим «картинка в картинке» (PiP) — это тип многооконного режима, предназначенный для приложений, воспроизводящих видео в полноэкранном режиме. Он позволяет пользователю смотреть видео в небольшом окне, закрепленном в углу экрана, во время переключения между приложениями или просмотра контента на главном экране.

Рисунок 1: Ваши пользователи могут продолжить просмотр видео, даже если они не находятся в вашем приложении.

Основные выводы

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

Добавьте поддержку режима «картинка в картинке» в ваше приложение.

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

Окно «картинка в картинке» появляется в самом верхнем слое экрана, в углу, выбранном системой.

Элементы управления

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

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

В режиме «картинка в картинке» ваше приложение отображается в небольшом окне. Пользователи не могут взаимодействовать с другими элементами пользовательского интерфейса вашего приложения в этом режиме, и детали мелких элементов интерфейса в окне «картинка в картинке» могут быть плохо видны.

Пользовательский интерфейс, отображающий стандартные элементы управления режимом «картинка в картинке».

Управление «картинка в картинке» по умолчанию.

Пример пользовательских элементов управления PiP

Пример пользовательских элементов управления PiP.

Использование

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

Вот несколько примеров возможных действий:

  • Приложение может перейти в режим «картинка в картинке», когда пользователь нажимает кнопку «Домой» или проводит пальцем вверх, чтобы перейти на главный экран. Именно так Google Maps продолжает отображать маршрут, пока пользователь одновременно выполняет другое приложение.

    Рисунок 4: Использование PiP для продолжения навигации.
  • Ваше приложение может переводить видео в режим «картинка в картинке», когда пользователь возвращается к просмотру другого контента после просмотра видео.

  • Ваше приложение может переключать видео в режим «картинка в картинке», пока пользователь досматривает конец эпизода. На главном экране отображается рекламная информация или краткое описание следующего эпизода сериала.

  • Ваше приложение может предоставить пользователям возможность добавлять дополнительный контент в очередь во время просмотра видео. Видео продолжает воспроизводиться в режиме «картинка в картинке», в то время как на главном экране отображается окно выбора контента.

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

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

Модели взаимодействия

Пользователи могут перетащить окно «картинка в картинке» в другое место.

Однократное касание окна отобразит переключатель полноэкранного режима, кнопку закрытия, кнопку настроек и пользовательские действия, предоставляемые вашим приложением (например, элементы управления воспроизведением).

Рисунок 5: Элементы управления PiP по умолчанию

Двойное касание окна переключает режимы между текущим размером «картинка в картинке» и максимальным или минимальным размером «картинка в картинке» — например, двойное касание развернутого окна сворачивает его, и обратное также верно.

Рисунок 6: Переключение между минимальным и максимальным размером PiP двойным касанием

Чтобы убрать окно, перетащите его к левому или правому краю. Чтобы убрать окно, коснитесь видимой части убранного окна или перетащите его.

Рисунок 7: Сохраненные PiP

Изменяйте размер окна «картинка в картинке» с помощью масштабирования жестом «щипок».

Проведите пальцем вниз по экрану PiP, чтобы закрыть окно.

Рисунок 8: Проведение пальцем вниз

Переходы

Для улучшения пользовательского опыта при переключении в режим «картинка в картинке» и обратно, настройте переходы между ними.

Плавный переход от режима «картинка в картинке»

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

В Android 12 были внесены косметические улучшения в переходы между полноэкранным режимом и режимом «картинка в картинке». После внедрения эти обновления автоматически масштабируются для планшетов и складных устройств.

Без этих обновлений переходы работают, но менее отточены. Например, окно «картинка в картинке» может временно исчезнуть во время перехода.

Начиная с Android 12, флаг PictureInPictureParams.Builder.setAutoEnterEnabled(true) обеспечивает более плавные переходы жестами (например, свайп вверх к главному экрану). Мы рекомендуем использовать его для приложений категорий ENTERTAINMENT , COMMUNICATION или VIDEO_PLAYER .

Без этого флага при переходе между жестами окно уменьшается до размера значка приложения, прежде чем оно снова появится в режиме «картинка в картинке» (как показано в видео 1).

Менее отлаженный процесс перехода при некорректной реализации функции setAutoEnterEnabled в режиме «картинка в картинке».

Улучшена плавность переходов благодаря добавлению setAutoEnterEnabled в приложение.

Плавное видеоизображение

Когда мы представили режим «картинка в картинке» (PiP) в Android 8.0, sourceRectHint указывал область активности, которая становится видимой после перехода в режим PiP — например, границы видеопроигрывателя. Начиная с Android 12, ОС использует sourceRectHint для реализации гораздо более плавной анимации как при входе, так и при выходе из режима PiP.

Если ваше приложение не предоставляет корректный sourceRectHint , переходы PiP (картинка в картинке) по-прежнему будут работать, но анимация будет менее качественной. Например, в видео 3 показан менее качественный пример перехода из полноэкранного режима в режим PiP: после того, как полноэкранное окно уменьшается до окна PiP, оно закрывается черным фоном, прежде чем снова отобразить видео.

Видео 3: Менее качественный переход при некорректной реализации функции sourceRectHint в режиме «картинка в картинке»

Чтобы увидеть пример того, как выглядит анимация «картинка в картинке» при правильной реализации sourceRectHint , посмотрите видео 2 в предыдущем разделе.

В качестве примера для создания качественного перехода между изображениями можно использовать Android Kotlin PictureInPicture .

Для получения более подробной информации о реализации функции « картинка в картинке» см. документацию для разработчиков .