Setelah saya melihat ceramah tentang Android Jetpack Compose di Google IO 2019, saya ingin mencobanya segera. Selain itu, pendekatan yang diterapkan di dalamnya sangat mengingatkan Flutter, yang saya tertarik sebelumnya .

Pustaka Compose sendiri masih dalam tahap pra-alfa, jadi tidak banyak dokumentasi dan artikel tentangnya tersedia. Selanjutnya, saya akan mengandalkan beberapa sumber daya yang berhasil saya temukan, ditambah pustaka sumber terbuka .

Sumber daya ini adalah:

• Android Developers Backstage: Episode 115: Jetpack Compose
• Tulis dari prinsip pertama
• Menyelam ke dalam komposisi jetpack

Apa itu Komposisi Android Jetpack?

Sebelumnya, seluruh Android UI didasarkan pada kelas View. Ini telah terjadi sejak awal Android. Dan dalam hal ini, banyak cacat warisan dan arsitektur telah terakumulasi, yang dapat diperbaiki. Tetapi untuk melakukan ini cukup sulit tanpa melanggar semua kode yang ditulis berdasarkan mereka.

Selama beberapa tahun terakhir, banyak konsep baru telah muncul di dunia aplikasi klien (termasuk tren Frontend), sehingga tim Google telah mengambil jalur radikal dan menulis ulang seluruh level UI di Android dari awal. Jadi pustaka Android Jetpack Compose muncul, yang mencakup trik konseptual dari React, Litho, Vue, Flutter, dan banyak lainnya.

Mari kita melihat beberapa fitur UI yang ada dan membandingkannya dengan Compose.

1. Kemerdekaan dari rilis Android

UI yang ada terkait erat dengan platform. Ketika komponen pertama Desain Bahan muncul, mereka hanya bekerja dengan Android 5 (API21) dan lebih tinggi. Untuk bekerja pada versi sistem yang lebih lama, Anda harus menggunakan Perpustakaan Dukungan.

Compose adalah bagian dari Jetpack, yang membuatnya independen dari versi sistem dan memungkinkan untuk digunakan bahkan dalam versi Android yang lebih lama (setidaknya dengan API21).

2. Seluruh API Kotlin

Sebelumnya, Anda harus berurusan dengan file yang berbeda untuk membuat UI. Kami menjelaskan markup dalam xml, dan kemudian menggunakan kode Java / Kotlin untuk membuatnya berfungsi. Kemudian kami kembali ke file-file xml lain untuk mengatur tema, animasi, navigasi, ... Dan bahkan mencoba menulis kode dalam xml (Data Binding).

Menggunakan Kotlin memungkinkan Anda untuk menulis UI gaya deklaratif langsung dalam kode, bukan xml.

3. Komposit = Komposit: menggunakan komposisi alih-alih pewarisan

Membuat elemen UI khusus bisa agak rumit. Kita perlu mewarisi dari View atau turunannya dan mengurus banyak properti penting sebelum dimulai dengan benar. Misalnya, kelas TextView berisi sekitar 30 ribu baris kode Java. Ini disebabkan oleh fakta bahwa ia mengandung banyak logika yang tidak perlu di dalam dirinya sendiri yang diwarisi oleh elemen-elemen turunan.

Tulisan muncul di sisi lain, menggantikan warisan dengan komposisi.

Padding adalah yang paling cocok untuk menggambarkan tentang apa itu:

Di UI yang ada, untuk membuat TextView indentasi pada 30dp :

kita perlu menulis kode berikut:

 <TextView android:id="@+id/simpleTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/cyan" android:padding="30dp" <------------------------ NOTE THIS android:text="Drag or tap on the seek bar" /> 

Ini berarti bahwa di suatu tempat di dalam TextView.java atau superclasses ada logika yang tahu bagaimana cara menghitung dan menggambar indentasi.

Mari kita lihat bagaimana Anda dapat melakukan hal yang sama di Compose:

 // note: the cyan background color is omitted for now to keep it simple Padding(30.dp) { Text("Drag or tap on the seek bar") } 

Perubahan
TextView menjadi Text() saja Text() . Properti android:padding telah berubah menjadi Padding yang membungkus Text .

Manfaatnya
Dengan demikian, Text hanya bertanggung jawab untuk merender teks itu sendiri. Dia tidak tahu bagaimana cara menghitung indentasi. Padding , di sisi lain, hanya bertanggung jawab untuk padding dan tidak lebih. Dapat digunakan di sekitar elemen lain.

