可折迭版面配置
重要
本文說明 處於公開預覽 狀態的功能和指引,而且可能會在正式推出之前大幅修改。 Microsoft 對此處提供的資訊,不做任何明確或隱含的瑕疵擔保。
重要
只有在活動根檢視附加至視窗之後,才能使用此檢視的內容。 這是因為實作是以 視窗管理員 程式庫為基礎,而且只有在檢視附加至視窗時,視窗管理員才能運作。
元件 FoldableLayout
是自訂版面配置,可在應用程式在可折迭的裝置上執行時,以不同的方式放置其子系。 元件可以根據折迭功能的位置和方向,在兩個區域中分割螢幕。 當螢幕分割時,它可以並排保存兩個子容器或另一個子容器。
單一螢幕版面配置 | 雙螢幕版面配置 |
---|---|
XML 屬性
single_screen_layout_id
- 接收要在單一螢幕模式中顯示的版面配置識別碼。dual_screen_start_layout_id
- 接收要在雙螢幕模式啟動容器中顯示的版面配置識別碼。dual_screen_end_layout_id
- 接收要在雙螢幕模式啟動容器中顯示的版面配置識別碼。
當 FoldableLayout
應用程式在可折迭的裝置上執行時,也能夠建立單一容器。
我們新增了四個新屬性,可協助您建立所需的 UI:
dual_portrait_single_layout_id
- 接收雙直向單一容器的版面配置識別碼。is_dual_portrait_single_container
-建立空白的雙直向單一容器。dual_landscape_single_layout_id
- 接收雙橫向單一容器的版面配置識別碼。is_dual_landscape_single_container
- 建立空白的雙橫向單一容器。
smallestScreenSize 支援
當活動轉換成新的螢幕模式,但因為旗 smallestScreenSize
標是在資訊清單檔案中設定,所以不會重新建立,版面配置會偵測新的組態,並自動調整容器的大小,甚至根據 FoldableLayout 組態新增或移除第二個容器。
Android Studio 預覽
tools_hinge_color
- 在版面配置預覽中選取轉軸顏色。tools_screen_mode
- 在版面配置預覽中選取螢幕模式。
如果您將 xml 檔案內的片段新增至 FoldableLayout,您將需要下列屬性來預覽片段 UI:
show_in_single_screen
show_in_dual_screen_start
show_in_dual_screen_end
show_in_dual_portrait_single_container
show_in_dual_landscape_single_container
容器識別碼
容器具有識別碼:
first_container_id
second_container_id
無論螢幕方向或特殊行為設定為版面配置,如果版面配置只會顯示一個容器,其識別碼將為 first_container_id
。 如果其將顯示兩個容器,也會有 second_container_id
。
例如:
- 如果應用程式處於單一螢幕模式,容器識別碼將為
first_container_id
。 - 如果在雙直向中轉換成雙螢幕模式,而且已設定
dual_portrait_single_layout_id
或is_dual_portrait_single_container
,則只有一個容器處於雙螢幕模式,而且其識別碼仍為first_container_id
。 - 當轉換成雙橫向,但未設定屬性
dual_landscape_single_layout_id
和is_dual_landscape_single_container
時,將會呈現識別碼為first_container_id
和second_container_id
的兩個容器。
在程式碼中建立 FoldableLayout
findViewById<FrameLayout>(R.id.parent).addView(
FoldableLayout(this, FoldableLayout.Config().apply {
singleScreenLayoutId = R.layout.single_screen
dualScreenStartLayoutId = R.layout.dual_screen_start
dualScreenEndLayoutId = R.layout.dual_screen_end
dualLandscapeSingleLayoutId = R.layout.single_screen
})
)
取代 FoldableLayout 設定
下列程式碼將捨棄舊組態、將其取代為新組態,並使用新組態擴充此檢視。
findViewById<FoldableLayout>(R.id.surface_duo_layout)
.newConfigCreator()
.singleScreenLayoutId(R.layout.single_screen)
.dualScreenStartLayoutId(R.layout.dual_screen_start)
.dualScreenEndLayoutId(R.layout.dual_screen_end)
.reInflate()
更新 FoldableLayout 設定
下列程式碼會使用選取的屬性來更新目前組態,並擴充檢視:
findViewById<FoldableLayout>(R.id.surface_duo_layout)
.updateConfigCreator()
.dualScreenStartLayoutId(R.layout.dual_screen_start)
.reInflate()
如何使用版面配置元件
若要建立應用程式,您可使用「活動」或「具有片段的活動」來處理 UI。 片段也可以在版面配置資源檔中宣告,或者直接在活動中建立。 我們稍後會討論元件處理這些情況的方式。
使用活動
在此,我們只會使用活動來處理 UI,以觀察元件的運作方式。
首先,您必須將
FoldableLayout
新增至活動的 *.xml 檔案。<com.microsoft.device.dualscreen.layouts.FoldableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/enlightened_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:animateLayoutChanges="true" app:single_screen_layout_id="@layout/single_screen_layout" app:dual_screen_start_layout_id="@layout/single_screen_layout" app:dual_screen_end_layout_id="@layout/dual_screen_end_layout"/>
接著,針對不同的螢幕模式建立三種版面配置。
將您的配置連結至您的活動。
使用資源檔中宣告的片段
在此,我們可查看元件如何與 *.xml 檔案中宣告的片段搭配運作。
首先,您必須將
FoldableLayout
新增至活動的 *.xml 檔案。<com.microsoft.device.dualscreen.layouts.FoldableLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" app:single_screen_layout_id="@layout/single_screen_layout" app:dual_screen_start_layout_id="@layout/dual_screen_start_layout" app:dual_screen_end_layout_id="@layout/dual_screen_end_layout" />
接下來,您會將片段宣告為 singlescreenlayout.xml、dualscreenstartlayout.xml 和 dualscreenendlayout.xml 檔案。
<fragment xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/single_list" android:layout_width="match_parent" android:layout_height="match_parent" android:name="com.microsoft.device.display.samples.contentcontext.MapPointListFragment" />
將您的配置連結至您的活動。
使用在活動中建立的片段
最後,我們將瞭解元件如何使用 新增 getSupportFragmentManager().beginTransaction()
的片段。
首先,您必須將
FoldableLayout
新增至活動的 *.xml 檔案。<com.microsoft.device.dualscreen.layouts.FoldableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" />
這會建立檢視的容器,但不會有任何內容擴大。
您可使用識別碼來存取
FoldableLayout
的容器:first_container_id
second_container_id
接下來,請造訪片段管理員狀態處理常式程式庫,因為片段在處理螢幕模式轉換時需要特別小心。
檢視系結
重要
請使用 findViewById ,如下列程式碼片段所示。 請勿嘗試使用 Google View 系結。
FoldableLayout
因為內容在視窗配置有可用的資訊時 WindowManager
會擴大,所以您無法擷取子實例並使用它。
若要系結子檢視,首先您必須確定 FoldableLayout
內容已準備好使用。
因此,您應該使用下列方法:
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private val contentChangedListener = object : FoldableLayout.ContentChangedListener {
override fun contentChanged(screenMode: ScreenMode?) {
// Here, you can retrieve the child instance
val child = binding.foldableLayout.findViewById<View>(R.id.child_view)
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
}
override fun onResume() {
super.onResume()
binding.foldableLayout.addContentChangedListener(contentChangedListener)
}
override fun onPause() {
super.onPause()
binding.foldableLayout.removeContentChangedListener(contentChangedListener)
}
}
其中:
FoldableLayout.ContentChangedListener
是在內容擴大之後所呼叫的FoldableLayout
回呼。FoldableLayout.addContentChangedListener
將會註冊指定的FoldableLayout.ContentChangedListener
回呼。foldableLayout.removeContentChangedListener
將會取消註冊指定的FoldableLayout.ContentChangedListener
回呼。
重要
您必須從 Activity
或 Fragment
在 onResume
和 onPause
方法內新增此程式碼,以避免記憶體流失。