Layout dobrável

Importante

Este artigo descreve funcionalidades e diretrizes que estão em versão prévia pública e podem ser modificadas substancialmente antes de passarem para a disponibilidade geral. A Microsoft não faz nenhuma garantia, expressa ou implícita, com relação às informações fornecidas aqui.

Importante

O conteúdo dessa exibição ficará disponível somente depois que a exibição raiz da Atividade for anexada à janela. Isso acontece porque a implementação é baseada na biblioteca do Gerenciador de Janelas, e ele funciona somente quando a exibição está anexada à janela.

O componente FoldableLayout é um layout personalizado que pode posicionar seus filhos de maneira diferente quando o aplicativo é executado em dispositivos dobráveis. O componente pode dividir a tela em duas áreas, dependendo da posição e da orientação do recurso de dobramento. Quando é dividida, a tela pode conter dois contêineres filho lado a lado ou um acima do outro.

Layout de tela única	Layout de tela dupla

Atributos XML

• single_screen_layout_id – Recebe a ID de layout a ser exibida no modo de tela única.
• dual_screen_start_layout_id – Recebe a ID de layout a ser exibida no contêiner inicial do modo de tela dupla.
• dual_screen_end_layout_id – Recebe a ID de layout a ser exibida no contêiner inicial do modo de tela dupla.

O FoldableLayout também tem a capacidade de criar um só contêiner quando o aplicativo está em execução em um dispositivo dobrável.

Adicionamos quatro novos atributos que ajudam a criar a interface do usuário desejada:

• dual_portrait_single_layout_id – Recebe a ID de layout do contêiner único de retrato duplo.
• is_dual_portrait_single_container – Cria um contêiner único vazio de retrato duplo.
• dual_landscape_single_layout_id – Recebe a ID de layout do contêiner único de paisagem dupla.
• is_dual_landscape_single_container – Cria um contêiner único vazio de paisagem duplicada.

Compatibilidade com smallestScreenSize

Quando uma atividade faz a transição para um novo modo de tela, mas não é recriada porque o sinalizador smallestScreenSize está definido no arquivo de manifesto, o layout detecta a nova configuração e redimensiona automaticamente os contêineres ou até mesmo adiciona ou remove o segundo contêiner de acordo com a configuração de FoldableLayout.

Visualização do Android Studio

• tools_hinge_color – Seleciona a cor da dobradiça na visualização do layout.
• tools_screen_mode – Seleciona o modo de tela na visualização do layout.

Se você adicionar fragmentos em arquivos XML a Fragmento, precisará dos seguintes atributos para visualizar a interface do usuário do fragmento:

• 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

IDs de contêiner

Os contêineres têm as IDs:

• first_container_id
• second_container_id

Independentemente da orientação da tela ou do comportamento especial definido para o layout, se o layout mostrar somente um contêiner, a ID dele será first_container_id. Se mostrar dois contêineres, também será second_container_id.

Por exemplo:

• Se o aplicativo estiver no modo de tela única, a ID do contêiner será first_container_id.
• Se uma transição para o modo de tela dupla em retrato duplo for concluída e dual_portrait_single_layout_id ou is_dual_portrait_single_container estiverem definidos, haverá somente um contêiner no modo de tela dupla e a ID dele ainda será first_container_id.
• Quando uma transição para paisagem dupla for concluída, mas você não tiver os atributos dual_landscape_single_layout_id e is_dual_landscape_single_container definidos, ambos os contêineres com as IDs first_container_id e second_container_id estarão presentes.

Criar FoldableLayout no código

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

Substituir a configuração de FoldableLayout

O código a seguir descartará a configuração antiga, substituirá por uma nova e aumentará a exibição com a nova configuração.

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

Atualizar a configuração de FoldableLayout

O seguinte código atualizará a configuração atual com os atributos selecionados e aumentará a exibição:

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

Como usar os componentes de layout

Para criar um aplicativo, você pode usar uma Atividade ou uma Atividade com Fragmentos para tratar da interface do usuário. Os Fragmentos também podem ser declarados em um arquivo de recurso de layout ou criados diretamente em uma Atividade. Vamos discutir como os componentes tratam desses casos mais tarde.

Usando uma Atividade

Aqui, veremos como os componentes trabalham usando apenas uma Atividade para tratar da interface do usuário.

1. Primeiro, você precisa adicionar o FoldableLayout ao arquivo *.xml da Atividade.

   <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. Em seguida, crie os três layouts para os diferentes modos de tela.

3. Vincule seu layout à sua atividade.

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

Usando fragmentos declarados em arquivos de recurso

Aqui, podemos ver como os componentes funcionam com fragmentos declarados nos arquivos *.xml.

1. Primeiro, você precisa adicionar o FoldableLayout ao arquivo *.xml da Atividade.

   <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. Em seguida, declare seus fragmentos nos arquivos singlescreenlayout.xml, dualscreenstartlayout.xml e 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. Vincule seu layout à sua atividade.

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

Usando Fragmentos criados em uma Atividade

Por fim, veremos como os componentes funcionam com fragmentos adicionados usando getSupportFragmentManager().beginTransaction().​

1. Primeiro, você precisa adicionar o FoldableLayout ao arquivo *.xml da Atividade.

   <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" />
   

   Isso cria os contêineres para os modos de exibição, mas não haverá inflado neles.

2. Você poderá ter acesso aos contêineres do FoldableLayout usando suas IDs:

   • first_container_id
   • second_container_id

3. Em seguida, acesse a biblioteca do manipulador de estado do gerenciador de fragmentos, porque os fragmentos precisam de atenção especial ao lidar com transições de modo de tela.