WEBVTT 00:00.080 --> 00:04.010 Wir haben das Repository der Raumdatenbank und das Ansichtsmodell fertiggestellt. 00:04.010 --> 00:08.420 Wir haben also das Modell und die Ansichtsmodellabschnitte des Mvvm fertiggestellt. 00:08.450 --> 00:11.510 Lassen Sie uns nun unsere Ansicht erstellen. 00:11.540 --> 00:15.350 Die Ansicht stellt die Benutzeroberfläche einer Anwendung dar. 00:15.350 --> 00:23.690 Sie umfasst alles, was der Benutzer sehen und mit dem er interagieren kann, wie UI-Komponenten, Layouts, Widgets und 00:23.690 --> 00:24.770 Bildschirme. 00:24.770 --> 00:29.390 Sie definiert, wie die Daten aus dem View Model dem Benutzer präsentiert werden. 00:29.420 --> 00:37.130 Die Ansicht verarbeitet Benutzerinteraktionen wie das Anklicken von Schaltflächen, Texteingaben und Gesten, wenn ein Benutzer mit der Benutzeroberfläche 00:37.130 --> 00:38.150 interagiert. 00:38.180 --> 00:42.670 Die Ansicht kommuniziert diese Aktionen an das ViewModel. 00:42.680 --> 00:49.640 Die Ansicht beobachtet Live-Daten oder andere beobachtbare Datenquellen, die durch das Ansichtsmodell bereitgestellt werden. 00:49.670 --> 00:56.900 Live-Daten ermöglichen es der Ansicht, sich automatisch zu aktualisieren, wenn sich die zugrunde liegenden Daten ändern, so dass der 00:56.900 --> 00:59.070 Benutzer in Echtzeit informiert wird. 00:59.090 --> 01:05.700 Im Idealfall sollte die Ansicht keine Geschäftslogik oder Datenabrufcode enthalten. 01:05.700 --> 01:10.340 Stattdessen delegiert es diese Aufgaben an das Ansichtsmodell. 01:10.350 --> 01:15.750 Die Trennung von Belangen hilft, den Code, die Klarheit und die Testbarkeit zu erhalten. 01:15.750 --> 01:23.280 Zusammenfassend lässt sich also sagen, dass die Ansicht in einer Mvvm-Architektur für die Präsentation der Daten und die Benutzerinteraktionen verantwortlich ist. 01:23.280 --> 01:29.100 Das Ansichtsmodell verwaltet die zugrundeliegenden Daten, die Geschäftslogik und die Kommunikation 01:29.100 --> 01:31.330 zwischen dem Modell und der Ansicht. 01:31.350 --> 01:36.370 Starten wir also in Android Studio und beginnen mit der Erstellung unserer Layouts und Aktivitäten. 01:36.390 --> 01:37.620 Haupttätigkeit. 01:37.860 --> 01:41.180 Gehen Sie in den geteilten Modus und entfernen Sie diese Textansicht. 01:41.190 --> 01:43.890 In diesem Beispiel werde ich die Datenbindung verwenden. 01:43.890 --> 01:52.170 Deshalb werde ich mich an den Bau machen. gradle und hier füge ich die Datenbindungsabhängigkeit hinzu oder aktiviere sie innerhalb 01:52.170 --> 01:53.610 des Android-Bereichs. 01:53.610 --> 02:00.060 Ich muss Build Features Datenbindung gleich true sync hinzufügen. 02:00.060 --> 02:00.900 Das Projekt. 02:00.900 --> 02:03.390 Jetzt können wir die Datenbindung nutzen. 02:03.390 --> 02:10.260 Hier beginne ich also mit dem Layout-Tag und verschiebe alle diese Elemente. 02:11.550 --> 02:17.550 In das Layout, und ich werde diese Namespaces hier in das Layout verschieben. 02:18.550 --> 02:26.350 Und innerhalb dieses Constraintlayouts werde ich eine Recycler-Ansicht und eine tolle schwebende Aktionsschaltfläche erstellen. 02:32.590 --> 02:35.500 Fügen Sie die Randbedingungen hinzu, und Sie können sie ableiten. 02:36.590 --> 02:38.440 Oder ziehen und ablegen wie hier. 02:38.450 --> 02:40.020 Dies ist unsere Recycler-Ansicht. 02:40.040 --> 02:45.050 Ich werde eine tolle schwebende Aktionsschaltfläche erstellen. 02:46.550 --> 02:47.780 Inhalt verpacken. 02:47.780 --> 02:48.890 Inhalt verpacken. 02:48.890 --> 02:55.820 Und dies ist eine kleine Schaltfläche, die ich hierher ziehe und ablege, um die Beschränkungen abzuleiten, die sicherstellen, 02:55.820 --> 03:00.380 dass vom Ende aus 16 tiefe Ränder und von der Schaltfläche aus 60 sind. 03:00.380 --> 03:04.060 Und das ist unser toller schwebender Aktionsbutton. 03:04.070 --> 03:06.260 Es ist nur ein einfacher Knopf. 03:06.290 --> 03:11.720 Dies führt uns zu der Aktivität "Neuen Kontakt hinzufügen". 03:11.750 --> 03:15.350 Lassen Sie uns nun eine neue Layout-Datei erstellen. 03:15.350 --> 03:24.110 Ich werde es als Kontakt Unterstrich Listenelement nennen und dies wird die Vorlage und das Layout für jeden Kontakt 03:24.110 --> 03:26.450 in unserer Anwendung sein. 03:26.450 --> 03:29.240 Natürlich werde ich die Datenbindung verwenden. 03:29.240 --> 03:31.100 Ich beginne also mit dem Layout. 03:31.680 --> 03:36.720 Und verschieben Sie diese und die Namensräume in das Layout. 03:36.720 --> 03:38.870 Und das ist unser Constraint-Layout. 03:38.880 --> 03:45.870 Innerhalb dieses Constraint-Layouts erstelle ich zwei Textansichten, eine für den Namen und eine für die E-Mail-Adresse 03:45.870 --> 03:47.120 des Kontakts. 03:47.130 --> 03:48.810 Ich beginne mit der Textansicht. 04:20.480 --> 04:23.280 Und das ist unser Layout für Textansichten. 04:23.300 --> 04:31.460 Ich füge hier einen Rand hinzu, 16 dpi für das gesamte Zwangslayout, und die Höhe wäre "wrap content". 04:31.460 --> 04:38.330 Dies ist also unsere Vorlage für die Kontaktliste für jedes Element in der Datenbank.