코드 예제를 사용하여 Android에서 Picture-in-Picture 모드를 만드는 방법

최근 몇 년 동안 스마트폰은 기능 면에서 점점 더 컴퓨터에 가까워지고 있으며 많은 사람들이 이미 업무를 위한 기본 도구로 PC를 대체하고 있습니다. 개인용 컴퓨터의 장점은 스마트폰에서는 사용할 수 없었던 다중 창 기능이었습니다. 그러나 Android 7.0이 출시되면서 이것이 바뀌기 시작했고 다중 창 지원이 나타났습니다.

통화가 최소화되었을 때 대화 상대의 비디오가 있는 작은 플로팅 창의 편리함을 과대평가하기는 어렵습니다. 대화를 계속하면서 동시에 메모하거나 일부 정보를 명확히 할 수 있습니다. Android에는 이 기능을 구현하기 위한 두 가지 옵션이 있습니다. 플로팅 창에서 애플리케이션 지원과 PIP(Picture-in-Picture) 모드입니다. 이상적으로는 애플리케이션이 두 가지 접근 방식을 모두 지원해야 하지만 부동 창은 개발하기가 더 어렵고 전체 애플리케이션 디자인에 특정 제한을 부과하므로 Android의 PiP(Picture-in-Picture)를 다중 응용 프로그램에 창 지원.

PIP 모드로 전환

Picture-in-picture 모드는 Android 8 이상이 설치된 대부분의 장치에서 지원됩니다. 따라서 이보다 낮은 시스템 버전을 지원하는 경우 모든 PIP 모드 관련 호출은 시스템 버전 확인에 포함되어야 합니다.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) { 
    // Something related to PiP 
}

전체Activity가 PIP로 변환되며 먼저 Activity에서 이AndroidManifest.xml에 대한 PIP 지원을 선언해야 합니다.

<activity
    ...
    android:supportsPictureInPicture="true" />

PIP를 사용하기 전에 사용자의 장치가 이 모드를 지원하는지 확인해야 합니다. 이렇게 하려면 PackageManager .

val isPipSupported = context.packageManager.hasSystemFeature(PackageManager.FEATURE_PICTURE_IN_PICTURE)

그런 다음 가장 간단한 형태로 Picture-in-Picture 모드로의 전환은 문자 그대로 한 줄로 수행됩니다.

this.enterPictureInPictureMode()

그러나 거기에 가려면 사용자에게 언제 편리한지 알아야 합니다. 별도의 버튼을 만들고 클릭하면 점프할 수 있습니다. 가장 일반적인 접근 방식은 사용자가 통화 중에 애플리케이션을 최소화할 때 자동 전환하는 것입니다. 이 이벤트를 추적하기 위해 홈 또는 최근 버튼을 통해 사용자가 의도적으로 떠날 때마다Activity.onUserLeaveHint 호출되는 편리한 메서드Activity가 있습니다.

override fun onUserLeaveHint() {
    ...
    if (isPipSupported && imaginaryCallManager.isInCall)
        this.enterPictureInPictureMode()
}

인터페이스 적응

좋습니다. 이제 통화 화면이 Android에서 자동으로 PIP 모드로 전환됩니다! 그러나 종종 "통화 종료"또는 "카메라 변경"버튼이 있으며 이 모드에서는 작동하지 않습니다. 전환할 때 숨기는 것이 좋습니다.

PIP 모드로/에서 전환을 추적하려면 Activity 및 Fragment 방법이 있습니다 onPictureInPictureModeChanged . 그것을 재정의하고 불필요한 인터페이스 요소를 숨기자

override fun onPictureInPictureModeChanged(
    isInPictureInPictureMode: Boolean,
    newConfig: Configuration?
) {
    super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)
    setIsUiVisible(isInPictureInPictureMode)
}

PIP 창은 매우 작기 때문에 로컬 사용자의 비디오를 포함하여 대화 상대의 비디오를 제외한 모든 것을 숨기는 것이 좋습니다. 어쨌든 너무 작아서 아무 것도 볼 수 없습니다.

커스터마이징

PictureInPictureParams에 대한 호출에서 enterPictureInPictureMode를 전달하여 PIP 창을 추가로 사용자 정의할 수 있습니다. 커스터마이징 옵션이 많지는 않지만 창 하단에 버튼을 추가하는 옵션은 특별한 주의가 필요합니다. 일반 버튼이 PIP 모드에서 작동을 멈춘다는 사실에도 불구하고 화면을 대화식으로 유지하는 좋은 방법입니다.

추가할 수 있는 최대 버튼 수는 여러 요인에 따라 다르지만 항상 최소 3개는 추가할 수 있습니다. 한도를 넘는 모든 버튼은 단순히 표시되지 않으므로 특히 중요한 버튼을 처음에 배치하는 것이 좋습니다. 메소드Activity를 통해 현재 구성에서 정확한 제한을 찾을 수 있습니다.

this.maxNumPictureInPictureActions

PIP 창에 통화 종료 버튼을 추가해 보겠습니다. 시작하려면 알림과 마찬가지로 PendingIntent 가 필요합니다. 이것은 버튼이 눌렸음을 애플리케이션에 알릴 책임이 있습니다. `PendingIntent'에 대해 처음 들어보는 경우 지난 기사에서 더 자세히 알아볼 수 있습니다.

그런 다음 실제 버튼 설명, 즉 RemoteAction 만들기를 시작할 수 있습니다.

val endCallPendingIntent = getPendingIntent()
val endCallAction = RemoteAction(
// An icon for a button. The color will be ignored and changed to a system color
Icon.createWithResource(this, R.drawable.ic_baseline_call_end_24),
// Text of the button that won't be shown
"End call",
// ContentDescription для screen readers
"End call button",
// Our PendingIntent that'll be launched upon pressing the button
endCallPendingIntent
)


Our "action" is ready, now we need to add it to the PIP parameters and, subsequently, to the mode transition call.

Let's start by creating a Builder for our customization parameters:

`
val pipParams = PictureInPictureParams.Builder()
.setActions(listOf(endCallAction))
.build()

this.enterPictureInPictureMode(pipParams)
`

In addition to the buttons, through the parameters, you can set the aspect ratio of the PIP features on Android or the animation of switching to this mode.

결론

We have considered a fairly simple but very handy variant of using the multi-window feature to improve the user experience, learned how to add buttons to the PIP window on Android, and adapt our interface when switching to and from this mode. If you want to know more about developing video calling Android apps, check out our WebRTC on Android guide. Let us know in the comments if you found this article useful 💙