Clever Geek Handbook

Memoles UI di Android: StateListAnimator

Halo, Habr! Untuk mengantisipasi dimulainya kursus "Pengembang Android. Profesional ” kami telah menyiapkan terjemahan dari materi menarik lainnya untuk Anda.







Kami menghabiskan sebagian besar waktu pengembangan untuk aplikasi Android kami tidak bekerja pada antarmuka pengguna - kami hanya menampilkan dan mulai menulis kode. Saya perhatikan bahwa kebanyakan dari kita tidak terlalu peduli dengan antarmuka pengguna. Dan saya pikir ini secara fundamental salah. Pengembang aplikasi seluler juga harus menjaga UI / UX. Saya tidak mengatakan "jadilah ahli dalam UI seluler", tetapi Anda harus memahami bahasa dan konsep desain.



Saya sebelumnya menulis artikel tentang bayangan dalam desain material dan menerima banyak ulasan bagus. Saya ingin berterima kasih kepada Anda semua. “Menguasai Bayangan di Android” berbicara tentang ketinggian dan bayangan di Android. Di tempat yang sama, saya menunjukkan bagaimana saya melengkapi perpustakaan UI open source saya dengan mereka. ( Tata Letak Penskalaan ).



Pada artikel ini, saya ingin meningkatkan perpustakaan saya menggunakan StateListAnimator dan menunjukkan kepada Anda langkah demi langkah bagaimana saya akan melakukannya.



Kandungan



Artikel ini membahas topik-topik berikut:





Status yang dapat digambar



Android memiliki 17 status berbeda untuk Drawable.







Kami mungkin belum pernah bertemu dengan beberapa dari mereka. Saya tidak akan mempelajari setiap negara bagian. Dalam kebanyakan kasus, kita menggunakan pressed, enabled, windows focused, checkeddan sebagainya. D. Jika kita tidak menyatakan keadaan ditarik, diasumsikan bahwa negara ini secara default di Android.



Kita perlu memahami status ini untuk menulis StateListDrawable kita sendiri .



StateListDrawable



Ini pada dasarnya adalah daftar item yang dapat digambar, di mana setiap item memiliki statusnya sendiri. Untuk membuat StateListDrawable, kita perlu membuat file XML di dalam folder res/drawable. 



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


Ini adalah sebuah item. Ini memiliki dua sifat. Drawable dan State . 



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


Ini adalah StateListDrawable. Jika kita tidak mendeklarasikan keadaan untuk suatu elemen, seperti yang saya sebutkan sebelumnya, ini berarti bahwa ini adalah keadaan default .



Bisakah saya menggunakan ShapeDrawable?



Iya. Daripada menggunakan android: drawable, Anda bisa menambahkan bentuk arbitrer ke elemen Anda. Berikut adalah elemen dengan ShapeDrawable .





StateListDrawable



Anda dapat menggunakan StateListDrawable dari API level 1. Jadi, tidak ada batasan level API untuk StateListDrawable. 



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


Itu saja. Sekarang pandangan kita memiliki status. Ketika pengguna mengkliknya, warnanya akan berubah. Ketika pengguna melepaskannya, itu akan memiliki status dan warna default.



Tapi tunggu sebentar. Dapat diklik ? Mengapa kami menambahkan atribut ini? Apakah kita juga perlu menambahkannya? Iya. Tapi hanya untuk tampilan khusus. Perlu waktu untuk mencari tahu. Tombol berfungsi dengan baik tanpa menambahkan dapat diklik, karena mereka dapat diklik secara default . Tetapi jika Anda ingin menggunakan StateListDrawable untuk View, ImageView, Custom View, dll., Anda perlu menambahkan atribut yang dapat diklik .




StateListDrawable



Saya menambahkan StateListDrawable dalam komit ini . Ini mirip dengan contoh yang saya berikan di atas. Saat pengguna mengklik tata letak, itu berwarna. Tapi mari tingkatkan ini dengan StateListAnimator.



StateListAnimator



