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
ois_dual_portrait_single_container
, sarà presente un solo contenitore in modalità doppio schermo e il relativo ID sarà semprefirst_container_id
. - Quando si esegue una transizione alla modalità doppia orizzontale ma non sono impostati gli attributi
dual_landscape_single_layout_id
eis_dual_landscape_single_container
, saranno presenti entrambi i contenitori con gli IDfirst_container_id
esecond_container_id
.
Creare FoldableLayout nel codice
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
})
)
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.
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()
Aggiornare la configurazione di FoldableLayout
Il codice seguente aggiornerà la configurazione corrente con gli attributi selezionati con i quali verrà riempita la visualizzazione:
findViewById<FoldableLayout>(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.
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"/>
Quindi, creare i tre layout per le diverse modalità dello schermo.
Collegare il layout all'attività.
Uso dei frammenti dichiarati nei file di risorse
Vediamo il funzionamento dei componenti con frammenti dichiarati nei file *.xml.
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" />
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" />
Collegare il layout all'attività.
Uso dei frammenti creati in un'attività
Infine, si vedrà come funzionano i componenti con frammenti aggiunti usando getSupportFragmentManager().beginTransaction()
.
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.
È possibile accedere ai contenitori di
FoldableLayout
usando i rispettivi ID:first_container_id
second_container_id
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:
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)
}
}
dove:
FoldableLayout.ContentChangedListener
è il callback che verrà chiamato dopo l'aumento delFoldableLayout
contenuto.FoldableLayout.addContentChangedListener
registrerà il callback specificatoFoldableLayout.ContentChangedListener
.foldableLayout.removeContentChangedListener
annulla la registrazione del callback specificatoFoldableLayout.ContentChangedListener
.
Importante
È necessario aggiungere questo codice all'interno dei onResume
metodi e onPause
da Activity
o Fragment
per evitare perdite di memoria.