Material Design 2.0 führte mehrere neue Konzepte ein. Eine davon ist die besondere Berücksichtigung der geometrischen Formen von Schnittstellenelementen. Und es gibt eine einfache Möglichkeit, schöne benutzerdefinierte Formen zu erstellen. Es heißt MaterialShapeDrawable. Mal sehen, wie nützlich und einfach es zu bedienen ist.
Es gibt verschiedene Möglichkeiten, dem Bildschirm einer Android-Anwendung grafische Elemente hinzuzufügen. Am einfachsten ist es, Bitmaps im Webp- oder PNG-Format zu importieren. Eine weitere Option ist die Verwendung von VectorDrawable, mit der Sie das Bild auf die gewünschte Größe strecken können. Eine andere Möglichkeit, dem Bildschirm Grafiken hinzuzufügen, ist die Verwendung von ShapeDrawable. Letztere sind der einfachste Weg, einen einfachen Hintergrund hinzuzufügen oder sogar ein Symbol zu erstellen. Mit ShapeDrawable erstellte Bilder sind unabhängig von der Pixeldichte auf dem Bildschirm. Sie können in einer XML-Datei beschrieben werden, Teil einer anderen Grafikressource sein (z. B. StateListDrawable) und sind im Android SDK ab API v.1 vorhanden.
Um das Erscheinungsbild einer Figur zu ändern, können Sie verschiedene ShapeDrawable-Eigenschaften ändern: den Namen der Figur, die Füllfarbe (oder den Farbverlauf) und die Rahmenfarbe der Figur. Für Rechtecke können Sie auch den Radius der Ecken festlegen. Mit diesen Eigenschaften können Sie Grafiken erstellen, die als einzelne Bilder auf dem Bildschirm, Teilern, Schaltflächenhintergründen oder für andere Zwecke verwendet werden. Wenn die Anwendung die API v.21 + und ShapeDrawable als Hintergrund für Elemente mit Höhe verwendet, hat der Schatten unter diesen Elementen auch die richtige Form:
ShapeDrawable ist ein praktisches Tool, das seine Arbeit fast immer gut erledigt. Mit dem Aufkommen von Material Design 2.0 benötigen Entwickler jedoch etwas Flexibleres. Das neue Designsystem fördert die Verwendung verschiedener Formen, um deren Bedeutung, Zustand und individuellen Anwendungsstil hervorzuheben. Ich habe oben geschrieben, dass es mehrere Möglichkeiten gibt, das Gewünschte zu tun, aber die einfachste davon ist nicht mehr relevant. Bedeutet dies, dass wir anfangen müssen, Vektorgrafiken zu verwenden, und dadurch die Fähigkeit verlieren, Schatten für Schnittstellenelemente mit Höhe "frei" zu erzeugen? Oder lohnt es sich, wieder Rasterbilder zu verwenden und grafische Ressourcen für sechs mögliche Pixeldichten auf dem Bildschirm zu erstellen? Glücklicherweise ist mit dem Aufkommen von Material Design 2.0 eine völlig neue Komponentenbibliothek erschienen.
Diese Bibliothek wurde erstellt, um das Erscheinungsbild und Verhalten von Material Design UI-Komponenten auf allen Versionen von Android und anderen Plattformen zu vereinheitlichen (es gibt Versionen dieser Bibliothek für iOS, das Web und für Flutter). Die Komponentenbibliothek implementiert viele Funktionen für das neue Materialdesign. Beispielsweise enthält es die BottomAppBar-Komponente mit dem erwarteten Verhalten. Unter anderen Komponenten und Dienstprogrammen gibt es die MaterialShapeDrawable-Klasse. Meiner Meinung nach ist dies ein notwendiges Werkzeug zur Lösung der Aufgaben, die das neue Designsystem für Entwickler darstellt.
Obwohl MaterialShapeDrawable in der Version 1.0.0 der Bibliothek immer noch als experimentell angesehen wird, kann es verwendet werden, um coole Effekte in der Anwendung zu erstellen. In der MaterialShapeDrawable-Klasse können Sie eine Form beschreiben, indem Sie das Erscheinungsbild ihrer Seiten und jeden ihrer Winkel angeben. Diese angegebenen Eigenschaften können von einem Interpolator gesteuert werden, mit dem sie animiert werden können.
Um Ihr eigenes MaterialShapeDrawable zu erstellen, können Sie den Konstruktor verwenden, an den Sie in den Parametern ein Objekt vom Typ ShapePathModel übergeben müssen. Es speichert Informationen zu jeder Seite und jeder Ecke der Figur in den Klassen EdgeTreatment und CornerTreatment (es gibt immer genau vier Seiten und Winkel, dies beeinträchtigt jedoch nicht die Beschreibung fast jeder Figur mit ihrer Hilfe). Sie können Beschreibungen für jede Seite und Ecke persönlich angeben oder sie für die gesamte Figur auf einmal festlegen, indem Sie eine Methode aufrufen.
Die Bibliothek verfügt bereits über mehrere gebrauchsfertige Beschreibungen der Behandlung der Seiten und Winkel, die die meisten Neuerungen hinsichtlich der Form der in Material Design 2.0 eingeführten Komponenten enthalten. Bereits vorhanden: RoundedCornerTreatment - für abgerundete Ecken, CutCornerTreatment - für abgeschnittene Ecken, TriangleEdgeTreatment - zum Schneiden oder Hinzufügen eines Dreiecks zur Seite. Um ihre Arbeit zu demonstrieren, gibt es ein einfaches Beispiel:
val shapePathModel = ShapePathModel().apply { setAllCorners(CutCornerTreatment(dip(5).toFloat())) setAllEdges(TriangleEdgeTreatment(dip(5).toFloat(), true)) } val backgroundDrawable = MaterialShapeDrawable(shapePathModel).apply { setTint(ContextCompat.getColor(this@MainActivity, R.color.colorPrimary)) paintStyle = Paint.Style.FILL } textView.background = backgroundDrawable
Es wird so aussehen:
Natürlich können Sie einfach Ihre eigenen Beschreibungen von Gesichtern und Winkeln erstellen. Die Form wird immer für das obere linke Element festgelegt, und Drawable führt die Rotations- / Reflexionsoperationen aus, um die fertige Form zu erhalten. Es gibt ein kleines Beispiel, um dies zu demonstrieren:
class CutoutCornersTreatment(val size: Float) : CornerTreatment() { override fun getCornerPath(angle: Float, interpolation: Float, shapePath: ShapePath) { shapePath.reset(0.0f, size * interpolation) shapePath.lineTo(size * interpolation, size * interpolation) shapePath.lineTo(size * interpolation, 0f) } } class CurvedEdgeTreatment(val size: Float) : EdgeTreatment() { override fun getEdgePath(length: Float, interpolation: Float, shapePath: ShapePath) { shapePath.quadToPoint(length / 2f, size * interpolation, length, 0f) } }
Wenn dieses MaterialShapeDrawable als Hintergrund verwendet wird, sieht das Ergebnis folgendermaßen aus:
Das bottomappbar-Paket der neuen Material Component Library verfügt über eine BottomAppBarTopEdgeTreatment. Es beschreibt den Ausschnitt in der BottomAppBar für die Schaltfläche FloatingActionButton. Die Oberseite kann je nach Position und Größe der Schaltfläche animiert werden. Ich rate Ihnen, den Code dieser Klassen zu lesen, um mit eigenen Augen zu sehen, dass MaterialShapeDrawable sehr flexibel zu verwenden ist und fast alles damit gemacht werden kann.
Wenn wir über das übliche ShapeDrawable sprechen, gibt es ein weiteres erwähnenswertes Detail - die Fähigkeit, einen Schatten der Form zu werfen, die der Kontur entspricht. Da Sie jetzt mit MaterialShapeDrawable Konturen sehr ungewöhnlicher Formen erstellen können, wäre es eine Enttäuschung, die Form des Schattens nicht an die Form des Bildes anzupassen, insbesondere wenn diese Schatten in Matarial Design 2.0 überall zu sehen sind. MaterialShapeDrawable berechnet auch das Erscheinungsbild des Schattens. Mit der Eigenschaft shadowEnabled können Sie den Schatten aktivieren, der genau der Kontur der Figur selbst folgt. Außerdem können Sie den Radius, die Höhe und die Farbe des Schattens bestimmen. Klingt zu gut um wahr zu sein? Leider ja. Wenn Sie den Schatten von MaterialShapeDrawable verwenden, erhalten Sie einen normalen Schatten (gezeichnet von der setShadowLayer () -Methode der Paint-Klasse, die zum Zeichnen von Schatten auf den Text erstellt wurde), jedoch auf die Ränder der UI-Komponente zugeschnitten, in der das Ergebnis angezeigt wird:
Beachten Sie, dass MaterialShapeDrawable wie seine API immer noch als experimentell angesehen wird und sich in Zukunft möglicherweise ändern wird. Es ist auch erwähnenswert, dass der Code für die neue Materialkomponentenbibliothek geöffnet ist. Daher ist es sehr willkommen, Tickets in einem Bug-Tracker zu erstellen oder sogar Anfragen zur Behebung bekannter Probleme abzurufen. Wenn Sie diese Zeilen lesen, unterscheidet sich die API im Hauptzweig der Bibliothek bereits geringfügig (z. B. wird ShapeAppearanceModel anstelle von ShapePathModel verwendet), was auf aktive Arbeit hinweist. Eine der vielversprechenden Funktionen in der nächsten Version ist möglicherweise die Möglichkeit, die Standardseiten / -winkel für das gesamte Anwendungsthema zu bestimmen. Weitere Informationen hierzu finden Sie in der offiziellen Dokumentation oder in den Bibliotheksquellen.
Vom Übersetzer:
Es ist cool, dass es Tools gibt, die dem üblichen ShapeDrawable neue Funktionen hinzufügen und dabei helfen, nicht die einfachsten Grafiken zu erstellen. Dies ermöglicht es dem Entwickler, den Designer nicht für jede Kleinigkeit zu ziehen, sondern das Problem selbst zu lösen, und benötigt erheblich weniger Zeit. Wir warten auf die nächsten Versionen der Material Components-Bibliothek, um in der Praxis neue Wege zur Lösung bestehender Probleme zu finden.