Bitte beachten Sie, dass dieses Tutorial auf einer nativen App basiert, die erstellt wurde in Mendix Modeller-Version 9.24.0. In anderen Versionen können die Dinge anders sein.
Voraussetzungen:
Um den Inhalt dieses Tutorials zu verstehen, benötigen Sie Grundkenntnisse in React Native und in der Implementierung des Stylings einer nativen mobilen App in Mendix Studio Pro. Wenn Sie neu im Design einer nativen mobilen App sind, lesen Sie bitte das entsprechende Lernmaterial aus dem Mendix Academy zuerst.
Worum es in diesem Beitrag geht
In diesem Beitrag werden wir durchgehen, wie man ändert Mendix Standard-Widgets, um eine intuitive Benutzeroberfläche für Ihre native mobile App zu erstellen. Dies sind Anfragen, die ich als UX-Berater im Expert Services-Team häufig erhalte.
Worum es in diesem Beitrag geht NICHT Über
Bitte beachten Sie, dass dieser Beitrag KEIN Tutorial zum Erstellen eines benutzerdefinierten nativen Widgets für mobile Apps ist. Je nach Komplexität des Widgets kann dies erheblich länger dauern (und ein höheres Budget erfordern), was für manche Kunden möglicherweise keine Option ist.
Das Ziel dieses Beitrags besteht darin, zu zeigen, dass wir mit React Native allein ein einigermaßen zufriedenstellendes Ergebnis erzielen können.
Alle in diesem Blogbeitrag gezeigten Benutzeroberflächen sind meine eigene Kreation.
UNTERRICHT
Nachfolgend sind die drei Stile aufgeführt, auf die wir uns konzentrieren werden:
Lektion 1: Erweiterung des Top Bar-Abschnitts
Lektion 2: Suchleiste mit Lupe
Lektion 3: Overlay-Elemente
Lektion 1: Erweiterung des Top Bar-Abschnitts
Eine der häufigsten Anfragen, die ich für native Projekte erhalte, ist die Erweiterung des oberen Leistenbereichs. Dadurch kann der Benutzer eine Anweisung einfügen, worum es auf der Seite geht. Unten sehen Sie ein Beispiel für das Ergebnis:
Schritt 1: Themenstruktur im Modeller einrichten
Themenmodul: Bevor wir mit dem Styling der App beginnen, stellen Sie sicher, dass Sie ein Designmodul für diese App erstellt haben. Wenn Sie nicht sicher sind, wie das geht, lesen Sie bitte die Kurse im Mendix Akademie.
Erstellen Sie eine neue Seite: In diesem Fall habe ich es in „Hintergrund“ umbenannt.
Schritt 2: Den Elementen Klassen hinzufügen
Erstellen Sie auf der Seite „Hintergrund“ einen Container um die Anweisungen der Seite und weisen Sie ihm eine Klasse zu.
Auf derselben Seite habe ich Inhalt hinzugefügt, um zu zeigen, wie die obere Leiste aussieht, wenn zusätzliche Elemente vorhanden sind.
Erstellen Sie in Ihrem Designmodul eine neue JS-Datei unter „native“ und benennen Sie sie entsprechend um, z. B. „extension.js“. Dies entspricht der bewährten Vorgehensweise, die Ordnerstruktur organisiert und die Dateien erkennbar zu halten.
Schritt 3: Styling der Elemente implementieren
Der Schlüssel zum Erstellen einer Top-Bar-Erweiterung besteht darin, sie ohne Lücke an die Statusleiste anzuhängen. Setzen Sie in der Klasse „topBarExtension“ „marginTop“ auf 0.
// - top bar extension section background
export const topBarExtension = {
container: {
marginTop: 0,
paddingTop: 12,
paddingBottom: 25,
width: "100%",
backgroundColor: "#586F63"
}
}
Sie können auch andere Elemente gerne an den Stil Ihrer Wahl anpassen.
Erstellen Sie eine neue Datei „card.js“. Diese wird verwendet, um der Karte einen Stil zu verleihen, der jedes nachfolgende Element umschließt.
Fügen Sie in der Datei „card.js“ die Klasse „popCard“ hinzu:
// - the card that wraps around each subsequent element
export const popCard = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: 5,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}
Stellen Sie sicher, dass Sie die neu erstellten Dateien in Ihre Datei „main.js“ importieren:
Endresultat
Bonus
Ein weiterer gängiger Stil besteht darin, den Hauptinhalt teilweise über die Erweiterung der oberen Leiste zu legen. Hier ist eine Vorschau des Endergebnisses:
Um dies zu erreichen, müssen wir die Polsterung der Top-Bar-Erweiterung erweitern, sodass das nachfolgende Element den Inhalt im Top-Bar-Bereich nicht abdeckt.
Schritt 1: Aktualisieren Sie den Modeller
Schritt 2: Aktualisieren Sie den Code
Unten sehen Sie den aktualisierten Code für die Top-Bar-Erweiterung. Ich habe ihm eine andere Klasse „topBarExtensionLong“ zugewiesen und ihn derselben Datei „extension.js“ hinzugefügt.
// - top bar extension for the overlapping card style
export const topBarExtensionLong = {
container: {
marginTop: 0,
paddingTop: 12,
paddingBottom: 65,
width: "100%",
backgroundColor: "#586F63"
}
}Um den Überlappungseffekt zu erzeugen, müssen wir den oberen Rand in eine negative Einheit ändern, sodass er über den oberen Rand hinausgeht. Unten sehen Sie den Code für diesen Stil. Ich habe ihm eine separate Klasse „cardOverlap“ zugewiesen, um ihn von der vorherigen zu unterscheiden. Ich habe ihn auch derselben Datei „card.js“ hinzugefügt.
// - card for the overlap style
export const cardOverlap = {
container: {
borderRadius: 10,
marginLeft: 15,
marginRight: 15,
marginTop: -35,
marginBottom: 5,
borderWidth: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 10,
paddingBottom: 15,
borderColor: "#DDDDDD",
backgroundColor: "#FFFFFF"
}
}Endresultat
Lektion 2: Suchleiste mit Lupe
Eine weitere häufige Kundenanfrage ist das Hinzufügen eines Lupensymbols zur Suchleiste. Dies kann dem Benutzer helfen, das Suchfeld sofort zu identifizieren.
Schritt 1: Daten einrichten und Nanoflow erstellen
Beachten Sie, dass Sie im Domänenmodellierer eine Entität wie folgt einrichten müssen, bevor Sie die Formatierung des Elements implementieren.
• Attribut: Suchtext (ein begrenztes Zeichenfolgenattribut)
• Persistent: Nein
In Mendix, die Suchleiste ist im Grunde ein Textfeld mit Suchfunktion. Standardmäßig ist es nicht möglich, dem Textfeld ein Symbol hinzuzufügen. Daher müssen wir ein Layoutraster erstellen und das Symbol in einer Spalte und das Textfeld in einer anderen platzieren.
Ziehen Sie im Modellierer ein Datenansicht und rufen Sie die Datenquelle ab, indem Sie einen Nanoflow aufrufen. Erstellen Sie einen neuen Nanoflow „DS_SearchHelper“.
Erstellen Sie in der Datenansicht einen Container und weisen Sie ihm die Klasse „searchBar“ zu. Dadurch wird der Rahmen der Suchleiste simuliert.
Erstellen Sie innerhalb des Containers ein zweispaltiges Layoutraster (im Verhältnis 2:10). Fügen Sie links ein Lupenbild hinzu. (Sie müssen es zuerst in eine Bildsammlung hochladen).
Fügen Sie rechts ein Textfeld mit dem Attribut „SearchText“ und der Klasse „SearchInput“ hinzu. Dies ist das eigentliche Textfeld. Wir werden es so gestalten, dass es sich in diese Suchleiste einfügt.
Sie können auch einen optionalen Platzhaltertext für Ihr Suchfeld hinzufügen.
Schritt 2: Implementieren Sie den Stil
Erstellen Sie eine Datei „search.js“. Stellen Sie sicher, dass sie in die Datei „main.js“ importiert wird. Darin fügen wir den Code für die Klassen „searchBar“ und „searchInput“ hinzu.
//the container that acts as a search bar (with the icon)
export const searchBar = {
container: {
borderRadius: 8,
backgroundColor: "#ffffff",
borderWidth: 2,
borderColor: "#555555",
height: 50,
paddingLeft: 10,
paddingRight: 10
}
}//the actual search input field
export const searchInput = {
input: {
backgroundColor: 'transparent',
borderColor: 'transparent',
//placeholder text color
placeholderTextColor: "#A4A4A6",
fontSize: 16,
borderRadius: 50
}
}Endresultat:
Lektion 3: Overlay-Elemente
Zum Schluss schauen wir uns an, wie man einen Overlay-Effekt erzeugt, bei dem ein Element ein anderes teilweise überlappt. In diesem Beispiel erstellen wir eine Schaltfläche, die ein Bild teilweise überlappt.
Schritt 1: Layout einrichten
Ziehen Sie aus der Toolbox ein Bild und eine Schaltfläche auf die Seite. Ändern Sie das Symbol auf der Schaltfläche entsprechend.
Geben Sie dem Bild die Klasse „proPic“ und den Button „overlapBtn“. Wir werden sie später stylen.
Ich habe ein Layout mit einigen Textelementen unterhalb des Bildes und des Buttons erstellt. Dies ist jedoch optional. Wenn Sie dasselbe tun möchten, finden Sie hier die Anleitung:
- Erstellen Sie einen Container, der das Bild und die Schaltfläche umschließt. Fügen Sie dem Container einen „äußeren mittleren“ Abstand hinzu. Richten Sie den Container mittig aus.
2. Erstellen Sie unterhalb des Containers ein Layoutraster und fügen Sie darin einige Textelemente hinzu. Fassen Sie alles in einen Container ein und geben Sie ihm die Klasse „popCard“ (die wir in Lektion 1 verwendet haben).
Schritt 2: Implementieren Sie den Stil
Erstellen Sie eine neue Datei „overlay.js“. Stellen Sie sicher, dass sie in „main.js“ importiert ist. Der Schlüssel zum Erstellen eines überlappenden Elements besteht darin, den linken und/oder rechten Rand des Elements so zu bearbeiten, dass es bewusst gegen ein anderes Element auf dem Bildschirm positioniert wird.
Um das zu erreichen, müssen wir dem zugehörigen Rand eine negative Einheit hinzufügen. Die Logik dahinter ist ähnlich wie beim Erzeugen des Effekts, dass Elemente in die obere Leiste hineinlaufen (im Bonusabschnitt von Lektion 1).
//profile pic
export const proPic = {
image: {
borderRadius: 100,
width: 150,
height: 150,
},
container: {
borderWidth: 2,
borderColor: "#777777",
borderRadius: 100,
width: 150,
height: 150,
marginTop: 25
}
}
//button to edit the profile pic
export const overlapBtn = {
container: {
borderWidth: 2,
borderRadius: 50,
width: 32,
height: 32,
backgroundColor: "#E7E7E7",
marginRight: -75,
marginTop: -32,
borderRadius: 50,
borderColor: "#777777"
},
icon: {
color: "#000000",
size: 18
}
}
Endresultat:
Das ist alles für heute! Vielen Dank, dass Sie das Tutorial durchgearbeitet haben. Wenn Sie Fragen haben, lassen Sie es mich gerne wissen ([E-Mail geschützt] ).