こんにちは、kazuです。
本日はピクチャーインピクチャーを使ったアプリを作ってみたので、こちらについて解説していきます。
ピクチャーインピクチャーとは
まずピクチャーインピクチャーとは何かわかりますか?
ピクチャーインピクチャーとは開いているアプリを小さい画面として別表示をする機能の一つです。
次の章で実際に画像を貼り付けますので見てみてください!
要件を見ていこう
と言うことでアプリの説明をしていきます。
アプリは以下記事で使用したアプリに追加で対応を入れます。
追加1. PINPボタン(ピクチャーインピクチャー切り替え)を追加する
追加2. ピクチャーインピクチャーモードにする
追加3. ピクチャーインピクチャーモード時にボタンは非表示にする
追加4. ピクチャーインピクチャーを解除した時ボタンをサイド表示する
以下が完成したときの画像になります。
1枚目の画像が、アプリを開いているときの画像、2枚目がPINPボタンをタップしてピクチャーインピクチャーモードの時の画像です。


実際にコードを見てみよう!
まず以下が今回の環境です。
OS:Android, macOS
IDE:AndroidStudio
言語:Java, XML
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
・
・
<!-- PIPボタン -->
<Button
android:id="@+id/pip_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:textSize="10dp"
android:text="@string/PinP"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/reload_button"
tools:ignore="SpUsage"/>
・
・
</androidx.constraintlayout.widget.ConstraintLayout>
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
・・
// Picture in picture のクリックイベントを設定
mBinding.pipButton.setOnClickListener(v -> {
// ピクチャーインピクチャーモードにする
enterPictureInPictureMode();
isButtonVisibility.set(false);
isButtonVisibility();
});
・・
// urlを読み込む
mBinding.webView.loadUrl(Constants.url.tech_calURL);
}
@Override
protected void onResume(){
super.onResume();
// ピクチャーインピクチャーを解除した時にサイドボタンを表示させるため
isButtonVisibility.set(true);
isButtonVisibility();
}
// ボタンを表示・非表示にする
private void isButtonVisibility() {
if(isButtonVisibility.get()) {
// ボタンが表示する
mBinding.close.setVisibility(View.VISIBLE);
mBinding.backButton.setVisibility(View.VISIBLE);
mBinding.nextButton.setVisibility(View.VISIBLE);
mBinding.reloadButton.setVisibility(View.VISIBLE);
mBinding.pipButton.setVisibility(View.VISIBLE);
} else {
// ボタンを非表示にする
mBinding.close.setVisibility(View.GONE);
mBinding.backButton.setVisibility(View.GONE);
mBinding.nextButton.setVisibility(View.GONE);
mBinding.reloadButton.setVisibility(View.GONE);
mBinding.pipButton.setVisibility(View.GONE);
}
}
<!-- activityに 以下2行を追加する -->
<activity
・・
android:supportsPictureInPicture="true"
android:configChanges=
"screenSize|smallestScreenSize|screenLayout|orientation">
ちょっとだけ補足解説すると、まずenterPictureInPictureMode();を実行してピクチャーインピクチャーにされたときにonPause();が呼ばれます。
そして、ピクチャーインピクチャーを解除した時はサイドonResume();が呼ばれます。
その時にボタン表示・非表示処理を呼ぶようにします。
最後に
いかがでしたでしょうか?
今回はピクチャーインピクチャーについて記載しました。
ピクチャーインピクチャーは動画など止めたくない時に使いたくなるなと思いました。
参考になれば嬉しく思います。
最後までご覧いただきありがとうございました。