Android實現畫中畫功能(圖片)
簡介: Android 8.0(API 級別 26)允許以畫中畫 (PIP) 模式啟動 Activity。畫中畫是一種特殊類型的多窗口模式,最常用于視頻播放。使用該模式,用戶可以通過固定到屏幕一角的小窗口觀看視頻,同時在應用之間進行導航或瀏覽主屏幕上的內容。
畫中畫窗口會顯示在屏幕的最上層,位于系統選擇的一角。您可以將畫中畫窗口拖動到其他位置(會自動貼邊)。當您點按該窗口時,會看到兩個特殊的控件:全屏切換開關(位于窗口的中心)和關閉按鈕(右上角的“X”)。
效果圖:
1、聲明對畫中畫的支持:
默認情況下,系統不會自動為應用提供畫中畫支持。如果您想在應用中支持畫中畫,可以通過將 android:supportsPictureInPicture 設置為 true,在清單中注冊視頻 Activity。此外,指定您的 Activity 處理布局配置更改,這樣一來,在畫中畫模式轉換期間發(fā)生布局更改時,您的 Activity 就不會重新啟動。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.csu.pictureinpicture"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" tools:ignore="GoogleAppIndexingWarning"> <activity android:name=".TestPipActivity" android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" android:resizeableActivity="true" android:supportsPictureInPicture="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
2、將 Activity 切換到畫中畫模式:
如要進入畫中畫模式,Activity 必須調用enterPictureInPictureMode() 。
ivPip.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int ivWidth = imageViewPip.getWidth(); int ivHeight = imageViewPip.getHeight(); if (ivWidth != 0 && ivHeight != 0) { // 設置寬高比例值,第一個參數表示分子,第二個參數表示分母 // 10/5=2,表示畫中畫窗口的寬度是高度的兩倍 Rational rational = new Rational(ivWidth, ivHeight); mBuilder.setAspectRatio(rational).build(); } enterPictureInPictureMode(mBuilder.build()); } });
3、處理畫中畫模式下的界面元素
當 Activity 進入或退出畫中畫模式時,系統會調用 Activity.onPictureInPictureModeChanged() 或 Fragment.onPictureInPictureModeChanged() 。在畫中畫模式下,Activity 會在一個小窗口中顯示。在畫中畫模式下,用戶無法與界面元素互動,并且可能很難看清小界面元素的詳細信息。在 Activity 進入畫中畫模式之前移除其他界面元素,并在 Activity 再次變?yōu)槿習r恢復這些元素:
@Override public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) { super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig); Log.i(TAG, "onPictureInPictureModeChanged: " + isInPictureInPictureMode); if (isInPictureInPictureMode) { // hide some ui tvTitle.setVisibility(View.INVISIBLE); tvDetail.setVisibility(View.INVISIBLE); tvInfo.setVisibility(View.INVISIBLE); ivPip.setVisibility(View.INVISIBLE); imageView.setVisibility(View.INVISIBLE); imageViewPip.setVisibility(View.VISIBLE); } else { // Restore the full-screen UI tvTitle.setVisibility(View.VISIBLE); tvDetail.setVisibility(View.VISIBLE); tvInfo.setVisibility(View.VISIBLE); ivPip.setVisibility(View.VISIBLE); imageView.setVisibility(View.VISIBLE); imageViewPip.setVisibility(View.INVISIBLE); } }
完整代碼:
頁面布局文件:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.csu.pictureinpicture.TestPipActivity"> <ImageView android:id="@+id/image_view_pip" android:layout_width="300dp" android:layout_height="200dp" android:src="@mipmap/image" android:scaleType="centerCrop" android:visibility="invisible" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent"/> <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="圖片畫中畫演示" android:textSize="24sp" android:textColor="#353535" android:layout_marginTop="50dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> <ImageView android:id="@+id/image_view" android:layout_width="0dp" android:layout_height="300dp" android:src="@mipmap/image" android:scaleType="centerCrop" android:layout_marginTop="60dp" app:layout_constraintTop_toBottomOf="@id/tv_title" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/> <ImageView android:id="@+id/iv_pip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/pip" android:layout_marginEnd="10dp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="@id/image_view" app:layout_constraintBottom_toBottomOf="@id/image_view"/> <TextView android:id="@+id/tv_detail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="detail" android:textSize="14sp" android:lineSpacingMultiplier="1.5" android:layout_marginStart="10dp" android:layout_marginTop="10dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toBottomOf="@id/image_view"/> <TextView android:id="@+id/tv_info" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SDK Version" android:layout_marginBottom="10dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>
Activity文件:
import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import androidx.constraintlayout.widget.Constraints; import android.app.PictureInPictureParams; import android.content.res.Configuration; import android.os.Bundle; import android.os.Build; import android.util.Log; import android.util.Rational; import android.view.View; import android.widget.ImageView; import android.widget.RelativeLayout; import android.widget.TextView; public class TestPipActivity extends AppCompatActivity { private static final String TAG = "TestPipActivity"; private TextView tvTitle, tvInfo, tvDetail; private ImageView imageView, imageViewPip, ivPip; private PictureInPictureParams.Builder mBuilder; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test_pip); tvTitle = findViewById(R.id.tv_title); tvDetail = findViewById(R.id.tv_detail); tvInfo = findViewById(R.id.tv_info); imageView = findViewById(R.id.image_view); ivPip = findViewById(R.id.iv_pip); imageViewPip = findViewById(R.id.image_view_pip); tvDetail.setText("Name: kobe.png\r\nSize: 75.7KB(480px * 300px)\r\nDate: 2020/09/17 15:40"); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && getPackageManager().hasSystemFeature(PackageManager.FEATURE_PICTURE_IN_PICTURE)) { mBuilder = new PictureInPictureParams.Builder(); ivPip.setVisibility(View.VISIBLE); tvInfo.setText("SDK Version:" + Build.VERSION.SDK_INT + "(支持畫中畫模式)"); } else { ivPip.setVisibility(View.INVISIBLE); tvInfo.setText("SDK Version:" + Build.VERSION.SDK_INT + "(不支持畫中畫模式)"); } ivPip.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int ivWidth = imageViewPip.getWidth(); int ivHeight = imageViewPip.getHeight(); if (ivWidth != 0 && ivHeight != 0) { // 設置寬高比例值,第一個參數表示分子,第二個參數表示分母 // 10/5=2,表示畫中畫窗口的寬度是高度的兩倍 Rational rational = new Rational(ivWidth, ivHeight); mBuilder.setAspectRatio(rational).build(); } enterPictureInPictureMode(mBuilder.build()); } }); } @Override public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) { super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig); Log.i(TAG, "onPictureInPictureModeChanged: " + isInPictureInPictureMode); if (isInPictureInPictureMode) { // hide some ui tvTitle.setVisibility(View.INVISIBLE); tvDetail.setVisibility(View.INVISIBLE); tvInfo.setVisibility(View.INVISIBLE); ivPip.setVisibility(View.INVISIBLE); imageView.setVisibility(View.INVISIBLE); imageViewPip.setVisibility(View.VISIBLE); } else { // Restore the full-screen UI tvTitle.setVisibility(View.VISIBLE); tvDetail.setVisibility(View.VISIBLE); tvInfo.setVisibility(View.VISIBLE); ivPip.setVisibility(View.VISIBLE); imageView.setVisibility(View.VISIBLE); imageViewPip.setVisibility(View.INVISIBLE); } } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之
相關文章
Android RecyclerView的卡頓問題的解決方法
本篇文章主要介紹了Android RecyclerView的卡頓問題的解決方法,具有一定的參考價值,有興趣的可以了解一下。2017-04-04Android 動態(tài)顯示和隱藏狀態(tài)欄詳解及實例
這篇文章主要介紹了Android 動態(tài)顯示和隱藏狀態(tài)欄的相關資料,需要的朋友可以參考下2017-06-06Android開發(fā)實現的IntentUtil跳轉多功能工具類【包含視頻、音頻、圖片、攝像頭等操作功能】
這篇文章主要介紹了Android開發(fā)實現的IntentUtil跳轉多功能工具類,該封裝類還包含視頻、音頻、圖片、攝像頭等操作功能,需要的朋友可以參考下2017-11-11Android開發(fā)之TabHost選項卡及相關疑難解決方法
這篇文章主要介紹了Android開發(fā)之TabHost選項卡及相關疑難解決方法,結合實例形式較為詳細的分析了Android開發(fā)中TabHost選項卡的常見用法以及相關疑難問題解決方法,需要的朋友可以參考下2019-03-03Android design包自定義tablayout的底部導航欄的實現方法
這篇文章主要介紹了Android design包自定義tablayout的底部導航欄的實現方法,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-01-01