Android实现画中画功能(图⽚)
简介: Android 8.0(API 级别 26)允许以画中画 (PIP) 模式启动 Activity。画中画是⼀种特殊类型的多窗⼝模式,最常⽤于视频播放。使⽤该模式,⽤户可以通过固定到屏幕⼀⾓的⼩窗⼝观看视频,同时在应⽤之间进⾏导航或浏览主屏幕上的内容。
画中画窗⼝会显⽰在屏幕的最上层,位于系统选择的⼀⾓。您可以将画中画窗⼝拖动到其他位置(会⾃动贴边)。当您点按该窗⼝时,会看到两个特殊的控件:全屏切换开关(位于窗⼝的中⼼)和关闭按钮(右上⾓的“X”)。
效果图:
1、声明对画中画的⽀持:
默认情况下,系统不会⾃动为应⽤提供画中画⽀持。如果您想在应⽤中⽀持画中画,可以通过将
android:supportsPictureInPicture 设置为 true,在清单中注册视频 Activity。此外,指定您的 Activity 处理布局配置更改,这样⼀来,在画中画模式转换期间发⽣布局更改时,您的 Activity 就不会重新启动。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="schemas.android/apk/res/android"
xmlns:tools="schemas.android/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 = Width();
int ivHeight = Height();
if (ivWidth != 0 && ivHeight != 0) {
// 设置宽⾼⽐例值,第⼀个参数表⽰分⼦,第⼆个参数表⽰分母
// 10/5=2,表⽰画中画窗⼝的宽度是⾼度的两倍
Rational rational = new Rational(ivWidth, ivHeight);
mBuilder.setAspectRatio(rational).build();
}
enterPictureInPictureMode(mBuilder.build());
}
});
3、处理画中画模式下的界⾯元素
当 Activity 进⼊或退出画中画模式时,系统会调⽤ PictureInPictureModeChanged() 或
@Overrideandroid layout布局
public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration 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"?>
&straintlayout.widget.ConstraintLayout xmlns:android="schemas.android/apk/res/android"    xmlns:app="schemas.android/apk/res-auto"
xmlns:tools="schemas.android/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"/>
</straintlayout.widget.ConstraintLayout>
Activity⽂件:
import androidx.appcompat.app.AppCompatActivity;
straintlayout.widget.ConstraintLayout;
straintlayout.widget.Constraints;
import android.app.PictureInPictureParams;
t.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) {
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 = Width();
int ivHeight = Height();
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) {        PictureInPictureModeChanged(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);
}
}
}
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持脚本之

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。