Überblick über die Android Design Support Library

Einführung

Während Google I / O 2015 führte Google die Design Support Library für Android-Entwickler ein. Diese Bibliothek macht es Entwicklern einfach, weitere Material Design-Konzepte in ihre Anwendungen zu implementieren, da viele Schlüsselelemente anfangs nicht sofort verfügbar waren. Die Design Support Library ist einfach zu verwenden und abwärtskompatibel zu API 7. Die Design Support Library kann in Ihre Android-Projekte aufgenommen werden, indem Sie die Gradle-Abhängigkeit importieren.

'com.android.support:design:22.2.0' kompilieren

1. Visuelle Komponenten

In der Design Support Library gibt es zwei Hauptkategorien von Tools:

  • visuelle Komponenten
  • Bewegungskomponenten

Wir beginnen mit einem Blick darauf, welche neuen visuellen Komponenten verfügbar sind, um Ihre Apps aufpolieren zu können.

Materialtexteingabe

Text bearbeiten Ansichten gibt es von Anfang an in Android, und obwohl sie einfach zu verwenden sind, haben sie sich nicht wirklich geändert. Mit der Design Support Library hat Google eine neue Containeransicht eingeführt TextInputLayout. Diese neue Ansicht erweitert den Standard um weitere Funktionen Text bearbeiten, B. Unterstützung für Fehlermeldungen und animierte Hinweise, damit Ihre Benutzeroberfläche schnell angezeigt wird.

Wie im folgenden Ausschnitt gezeigt, TextInputLayout kann als Wrapper für einen Standard in Ihre Layoutdatei eingefügt werden Text bearbeiten.

  

Gianluca Segato wird sich das genauer ansehen TextInputLayout Komponente in einem kommenden Tutorial.

Schwimmende Aktionsschaltflächen

Eine der vorherrschenden Komponenten der Benutzeroberfläche in Material Design-Apps ist die schwebende Aktionsschaltfläche. Seit ihrer Einführung mussten Entwickler diese Schaltflächen entweder von Grund auf neu erstellen oder eine der zahlreichen Bibliotheken von Drittanbietern auswählen, die speziell für diese Schaltflächen entwickelt wurden.

Mit der Design Support Library können schwebende Aktionsschaltflächen in ein Layout eingefügt und mit ein paar einfachen XML-Zeilen an einem Teil des Bildschirms verankert werden. Jede Schaltfläche lässt sich leicht mit Symbolen und Farben anpassen. Zwei Größen stehen zur Verfügung, Standard (56 dp) und Mini (40 dp). Einer der größten Vorteile ist, dass diese Schaltflächen jetzt von Google unterstützt werden, wenn sich ihr Design weiterentwickelt.

Navigationskomponenten

Während ViewPager und Schubladenlayout Komponenten sind seit einiger Zeit durch die erhältlich v4-unterstützungsbibliothek, Google hat sie mit zwei neuen zugehörigen Widgets erweitert. Die erste ist eine offizielle Version der allgemein verwendeten ViewPagerIndicator-Bibliothek von Jake Wharton TabLayout. Der zweite ist der Navigationsansicht, Dies bietet Unterstützung für die Schubladenkopfansichten.

TabLayout

TabLayout Komponenten können Inhalte manuell im Code hinzugefügt werden addTab Methoden. Schauen Sie sich das folgende Beispiel an.

