Disposition pliable

Le composant FoldableLayout est une disposition personnalisée qui peut positionner ses enfants différemment lorsque l’application s’exécute sur des appareils pliables. Le composant peut diviser l’écran en deux, en fonction de la position et de l’orientation de la fonctionnalité de pliage. Lorsque l’écran est divisé, il peut comprendre deux conteneurs enfants, côte à côte ou l’un au-dessus de l’autre.

Disposition sur un seul écran	Disposition sur deux écrans

Attributs XML

• single_screen_layout_id : reçoit l’ID de disposition à afficher en mode d’écran unique.
• dual_screen_start_layout_id : reçoit l’ID de disposition à afficher dans le premier conteneur du mode double écran.
• dual_screen_end_layout_id : reçoit l’ID de disposition à afficher dans le premier conteneur du mode double écran.

FoldableLayout a également la possibilité de créer un conteneur lorsque l’application s’exécute sur un appareil pliable.

Nous avons ajouté quatre nouveaux attributs qui vous aideront à créer l’interface utilisateur de votre choix :

• dual_portrait_single_layout_id : reçoit l’ID de disposition pour le conteneur unique en mode double écran portrait.
• is_dual_portrait_single_container : crée un conteneur unique en mode double écran portrait vide.
• dual_landscape_single_layout_id : reçoit l’ID de disposition pour le conteneur unique en mode double écran paysage.
• is_dual_landscape_single_container : crée un conteneur unique en mode double écran paysage vide.

Prise en charge de smallestScreenSize

Lorsqu’une activité passe à un nouveau mode d’écran, mais qu’elle n’est pas recréée parce que l’indicateur smallestScreenSize est défini dans le fichier manifeste, la disposition détecte la nouvelle configuration et redimensionne automatiquement les conteneurs, ou même ajoute ou supprime le second conteneur en fonction de la configuration FoldableLayout.

Préversion d’Android Studio

• tools_hinge_color : sélection de la couleur de la charnière dans l’aperçu de la disposition.
• tools_screen_mode : sélection du mode d’écran dans l’aperçu de la disposition.

Si vous ajoutez des fragments dans des fichiers xml à FoldableLayout, vous aurez besoin des attributs suivants pour afficher un aperçu de l’interface utilisateur des fragments :

• 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 des conteneurs

Les conteneurs ont les ID suivants :

• first_container_id
• second_container_id

Peu importe l’orientation de l’écran ou le comportement spécial défini sur la disposition, si la disposition n’affiche qu’un seul conteneur, son ID est first_container_id. Si elle affiche deux conteneurs, il y aura également second_container_id.

Par exemple :

• Si l’application est en mode d’écran unique, l’ID de conteneur sera first_container_id.
• Si une transition vers le mode double écran portrait est effectuée et que l’attribut dual_portrait_single_layout_id ou is_dual_portrait_single_container est défini, il n’y aura qu’un seul conteneur en mode double écran et son ID sera toujours first_container_id.
• Quand une transition vers le mode double écran paysage est effectuée, mais que les attributs dual_landscape_single_layout_id et is_dual_landscape_single_container ne sont pas définis, les deux conteneurs avec les ID first_container_id et second_container_id seront présents.

Créer FoldableLayout dans du code

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

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

Remplacer la configuration de FoldableLayout

Le code ci-dessous ignore l’ancienne configuration, la remplace par une nouvelle et augmente la vue avec la nouvelle configuration.

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

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

Mettre à jour la configuration de FoldableLayout

Le code ci-dessous met à jour la configuration actuelle avec les attributs sélectionnés et augmente la vue :

findViewById<FoldableLayout>(R.id.surface_duo_layout)
    .updateConfigCreator()
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .reInflate()

((FoldableLayout) findViewById(R.id.surface_duo_layout))
    .updateConfigCreator()
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .reInflate();

Comment utiliser les composants de la disposition

Pour créer une application, vous pouvez utiliser une activité ou une activité avec fragments pour gérer l’interface utilisateur. Les fragments peuvent également être déclarés dans un fichier de ressources de disposition ou peuvent être créés directement dans une activité. Nous parlerons de la façon dont les composants gèrent ces cas ultérieurement.

Utilisation d’une activité

Ici, nous examinons le fonctionnement des composants en utilisant une seule activité pour gérer l’interface utilisateur.

1. Tout d’abord, vous devez ajouter FoldableLayout au fichier *.xml de l’activité.

   <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. Ensuite, créez les trois dispositions pour les différents modes d’écran.

3. Liez votre disposition à votre activité.

   • Kotlin
   • Java

   class MainActivity : AppCompatActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContentView(R.layout.activity_main)
       }
   }
   

Utilisation de fragments déclarés dans des fichiers de ressources

Ici, nous voyons comment les composants fonctionnent avec les fragments qui sont déclarés dans les fichiers * xml.

1. Tout d’abord, vous devez ajouter FoldableLayout au fichier *.xml de l’activité.

   <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. Ensuite, vous déclarez vos fragments dans les fichiers singlescreenlayout.xml, dualscreenstartlayout.xml et 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. Liez votre disposition à votre activité.

   • Kotlin
   • Java

   class MainActivity : AppCompatActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContentView(R.layout.activity_main)
       }
   }
   

Utilisation de fragments créés dans une activité

Enfin, nous allons voir comment les composants fonctionnent avec les fragments qui sont ajoutés avec getSupportFragmentManager().beginTransaction().

1. Tout d’abord, vous devez ajouter FoldableLayout au fichier *.xml de l’activité.

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

   Ceci crée les conteneurs pour les vues, mais rien n’y sera développé.

2. Vous pouvez avoir accès aux conteneurs de FoldableLayout en utilisant leur ID :

   • first_container_id
   • second_container_id

3. Consultez ensuite la bibliothèque du gestionnaire d’état du gestionnaire de fragments, car les fragments nécessitent une attention particulière quand il s’agit de changements du mode d’écran.

View Binding

Étant donné que le contenu de FoldableLayout gonfle quand WindowManager a des informations disponibles sur la disposition de la fenêtre, vous ne pouvez pas récupérer l’instance enfant et l’utiliser. Pour lier la vue enfant, vous devez d’abord être sûr que le contenu de FoldableLayout est prêt à être utilisé. Pour cela, vous devez utiliser les méthodes suivantes :

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

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

où :

• FoldableLayout.ContentChangedListener est le rappel qui sera appelé une fois que le contenu de FoldableLayout aura gonflé.

• FoldableLayout.addContentChangedListener inscrit le rappel FoldableLayout.ContentChangedListener donné.

• foldableLayout.removeContentChangedListener désinscrit le rappel FoldableLayout.ContentChangedListener donné.