Surface Duo-LayoutSurface Duo Layout

Wichtig

In diesem Artikel werden Funktionen und Anleitungen beschrieben, die sich in der öffentlichen Vorschau befinden und vor der allgemeinen Verfügbarkeit noch wesentlich geändert werden können.This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft übernimmt keine Garantie, weder ausdrücklich noch stillschweigend, für die hier bereitgestellten Informationen.Microsoft makes no warranties, express or implied, with respect to the information provided here.

Die SurfaceDuoLayout-Komponente ist ein benutzerdefiniertes Layout, das zum Anzeigen von Ansichten dient, wenn sich das Gerät im Einzelbildschirmmodus oder im Doppelbildschirmmodus befindet.The SurfaceDuoLayout component is a custom layout built to display Views when the device is in single screen mode or dual screen mode. Sie funktioniert wie ein Satz von zwei Containern im übergreifenden Modus und wie ein Container im Einzelbildschirmmodus.It works like a set of two containers in spanned mode and one container in single-screen mode.

EinzelbildschirmlayoutSingle-screen layout Dual-Screen-LayoutDual-screen layout
App auf einem einzelnen Bildschirm im Querformat-Modus (Wide) App übergreifend auf zwei Bildschirmen im Querformat-Modus (Wide)
App auf einem einzelnen Bildschirm im Hochformat-Modus (Tall) App übergreifend auf zwei Bildschirmen im Hochformat-Modus (Tall)

XML-AttributeXML Attributes

  • single_screen_layout_id: Empfängt die Layout-ID, die im Einzelbildmodus angezeigt werden soll.single_screen_layout_id - Receives the layout id to be displayed in single screen mode.
  • dual_screen_start_layout_id: Empfängt die Layout-ID, die im Startcontainer des Doppelbildschirmmodus angezeigt werden soll.dual_screen_start_layout_id - Receives the layout id to be displayed in the start container of dual screen mode.
  • dual_screen_end_layout_id: Empfängt die Layout-ID, die im Startcontainer des Doppelbildschirmmodus angezeigt werden soll.dual_screen_end_layout_id - Receives the layout id to be displayed in the start container of dual screen mode.

Das SurfaceDuoLayout bietet die Funktion zum Erstellen eines einzelnen Containers für Doppel-Hochformat- und Doppel-Querformatmodi.The SurfaceDuoLayout has the ability to create a single container for dual portrait and dual landscape modes.

Wir haben vier neue Attribute hinzugefügt, die dir helfen, die gewünschte Benutzeroberfläche zu erstellen:We added four new attributes that will help you create the UI you want:

  • dual_portrait_single_layout_id: Empfängt die Layout-ID für den einzelnen Doppel-Hochformatcontainer.dual_portrait_single_layout_id - Receives the layout id for the dual portrait single container.
  • is_dual_portrait_single_container: Erstellt einen einzelnen leeren Doppel-Hochformatcontainer.is_dual_portrait_single_container - Creates an empty dual portrait single container.
  • dual_landscape_single_layout_id: Empfängt die Layout-ID für den einzelnen Doppel-Querformatcontainer.dual_landscape_single_layout_id - Receives the layout id for the dual landscape single container.
  • is_dual_landscape_single_container: Erstellt einen einzelnen leeren Doppel-Querformatcontainer.is_dual_landscape_single_container - Creates an empty dual landscape single container.

smallestScreenSize-UnterstützungsmallestScreenSize support

Wenn eine Aktivität in einen neuen Bildschirmmodus übergeht, aber nicht neu erstellt wird, weil in der Manifestdatei das Flag smallestScreenSize gesetzt ist, erkennt das Layout die neue Konfiguration und ändert automatisch die Größe der Container oder fügt sogar abhängig von der SurfaceDuoLayout-Konfiguration den zweiten Container hinzu bzw. entfernt diesen.When an Activity transitions to a new screen mode but it is not recreated because flag smallestScreenSize is set in the Manifest file, the layout will detect the new configuration and automatically resize the containers or even add or remove the second container depending on the SurfaceDuoLayout configuration.

