Recursos de tela dupla e dobrável do SlidingPaneLayout

  • Artigo

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.

Four Android tablets showing the SlidingPaneLayout sample in different states: split screen landscape, split screen portrait, full screen left pane, and full screen right pane

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.

Seven Surface Duo devices showing the SlidingPaneLayout sample in different states

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

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 LinearLayout 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 spanned across both screens of a 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