Benutzeroberfläche
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Benutzeroberflächen-Programmierungsübersicht (Android zu Windows)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Lernen Sie wichtige Ähnlichkeiten und Unterschiede zwischen den Benutzeroberflächen-Programmierungsmodellen für Android- und Windows Store-Apps kennen.

Einführung

Beim Entwerfen und Entwickeln der Benutzeroberfläche einer App sind viele Ähnlichkeiten zwischen Android-Apps und Windows Store-Apps zu berücksichtigen. Beispiel: Eine Activity ist die Anzeigeeinheit für Android und entspricht der Page in Windows Store-Apps. In der folgenden Tabelle werden die UI-Elemente von Android und Windows 8 gegenübergestellt.

Vergleich der Benutzeroberflächenkonzepte zwischen Android und Windows 8

Diese Tabelle enthält konkretere Vergleiche zwischen Activity- und Page-Objekten.

Android-AppsWindows Store-Apps

Eine App ist eine Sammlung von Activity-Objekten.

Eine App ist eine Sammlung von Page-Objekten.

Eine Activity ist die Anzeigeeinheit, so wie sie der Endbenutzer sieht.

Eine Page ist die Anzeigeeinheit, so wie sie der Endbenutzer sieht.

Jede Activity ist für die Ausführung einer Funktion vorgesehen (wie das Senden einer E-Mail, das Aufnehmen eines Fotos oder das Auswählen eines Kontakts).

Jede Page ist für die Ausführung einer Funktion vorgesehen (wie das Senden einer E-Mail, das Aufnehmen eines Fotos oder das Auswählen eines Kontakts). Jedes Page-Objekt ist für die Interaktion des Endbenutzers mit der App vorgesehen.

Eine Activity ist eine Sammlung von Layoutsteuerelementen und Widgets (z. B. EditText, Button und CheckBox).

Ein Page-Objekt ist eine Sammlung von Layoutsteuerelementen und Widgets (z. B. TextBox, Button und CheckBox).

Der Endbenutzer kann zu einem gegebenen Zeitpunkt immer nur eine einzige Activity sehen.

Der Endbenutzer kann zu einem gegebenen Zeitpunkt immer nur eine einzige Page sehen.

Activity-Objekte werden im Kontext einer Task zu einem LIFO-Stapel (last in, first out) hinzugefügt. Beim Klicken auf die Schaltfläche "Zurück" bzw. durch das Abschließen einer Activity wird sie aus dem Stapel entfernt und freigesetzt.

Page-Objekte werden innerhalb der App zu einem Navigationsstapel hinzugefügt. Das Konzept eines systemweiten Navigationsstapels ist nicht vorhanden. Daten werden durch Verträge zwischen Apps freigegeben. Durch das Aufrufen eines Vertrags (z. B. des Vertrags für "Suche") wird die Ziel-App angezeigt. Wenn der Aufruf beendet ist, wechselt die Steuerung wieder zurück zur aufrufenden App. Innerhalb einer App können die Benutzer mit den verfügbaren Navigations-APIs zwischen Seiten navigieren.

 

Zum Festlegen, Anzeigen und Ausführen der Benutzeroberfläche werden bei beiden Plattformen ähnliche Dateisätze für UI-Layout und Laufzeitcode verwendet:

  • Für jede Activity in Android-Apps ist das UI-Layout in einer XML-Datei festgelegt, der Laufzeitcode in einer JAVA-Datei.
  • Für jedes Page-Objekt in Windows Store-Apps gilt Folgendes:
    • Bei Programmiersprachen wie C++, C# und Microsoft Visual Basic .NET befindet sich das UI-Layout in einer XAML-Datei. (Eine XAML-Datei ist eine XML-basierte Datei im XAML-Format (Extensible Application Markup Language).) Der Laufzeitcode befindet sich in einer CPP-, CS- oder VB-Datei.
    • Im Fall von JavaScript ist das UI-Layout in einer HTML-Datei festgelegt, der Laufzeitcode in einer JS-Datei.