Android Studio-VorschauAndroid Studio preview

  • tools_hinge_color: Auswählen der Scharnierfarbe in der Layoutvorschau.tools_hinge_color - Select hinge color in layout preview.
  • tools_screen_mode: Auswählen des Bildschirmmodus in der Layoutvorschau.tools_screen_mode - Select screen mode in layout preview.

Wenn du SurfaceDuoLayout Fragmente innerhalb von XML-Dateien hinzufügst, benötigst du die folgenden Attribute, um eine Vorschau der Fragmentbenutzeroberfläche auszuführen:If you add fragments inside xml files to SurfaceDuoLayout, you will need the following attributes to preview the fragment UI:

  • 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

Container-IDsContainer IDs

Die Container verfügen über die folgenden IDs:The containers have the ids:

  • first_container_id
  • second_container_id

Unabhängig von der Bildschirmausrichtung oder dem für das Layout festgelegten Sonderverhalten, wenn das Layout nur einen Container darstellt, lautet dessen ID first_container_id.No matter the screen orientation or special behaviour set to the layout, if the layout will show only one container, its id will be first_container_id. Werden zwei Container dargestellt, gibt es außerdem second_container_id.If it will show two container there will also be second_container_id.

Beispiel:For example:

  • Wenn sich die Anwendung im Einzelbildschirmmodus befindet, lautet die Container-ID first_container_id.If the application is in single screen mode the container id will be first_container_id.
  • Wenn ein Wechsel zum Doppelbildschirmmodus im Doppel-Hochformat erfolgt und wir dual_portrait_single_layout_id oder is_dual_portrait_single_container festgelegt haben, gibt es nur einen Container im Doppelbildschirmmodus, und dessen ID lautet immer noch first_container_id.If a transition to dual screen mode in dual portrait is done and we have dual_portrait_single_layout_id or is_dual_portrait_single_container set then there will be only one container in dual screen mode and its id will still be first_container_id.
  • Wenn ein Wechsel zum Doppel-Querformat erfolgt, die Attribute dual_landscape_single_layout_id und is_dual_landscape_single_container aber nicht festgelegt sind, sind beide Container mit den IDs first_container_id und second_container_id vorhanden.When a transition to dual landscape is done but we don't have the attributes dual_landscape_single_layout_id and is_dual_landscape_single_container set, then both containers with the ids first_container_id and second_container_id will be present.

Erstellen von SurfaceDuoLayout in CodeCreate SurfaceDuoLayout in code

findViewById<FrameLayout>(R.id.parent).addView(
    SurfaceDuoLayout(this, SurfaceDuoLayout.Config().apply {
        singleScreenLayoutId = R.layout.single_screen
        dualScreenStartLayoutId = R.layout.dual_screen_start
        dualScreenEndLayoutId = R.layout.dual_screen_end
        dualLandscapeSingleLayoutId = R.layout.single_screen
    })
)

Ersetzen der SurfaceDuoLayout-KonfigurationReplace SurfaceDuoLayout configuration

Im folgenden Code wird die alte Konfiguration verworfen, durch eine neue ersetzt und die Ansicht mit der neuen Konfiguration vergrößert.The code below will discard the old configuration, replace it with a new one and inflate the view with the new configuration.

findViewById<SurfaceDuoLayout>(R.id.surface_duo_layout)
    .newConfigCreator()
    .singleScreenLayoutId(R.layout.single_screen)
    .dualScreenStartLayoutId(R.layout.dual_screen_start)
    .dualScreenEndLayoutId(R.layout.dual_screen_end)
    .reInflate()

Aktualisieren der SurfaceDuoLayout-KonfigurationUpdate SurfaceDuoLayout configuration