4. Aliran data searah

Aliran data searah adalah konsep penting jika kita berbicara, misalnya, tentang mengendalikan keadaan CheckBox dalam sistem UI yang ada. Ketika pengguna mengetuk CheckBox , statusnya menjadi checked = true : kelas memperbarui kondisi tampilan dan memanggil panggilan balik dari kode yang memantau perubahan negara.

Kemudian, dalam kode itu sendiri, misalnya, di ViewModel , Anda perlu memperbarui variabel state terkait. Anda sekarang memiliki dua salinan dari keadaan tertekan, yang dapat menimbulkan masalah. Misalnya, mengubah nilai variabel state di dalam ViewModel akan menyebabkan CheckBox diperbarui, yang mungkin berakhir dalam loop tanpa akhir. Untuk menghindari ini, kita harus membuat semacam tongkat penyangga.

Menggunakan Compose akan membantu menyelesaikan masalah ini, karena didasarkan pada prinsip kemanunggalan. Perubahan status akan diproses di dalam kerangka kerja: kami hanya memberikan model data ke dalam. Selain itu, komponen dalam Compose sekarang tidak mengubah statusnya sendiri. Sebaliknya, itu hanya memanggil panggilan balik, dan sekarang tugas aplikasi untuk mengubah UI.

5. Meningkatkan debugging

Karena seluruh UI sekarang ditulis dalam Kotlin, Anda sekarang dapat men-debug UI. Saya tidak mencoba ini sendiri, tetapi di podcast mereka mengatakan bahwa debugger dan breakpoint bekerja di Compose.

Cukup kata-kata, tunjukkan kodenya

Saya tahu, saya ingin cepat melihat seperti apa UI dalam kode (spoiler: sangat mirip dengan Flutter jika Anda mencoba menulis di dalamnya).

Kami akan mulai dengan membuat beberapa View sederhana, lalu membandingkan tampilannya di UI yang ada dan di Tulis.

1. FrameLayout vs Wrap + Padding + Background

Kami menggunakan kembali contoh kami di atas dan mencoba membuat TextView ini menjorok pada 30dp dengan latar belakang pirus:

UI yang ada:

 <TextView android:id="@+id/simpleTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/cyan" <-------------- NOTE THIS android:padding="30dp" <------------------------ AND THIS android:text="Drag or tap on the seek bar" /> 

Sekarang lihat kode yang melakukan hal yang sama di Compose:

 @Composable fun MyText() { Wrap { Padding(30.dp) { DrawRectangle(color = Color.Cyan) Text("Drag or tap on the seek bar") } } } 

Inilah beberapa hal baru. Karena Text hanya tahu tentang rendering teks, itu tidak peduli tentang padding dan latar belakang. Karena itu, untuk menambahkannya, kita perlu menggunakan tiga fungsi terpisah:

• DrawRectangle latar belakang
• Padding indent
• Wrap adalah fungsi yang overlay parameter seperti FrameLayout .

Mudah Tapi ini sedikit berbeda dari sistem UI yang ada yang kita semua terbiasa.

2. Vertikal LinearLayout vs Column

Sekarang mari kita coba melakukan sesuatu yang setara dengan LinearLayout lama kita yang baik.
Untuk menempatkan dua elemen satu di bawah yang lain, seperti pada gambar di bawah ini, kita dapat menggunakan Column :