Bei Android-Apps verwenden Sie für die Ereignisbehandlung das Beobachtermuster. Bei Windows Store-Apps werden Microsoft .NET-Delegaten verwendet, die C-Funktionszeigern ähneln, aber in der Programmierung einfacher sind. Bei beiden App-Plattformen wird die Komplexität der Anbindung von Handlern an Widgetereignisse ausgeblendet, indem die Handler in einer XML- oder XAML-Datei deklariert werden können.

Bei beiden App-Plattformen können Sie zusammengesetzte Benutzeroberflächen entwickeln, die Sie über mehrere Anzeigeeinheiten hinweg wiederverwenden können. Entwickler von Android-Apps erstellen in der Regel zusammengesetzte Komponenten und Fragmente, während Entwickler von Windows Store-Apps UserControl-Objekte erstellen.

Nach oben

Benutzeroberflächennavigation

Bei Android-Apps erfolgen Anzeige von Activitys und Navigation zwischen Activitys innerhalb derselben App oder zwischen mehreren Apps. Wenn der Benutzer zwischen Activitys navigiert, werden diese in einem Stapel platziert, in dem der Benutzer vor- und zurücknavigieren kann. Dazu verwendet er in der Regel eine "Zurück"-Schaltfläche in der Software, die sich normalerweise auf der unteren Taskleiste befindet, oder eine entsprechende Hardwaretaste, oder er schließt die Activity in der App selbst ab. Sobald eine Activity abgeschlossen ist, wird sie aus dem Stapel entfernt, und die unterhalb der abgeschlossenen Activity angeordnete Activity wird in den Vordergrund gebracht. In Android wird ein expliziter Intent verwendet, um Activitys innerhalb derselben App aufzurufen, während Activitys in einer anderen App oder im System mit einem impliziten Intent abgerufen werden.

Die Navigation innerhalb von Windows Store-Apps entspricht dem expliziten Intent in Android-Apps. Die Anzeige von Seiten und die Navigation zwischen Seiten innerhalb derselben App erfolgen in Windows Store-Apps über einen App-spezifischen Navigationsstapel. In Windows Store-Apps gibt es auf Systemebene keinen Seitenstapel und auch keine "Zurück"-Schaltfläche zum Auflösen eines Seitenstapels.

Die folgende Abbildung zeigt, wie Activitystapel und Seitenstapel bei der Navigation in Android-Apps und Windows Store-Apps verwendet werden.

Vergleich der Bildschirmnavigation zwischen Android und Windows 8

Dieser Codeausschnitt zeigt die Activitynavigation innerhalb einer Android-App durch explizite Intents.



public class Activity1 extends: Activity {
    // (Some code is omitted here for brevity.)
    void startActivity2() {
        Intent activity2 = new Intent(this, Activity2.class);
        startActivity(activity2);
    }
}

Wenn dieser Code ausgeführt wird, wird "Activity1" in Android gestoppt, "Activity2" wird dem "Zurück"-Stapel hinzugefügt und "Activity2" wird angezeigt. Der Benutzeroberflächenkontext (einschließlich der Widgetstatus) von "Activity1" bleibt erhalten, aber die Activity ist nicht mehr im Vordergrund.

Bei Windows 8 erfolgt die Navigation innerhalb einer App über die Frame-Eigenschaft des Page-Objekts, die festgelegt wird, wenn das Frame-Objekt das Page-Objekt zum Anzeigen lädt. Durch die Navigate-Methode des Frame-Objekts, wie im nächsten Codeausschnitt dargestellt, wird das neue Page-Objekt dem Navigationsstapel hinzugefügt.



public partial class Page1: Page
{
    // (Some code is omitted here for brevity.)
    void StartPage2()
    {
        this.Frame.Navigate(typeof(Page2));
    }
}

