Layout piegabile

Importante

Questi articolo descrive le funzionalità e il materiale sussidiario disponibili nell'anteprima pubblica, che potrebbero tuttavia subire modifiche sostanziali prima del rilascio della versione disponibile a livello generale. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.

Importante

Il contenuto di questa visualizzazione sarà disponibile solo dopo che la visualizzazione radice attività è collegata alla finestra. Ciò si verifica perché l'implementazione è basata sulla libreria di Window Manager e Window Manager funziona solo quando la visualizzazione è collegata alla finestra.

Il FoldableLayout componente è un layout personalizzato in grado di posizionare gli elementi figlio in modo diverso quando l'applicazione viene eseguita su dispositivi piegabili. Il componente può dividere lo schermo in due aree a seconda della posizione e dell'orientamento della caratteristica di riduzione. Quando lo schermo è diviso, può contenere due contenitori figlio affiancati o uno sopra l'altro.

Layout a schermo singolo	Layout a doppio schermo

Attributi XML

• single_screen_layout_id: riceve l'ID del layout da visualizzare in modalità schermo singolo.
• dual_screen_start_layout_id: riceve l'ID del layout da visualizzare nel contenitore di avvio della modalità doppio schermo.
• dual_screen_end_layout_id: riceve l'ID del layout da visualizzare nel contenitore di avvio della modalità doppio schermo.

Ha FoldableLayout anche la possibilità di creare un singolo contenitore quando l'applicazione è in esecuzione in un dispositivo piegabile.

Sono stati aggiunti quattro nuovi attributi che consentiranno di creare l'interfaccia utente desiderata:

• dual_portrait_single_layout_id: riceve l'ID del layout per il contenitore singolo in modalità doppia verticale.
• is_dual_portrait_single_container: crea un contenitore singolo vuoto in modalità doppia verticale.
• dual_landscape_single_layout_id: riceve l'ID del layout per il contenitore singolo in modalità doppia orizzontale.
• is_dual_landscape_single_container: crea un contenitore singolo vuoto in modalità doppia orizzontale.

Supporto per smallestScreenSize

Quando un'attività passa a una nuova modalità schermo, ma non viene ricreata perché il flag smallestScreenSize è impostato nel file manifesto, il layout rileverà la nuova configurazione e ridimensiona automaticamente i contenitori o aggiunge o rimuove il secondo contenitore a seconda della configurazione di FoldableLayout.

Anteprima di Android Studio

• tools_hinge_color: selezionare il colore della cerniera nell'anteprima del layout.
• tools_screen_mode: selezionare la modalità schermo nell'anteprima del layout.

Se si aggiungono frammenti all'interno di file XML a FoldableLayout, saranno necessari gli attributi seguenti per visualizzare in anteprima l'interfaccia utente del frammento:

• 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 dei contenitori

I contenitori hanno gli ID seguenti:

• first_container_id
• second_container_id

Indipendentemente dall'orientamento dello schermo o dal comportamento speciale impostato sul layout, se nel layout verrà visualizzato un solo contenitore il relativo ID sarà first_container_id. Se verranno visualizzati due contenitori, sarà presente anche second_container_id.

Ad esempio:

• Se l'applicazione è in modalità schermo singolo, l'ID del contenitore sarà first_container_id.
• Se viene eseguita una transizione alla modalità doppia verticale ed è impostato dual_portrait_single_layout_id o is_dual_portrait_single_container, sarà presente un solo contenitore in modalità doppio schermo e il relativo ID sarà sempre first_container_id.
• Quando si esegue una transizione alla modalità doppia orizzontale ma non sono impostati gli attributi dual_landscape_single_layout_id e is_dual_landscape_single_container, saranno presenti entrambi i contenitori con gli ID first_container_id e second_container_id.

Creare FoldableLayout nel codice

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

Sostituire la configurazione di FoldableLayout

Il codice seguente eliminerà la configurazione precedente, la sostituirà con una nuova configurazione con la quale verrà riempita la visualizzazione.

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

Aggiornare la configurazione di FoldableLayout

Il codice seguente aggiornerà la configurazione corrente con gli attributi selezionati con i quali verrà riempita la visualizzazione:

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

Come usare i componenti di layout

Per creare un'applicazione, è possibile usare un'attività o un'attività con frammenti per gestire l'interfaccia utente. I frammenti possono anche essere dichiarati in un file di risorse di layout oppure possono essere creati direttamente in un'attività. Più avanti verrà descritto come vengono gestiti questi casi dai componenti.

Uso di un'attività

Vediamo il funzionamento dei componenti usando solo un'attività per la gestione dell'interfaccia utente.

1. Prima di tutto, è necessario aggiungere FoldableLayout al file *.xml dell'attività.

   <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. Quindi, creare i tre layout per le diverse modalità dello schermo.

3. Collegare il layout all'attività.

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

Uso dei frammenti dichiarati nei file di risorse

Vediamo il funzionamento dei componenti con frammenti dichiarati nei file *.xml.

1. Prima di tutto, è necessario aggiungere FoldableLayout al file *.xml dell'attività.

   <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. Successivamente, dichiarare i frammenti nei file 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. Collegare il layout all'attività.

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

Uso dei frammenti creati in un'attività

Infine, si vedrà come funzionano i componenti con frammenti aggiunti usando getSupportFragmentManager().beginTransaction().

1. Prima di tutto, è necessario aggiungere FoldableLayout al file *.xml dell'attività.

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

   In questo modo vengono creati i contenitori per le visualizzazioni, ma non sono presenti elementi ingranditi.

2. È possibile accedere ai contenitori di FoldableLayout usando i rispettivi ID:

   • first_container_id
   • second_container_id

3. Visitare quindi la libreria del gestore dello stato di gestione dei frammenti poiché durante le transizioni della modalità schermo i frammenti richiedono particolare attenzione.

Visualizza binding

Importante

Usare findViewById come illustrato nei frammenti di codice seguenti. Non tentare di usare Il binding di Google View.

Poiché il FoldableLayout contenuto viene gonfiato quando WindowManager sono disponibili informazioni sul layout della finestra, non è possibile recuperare l'istanza figlio e usarla. Per associare la visualizzazione figlio, è innanzitutto necessario assicurarsi che il contenuto sia pronto per l'uso FoldableLayout . A tale scopo, è consigliabile usare i metodi seguenti:

Kotlin

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

Java

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

dove:

• FoldableLayout.ContentChangedListener è il callback che verrà chiamato dopo l'aumento del FoldableLayout contenuto.

• FoldableLayout.addContentChangedListener registrerà il callback specificato FoldableLayout.ContentChangedListener .

• foldableLayout.removeContentChangedListener annulla la registrazione del callback specificato FoldableLayout.ContentChangedListener .

Importante

È necessario aggiungere questo codice all'interno dei onResume metodi e onPause da Activity o Fragment per evitare perdite di memoria.