Kode akan terlihat seperti ini:

 @Composable fun FormDemo() { Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") Button(text = "Next") } } 

Bersarang di elemen Column akan terletak secara vertikal di bawah yang lain.

2a. Lekukan

Anda mungkin memperhatikan bahwa teks dan tombol terlalu dekat ke tepi. Karena itu, tambahkan Padding .

 @Composable fun FormDemo() { Padding(10.dp) { //   Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") Button(text = "Next") } } } 

Itu terlihat lebih baik:

2b. Interval

Kami juga dapat menambahkan beberapa lekukan antara Text dan Button :

 @Composable fun FormDemo() { Padding(10.dp) { Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") HeightSpacer(10.dp) //    Button(text = "Next") } } } 

Seperti apa tampilan layar kita sekarang:

2c. Horizontal LinearLayout vs Row

Tempatkan tombol kedua di sebelah yang pertama:

Kode untuk ini:

 @Composable fun FormDemo() { Padding(10.dp) { Column(crossAxisAlignment = CrossAxisAlignment.Start) { Text("Click the button below: ") HeightSpacer(10.dp) Row { //   Button(text = "Back") //   WidthSpacer(10.dp) //    Button(text = "Next") } } } } 

Di dalam Row dua tombol akan horisontal. WidthSpacer menambahkan jarak di antara mereka.

2d. Gravity vs Alignment

Sejajarkan elemen kami di tengah, seperti gravity di UI saat ini. Untuk menunjukkan perbedaan, saya akan mengomentari baris lama dan menggantinya dengan yang baru:

 @Composable fun FormDemo() { Padding(10.dp) { // Column(crossAxisAlignment = CrossAxisAlignment.Start) { Column(crossAxisAlignment = CrossAxisAlignment.Center) { //  Text("Click the button below: ") HeightSpacer(10.dp) // Row { Row(mainAxisSize = FlexSize.Min) { //    Button(text = "Back") WidthSpacer(10.dp) Button(text = "Next") } } } } 

Kami akan berhasil:

Dengan crossAxisAlignment = CrossAxisAlignment.Center elemen bersarang akan dipusatkan secara horizontal. Kita juga harus mengatur parameter Row ke mainAxisSize = FlexSize.Min , mirip dalam perilaku untuk layout_width = wrap_content , sehingga tidak meregangkan layar karena default mainAxisSize = FlexSize.Max , yang berperilaku seperti layout_width = match_parent .

2d. Komentar

Dari apa yang kami lihat dalam contoh di atas, Anda dapat melihat bahwa semua elemen dibangun gabungan dari fungsi yang terpisah: padding adalah fungsi yang terpisah, spacer adalah fungsi yang terpisah, alih-alih menjadi properti di dalam Text , Button atau Column .

Elemen yang lebih kompleks seperti RecyclerView atau ConstraintLayout sedang dalam pengembangan: oleh karena itu, saya tidak dapat menemukan contoh dengan mereka di sumber demo.

3. Gaya dan Tema

Anda mungkin memperhatikan bahwa tombol-tombol di atas berwarna ungu secara default. Ini karena mereka menggunakan gaya default. Mari kita lihat bagaimana gaya bekerja di Compose.

Dalam contoh di atas, FormDemo ditandai dengan anotasi @Composable . Sekarang saya akan menunjukkan bagaimana elemen ini digunakan dalam Activity :

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper{ MaterialTheme { FormDemo() } } } } 

Alih-alih fungsi setContentView() , kami menggunakan setContent() , fungsi ekstensi dari pustaka Compose.kt .

CraneWrapper berisi pohon Tulis dan menyediakan akses ke Context , Density , FocusManager dan TextInputService .

MaterialTheme memungkinkan Anda untuk menyesuaikan tema untuk elemen.

Misalnya, saya dapat mengubah warna utama tema menjadi cokelat sebagai berikut:

 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CraneWrapper{ // MaterialTheme { MaterialTheme(colors = MaterialColors(primary = Color.Maroon)) { FormDemo() } } } } 

Sekarang layar kita akan terlihat seperti ini:

Warna dan font lain yang dapat diubah: MaterialTheme.kt # 57

Kegiatan Rally memberikan contoh yang baik tentang bagaimana menyesuaikan topik: kode sumber ke RallyTheme.kt

Apa yang dilihat / dibaca

Jika Anda menginginkan lebih, Anda dapat mengumpulkan proyek sampel sesuai dengan instruksi di sini .

Saat pengguna Windows menulis, sekarang tidak ada cara resmi untuk meluncurkan Compose, tetapi ada panduan tidak resmi dari kotlinlang Slack .

Pertanyaan tentang Tulisan dapat ditanyakan kepada pengembang di saluran #compose kotlinlang Slack.

Tinggalkan tautan lain di komentar - yang paling berguna akan ditambahkan di sini.

Kesimpulan

Pengembangan perpustakaan ini berjalan lancar, sehingga setiap antarmuka yang ditampilkan di sini dapat berubah. Masih ada banyak hal yang dapat Anda pelajari dalam kode sumber, seperti @Model dan aliran data searah (aliran data searah). Mungkin ini adalah topik untuk artikel selanjutnya.