子母畫面

子母畫面符號和 Play 標誌的主頁橫幅插圖

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

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

重點整理

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

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

根據預設,系統不會自動為應用程式提供子母畫面支援功能,因此必須宣告支援這項功能。

子母畫面視窗會顯示在系統所選的畫面最頂層角落。

控制項

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

使用者可以輕觸行動裝置上的子母畫面視窗,或使用電視遙控器選取選單,從子母畫面視窗選單顯示這些控制項。如果應用程式有進行中的媒體工作階段,也會顯示「播放」、「暫停」、「下一個」和「上一個」控制項。請參閱這篇文章,瞭解如何新增這些控制項。

在子母畫面模式下,活動會顯示在小型視窗中。使用者無法在此模式下與應用程式的其他 UI 元素互動,且可能難以查看子母畫面視窗中小型 UI 元素的細節。

使用者介面:顯示預設子母畫面控制項

預設子母畫面控制項。

自訂子母畫面控制項範例

自訂子母畫面控制項的範例。

用量

讓使用者不僅能在應用程式中繼續觀看影片,還能跨裝置接續觀看。應用程式可控制目前活動進入子母畫面模式的時機,例如離開目前檢視畫面或向上滑動回到主畫面等互動。

以下列舉幾個可能的動作:

  • 如果使用者輕觸主畫面按鈕或向上滑動回到主畫面,活動就能進入子母畫面模式。Google 地圖之所以能在使用者執行其他活動的同時繼續顯示路線指引,就是基於這個機制。

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

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

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

使用互動模式時,請以不干擾觀看體驗為前提,舉例來說,如果影片位於一集內容的結尾,離開主畫面時進入子母畫面模式,使用者必須採取額外動作才能返回並停止播放,或操作小型控制項。

在應用程式中,使用者可能會在主要畫面瀏覽內容時選取新影片,而同時也有影片播放活動在子母畫面模式下進行。在這種情況下,請以全螢幕模式在現有播放活動中播放新影片,而不要啟動新活動,避免造成使用者混淆。

互動模式

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

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

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

輕觸兩下視窗,即可在目前的子母畫面大小和最大/最小的子母畫面大小之間切換。舉例來說,輕觸兩下最大化的視窗會將其縮到最小,反之亦然。

圖 6:輕觸兩下即可在最小和最大子母畫面大小之間切換

將視窗拖曳到左側或右側邊緣,即可隱藏視窗。如要取消隱藏視窗,只要輕觸隱藏視窗的可見部分或將視窗拖曳出來即可。

圖 7:PiP 暫存

使用雙指撥動方式調整子母畫面視窗的大小。

向下滑動子母畫面即可移除視窗。

圖 8:向下滑動

轉場

如要讓使用者在進入和退出子母畫面模式時獲得流暢體驗,請自訂進入和退出轉場效果。

流暢進入子母畫面動畫

使用者觸發子母畫面模式時,目前的活動會從全螢幕縮小為小型視窗,並繼續顯示內容,不會疊加任何 UI。

Android 12 針對全螢幕和子母畫面視窗之間的轉場效果,導入了外觀改善措施。實作後,這些更新會自動調整大小,以配合平板電腦和摺疊裝置。

如果沒有這些更新,轉場效果仍可運作,但會比較粗糙。舉例來說,子母畫面視窗可能會在轉換期間暫時消失。

從 Android 12 開始,PictureInPictureParams.Builder.setAutoEnterEnabled(true) 標記可提供更順暢的手勢轉換 (例如向上滑動至主畫面)。建議您對 ENTERTAINMENTCOMMUNICATIONVIDEO_PLAYER 應用程式使用這項功能。

如果沒有這個旗標,手勢轉場效果會將視窗縮小為應用程式圖示,然後再以子母畫面視窗的形式顯示 (如影片 1 所示)。

如果 PiP 未正確實作 setAutoEnterEnabled,轉場體驗會較不完善

應用程式新增 setAutoEnterEnabled,提供更完善的轉移體驗。

流暢的影片畫面

在 Android 8.0 中推出子母畫面功能時,sourceRectHint 會指出活動在轉換為子母畫面後顯示的區域,例如影片播放器中的影片檢視區塊界線。從 Android 12 開始,作業系統會使用 sourceRectHint,在進入和退出子母畫面模式時,實作更流暢的動畫。

如果應用程式未提供適當的 sourceRectHint,子母畫面轉換仍可運作,但動畫效果較不精緻。舉例來說,影片 3 顯示從全螢幕模式轉換為子母畫面模式的較不精緻範例:全螢幕視窗縮小為子母畫面視窗後,會先被黑色疊加層遮蓋,然後再次顯示影片。

影片 3:如果子母畫面未正確實作 sourceRectHint,轉場效果會較不流暢

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

如要瞭解如何啟用流暢的轉場效果,請參閱 Android Kotlin 子母畫面範例

如要進一步瞭解如何導入子母畫面,請參閱子母畫面開發人員說明文件