Das Frame-Objekt bietet auch GoBack- und GoForward-Methoden für die Navigation im relativen Seitenstapel. Nach dem Standardverhalten der Navigate-Methode wird jedes Mal eine völlig neue Instanz erstellt. Dieses Verhalten kann aber durch das Zwischenspeichern von Seiten außer Kraft gesetzt werden, indem die NavigationCacheMode-Eigenschaft des Page-Objekts aktiviert wird.

In Android-Apps erfolgt die Navigation zwischen Apps durch einen expliziten Intent, der von Android an alle Apps übertragen wird, die darauf reagieren können. In Windows Store-Apps erfolgt die Datenfreigabe zwischen Apps durch Verträge und Erweiterungen. Ein Vertrag ist eine gut definierte Interaktion zwischen zwei oder mehr Apps. Mit einer Erweiterung werden Windows 8-Systemfeatures durch eine gut definierte Vereinbarung erweitert. Ein Vertrag entspricht einem expliziten Intent in Android.

Beispiele für Verträge in Windows 8:

  • File Open Picker
  • Search
  • Share

Beispiele für Erweiterungen:

  • Camera settings kann eine benutzerdefinierte UI anzeigen, wenn eine Kamera eines bestimmten Herstellers angeschlossen ist.
  • AutoPlay zeigt alle Apps an, die diese Erweiterung deklarieren.
  • Mit Print task settings kann die App spezifische Druckereinstellungen für einen bestimmten Hersteller und ein bestimmtes Modell anzeigen, wenn der Drucker angeschlossen ist.

Ähnlich wie die Android-Intentfilter werden Verträge und Erweiterungen in der Package.appxmanifest-Datei des entsprechenden Microsoft Visual Studio-Projekts festgelegt. Wenn Sie auf den Charm Teilen tippen oder das Teilen programmgesteuert gestartet wird, werden in Windows 8 alle Apps aufgelistet, die von den Apps in ihren jeweiligen App-Manifesten als Share-Ziele deklariert wurden. Der Benutzer wählt anschließend die gewünschte App aus, für die die Daten freigegeben werden sollen. Das Freigabeverhalten der Windows Store-Apps wird durch die Implementierung des DataRequested-Ereignishandlers der DataTransferManager-Klasse deklariert. Dieser Handler ist dafür zuständig, die Daten zusammenzufassen, die von Windows-Runtime für das Share-Ziel bereitgestellt werden.

Beispiel: Von App1 wurde der DataRequested-Ereignishandler so implementiert, dass Daten an App2 gesendet werden, die in ihrem App-Manifest als "Teilen"-Ziel deklariert wird. Dieser Codeausschnitt zeigt eine Implementierung des DataRequested-Ereignishandlers in "App1".



public sealed partial class Page2 : Page
{
    public Page2()
    {
        this.InitializeComponent();
        RegisterForSharing();
    }

    private void RegisterForSharing()
    {
        DataTransferManager dataTransferManager = DataTransferManager.GetForCurrentView();
        dataTransferManager.DataRequested += new TypedEventHandler
                                                     <DataTransferManager, DataRequestedEventArgs>
                                                         (this.DataRequested);
    }

    private void DataRequested(DataTransferManager sender, DataRequestedEventArgs e)
    {
        DataRequest request = e.Request;
        request.Data.Properties.Title = "Sharing text from App1";
        request.Data.Properties.Description = "Demo of Sharing contract";
        request.Data.SetText(textBox.Text);
    }
}

Wenn der Benutzer "App2" aus der Liste der angezeigten Freigabeziele auswählt, wird in Windows 8 die OnShareTargetActivated-Methode der Application-Klasse aufgerufen. Von jeder Windows Store-App wird eine untergeordnete App-Klasse für Bootstrapping der App und zum Anzeigen der ersten Seite der App erstellt, die von der Application-Klasse erbt. Mit der Share-Ziel-App erfolgt die Überschreibung sowie die Bereitstellung einer benutzerdefinierten Implementierung für die OnShareTargetActivated-Methode, mit der die Daten extrahiert werden und die Steuerung auf die Seite der App übertragen wird. Der folgende Codeausschnitt zeigt, wie "Page3" von "App2" nach dem Extrahieren der von "App1" empfangenen freigegebenen Daten aktiviert wird.



