Die Größe von Widgets an kleinere Bildschirme anpassen
Die Experience öffnen
Öffnen Sie zunächst die Experience, die im vorherigen Lernprogramm erstellt wurde.
- Wenn Sie das vorherige Lernprogramm Ein Fenster zu einer Web-App hinzufügen abgeschlossen haben, öffnen Sie die Experience "American River Marine Estuary" erneut, und fahren Sie direkt mit dem nächsten Abschnitt fort.
Hinweis:
Wenn Sie nicht wissen, wie Sie die Experience finden können, dann öffnen Sie ArcGIS Experience Builder, und melden Sie sich mit Ihrem ArcGIS-Konto an. Ihre Experience wird auf der Seite Zuletzt verwendete Experiences aufgelistet.
- Wenn Sie das vorherige Lernprogramm nicht abgeschlossen haben, dann öffnen Sie ArcGIS Experience Builder, und melden Sie sich mit Ihrem ArcGIS-Konto an.
Hinweis:
Wenn Sie nicht über ein ArcGIS-Konto verfügen, informieren Sie sich über die Optionen für den Zugriff auf die Software.
Die Seite Zuletzt verwendete Experiences wird angezeigt.
- Klicken Sie auf die Schaltfläche Neue erstellen.
- Klicken Sie auf die Registerkarte ArcGIS Online.
- Geben Sie in der Suchleiste den Text estuary template 3 ein.
- Klicken Sie auf der Kachel American River Marine Estuary Template 3 auf die Schaltfläche Erstellen.
Die Zeichenfläche wird mit der bisher erstellten Experience angezeigt. Sie enthält eine Karte, eine Kopfzeile, eine Spalte mit weiteren Widgets sowie eine Schaltfläche zum Öffnen eines Fensters.
- Klicken Sie auf der Werkzeugleiste des Builders auf den Titel, und geben Sie als neuen Titel den Text American River Marine Estuary ein.
Die Option für benutzerdefiniertes Layout aktivieren
Die Experience "American River Marine Estuary" ist für einen interaktiven Kiosk bestimmt. Dementsprechend haben Sie ein Design für ein großes Bildschirmformat erstellt. Es soll jedoch auch ein Link zu der App auf der Kunden-Website bereitgestellt werden, sodass möglicherweise auch über Tablets und Mobilgeräte auf die App zugegriffen wird. Mit der Option für benutzerdefiniertes Layout nehmen Sie Anpassungen am Layout vor, die nur auf kleineren Bildschirmen sichtbar sind.
- Klicken Sie auf der Builder-Werkzeugleiste auf die Schaltfläche Seite für Geräte mit mittelgroßem Bildschirm bearbeiten.
Die Zeichenfläche wird schmaler und emuliert so den Bildschirm eines Tablet-Geräts. Die Spalte neben der Karte ist nun so schmal, dass sie nicht mehr zweckdienlich ist. Der Widget-Inhalt ist nicht lesbar.
Neben dem Menü befinden sich zwei Zustandsmenüs: eines für die Kopfzeile und eines für den Hauptteil der Karte. Beide sind auf Auto festgelegt, was bedeutet, dass das Layout bei mittelgroßen Bildschirmen dasselbe ist wie das Layout bei großen Bildschirmen.
- Klicken Sie neben dem Hauptteil der App auf Benutzerdefiniert.
- Klicken Sie im Fenster Möchten Sie es wirklich aktivieren? auf OK.
Jetzt können Sie das Layout-Design für die Seite auf mittelgroßen Bildschirmen ändern, ohne dass sich dies auf das Design bei großen Bildschirmen auswirkt.
- Klicken Sie auf die Spalte. Versuchen Sie, auf eine Stelle zwischen zwei Widgets zu klicken, um die Spalte und nicht eines der anderen Widgets auszuwählen.
Tipp:
Um sicherzustellen, dass Sie das Widget "Spalte" ausgewählt haben, überprüfen Sie, ob der Bereich Spalte geöffnet wurde. Sie können das Widget "Spalte" auch im Bereich Seite im Abschnitt Umriss auswählen.
- Ziehen Sie den seitlichen Ziehpunkt des Widgets "Spalte" nach rechts, bis das Widget vier statt zwei vertikale Bildschirmeinheiten einnimmt.
Die Spalte ist nun breit genug, sodass die Legende vollständig angezeigt wird. Diese Änderung hat keinen Einfluss auf die Anzeige der Experience auf großen Bildschirmen.
Ein Element in die ausstehende Liste verschieben
Es kann vorkommen, dass Sie ein Widget ganz aus dem Layout für kleine Bildschirme entfernen möchten. Statt das Widget zu löschen und damit auch aus dem Layout für große Bildschirme zu entfernen, können Sie es in die ausstehende Liste verschieben.
- Klicken Sie auf der Builder-Werkzeugleiste auf die Schaltfläche Seite für Geräte mit kleinem Bildschirm bearbeiten.
Die Zeichenfläche wird noch kleiner. Hier sind umfangreichere Änderungen erforderlich.
- Scrollen Sie auf der Zeichenfläche durch die App.
Ganz oben wird die Spalte und darunter die Karte angezeigt. Auf kleinen Bildschirmen werden Zeilen-Widgets als Spalten angezeigt. Das Layout ist also nun als Spalte innerhalb einer Spalte statt als Spalte innerhalb einer Zeile strukturiert.
Aufgrund ihres geringeren Platzangebots sind mobile Apps erfolgreicher, wenn sie einfach gehalten werden. Die Informationen in den Widgets "Legende" und "Lesezeichen" sind auch in den Pop-ups verfügbar. Daher entfernen Sie die Widgets aus der Ansicht für kleine Bildschirme. Auch die Funktion "Vergleichen" ist auf einem kleinen Bildschirm weniger zweckdienlich, und Sie entfernen diese ebenfalls. Sie können also das gesamte Widget "Spalte" entfernen und nur die Karte beibehalten.
- Klicken Sie neben dem Hauptteil der Zeichenfläche auf Benutzerdefiniert. Klicken Sie auf OK.
- Wählen Sie das Widget "Spalte" aus. Vergewissern Sie sich, dass die Spalte, nicht jedoch eines der darin enthaltenen Widgets ausgewählt ist.
Löschen Sie das Widget "Spalte" nicht. Durch das Löschen eines Widgets im benutzerdefinierten Modus wird dieses aus der gesamten App gelöscht und ist damit auch auf größeren Bildschirmen nicht mehr verfügbar. Statt Widgets aus einem Layout für mittelgroße oder kleine Bildschirme zu entfernen, verschieben Sie diese in die ausstehende Liste. Dadurch wird sichergestellt, dass sie noch vorhanden und für andere Bildschirmgrößen verfügbar sind.
Tipp:
Wenn Sie das Widget "Spalte" versehentlich gelöscht haben, klicken Sie auf der Werkzeugleiste auf die Schaltfläche Rückgängig.
- Klicken Sie auf der Widget-Werkzeugleiste auf die Schaltfläche In ausstehende Liste verschieben.
Die Spalte wird mit allen Inhalten aus der Zeichenfläche ausgeblendet. Nur die Karte bleibt sichtbar.
Hinweis:
Falls die Karte nicht die gesamte Zeichenfläche ausfüllt, können Sie die Größe durch Klicken und geringfügiges Ziehen zurücksetzen.
Wenn die Kartenwerkzeuge (beispielsweise die Schaltfläche "Karte wechseln") am unteren Rand der Zeichenfläche nicht sichtbar sind, öffnen Sie im Bereich Karte die Registerkarte Style. Wählen Sie für Höhe die Option Benutzerdefiniert aus, und legen Sie die Größe auf 100 % fest.
Größe und Position mit Pixeln festlegen
Das Erstellen benutzerdefinierter Layouts für kleinere Bildschirme hat einen Nachteil: Wenn Sie zu einem späteren Zeitpunkt Änderungen am Layout vornehmen möchten, müssen Sie diese zwei- oder dreimal durchführen. In einigen Fällen lässt sich das Aktivieren eines benutzerdefinierten Layouts durch eine Größenanpassung mit Pixeln statt mit Prozentsätzen vermeiden.
Auf kleinen Bildschirmen ist die Schaltfläche Info zu dieser Karte nicht groß genug für den gesamten Text.
Statt eine benutzerdefinierte Größe für die Schaltfläche zu erstellen, die nur für kleine Bildschirme gilt, ändern Sie die allgemeine Größe der Schaltfläche, sodass diese für alle Bildschirmgrößen verwendet werden kann und keine Anpassung erforderlich ist.
- Klicken Sie auf der Builder-Werkzeugleiste auf die Schaltfläche Seite für Geräte mit großem Bildschirm bearbeiten.
- Zeigen Sie auf die Kopfzeile, und klicken Sie auf Kopfzeile bearbeiten. Klicken Sie auf die Schaltfläche "Widget".
- Klicken Sie im Bereich Schaltfläche 2 auf die Registerkarte Style.
Unter Größe und Position sind die Einstellungen für Breite und Höhe als Prozentsatz der Bildschirmgröße angegeben. Daher wird die Schaltfläche auf Geräten mit kleinem Bildschirm so klein, dass der Text nicht mehr lesbar ist.
- Klicken Sie neben Breite auf die Schaltfläche %, und wählen Sie px aus. Ändern Sie auch für die Einstellung Höhe die Einheit von % zu px.
Durch Festlegung der Schaltflächengröße mit Pixeln ist die Schaltfläche unabhängig von der Bildschirmgröße immer gleich groß.
- Geben Sie als Breite den Wert 120 ein. Geben Sie für Höhe den Wert 30 ein.
Auf großen Bildschirmen wirkt die Schaltfläche etwas klein, und auf kleinen Bildschirmen wirkt sie nach wie vor etwas groß. Dennoch ist die neue Größe ein Kompromiss für alle Bildschirmgrößen. Auch die Position der Schaltfläche legen Sie in Pixeln fest.
Unter dem Parameter Höhe finden Sie ein Positionsdiagramm. Mit diesem Diagramm wird festgelegt, in welchem Abstand zu den Kanten der Kopfzeile die Schaltfläche platziert wird.
- Klicken Sie im Positionsdiagramm neben den Maßen für die untere und die rechte Position auf die Schaltfläche %, und wählen Sie px aus.
- Ändern Sie beide Maße in 10 Pixel.
Die Schaltfläche ist nun im Abstand von 10 Pixeln von der rechten unteren Ecke der Kopfzeile positioniert.
Als Nächstes passen Sie die Position des Titeltextes an, sodass dieser ebenfalls einen Abstand von 10 Pixeln zur Kante hat.
- Klicken Sie auf der Zeichenfläche auf den Titeltext.
Im Bereich Text auf der Registerkarte Style sind im Positionsdiagramm alle vier Maße auf 0 Prozent festgelegt. Dies ist darauf zurückzuführen, dass Sie den Titel so konfiguriert haben, dass er den gesamten Kopfzeilenbereich ausfüllt. Sie passen eines dieser Maße an.
- Ändern Sie im Positionsdiagramm das linke Maß in 10 Pixel.
Auf der Zeichenfläche wird das Widget "Text" geringfügig nach rechts verschoben.
- Klicken Sie auf die Schaltflächen Seite für Geräte mit mittelgroßem Bildschirm bearbeiten und Seite für Geräte mit kleinem Bildschirm bearbeiten, um zu testen, wie die Kopfzeile auf kleineren Bildschirmen angezeigt wird.
- Klicken Sie auf der Builder-Werkzeugleiste auf die Schaltfläche Seite für Geräte mit großem Bildschirm bearbeiten, und klicken Sie auf die Schaltfläche Speichern.
In diesem Lernprogramm haben Sie das Layout für drei Bildschirmgrößen angepasst. Sie haben die Option für benutzerdefiniertes Layout aktiviert, nicht benötigte Elemente in die ausstehende Liste verschoben und die Größe und Position von Widgets mit Pixeln festgelegt, um sicherzustellen, dass keine Größenanpassung erfolgt, wenn sich die Bildschirmgröße ändert. Im letzten Lernprogramm dieser Reihe, Eine Experience und eine Vorlage veröffentlichen, erfahren Sie, wie Sie die Experience für die Öffentlichkeit zugänglich machen.
