Android實(shí)現(xiàn)畫中畫功能(圖片)
更新時(shí)間：2021年09月10日 11:40:38 作者：tracydragonlxy
畫中畫是一種特殊類型的多窗口模式，最常用于視頻播放。這篇文章主要介紹了Android實(shí)現(xiàn)畫中畫功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
簡(jiǎn)介： Android 8.0（API 級(jí)別 26）允許以畫中畫 (PIP) 模式啟動(dòng) Activity。畫中畫是一種特殊類型的多窗口模式，最常用于視頻播放。使用該模式，用戶可以通過固定到屏幕一角的小窗口觀看視頻，同時(shí)在應(yīng)用之間進(jìn)行導(dǎo)航或?yàn)g覽主屏幕上的內(nèi)容。
畫中畫窗口會(huì)顯示在屏幕的最上層，位于系統(tǒng)選擇的一角。您可以將畫中畫窗口拖動(dòng)到其他位置（會(huì)自動(dòng)貼邊）。當(dāng)您點(diǎn)按該窗口時(shí)，會(huì)看到兩個(gè)特殊的控件：全屏切換開關(guān)（位于窗口的中心）和關(guān)閉按鈕（右上角的“X”）。
效果圖：
1、聲明對(duì)畫中畫的支持：
默認(rèn)情況下，系統(tǒng)不會(huì)自動(dòng)為應(yīng)用提供畫中畫支持。如果您想在應(yīng)用中支持畫中畫，可以通過將 android:supportsPictureInPicture 設(shè)置為 true，在清單中注冊(cè)視頻 Activity。此外，指定您的 Activity 處理布局配置更改，這樣一來(lái)，在畫中畫模式轉(zhuǎn)換期間發(fā)生布局更改時(shí)，您的 Activity 就不會(huì)重新啟動(dòng)。
<?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 切換到畫中畫模式：
如要進(jìn)入畫中畫模式，Activity 必須調(diào)用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) {
// 設(shè)置寬高比例值，第一個(gè)參數(shù)表示分子，第二個(gè)參數(shù)表示分母
// 10/5=2，表示畫中畫窗口的寬度是高度的兩倍
Rational rational = new Rational(ivWidth, ivHeight);
mBuilder.setAspectRatio(rational).build();
}
enterPictureInPictureMode(mBuilder.build());
}
});
3、處理畫中畫模式下的界面元素
當(dāng) Activity 進(jìn)入或退出畫中畫模式時(shí)，系統(tǒng)會(huì)調(diào)用 Activity.onPictureInPictureModeChanged() 或 Fragment.onPictureInPictureModeChanged() 。在畫中畫模式下，Activity 會(huì)在一個(gè)小窗口中顯示。在畫中畫模式下，用戶無(wú)法與界面元素互動(dòng)，并且可能很難看清小界面元素的詳細(xì)信息。在 Activity 進(jìn)入畫中畫模式之前移除其他界面元素，并在 Activity 再次變?yōu)槿習(xí)r恢復(fù)這些元素：
@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);
}
}
完整代碼：
頁(yè)面布局文件：
<?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) {
// 設(shè)置寬高比例值，第一個(gè)參數(shù)表示分子，第二個(gè)參數(shù)表示分母
// 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);
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之
相關(guān)文章
Bitmap放大或縮?。洪L(zhǎng)和寬放大縮小的比例具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
Jetpack是一套庫(kù)、工具和指南的集合，幫助開發(fā)者更輕松地編寫優(yōu)質(zhì)應(yīng)用，這篇文章主要介紹了Android Jetpack簡(jiǎn)介,需要的朋友可以參考下2022-09-09
Android RecyclerView的卡頓問題的解決方法
本篇文章主要介紹了Android RecyclerView的卡頓問題的解決方法，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-04-04
Android 動(dòng)態(tài)顯示和隱藏狀態(tài)欄詳解及實(shí)例
這篇文章主要介紹了Android 動(dòng)態(tài)顯示和隱藏狀態(tài)欄的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android使用Intent隱式實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了Android使用Intent隱式來(lái)實(shí)現(xiàn)向上跳轉(zhuǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
詳解OpenGL Shader抗鋸齒的實(shí)現(xiàn)
普通繪制圓形形狀時(shí)可以看到圖形邊緣會(huì)有明顯鋸齒現(xiàn)象并不像真實(shí)圓形形狀一樣圓潤(rùn)邊緣平滑。本文將介紹如何通過自制函數(shù)實(shí)現(xiàn)抗鋸齒，需要的可以參考一下2022-02-02
Android應(yīng)用實(shí)踐之?dāng)?shù)獨(dú)游戲開發(fā)
這篇文章主要為大家詳細(xì)介紹了Android應(yīng)用實(shí)踐之?dāng)?shù)獨(dú)游戲開發(fā)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Android開發(fā)實(shí)現(xiàn)的IntentUtil跳轉(zhuǎn)多功能工具類【包含視頻、音頻、圖片、攝像頭等操作功能】
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)的IntentUtil跳轉(zhuǎn)多功能工具類,該封裝類還包含視頻、音頻、圖片、攝像頭等操作功能,需要的朋友可以參考下2017-11-11
Android開發(fā)之TabHost選項(xiàng)卡及相關(guān)疑難解決方法
這篇文章主要介紹了Android開發(fā)之TabHost選項(xiàng)卡及相關(guān)疑難解決方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android開發(fā)中TabHost選項(xiàng)卡的常見用法以及相關(guān)疑難問題解決方法,需要的朋友可以參考下2019-03-03
Android design包自定義tablayout的底部導(dǎo)航欄的實(shí)現(xiàn)方法
這篇文章主要介紹了Android design包自定義tablayout的底部導(dǎo)航欄的實(shí)現(xiàn)方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01