Android Presentation雙屏異顯開發(fā)流程詳細(xì)講解

更新時(shí)間：2023年01月31日 09:40:17 作者：氦客

最近開發(fā)的一個(gè)項(xiàng)目，有兩個(gè)屏幕，需要將第二個(gè)頁面投屏到副屏上，這就需要用到Android的雙屏異顯(Presentation)技術(shù)了，研究了一下，這里做下筆記

1. 背景

我們那個(gè)副屏是一塊汽車的后視鏡(流媒體后視鏡)，是一塊長條塊的屏幕，分辨率是400 * 1920 px，如何將需要顯示的內(nèi)容正確擺放地顯示到這塊屏幕上，也是我們開發(fā)中的一個(gè)重點(diǎn)。

并且，我們是使用平板橫屏進(jìn)行開發(fā)的，對于橫屏情況下雙屏異顯的處理，也是我們開發(fā)中的一個(gè)重點(diǎn)。

2. 創(chuàng)建主屏布局

主屏就用MainActivity就好

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        //...
    }
}

3. 創(chuàng)建副屏布局

這里，繼承了MyPresentation接口

class MyPresentation(outerContext: Context, display: Display) :
    Presentation(outerContext, display) {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.dialog_normal)//綁定副屏顯示的布局
    }
	//顯示時(shí)調(diào)用
    override fun onStart() {
        super.onStart()
    }
    //消失時(shí)調(diào)用
    override fun onStop() {
        super.onStop()
    }
}

4. 將頁面投屏到副屏上

投屏到副屏上有多中方式，我們只需要在MainActivity中去調(diào)用這些代碼就可以了。

4.1 MediaRouter

MediaRouter mediaRouter = (MediaRouter) getSystemService(Context.MEDIA_ROUTER_SERVICE);
MediaRouter.RouteInfo route = mediaRouter.getSelectedRoute(MediaRouter.ROUTE_TYPE_LIVE_AUDIO);
if (route != null) {
    Display presentationDisplay = route.getPresentationDisplay();
    if (presentationDisplay != null) {
        MyPresentation myPresentation = new MyPresentation(MainActivity.this, presentationDisplay);
        myPresentation.show();
    }
}

4.2 DisplayManager

DisplayManager mDisplayManager = (DisplayManager) getSystemService(Context.DISPLAY_SERVICE);
Display[] displays = mDisplayManager.getDisplays();
if (displays.length > 1) {
   //displays[0] 主屏，displays[1] 副屏
   MyPresentation myPresentation = new MyPresentation(MainActivity.this, displays[1]);
   myPresentation.show();
}

5. 橫屏狀態(tài)下雙屏異顯的處理

在我們那個(gè)副屏上，副屏的顯示邏輯是，主屏是豎屏，副屏就以副屏顯示，主屏是橫屏，副屏就以橫屏顯示。

如下圖所示

而我們想要達(dá)到的效果是，主屏是橫屏，而主屏是豎屏。

后來，我們想到了一個(gè)辦法，就是搞兩個(gè)Activity，Activity1負(fù)責(zé)顯示主屏的頁面，而Activity2負(fù)責(zé)副屏的顯示。

首先啟動(dòng)Activity2，然后迅速啟動(dòng)Activity1，當(dāng)Activity1關(guān)閉的時(shí)候，也去關(guān)閉Activity1，這樣就可以實(shí)現(xiàn)主屏和副屏方向顯示不一樣的情況了。

6. 將需要顯示的內(nèi)容正確擺放到副屏上

由于我們的副屏是一塊長條塊的屏幕，分辨率是400 * 1920 px，我們現(xiàn)在主屏上是橫屏顯示，而副屏通過上述的操作，顯示的是豎屏。

而我們真正期望顯示的內(nèi)容是藍(lán)色這部分

所以，我們需要對View做一下旋轉(zhuǎn)并位移

val rotation: ObjectAnimator = 
	ObjectAnimator.ofFloat(binding.textureView, "rotation", 0f, 90f)
val translationX: ObjectAnimator =
    ObjectAnimator.ofFloat(binding.textureView, "translationX", 0f, -720F)
val translationY: ObjectAnimator =
    ObjectAnimator.ofFloat(binding.textureView, "translationY", 0f, 420F)
val animatorSet = AnimatorSet()
animatorSet.playSequentially(rotation, translationX, translationY)
animatorSet.duration = 0
animatorSet.start()

最終顯示為這樣