Ingatlah bahwa ketika Anda mengklik FloatingActionButton, nilai Z-nya meningkat karena animasi. Ini adalah StateListAnimator off-screen. Beberapa widget desain material memiliki StateListAnimator sendiri di dalamnya.



Mari kita selesaikan ini dengan pertanyaan di StackOverflow.







(Bagaimana menghapus border / shadow dari tombol lollipop).



Jika widget Desain Material memiliki StateListAnimator sendiri di dalamnya, kita dapat menyetelnya ke null untuk menghapus fungsi ini (tidak disarankan, tidak dirancang untuk apa-apa.) Dan sekarang jawabannya terdengar jauh lebih logis.





(Lollipop memiliki fungsi kecil yang disebut stateListAnimatormenangani ketinggian tombol, menghasilkan bayangan.



Hapus stateListAnimatoruntuk menghilangkan bayangan.



Anda memiliki beberapa opsi untuk melakukan ini:



Dalam kode:



button.setStateListAnimator (null);)






Jadi bagaimana kita membuatnya?



Untuk memahami StateListAnimator, kita perlu memahami animasi properti . Saya tidak akan mendalami animasi properti di artikel ini. Tapi setidaknya saya ingin menunjukkan dasar-dasarnya.



Properti animasi



Berikut adalah contoh properti paling sederhana dalam sebuah objek. X adalah properti. 



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


Sistem animasi properti adalah kerangka kerja tangguh yang memungkinkan Anda menganimasikan hampir semua hal . Anda dapat menentukan animasi untuk setiap properti objek yang berubah seiring waktu, terlepas dari apakah itu ditampilkan di layar atau tidak . Animasi properti mengubah nilai properti (bidang dalam objek) selama jangka waktu tertentu.







X adalah properti . T adalah waktu . Selama animasi, properti X diperbarui pada waktu yang ditentukan. Secara umum, begitulah cara kerja animasi properti. Alih-alih kotak, bisa ada tampilan atau objek apa pun.



ValueAnimatorAdalah kelas dasar untuk menganimasikan properti. Anda dapat menyiapkan pendengar untuk memperbarui ValueAnimator dan mengawasi perubahan properti.



ObjectAnimator adalah kelas yang diwarisi dariValueAnimator . Anda dapat menggunakan ObjectAnimator jika berikut ini lebih cocok untuk Anda:



  • Anda memiliki objek (kelas apa pun dengan beberapa properti).
  • Anda tidak ingin menonton pendengar ValueAnimator.
  • Anda ingin memperbarui properti objek secara otomatis.


Jadi, jika kita memiliki tampilan (yang merupakan objek) dan ingin memperbarui properti tampilan (koordinat x, koordinat y, rotasi, terjemahan, atau properti lain yang tampilan tersebut memiliki getter / setter), kita dapat menggunakan ObjectAnimator . Mari lanjutkan membuat StateListAnimator. 



<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>




Tombol FAB menganimasikan properti "translationZ" saat ditekan dan dilepaskan.



Seperti yang saya katakan sebelumnya, kita bisa menggunakan properti objek secara langsung tanpa mengamati perubahan pada animator. Setiap Tampilan memiliki properti translationZ. Dengan cara ini kita bisa langsung menganimasikan translationZ menggunakan ObjectAnimator.



Kita juga bisa menggabungkan beberapa <objectAnimator>s menjadi <set>. Mari kita ubah satu lagi Tampilan properti. Skala X dan skala Y .



Inilah hasilnya! Sekarang juga tumbuh saat diklik oleh pengguna. Dan inilah komitmennya .







Anda juga dapat menentukan properti lain di file animator.xml. Anda dapat menemukan informasi lebih lanjut tentang menggunakan ObjectAnimator di sini.



Itu saja. Saya berencana untuk menulis lebih banyak tentang ValueAnimator dan ObjectAnimator. Ini adalah API yang bagus untuk menganimasikan objek.



Selamat membuat kode!





More articles:


All Articles