可折迭版面配置

發行項
07/10/2023

重要

本文說明 處於公開預覽 狀態的功能和指引，而且可能會在正式推出之前大幅修改。 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 的兩個容器。

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.Config config = new FoldableLayout.Config();
config.setSingleScreenLayoutId(R.layout.single_screen);
config.setDualScreenStartLayoutId(R.layout.dual_screen_start);
config.setDualScreenEndLayoutId(R.layout.dual_screen_end);
config.setDualLandscapeSingleLayoutId(R.layout.single_screen);

((FrameLayout) findViewById(R.id.parent)).addView(new FoldableLayout(this, config));

取代 FoldableLayout 設定

下列程式碼將捨棄舊組態、將其取代為新組態，並使用新組態擴充此檢視。

Kotlin
Java

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(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 設定

下列程式碼會使用選取的屬性來更新目前組態，並擴充檢視：

Kotlin
Java

findViewById<FoldableLayout>(R.id.surface_duo_layout)
    .updateConfigCreator()
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .reInflate()

((FoldableLayout) findViewById(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"/>

接著，針對不同的螢幕模式建立三種版面配置。

將您的配置連結至您的活動。

Kotlin
Java

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

使用資源檔中宣告的片段

在此，我們可查看元件如何與 *.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" />

將您的配置連結至您的活動。

Kotlin
Java

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

使用在活動中建立的片段

最後，我們將瞭解元件如何使用新增 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 內容已準備好使用。因此，您應該使用下列方法：

Kotlin
Java

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)
    }
}

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding binding;

    private final FoldableLayout.ContentChangedListener contentChangedListener = new FoldableLayout.ContentChangedListener() {
        @Override
        public void contentChanged(@Nullable ScreenMode screenMode) {
            // Here, you can retrieve the child instance
            View child = binding.foldableLayout.findViewById(R.id.child_view);
        }
    };

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
    }

    @Override
    public void onResume() {
        super.onResume();
        binding.foldableLayout.addContentChangedListener(contentChangedListener);
    }

    @Override
    public void onPause() {
        super.onPause();
        binding.foldableLayout.removeContentChangedListener(contentChangedListener);
    }
}

其中：

FoldableLayout.ContentChangedListener 是在內容擴大之後所呼叫的 FoldableLayout 回呼。
FoldableLayout.addContentChangedListener 將會註冊指定的 FoldableLayout.ContentChangedListener 回呼。
foldableLayout.removeContentChangedListener 將會取消註冊指定的 FoldableLayout.ContentChangedListener 回呼。

重要

您必須從 Activity 或 Fragment 在 onResume 和 onPause 方法內新增此程式碼，以避免記憶體流失。

共用方式為

可折迭版面配置

XML 屬性

smallestScreenSize 支援

Android Studio 預覽

容器識別碼

在程式碼中建立 FoldableLayout

取代 FoldableLayout 設定

更新 FoldableLayout 設定

如何使用版面配置元件

使用活動

使用資源檔中宣告的片段

使用在活動中建立的片段

檢視系結

其他資源