動手做個PIP APP吧
2020/12/08 23:38:34
4
3845
大部分的人都用過YT或視訊通話的APP，那聽過PIP嗎?
PIP全名Picture-in-picture(子母畫面，也有人說是畫中畫)，是android8.0後提供的多視窗功能，可以將APP的畫面縮小到螢幕的一小角，而且支援手指拖曳的動作，可以將APP移動到螢幕的任意地方(但不能超過螢幕邊界)．進入PIP模式後，就可以實現同時觀看影片又聊天，或者是在視訊通話時一邊查看行事曆了．
看到這裡你應該知道PIP是什麼了，或許你很常使用 但是不知道他就是PIP．
那麼接下來做一個自己的PIP APP吧．首先要在manifest中告訴系統我們要使用這個功能android:supportsPictureInPicture="true"，因為預設的情況下是關閉的，另外還要給幾個設定，讓APP進入PIP模式後能後夠正常顯示畫面．
<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">
<activity
android:name=".MainActivity"
android:resizeableActivity="true"
android:supportsPictureInPicture="true"
android:configChanges="screenSize|screenLayout|smallestScreenSize|orientation">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
如果忘了設定支援PIP的話就會看到這個訊息：
設定完成之後接著就是要給個開關讓APP進入PIP了，可以用個按鈕或是另外做個事件去觸發．
用個簡單的例子吧，先做個layout把按鈕擺上去
public class MainActivity extends AppCompatActivity {
private Button btnPIP;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnPIP = findViewById(R.id.btnPIP);
btnPIP.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
enterPictureInPictureMode();
}
});
}
}
你沒看錯，就這麼一行就可以進入PIP模式了，但是坑還沒開始踩呢．不是每隻手機都能用PIP的，先確認開不開得起來吧．
加上這行hasSystemFeature(PackageManager.FEATURE_PICTURE_IN_PICTURE)判斷手機是否能夠使用PIP，如果不能使用PIP也提示一下使用者．
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnPIP = findViewById(R.id.btnPIP);
btnPIP.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(!getPackageManager().hasSystemFeature(PackageManager.FEATURE_PICTURE_IN_PICTURE)){
Toast.makeText(
MainActivity.this,
"Device not support PIP mode !",
Toast.LENGTH_SHORT).show();
}else {
enterPictureInPictureMode();
}
}
});
}
按下按鈕試試看(左邊是按下按鈕後的樣子，右邊是點擊已經縮小的畫面後聚焦的樣子，會微微的放大)
如果想要在使用者點擊Home鍵時主動幫使用者進入PIP模式，可以利用onUserLeaveHint() 方法，判斷當使用者按下Home鍵時的情境．
我們可以透過isInPictureInPictureMode()方法判斷目前是否在PIP模式下．
@Override
protected void onUserLeaveHint() {
super.onUserLeaveHint();
if(!isInPictureInPictureMode()){
enterPictureInPictureMode();
}
}
使用PIP的時候要注意一下layout的擺放，看到上面放的圖示應該就能明白，原本Layout上大部分的元件在進入PIP模式後是看不見的(如果使用ConstraintLayout把元件寬高都改成0dp，利用拘束去比例縮放的話倒是可以看到縮小後的畫面)，另外中間的按鈕是因為我用拘束把它置中了，才會顯示在那裡，底下的圖例會改掉．
在進入PIP模式後，原本Activity上的元件互動是無效的，比如Edittext這個時候是點不到也無法輸入文字的，但是可以擺上幾個簡易的按鈕去處發事件．
進入PIP模式後的小視窗寬高比例是可以手動改變的，透過Rational設定寬高比，再使用PictureInPictureParams.Builder．
private PictureInPictureParams.Builder pipBuilder =
new PictureInPictureParams.Builder();
private void setPipBuilder(){
Rational rational = new Rational(9,21);
pipBuilder.setAspectRatio(rational);
}
private void intoPIPMode(){
enterPictureInPictureMode(pipBuilder.build());
}
接著放個影片到VideoView上跑跑看．
private void initVideoView(){
//連結引用自android官方的PIP範例影片
Uri uri = Uri.parse("https://developer.android.com/images/pip.mp4");
videoView.setVideoURI(uri);
videoView.start();
videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
Log.d(TAG,"video onPrepared !");
mp.start();
}
});
videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
@Override
public void onCompletion(MediaPlayer mp) {
Log.d(TAG,"video onCompletion !");
}
});
videoView.setOnErrorListener(new MediaPlayer.OnErrorListener() {
@Override
public boolean onError(MediaPlayer mp, int what, int extra) {
Log.d(TAG,"video onError !");
return false;
}
});
}
我們可以觀察一下進入PIP模式時的生命週期變化：
@Override
public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode,
Configuration newConfig) {
super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
Log.d(TAG,"onPIPMode");
}
@Override
protected void onStart() {
super.onStart();
Log.d(TAG,"onStart");
}
@Override
protected void onResume() {
super.onResume();
Log.d(TAG,"onResume");
}
發現是在onPasue之後進入PIP模式，而且不會進到omStop．
解除PIP模式恢復一般大小時也不會觸發onStart，那麼影片應概會在變更模式後繼續播放．
接下來開始製作影片播放以及停止的按鈕吧，先定義等等會用到的參數．
private static final String VIDEO_ACTION_CONTROL = "ACTION_VIDEO_CONTROL";
private static final String VIDEO_STATUS = "VIDEO_STATUS";
private static final int VIDEO_STATUS_PLAY = 1;
private static final int VIDEO_STATUS_PAUSE = 2;
private static final int REQUEST_CODE_PLAY = 1;
private static final int REQUEST_CODE_PAUSE = 2;
private static final String PLAY = "PLAY";
private static final String PAUSE = "PAUSE";
透過PendingIntent跟RemoteAction來進行操作．
private void updatePIPActions(@DrawableRes int iconResId, String title,
int controlType, int requestCode){
final ArrayList<RemoteAction> actions = new ArrayList<>();
final PendingIntent intent =
PendingIntent.getBroadcast(
MainActivity.this,
requestCode,
new Intent(VIDEO_ACTION_CONTROL).putExtra(VIDEO_STATUS, controlType),
0);
final Icon icon = Icon.createWithResource(MainActivity.this, iconResId);
actions.add(new RemoteAction(icon, title, title, intent));
pipBuilder.setActions(actions);
setPictureInPictureParams(pipBuilder.build());
}這裡可以看到我是用ArrayList來加上按鈕的action的，但是能夠放上去的按鈕數量是有限制的，透過getMaxNumPictureInPictureActions()這個方法可以得到3得回傳值，做多就放三個按鈕．
前面提到在PIP模式下，原本layout上的元件不會獲得互動事件，我們透過發送接收廣播來告訴系統要做什麼動作．
因為是進入PIP模式後才發生的，我就直接寫在onPictureInPictureModeChanged方法裡．
除了廣播之外也同時處理了一下View的顯示，畢竟layout上大部分的元件都看不到了乾脆隱藏掉！讓影片多一點空間．
@Override
public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode,
Configuration newConfig) {
super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
Log.d(TAG,"onPIPMode");
if (isInPictureInPictureMode) {
//隱藏其他的View
topArea.setVisibility(View.GONE);
bottomArea.setVisibility(View.GONE);
btnPIP.setVisibility(View.GONE);
//動態改變videoView的拘束條件讓他可以滿屏
ConstraintSet set = new ConstraintSet();
set.clone(mainLayout);
set.connect(videoView.getId(),ConstraintSet.BOTTOM,mainLayout.getId(),ConstraintSet.BOTTOM);
set.applyTo(mainLayout);
//設定接收廣播
actionReceiver = new BroadcastReceiver() {
@Override
public void onReceive(Context context, Intent intent) {
if(intent == null || !intent.getAction().equals(VIDEO_ACTION_CONTROL))
return;
int currentStatus = intent.getIntExtra(VIDEO_STATUS,0);
if(currentStatus == VIDEO_STATUS_PLAY){
//影片播放的時候可以按下的按鈕是暫停
videoView.start();
updatePIPActions(
R.drawable.ic_baseline_pause_24,
PAUSE,
VIDEO_STATUS_PAUSE,
REQUEST_CODE_PAUSE);
}else if(currentStatus == VIDEO_STATUS_PAUSE){
//影片暫停的時候可以按下的按鈕是播放
videoView.pause();
updatePIPActions(
R.drawable.ic_baseline_play_arrow_24,
PLAY,
VIDEO_STATUS_PLAY,
REQUEST_CODE_PLAY);
}
}
};
registerReceiver(actionReceiver, new IntentFilter(VIDEO_ACTION_CONTROL));
} else {
//顯示其他的View
topArea.setVisibility(View.VISIBLE);
bottomArea.setVisibility(View.VISIBLE);
btnPIP.setVisibility(View.VISIBLE);
//動態恢復videoView的拘束條件
ConstraintSet set = new ConstraintSet();
set.clone(mainLayout);
set.connect(videoView.getId(),ConstraintSet.BOTTOM,topArea.getId(),ConstraintSet.BOTTOM);
set.applyTo(mainLayout);
//移除廣播
unregisterReceiver(actionReceiver);
actionReceiver = null;
}
}
記得一開始影片播放的時候也要把action加上去
//連結引用自android官方的PIP範例影片
Uri uri = Uri.parse("https://developer.android.com/images/pip.mp4");
videoView.setVideoURI(uri);
videoView.start();
videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
@Override
public void onPrepared(MediaPlayer mp) {
Log.d(TAG,"video onPrepared !");
mp.setLooping(true);
mp.start();
updatePIPActions(
R.drawable.ic_baseline_pause_24,
PAUSE,
VIDEO_STATUS_PAUSE,
REQUEST_CODE_PAUSE);
}
});
到這邊就完成摟，要做成播放清單的話還需要再加上下一首跟上一首的按鈕吧，最多只能擺放三個按鈕的限制看來就是為這個做的．
那麼後面補個layout吧，這是為了研究縮小後的擺放效果做的，就別計較好不好了看啦．
<?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=".MainActivity"
android:id="@+id/mainLayout">
<View
android:id="@+id/topArea"
android:background="#0000ee"
android:layout_width="0dp"
android:layout_height="400dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<VideoView
android:id="@+id/videoView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="9:16"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/bottomArea"/>
<View
android:id="@+id/bottomArea"
android:background="#00ee00"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/topArea"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<Button
android:id="@+id/btnPIP"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello PIP"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/bottomArea" />
</androidx.constraintlayout.widget.ConstraintLayout>
補充:
如果開啟第二個APP並且進入PIP模式會發生什麼事呢?
答案:"前一個進入PIP模式的APP會被退出PIP模式"
參考
https://developer.android.com/guide/topics/ui/picture-in-picture#java
註：截圖中出現的影片引用自官方介紹，連結同上
相關文章