tabLayout.addTab (tabLayout.newTab (). setText ("Tab 1")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 2")); tabLayout.addTab (tabLayout.newTab (). setText ("Tab 3"));

Alternativ können Sie verknüpfen TabLayout Komponenten mit einem ViewPager. Dies wird durch Aufrufen erreicht setupWithViewPager (), vorbei in der ViewPager als erstes und einziges Argument. Dies ist eine weitere Möglichkeit, Abschnitte in der zu ändern ViewPager. Es ist darauf hinzuweisen, dass getPageTitle () muss bei der Verwendung überschrieben werden TabLayout mit einer ViewPager jedem Tab einen eigenen Namen geben.

Navigationsansicht

Navigationsansicht ist ein neues Widget, das die Funktionalität von erweitert Schubladenlayout. Entwickler können jetzt der Schublade Header-Layouts hinzufügen und ausgewählte Abschnitte mit dieser benutzerfreundlichen Komponente markieren.

Darüber hinaus ist es jetzt sehr einfach, Abschnitte und Unterabschnitte in der Schublade über Menü-Ressourcendateien zu erstellen. Um anzufangen, a Navigationsansicht muss einfach mit einem verbunden werden Schubladenlayout in XML.

   

Verbesserte Toasts

Während Toast Nachricht ist seit Jahren ein Grundnahrungsmittel von Android, ein neues Widget für die Benutzeroberfläche Imbissbude ist verfügbar, um ähnliche Funktionen mit einem verbesserten Aussehen bereitzustellen. Nicht nur das Imbissbude Um dem Benutzer Informationen für einen kurzen Zeitraum zu präsentieren, unterstützt er auch eine einzige Aktion zum Hinzufügen von kontextbasierten Funktionen zu Ihren Apps und kann mit einer Wischbewegung abgewiesen werden.

Imbissbude wird ähnlich implementiert Toast, Es sollte jedoch beachtet werden, dass das Erstellen einer Ansicht eine Ansicht erfordert, die zum Auffinden des unteren Bereichs der App-Anzeige verwendet werden kann.

Snackbar.make (view, "Action", Snackbar.LENGTH_LONG) .setAction ("Action!", Neue View.OnClickListener () @Override public void onClick (Ansicht v) Log.e ("App", "Action! ");   ) .Show();

2. Bewegungskomponenten

Wie sich eine Benutzeroberfläche verhält und animiert, ist in Material Design sehr wichtig. Um dies zu erleichtern, hat Google mehrere Komponenten in der Design Support Library veröffentlicht, die bei häufig verwendeten Anwendungsfällen hilfreich sind. Kerry Perez-Huanca wird sich in einem kommenden Tutorial mit diesem Aspekt der Design Support Library befassen.

Reaktive Ansichten

Sie haben vielleicht im vorherigen Beispiel bemerkt, dass die FloatingActionButton aufgerückt, wenn die Imbissbude Ansicht erschienen. Dies geschieht mit einem neuen Widget namens KoordinatorLayout, welche Ansichten umhüllt, die verschoben werden sollten, um Platz für andere Ansichten zu schaffen.

Verbesserte Schnellrückgabe und Symbolleisten

Viele Entwickler haben nach einem einfacheren Weg gefragt, um ein Parallaxenbild anzuzeigen, das mit einem schnellen Entwurfsmuster arbeitet und beim Scrollen des Benutzers verschwindet oder wieder erscheint. Sie können dieses Verhalten im Play Store für App-Einträge sehen. Damit Entwickler dies ohne viel Zeit für das Schreiben von redundantem Code implementieren können, hat Google veröffentlicht CollapsingToolBarLayout und AppBarLayout Ansichten. Mithilfe verschiedener Optionen in diesen Widgets können Entwickler Ansichten an den oberen Bildschirmrand anfügen oder festlegen, wann diese Ansichten beim Scrollen des Benutzers sichtbar werden sollen.

Fazit

Die Design Support Library hat Android viele lang erwartete Tools zur Verfügung gestellt. In Verbindung mit der AppCompat-Bibliothek wird das Hinzufügen von Materialdesign zu Apps viel einfacher, während die Abwärtskompatibilität erhalten bleibt.

Viele Beispiele für die Arbeit mit diesen neuen Komponenten finden Sie in der offiziellen Referenz-App von Google, CheeseSquare, und Tuts + wird weiterhin ausführliche Anleitungen zur Implementierung dieser neuen Funktionen bereitstellen.