Recursos de tela dupla e dobrável do SlidingPaneLayout

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.

O SlidingPaneLayout é um controle que usa o Gerenciador de Janelas do Jetpack para se adaptar a dispositivos com tela dupla e dobráveis. Ele poderá apresentar dois painéis lado a lado (se houver espaço), caso contrário, somente o primeiro painel será exibido e o segundo poderá ser revelado pelo usuário (deslizando da lateral) ou programaticamente. Ele se adapta a dispositivos com tela dupla e dobrável alinhando os painéis nos dois lados da dobradiça ou da dobra.

Os dispositivos de tela única, incluindo os tablets, mostrarão os dois painéis se a largura do conteúdo em cada um couber lado a lado na tela. Se o conteúdo do painel for muito largo, o primeiro painel será mostrado em tela inteira e o segundo painel poderá ser exibido programaticamente ou com deslize.

Quatro tablets Android mostrando o exemplo do SlidingPaneLayout em estados diferentes: paisagem de tela dividida, retrato de tela dividida, painel esquerdo em tela inteira e painel direito em tela inteira

No Surface Duo, em tela única, o controle se comporta como em qualquer outro dispositivo, em que os painéis ficam lado a lado quando cabem e são mostrados sozinhos quando não cabem. Quando o aplicativo for ampliado, o SlidingPaneLayout colocará automaticamente cada painel em uma tela, em qualquer lado da dobradiça. No modo de paisagem duplicada, o SlidingPaneLayout não altera o layout e se comporta como uma só tela alta. Nesse cenário, os painéis individuais devem ter rolagem ou garantir que o conteúdo não fique oculto.

Sete dispositivos Surface Duo mostrando o exemplo do SlidingPaneLayout em estados diferentes

Adicionar dependências

Para usar o SlidingPaneLayout no seu projeto, atualize o arquivo build.gradle.

  1. Verifique se o projeto está sendo compilado com o nível da API 31:

    compileSdk 31
    
  2. Adicione estas dependências para que possamos acessar as APIs necessárias:

    dependencies {
       implementation "androidx.slidingpanelayout:slidingpanelayout:1.2.0-beta01"
    }
    

O SlidingPaneLayout na sua interface do usuário

Este snippet XML pode ser usado para adicionar o SlidingPaneLayout a uma exibição. Ele deve ser o elemento raiz (ou de nível superior) na tela:

<androidx.slidingpanelayout.widget.SlidingPaneLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/sliding_pane_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
      <!-- first child -->
      <!-- second child -->
</androidx.slidingpanelayout.widget.SlidingPaneLayout>

O XML abaixo (deste exemplo) mostra um sendo usado no primeiro painel e uma FragmentContainerView no segundo painel:

<androidx.slidingpanelayout.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sliding_pane_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:id="@+id/side_pane_content"
        android:layout_width="400dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/holo_orange_dark"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:text="Side Pane"
            android:textSize="30sp"
            android:textStyle="bold" />
        <!-- other elements removed for clarity-->
    </LinearLayout>
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/detail_container"
        android:name="com.cesarvaliente.slidingpanelayout_sample.ContentPaneFragment"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/holo_red_dark" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>

Esta captura de tela mostra como o XML acima funciona no Surface Duo quando o aplicativo é ampliado:

SlidingPaneLayout ampliado nas duas telas de um Surface Duo

Em um dispositivo de tela única (seja um telefone ou um tablet), os dois painéis são posicionados de acordo com as regras de tamanho do SlidingPaneLayout: se os dois couberem na exibição de acordo com as larguras necessárias, eles ficarão lado a lado. Se eles não couberem na exibição, o primeiro painel será mostrado e o segundo painel poderá ser mostrado programaticamente ou arrastado para a exibição (a menos que isso seja bloqueado programaticamente).

Exemplos

O código nesta página pertence a este aplicativo de demonstração do SlidingPaneLayout.

Os aplicativos eBook Reader, TwoDo e TravelPlanner na página de exemplos usam o SlidingPaneLayout para criar exemplos reais de interface do usuário.

O Google também atualizou o exemplo do Trackr com o SlidingPaneLayout para oferecer uma experiência do usuário adaptável de tela única, dupla, dobrável e grande.

Referência