sealed partial class App2 : Application
{
    // (Some code is omitted here for brevity.)
    protected override void OnShareTargetActivated(ShareTargetActivatedEventArgs args)
    {
        Page3 shareTargetPage = new Page3();
        shareTargetPage.Activate(args);
    }
}

// ...

public sealed partial class Page3 : Page
{
    ShareOperation _shareOperation;
    string _data;

    public Page3()
    {
        this.InitializeComponent();
    }

    public async void Activate(ShareTargetActivatedEventArgs args)
    {
        this._shareOperation = args.ShareOperation;
        this._data = await this._shareOperation.Data.GetTextAsync();
        Window.Current.Content = this;
        Window.Current.Activate();
        await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
            {
                this.tbShareResult.Text = this._data;
            }
        );
    }
}

Sobald die Verarbeitung der freigegebenen Daten von "App2" abgeschlossen ist, kann "Page3" geschlossen werden. Dazu wird die ReportCompleted-Methode der ShareOperation-Klasse in einem entsprechenden Ereignishandler aufgerufen, mit dem die Steuerung wieder an "Page2" von "App1" übertragen wird.

Nach oben

Widget-/Steuerelementzuordnung

Sowohl die Android- als auch die Windows Store-Apps unterstützen ähnliche Widgets. Diese Widgets beinhalten Funktionalitäten für Textlayout und -anzeige, Textbearbeitung, Listen, das Anzeigen von Bildern, Optionsfelder und Kontrollkästchen. Ferner umfassen diese Widgets nicht visuelle Elemente für das Layout von Inhalten in vertikalen und horizontalen Stapeln, Rastern und anderen benutzerdefinierten Layoutsteuerelementen. Diese Abbildung zeigt eine Untergruppe der Widgetlisten beider Plattformen.

Vergleich der Widgets zwischen Android und Windows 8

Nach oben

Ereignishandling

Ereignishandler verbinden Dateien für UI-Layout und Laufzeitcode zu einer funktionierenden App. Sowohl die Android-Apps als auch die Windows Store-Apps bieten ähnliche Ereignishandler, mit kleinen Unterschieden beim Zugriff der Handler auf den Widgetstatus. Bei Android-Projekten in Eclipse können die Handler wie in diesem Codeausschnitt im XML-UI-Markup festgelegt werden.


<!-- Only selected attributes are shown here. --!>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        tools:context=".MainActivity" >
    <TextView android:id="@+id/textView1" android:text="@string/hello_world" />
    <Button android:id="@+id/btnClickMe" android:onClick="btnClickMe_OnClick"/>
</RelativeLayout>

In Android können Widgetstatusänderungen in Java-Code behandelt werden, indem Widgetverweise wie in diesem Codeausschnitt explizit über die findViewById-Methode der Activity-Klasse bezogen werden.


public class MainActivity extends Activity {
    private TextView txtView;
    private Button btnClickMe;
    public void btnClickMe_onClick(View v) {
        txtView.setText(“The button was clicked!");
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnClickMe = (Button)findViewById(R.id.btnClickMe);
        txtView =(TextView)v.findViewById(R.id.txtView1);
    }

    // Other code not relevant to this discussion is removed for brevity.
}

In Windows Store-Apps werden von Visual Studio automatisch Widgetverweise in den passenden Laufzeitcodedateien generiert, sodass Ereignishandler und App-Logik direkt auf Widgets verweisen können, wie in den folgenden Codeausschnitten gezeigt wird.


<!-- Only selected attributes are shown here. --!>
<Page x:Class="ShareFrom.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:local="using:ShareFrom">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBox x:Name="tbShare" Text="Sharing Text" />
        <Button x:Name="btShare" Content="Share  Now" Click="btnClickMe_Click"/>
    </Grid>
</Page>



public sealed partial class MainPage : Page
{
    private void btnClickMe_Click(object sender, RoutedEventArgs e)
    {  
        textBlock.Text = "The button was clicked!";
    }

