Clever Geek Handbook

Polieren der Benutzeroberfläche in Android: StateListAnimator

Hallo Habr! In Erwartung des Kursbeginns „Android Developer. Professionell “haben wir für Sie eine Übersetzung eines weiteren interessanten Materials vorbereitet.







Wir verbringen den größten Teil der Entwicklungszeit für unsere Android-Anwendung damit, nicht an der Benutzeroberfläche zu arbeiten. Wir werfen einfach eine Ansicht ein und beginnen mit dem Schreiben von Code. Mir ist aufgefallen, dass sich die meisten von uns nicht wirklich für die Benutzeroberfläche interessieren. Und ich glaube, dass dies grundsätzlich falsch ist. Entwickler mobiler Apps müssen sich ebenfalls um UI / UX kümmern. Ich sage nicht "Seien Sie ein Experte für mobile Benutzeroberflächen", aber Sie müssen die Designsprache und die Konzepte verstehen.



Ich habe zuvor einen Artikel über Schatten im Materialdesign geschrieben und viele gute Kritiken erhalten. Ich möchte Ihnen allen danken. In „Mastering Shadows in Android“ geht es um Höhe und Schatten in Android. An derselben Stelle habe ich gezeigt, wie ich meine Open-Source-UI-Bibliothek damit ergänzt habe. ( Skalierungslayout ).



In diesem Artikel möchte ich meine Bibliothek mit StateListAnimator verbessern und Ihnen Schritt für Schritt zeigen, wie ich es machen werde.



Inhalt



Dieser Artikel behandelt die folgenden Themen:





Zeichnungszustände



Android hat 17 verschiedene Zustände für Drawable.







Wir haben vielleicht noch nie einige von ihnen getroffen. Ich werde nicht in jeden Staat eintauchen. In den meisten Fällen verwenden wir den pressed, enabled, windows focused, checkedund so weiter. D. Wenn wir wird angenommen , keinen Staat von ziehbar erklären, dass dieser Zustand standardmäßig in Android.



Wir müssen diese Zustände verstehen, um unsere eigene StateListDrawable schreiben zu können .



StateListDrawable



Es handelt sich im Wesentlichen um eine Liste von zeichnbaren Elementen, wobei jedes Element seinen eigenen Status hat. Um ein StateListDrawable zu erstellen, müssen wir eine XML-Datei in einem Ordner erstellen res/drawable. 



<item android:drawable="@drawable/i" android:state_pressed="true"/>


Dies ist ein Artikel. Es hat zwei Eigenschaften. Zeichnungsfähig und Zustand . 



<selector>
   <item
       android:drawable="@drawable/p"
       android:state_pressed="true"/>
   <item
       android:drawable="@drawable/default"/>
</selector>


Dies ist StateListDrawable. Wenn wir, wie bereits erwähnt, keinen Status für ein Element deklarieren, bedeutet dies, dass dies der Standardstatus ist .



Kann ich ShapeDrawable verwenden?



Ja. Anstatt android: drawable zu verwenden, können Sie Ihrem Element eine beliebige Form hinzufügen. Hier ist ein Element mit einem ShapeDrawable .





StateListDrawable



Sie können StateListDrawable ab API-Ebene 1 verwenden. Daher gibt es für StateListDrawable keine Einschränkung auf API-Ebene. 



<View
   android:layout_width="50dp"
   android:layout_height="50dp"
   android:foreground="@drawable/state_list_drawable"
   android:clickable="true"/>


Das ist alles. Jetzt hat unsere Ansicht einen Zustand. Wenn der Benutzer darauf klickt, wird seine Farbe geändert. Wenn der Benutzer es freigibt, hat es einen Standardstatus und eine Standardfarbe.



Aber warte eine Sekunde. Klickbar ? Warum haben wir dieses Attribut hinzugefügt? Müssen wir es auch hinzufügen? Ja. Aber nur für benutzerdefinierte Ansichten. Es braucht Zeit, um es herauszufinden. Buttons funktionieren ohne klickbaren Zugabe , weil sie klickbare standardmäßig . Wenn Sie jedoch StateListDrawable für View, ImageView, Custom View usw. verwenden möchten, müssen Sie ein anklickbares Attribut hinzufügen .




StateListDrawable



Ich habe StateListDrawable in diesem Commit hinzugefügt . Es ähnelt dem Beispiel, das ich oben gegeben habe. Wenn der Benutzer auf das Layout klickt, wird es farbig angezeigt. Aber verbessern wir dies mit StateListAnimator.



StateListAnimator



Denken Sie daran, dass sich der Z-Wert aufgrund von Animationen erhöht, wenn Sie auf den FloatingActionButton klicken. Dies ist sozusagen ein StateListAnimator außerhalb des Bildschirms. Einige Materialdesign-Widgets verfügen über einen eigenen StateListAnimator.



