폴더블 레이아웃

중요

이 문서에서 설명하는 기능 및 지침은 공개 미리 보기 상태이며 일반적으로 공급되기 전에 대대적으로 수정될 수 있습니다. Microsoft는 여기에 제공된 정보에 대해 명시적 또는 묵시적 보증을 하지 않습니다.

중요

이 보기의 내용은 Activity 루트 보기가 창에 연결된 후에만 사용할 수 있습니다. 이는 구현이 Window Manager 라이브러리를 기반으로 하고 보기가 창에 연결된 경우에만 Window Manager가 작동하기 때문에 발생합니다.

FoldableLayout 구성 요소는 애플리케이션이 폴더블 구성 요소에서 실행될 때 자식을 다르게 배치할 수 있는 사용자 지정 레이아웃입니다. 구성 요소는 접기 기능의 위치와 방향에 따라 화면을 두 영역으로 분할할 수 있습니다. 화면이 분할되면 두 개의 자식 컨테이너를 나란히 두거나 한 컨테이너를 다른 컨테이너 위에 둘 수 있습니다.

단일 화면 레이아웃	이중 화면 레이아웃

XML 특성

• single_screen_layout_id는 단일 화면 모드에 표시할 레이아웃 id를 수신합니다.
• dual_screen_start_layout_id는 이중 화면 모드의 시작 컨테이너에 표시할 레이아웃 id를 수신합니다.
• dual_screen_end_layout_id는 이중 화면 모드의 시작 컨테이너에 표시할 레이아웃 id를 수신합니다.

또한 FoldableLayout에는 애플리케이션이 폴더블 디바이스에서 실행될 때 단일 컨테이너를 만드는 기능이 있습니다.

원하는 UI를 만들 수 있도록 다음과 같은 네 가지 특성이 새로 추가되었습니다.

• dual_portrait_single_layout_id - 이중 세로 단일 컨테이너의 레이아웃 id를 수신합니다.
• is_dual_portrait_single_container - 빈 이중 세로 단일 컨테이너를 만듭니다.
• dual_landscape_single_layout_id - 이중 가로 단일 컨테이너의 레이아웃 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

컨테이너 ID

컨테이너에는 id가 있습니다.

• first_container_id
• second_container_id

레이아웃에 하나의 컨테이너만 표시되는 경우 레이아웃에 설정된 화면 방향이나 특수 동작에 상관없이 해당 id는 first_container_id입니다. 두 개의 컨테이너를 표시하는 경우 second_container_id도 있습니다.

예:

• 애플리케이션이 단일 화면 모드인 경우 컨테이너 id는 first_container_id입니다.
• 이중 세로에서 이중 화면 모드로 전환되고 dual_portrait_single_layout_id 또는 is_dual_portrait_single_container가 설정된 경우 이중 화면 모드에는 컨테이너가 하나만 있으며 해당 id는 여전히 first_container_id입니다.
• 이중 가로로 전환되었지만 dual_landscape_single_layout_id 및 is_dual_landscape_single_container 특성이 설정되지 않은 경우 id가 first_container_id 및 second_container_id인 컨테이너가 모두 표시됩니다.

코드에서 FoldableLayout 만들기

Kotlin

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

Java

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

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

Java

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

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

Java

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

레이아웃 구성 요소를 사용하는 방법

애플리케이션을 만들려면 활동 또는 조각이 있는 활동을 사용하여 UI를 처리할 수 있습니다. 조각은 레이아웃 리소스 파일에서 선언되거나 활동에서 직접 만들어질 수도 있습니다. 나중에 구성 요소에서 이러한 사례를 처리하는 방법에 대해 설명합니다.

활동 사용

여기서는 UI를 처리하는 활동만 사용하여 구성 요소가 작동하는 방법을 살펴봅니다.

1. 먼저 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"/>
   

2. 그런 다음, 다른 화면 모드에 대한 세 가지 레이아웃을 만듭니다.

3. 레이아웃을 작업에 연결합니다.

   Kotlin

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

   Java

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

리소스 파일에 선언된 조각 사용

여기서는 *.xml 파일에 선언된 조각에서 구성 요소가 작동하는 방법을 살펴봅니다.

1. 먼저 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" />
   

2. 다음으로, 조각을 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" />
   

3. 레이아웃을 작업에 연결합니다.

   Kotlin

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

   Java

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

활동에서 만든 조각 사용

마지막으로 getSupportFragmentManager().beginTransaction()을 사용하여 추가된 조각에서 구성 요소가 작동하는 방법을 살펴봅니다.

1. 먼저 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" />
   

   이렇게 하면 보기에 대한 컨테이너가 만들어지지만 아무 조각도 확장되지 않습니다.

2. 아래 ID를 사용하여 FoldableLayout의 컨테이너에 액세스할 수 있습니다.

   • first_container_id
   • second_container_id

3. 다음으로, 화면 모드 전환을 처리할 때 조각에 특히 주의를 기울여야 하므로 조각 관리자 상태 처리기 라이브러리를 방문하세요.