Hình trong hình

Hình minh hoạ chính về biểu tượng PiP và biểu trưng của Play

Hình trong hình (PiP) là một loại chế độ nhiều cửa sổ dành cho các hoạt động phát video toàn màn hình. Tính năng này cho phép người dùng xem video trong một cửa sổ nhỏ được ghim vào góc màn hình trong khi di chuyển giữa các ứng dụng hoặc duyệt xem nội dung trên màn hình chính.

Hình 1: Người dùng có thể tiếp tục xem video ngay cả khi không ở trong ứng dụng của bạn

Những điểm cần nhớ

  • Đảm bảo các phần tử trên giao diện người dùng bị ẩn và quá trình phát video tiếp tục khi hoạt động ở chế độ PiP.
  • Tắt tính năng đổi kích thước liền mạch cho nội dung không phải video.
  • Các hoạt động phát video trên giao diện người dùng ở mức tối thiểu sẽ đem lại trải nghiệm người dùng tốt nhất.
  • Tránh hiện nội dung nào khác ngoài nội dung video.

Thêm tính năng hỗ trợ chế độ hình trong hình vào ứng dụng

Theo mặc định, hệ thống không tự động hỗ trợ tính năng PiP cho ứng dụng và cần được khai báo để hỗ trợ tính năng này.

Cửa sổ PiP xuất hiện ở lớp trên cùng của màn hình, ở một góc do hệ thống chọn.

Điều khiển

Theo mặc định, Android cung cấp các chế độ điều khiển PiP để đóng cửa sổ, mở rộng cửa sổ về chế độ toàn màn hình, chế độ cài đặt và chế độ phát nội dung nghe nhìn. Ứng dụng của bạn có thể thêm các thao tác tuỳ chỉnh và tài sản biểu tượng phù hợp để cho phép người dùng tương tác với nội dung ở chế độ PiP.

Người dùng có thể hiện các chế độ điều khiển này trong trình đơn cửa sổ PiP bằng cách nhấn vào cửa sổ trên thiết bị di động hoặc chọn trình đơn trong điều khiển từ xa của TV. Nếu ứng dụng có một phiên hoạt động nội dung đa phương tiện, thì các nút điều khiển phát, tạm dừng, tiếp theo và trước đó cũng sẽ xuất hiện. Đọc thông tin về cách thêm các chế độ kiểm soát này.

Ở chế độ PiP, hoạt động của bạn sẽ xuất hiện trong một cửa sổ nhỏ. Người dùng không thể tương tác với các thành phần giao diện người dùng khác của ứng dụng ở chế độ này và có thể khó thấy chi tiết về các thành phần giao diện người dùng nhỏ trong cửa sổ PiP.

Giao diện người dùng cho thấy các chế độ điều khiển mặc định của chế độ hình trong hình

Các nút điều khiển PiP mặc định.

Ví dụ về chế độ điều khiển PiP tuỳ chỉnh

Ví dụ về chế độ điều khiển PiP tuỳ chỉnh.

Cách sử dụng

Cho phép người dùng tiếp tục xem video không chỉ trong ứng dụng của bạn mà còn trên thiết bị của họ. Ứng dụng của bạn kiểm soát thời điểm hoạt động hiện tại chuyển sang chế độ PiP – đây có thể là một hoạt động tương tác, chẳng hạn như rời khỏi chế độ xem hiện tại hoặc vuốt lên để về màn hình chính.

Dưới đây là một số ví dụ về các hành động có thể thực hiện:

  • Một hoạt động có thể chuyển sang chế độ PiP khi người dùng nhấn vào nút màn hình chính hoặc vuốt lên trên để về màn hình chính. Đây là cách Google Maps không ngừng hiển thị thông tin đường đi trong khi người dùng chạy một hoạt động khác cùng một lúc.

    Hình 4: Chế độ PiP được dùng để tiếp tục trải nghiệm tìm đường
  • Ứng dụng của bạn có thể chuyển một video sang chế độ PiP khi người dùng điều hướng từ video để duyệt xem nội dung khác.

  • Ứng dụng của bạn có thể chuyển video sang chế độ PiP trong khi người dùng xem đến cuối tập nội dung. Màn hình chính cho thấy thông tin quảng bá hoặc tóm tắt về tập tiếp theo trong loạt video.

  • Ứng dụng của bạn có thể giúp người dùng thêm nội dung bổ sung vào hàng đợi trong khi xem video. Video sẽ tiếp tục phát ở chế độ PiP trong khi màn hình chính hiện một hoạt động lựa chọn nội dung.

Sử dụng một mẫu tương tác bổ sung cho trải nghiệm xem mà không gây gián đoạn. Ví dụ: nếu một video nằm ở cuối một tập nội dung, thì việc chuyển sang chế độ PiP khi rời khỏi màn hình chính sẽ yêu cầu người dùng thực hiện thêm thao tác để quay lại và dừng phát hoặc điều hướng các chế độ điều khiển nhỏ.

Trong ứng dụng của bạn, người dùng có thể chọn một video mới khi duyệt xem nội dung trên màn hình chính, trong khi một hoạt động phát video đang ở chế độ PiP. Phát video mới trong hoạt động phát hiện có ở chế độ toàn màn hình thay vì chạy một hoạt động mới có thể khiến người dùng nhầm lẫn.