Lassen Sie uns dies mit einer Frage zu StackOverflow klären.







(So ​​entfernen Sie Rahmen / Schatten von Lutschertasten).



Wenn Material Design-Widgets einen eigenen StateListAnimator enthalten, können wir sie auf null setzen, um diese Funktion zu entfernen (nicht empfohlen, sie wurde aus einem bestimmten Grund entwickelt). Und jetzt klingt die Antwort viel logischer.





(Lollipop hat eine böse kleine Funktion namens stateListAnimator, die die Höhe der Schaltflächen verwaltet und Schatten erzeugt.



Entfernen Sie diese stateListAnimator, um Schatten zu entfernen .



Sie haben verschiedene Möglichkeiten, dies zu tun:



Im Code:



button.setStateListAnimator (null);)






Wie können wir es also schaffen?



Um StateListAnimator zu verstehen, müssen wir die Eigenschaftsanimation verstehen . Ich werde in diesem Artikel nicht auf Eigenschaftsanimationen eingehen. Aber zumindest möchte ich Ihnen die Grundlagen zeigen.



Animierende Eigenschaften



Hier ist das einfachste Beispiel einer Eigenschaft in einem Objekt. X ist eine Eigenschaft. 



class MyObject{
 
   private int x;
 
   public int getX() {
       return x;
   }
 
   public void setX(int x) {
       this.x = x;
   }
}


Das Eigenschaftsanimationssystem ist ein robustes Framework, mit dem Sie nahezu alles animieren können . Sie können Animationen für alle Änderungen der Objekteigenschaften im Laufe der Zeit angeben, unabhängig davon, ob sie auf dem Bildschirm angezeigt werden oder nicht . Eine Eigenschaftsanimation ändert den Wert einer Eigenschaft (eines Felds in einem Objekt) über einen bestimmten Zeitraum.







X ist eine Eigenschaft . T ist Zeit . Während der Animation wird die X-Eigenschaft zum angegebenen Zeitpunkt aktualisiert. Im Allgemeinen funktioniert die Eigenschaftsanimation so. Anstelle einer Box kann es eine Ansicht oder ein beliebiges Objekt geben.



ValueAnimatorIst die Basisklasse zum Animieren von Eigenschaften. Sie können einen Listener einrichten, um den ValueAnimator zu aktualisieren und auf Eigenschaftsänderungen zu achten.



ObjectAnimator ist eine Klasse, die von erbtValueAnimator . Sie können ObjectAnimator verwenden, wenn Folgendes für Sie besser geeignet ist:



  • Sie haben ein Objekt (jede Klasse mit einer Eigenschaft).
  • Sie möchten den ValueAnimator-Listener nicht sehen.
  • Sie möchten die Objekteigenschaft automatisch aktualisieren .


Wenn wir also eine Ansicht haben (die ein Objekt ist) und die Ansichtseigenschaft aktualisieren möchten (x-Koordinate, y-Koordinate, Drehung, Übersetzung oder eine andere Eigenschaft, für die die Ansicht einen Getter / Setter hat), können wir den ObjectAnimator verwenden . Lassen Sie uns den StateListAnimator weiter erstellen. 



<selector>
 
   <item android:state_pressed="true">
      <objectAnimator
           android:duration="200"
           android:propertyName="translationZ"
           android:valueTo="6dp"
           android:valueType="floatType" />
   </item>
 
   <item>
      <objectAnimator
           android:duration="200"
           android:propertyName="translationZ"
           android:valueTo="0dp"
           android:valueType="floatType"/>
   </item>
 
</selector>




Die FAB-Schaltfläche animiert ihre Eigenschaft "translationZ", wenn sie gedrückt und losgelassen wird.



Wie ich bereits sagte, können wir die Objekteigenschaft direkt verwenden, ohne die Änderungen im Animator zu beachten. Jede Ansicht verfügt über eine translationZ-Eigenschaft. Auf diese Weise können wir translationZ mit dem ObjectAnimator direkt animieren .



Wir können auch mehrere <objectAnimator>s in kombinieren <set>. Lassen Sie uns eine weitere Eigenschaftsansicht ändern. Skala X und Skala Y .



Hier ist das Ergebnis! Sie erhöht sich jetzt auch, wenn der Benutzer darauf klickt. Und hier ist das Commit .







Sie können auch andere Eigenschaften in Ihrem definieren animator.xml. Weitere Informationen zur Verwendung des ObjectAnimator finden Sie hier.



Das ist alles. Ich plane, mehr über ValueAnimator und ObjectAnimator zu schreiben. Dies ist eine großartige API zum Animieren eines Objekts.



Erfolgreiche Codierung!





More articles:


All Articles