Mit dem Code unten wird die aktuelle Konfiguration mit den ausgewählten Attributen aktualisiert und die Ansicht vergrößert:The code below will update the current configuration with the selected attributes and inflate the view:

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

Verwenden der LayoutkomponentenHow to use the layout components

Zum Erstellen einer Anwendung kannst du entweder eine Aktivität oder eine Aktivität mit Fragmenten verwenden, um die Benutzeroberfläche zu verarbeiten.To create an application, you can either use an Activity or an Activity with Fragments to handle the UI. Die Fragmente können auch in einer Layoutressourcendatei deklariert oder direkt in einer Aktivität erstellt werden.The Fragments can also be declared in a layout resource file or can be directly created in an Activity. Wir sprechen später noch darüber, wie die Komponenten diese Fälle verarbeiten.We'll talk about how the components handle these cases later.

Prozessdiagramm

Verwenden einer AktivitätUsing an Activity

Hier sehen wir, wie die Komponenten funktionieren, indem Sie nur eine Aktivität zum Verarbeiten der Benutzeroberfläche verwenden.Here, we look at how the components work by using just an Activity to handle the UI.

  1. Zunächst musst du der *.xml-Datei der Aktivität das SurfaceDuoLayout hinzufügen.First, you have to add the SurfaceDuoLayout to the *.xml file of the Activity.

    <com.microsoft.device.dualscreen.layouts.SurfaceDuoLayout
        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. Erstelle dann die drei Layouts für die verschiedenen Bildschirmmodi.Then, create the three layouts for the different screen modes.

  3. Verknüpfe dein Layout mit deiner Aktivität.Link your layout to your activity.

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

Verwenden von in einer Ressourcendatei deklarierten FragmentenUsing Fragments declared in a resource file

Hier sehen wir, wie die Komponenten mit Fragmenten funktionieren, die in den *.xml-Dateien deklariert werden.Here, we see how the components work with fragments that are declared in the *.xml files.

  1. Zunächst musst du der *.xml-Datei der Aktivität das SurfaceDuoLayout hinzufügen.First, you have to add the SurfaceDuoLayout to the *.xml file of the Activity.

    <com.microsoft.device.dualscreen.layouts.SurfaceDuoLayout
        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. Im nächsten Schritt deklarierst du deine Fragmente in den Dateien singlescreenlayout.xml, dualscreenstartlayout.xml und dualscreenendlayout.xml.Next, you declare your fragments into the singlescreenlayout.xml, dualscreenstartlayout.xml, and dualscreenendlayout.xml files.

    <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. Verknüpfe dein Layout mit deiner Aktivität.Link your layout to your activity.

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

Verwenden von in einer Aktivität erstellten FragmentenUsing Fragments created in an Activity

Schließlich sehen wir, wie die Komponenten mit Fragmenten funktionieren, die mithilfe von getSupportFragmentManager().beginTransaction() hinzugefügt werden.Finally, we will see how the components work with fragments that are added using getSupportFragmentManager().beginTransaction().

  1. Zunächst musst du der *.xml-Datei der Aktivität das SurfaceDuoLayout hinzufügen.First, you have to add the SurfaceDuoLayout to the *.xml file of the Activity.

    <com.microsoft.device.dualscreen.layouts.SurfaceDuoLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    

    Dadurch werden die Container für die Ansichten erstellt, aber es wird nichts in sie hinein vergrößert.This creates the containers for the views but there will be nothing inflated into them.

  2. Du kannst Zugriff auf die Container des SurfaceDuoLayout erhalten, indem du ihre IDs verwendest:You can have access to the containers of the SurfaceDuoLayout by using their ids:

    • first_container_id
    • second_container_id
  3. Suche als Nächstes die Fragment-Manager-Statushandlerbibliothek auf, da Fragmente beim Umgang mit Wechseln des Bildschirmmodus besondere Sorgfalt erfordern.Next please visit fragment manager state handler library as fragments need special care when dealing with screen mode transitions.