    // Other code not relevant to this discussion is removed for brevity.
}

Nach oben

Bildschirmlayout

Ähnlich wie der Android-Bildschirm-Designer in Eclipse verfügt Microsoft Visual Studio 2013 über einen integrierten Bildschirm-Designer namens "Blend für Microsoft Visual Studio 2013". Blend ermöglicht verschiedenartige Widgetlayouts, was insbesondere für erweiterte Bildschirmlayouts nützlich ist, die zeitachsenbasierte Animationen, Bildschirmübergänge und komplexe Farbschemas und Formen erfordern.

Blend und Visual Studio 2013 haben ein gemeinsames Projektformat, sodass Änderungen an den Projektdateien in beiden Tools synchronisiert werden.

Die folgende Abbildung zeigt eine Benutzeroberfläche für ein einfaches Beispiel einer Dateneingabe-App. Das UI-Markup für die Android-App und die Windows Store-App ist bis auf ein paar Unterschiede ähnlich.

Dateneingabebildschirm

  • Der Activity-Java-Code in Android hängt von XML-Inhalten ab, während der XAML-Code in Windows Store-Apps vom Laufzeitcode einer unterstützten Programmiersprache wie C++, C#, Visual Basic .NET oder JavaScript abhängt.
  • Jedes Widget in einer Android-App wird durch eine eindeutige ganze Zahl identifiziert, die verwendet wird, um einen Verweis auf das Widget im Laufzeitcode zu erhalten. Die den einzelnen Widgets gegebenen Namen weisen ein eindeutiges Format auf, das dem Code-Generator vorgibt, das generierte Ganzzahlliteral in einer bestimmten statischen Klasse zu platzieren. So weist das EditText-Objekt im folgenden Codebeispiel den id-Wert "@+id/name" auf. Mit diesem Wert wird eine neue eindeutige ganze Zahl mit dem Namen "name" für die ganze Zahl erstellt, die in der statischen Klasse namens id erstellt wird. In Android-Apps kann können Sie dies mit R.id.name aufrufen, um Verweise auf das EditText-Objekt in der Objektstruktur zu erhalten. Für dieses Schema ist es standardmäßig erforderlich, dass alle Activitys denselben Widgetnamespace teilen, weshalb alle Widgets eindeutige Namen haben müssen. Im Gegensatz dazu hat in Visual Studio jede Seite standardmäßig einen eindeutigen Namespace, sodass die Widgets nur innerhalb einer einzelnen Seite eindeutig sein müssen.

<!-- Windows Store apps -->
<Page x:Class="Contoso.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Contoso"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="250" Width="281">

    <Grid Background="White">
        <TextBlock HorizontalAlignment="Center" Margin="0,35,0,0" Text="Contoso"
            VerticalAlignment="Top" Width="120" Height"27" Foreground="Black"
            FontSize="30" />
        <StackPanel Margin="0,80,0,0">
            <TextBox Name="tbName" TextWrapping="Wrap" Text="Enter Name"
                HorizontalAlignment="Center" Width="261" Foreground="#FFBBBDAF"/>
            <TextBox Name="tbAddress" TextWrapping="Wrap" Text="Enter Address"
                HorizontalAlignment="Center" Width="261" Foreground="#FFBBBDAF"/>
            <TextBox Name="tbCompany" TextWrapping="Wrap" Text="Enter Company"
                HorizontalAlignment="Center" Width="261" Foreground="#FFBBBDAF"/>
            <Button x:Name="btnSave" Content="Save" HorizontalAlignment="Center"
                Background="#FFDCE2DE" Foreground="#FF939587" Margin="0,0,122,0" />
        </StackPanel>
    </Grid>
</Page>

Nach oben

 

 

Anzeigen:
© 2017 Microsoft