子母畫面

子母畫面 (PiP) 是一種多視窗模式,適用於播放全螢幕影片的活動。可讓使用者透過固定在畫面角落的小視窗觀看影片,同時在切換應用程式或瀏覽主畫面內容時。

圖 1:即使不在應用程式,使用者也可以繼續觀看影片

受迫失誤數

  • 請確保 UI 元素處於隱藏狀態,並在活動處於子母畫面模式時繼續播放影片。
  • 停用非影片內容的流暢調整大小功能。
  • 為了提供最佳使用者體驗,請盡可能讓影片播放活動的使用者介面保持精簡。
  • 避免顯示影片內容以外的任何資訊。

在應用程式中新增子母畫面支援功能

根據預設,系統不會自動為應用程式支援子母畫面功能,而需要宣告才能啟用這項功能。

子母畫面視窗會顯示在系統選擇的角落,位於螢幕頂端的角落。

監護控制項

根據預設,Android 提供子母畫面控制項來關閉視窗,將其展開為全螢幕、設定和媒體播放。您的應用程式可以新增自訂動作和適當的圖示素材資源,讓使用者能與子母畫面內容互動。

使用者只要在行動裝置上輕觸視窗,或使用電視遙控器選取選單,即可透過子母畫面視窗選單顯示這些控制項。如果應用程式有「執行中的媒體工作階段」,則還會顯示播放、暫停、下一個和上一個的控制項。瞭解如何新增這些控制項

在子母畫面模式下,活動會顯示在小型視窗中。在這種模式中,使用者無法與應用程式的其他 UI 元素互動,而子母畫面視窗中的小型 UI 元素詳細資料可能較不易查看。

圖 2:預設子母畫面控制項


圖 3:自訂子母畫面控制項的範例

轉場

在子母畫面模式下流暢地進入動畫

使用者觸發子母畫面模式後,目前活動會從全螢幕縮小為小視窗,該視窗會繼續顯示內容,而不會重疊任何使用者介面。

Android 12 大幅改善了全螢幕和子母畫面視窗之間的動畫轉換效果。強烈建議您實作所有適用的變更。完成之後,這些變更會自動縮放至大螢幕,例如折疊式裝置和平板電腦。

即使應用程式未提供這些適用的更新,子母畫面轉場功能仍可正常運作,但動畫效果較差。舉例來說,從全螢幕轉換為子母畫面模式,可能會導致子母畫面視窗在轉換期間消失,等轉換完成後再次出現。

自 Android 12 起,PictureInPictureParams.Builder.setAutoEnterEnabled(true) 旗標可使用手勢操作 (例如從全螢幕向上滑動到主畫面),在子母畫面模式下以更流暢的動畫轉換至影片內容。如果您的應用程式屬於 ENTERTAINMENTCOMMUNICATIONVIDEO_PLAYER 應用程式類別,建議您採用此做法。

如果您的應用程式未提供這項變更,則設有手勢操作的子母畫面轉換仍可正常運作,但動畫效果較差。影片 1 的示例是:視窗會收回應用程式圖示後消失,並在轉場完成時重新顯示。

影片 1:在子母畫面未正確實作 setAutoEnterEnabled 的情況下,提供更順暢的轉場體驗

影片 2 顯示相同轉場效果的範例,但已在應用程式中新增 setAutoEnterEnabled

影片 2:精緻的轉場體驗

流暢的影像內容

當我們在 Android 8.0 中導入子母畫面功能時,sourceRectHint 表示轉換到子母畫面後會顯示的活動區域,例如影片播放器中的影片檢視邊界。從 Android 12 開始,OS 會使用 sourceRectHint,在進入及退出子母畫面模式時提供更加流暢的動畫效果。

如果您的應用程式未提供適當的 sourceRectHint,子母畫面轉場功能仍可正常運作,但動畫效果較差。舉例來說,影片 3 呈現了從全螢幕切換為子母畫面模式轉換效果較差的範例:在全螢幕視窗縮小到子母畫面視窗後,影片 3 會覆蓋黑色重疊,然後再顯示影片一次。

影片 3:在子母畫面未正確實作 sourceRectHint 的情況下,提供更順暢的轉場效果

如果想查看在正確導入 sourceRectHint 時子母畫面動畫的外觀範例,請參閱上一節的影片 2。

請參閱 Android Kotlin PictureInPicture 範例做為參考資料,瞭解如何改善轉場體驗。

使用方式

除了在應用程式中繼續觀看影片,使用者也能在他們的裝置上繼續觀看影片。應用程式會控制目前活動進入 PiP 模式的時機。這可以是互動,例如離開目前的檢視畫面,或向上滑動前往主畫面。

以下列舉幾種可能採取的行動:

  • 使用者輕觸主畫面按鈕或向上滑動返回主畫面時,活動即可進入子母畫面模式。這是 Google 地圖在使用者同時執行其他活動時繼續顯示路線的方式。

    圖 4:使用子母畫面持續尋找指引體驗
  • 當使用者離開影片來瀏覽其他內容時,應用程式可將影片移至子母畫面模式。

  • 當使用者看完一集內容時,應用程式可將影片切換至子母畫面模式。主畫面會顯示下一集節目的宣傳或摘要資訊。

  • 應用程式可讓使用者在觀看影片時,將其他內容排入佇列。影片會繼續在子母畫面模式下播放,主畫面則顯示內容選取活動。

善用互動模式,讓使用者不對觀看體驗產生幹擾。舉例來說,如果影片出現在某集內容的結尾,則離開主畫面時進入子母畫面模式後,使用者必須執行額外動作,才能返回並停止播放,或是瀏覽小型控制項。

在應用程式中,使用者在主要畫面瀏覽內容時,可能會選取新影片,而影片播放活動處於子母畫面模式。以全螢幕模式在現有播放活動中播放新影片,而不要啟動可能混淆使用者的新活動。

使用者可以將子母畫面視窗拖曳到其他位置。

  • 輕觸一下視窗即可顯示全螢幕切換鈕、關閉按鈕、設定按鈕,以及應用程式提供的自訂動作 (例如播放控制項)。

    圖 5:預設子母畫面控制項
  • 輕觸兩下視窗,即可在目前的子母畫面大小與最小子母畫面大小之間進行切換。舉例來說,輕觸兩下最大化的視窗可將視窗最小化,反之亦然。

    圖 6:輕觸兩下即可在子母畫面大小之間切換
  • 將視窗拖曳到左側或右側即可隱藏視窗。如要釋放視窗,請輕觸隱藏視窗的可見部分,或將視窗拖曳至外。

    圖 7:子母畫面已收藏
  • 使用雙指撥動縮放功能調整子母畫面視窗大小。

  • 將子母畫面向下滑動以移除視窗。

    圖 8:向下滑動

如要進一步瞭解如何實作子母畫面模式,請參閱「子母畫面開發人員說明文件」。