Mẫu tương tác

Người dùng có thể kéo cửa sổ PiP đến một vị trí khác.

Nhấn một lần vào cửa sổ để hiện nút bật/tắt chế độ toàn màn hình, nút đóng, nút cài đặt và các hành động tuỳ chỉnh mà ứng dụng của bạn cung cấp (ví dụ: nút điều khiển trình phát).

Hình 5: Các chế độ điều khiển PiP mặc định

Nhấn đúp vào cửa sổ để chuyển đổi giữa kích thước PiP hiện tại và kích thước PiP tối đa hoặc tối thiểu. Ví dụ: nhấn đúp vào cửa sổ đang ở chế độ tối đa sẽ thu nhỏ cửa sổ đó và ngược lại.

Hình 6: Chuyển đổi giữa kích thước PiP tối thiểu và tối đa bằng cách nhấn đúp

Lưu trữ cửa sổ bằng cách kéo cửa sổ đó sang cạnh trái hoặc phải. Để huỷ lưu trữ cửa sổ, hãy nhấn vào phần hiển thị của cửa sổ đã lưu trữ hoặc kéo cửa sổ đó ra.

Hình 7: PiP được lưu trữ

Đổi kích thước cửa sổ PiP bằng cách chụm để thu phóng.

Vuốt cửa sổ PiP xuống để xoá cửa sổ này.

Hình 8: Vuốt xuống

Kiểu chuyển cảnh

Để mang lại trải nghiệm mượt mà cho người dùng khi chuyển sang và thoát khỏi chế độ PiP, hãy tuỳ chỉnh hiệu ứng chuyển đổi khi vào và thoát chế độ này.

Ảnh động mượt mà khi chuyển sang chế độ PiP

Khi người dùng kích hoạt chế độ PiP, hoạt động hiện tại sẽ thu nhỏ từ chế độ toàn màn hình thành một cửa sổ nhỏ, tiếp tục hiển thị nội dung mà không phủ lên bất kỳ giao diện người dùng nào.

Android 12 đã giới thiệu những điểm cải tiến về giao diện cho các hiệu ứng chuyển đổi giữa cửa sổ toàn màn hình và cửa sổ PiP. Sau khi triển khai, những nội dung cập nhật này sẽ tự động điều chỉnh tỷ lệ cho phù hợp với máy tính bảng và thiết bị có thể gập lại.

Nếu không có những nội dung cập nhật này, các hiệu ứng chuyển đổi vẫn hoạt động nhưng sẽ kém mượt mà hơn. Ví dụ: Cửa sổ PiP có thể tạm thời biến mất trong quá trình chuyển đổi.

Kể từ Android 12, cờ PictureInPictureParams.Builder.setAutoEnterEnabled(true) sẽ mang đến những hiệu ứng chuyển đổi mượt mà hơn khi dùng cử chỉ (chẳng hạn như vuốt lên màn hình chính). Bạn nên sử dụng cách này cho các ứng dụng ENTERTAINMENT, COMMUNICATION hoặc VIDEO_PLAYER.

Nếu không có cờ này, các hiệu ứng chuyển bằng cử chỉ sẽ thu nhỏ cửa sổ thành biểu tượng ứng dụng trước khi cửa sổ đó xuất hiện lại dưới dạng cửa sổ PiP (như minh hoạ trong Video 1).

Trải nghiệm chuyển đổi kém mượt mà khi PiP không triển khai setAutoEnterEnabled đúng cách

Thêm hiệu ứng chuyển đổi mượt mà bằng setAutoEnterEnabled vào ứng dụng.

Hình ảnh video mượt mà

Khi chúng tôi giới thiệu chế độ PiP trong Android 8.0, sourceRectHint cho biết vùng của hoạt động hiển thị sau khi chuyển sang chế độ PiP – ví dụ: ranh giới khung hiển thị video trong trình phát video. Kể từ Android 12, hệ điều hành sẽ dùng sourceRectHint để triển khai ảnh động mượt mà hơn nhiều khi vào và thoát chế độ PiP.

Nếu ứng dụng của bạn không cung cấp sourceRectHint phù hợp, thì các hiệu ứng chuyển đổi PiP vẫn hoạt động nhưng ảnh động sẽ ít mượt mà hơn. Ví dụ: video 3 cho thấy một ví dụ ít trau chuốt hơn về quá trình chuyển đổi từ chế độ toàn màn hình sang chế độ hình trong hình: sau khi cửa sổ toàn màn hình thu nhỏ thành cửa sổ hình trong hình, cửa sổ này sẽ bị một lớp phủ màu đen che đi trước khi video xuất hiện trở lại.

Video 3: Trải nghiệm chuyển đổi kém mượt mà khi PiP không được triển khai đúng cáchsourceRectHint

Để xem ví dụ về ảnh động PiP khi sourceRectHint được triển khai đúng cách, hãy xem video 2 trong phần trước.

Hãy tham khảo mẫu Picture-in-Picture Kotlin cho Android để biết cách bật trải nghiệm chuyển đổi mượt mà.

Để biết thêm thông tin về cách triển khai chế độ PiP, hãy xem Tài liệu dành cho nhà phát triển về chế độ hình trong hình.