Praktik: Dasar-Dasar Compose

1. Sebelum memulai

Selamat! Anda telah membuat aplikasi pertama dan memperoleh pengetahuan dasar-dasar Jetpack Compose. Sekarang Anda siap untuk mempraktikkan semua yang telah Anda pelajari.

Latihan ini berfokus pada cara membuat aplikasi dengan composable UI yang telah Anda pelajari. Latihan ini terinspirasi oleh kasus penggunaan di dunia nyata, yang beberapa di antaranya mungkin pernah Anda temui sebelumnya.

Latihan ini memberi Anda resource yang dibutuhkan untuk implementasi, seperti gambar dan string. Resource string berisi teks yang ditampilkan di UI. Anda menambahkan string ini ke file strings.xml dan menggunakannya dalam kode Anda.

Selain itu, latihan ini menyediakan serangkaian spesifikasi, seperti ukuran font, untuk digunakan pada konten teks atau padding di sekitar komponen UI. Spesifikasi ini membantu Anda membuat UI yang konsisten dan sering memandu developer untuk memvisualisasikan dan mem-build layar. Anda mungkin menemukan spesifikasi yang serupa saat bekerja dengan tim untuk organisasi.

Beberapa latihan mungkin mengharuskan Anda menggunakan Modifier. Jika demikian, lihat bagian Referensi yang tersedia untuk setiap soal. Anda akan menemukan link ke dokumentasi yang terkait dengan pengubah atau properti. Anda dapat membaca dokumentasi dan menentukan cara menyertakan konsep dalam aplikasi. Kemampuan untuk memahami dokumentasi adalah salah satu keterampilan penting yang harus Anda kembangkan untuk meningkatkan pengetahuan Anda.

Kode solusi tersedia di bagian akhir, tetapi cobalah untuk menyelesaikan latihan sebelum Anda memeriksa jawabannya. Pertimbangkan solusi tersebut sebagai salah satu cara untuk menerapkan aplikasi. Kode solusi menggunakan composable dasar dan konsep yang telah Anda pelajari sejauh ini. Ada banyak hal yang perlu ditingkatkan, jadi jangan ragu untuk bereksperimen dan mencoba berbagai hal.

Selesaikan semua soal latihan tanpa terburu-buru. Sebaiknya manfaatkan waktu semaksimal mungkin untuk menyelesaikan setiap soal dengan cermat.

Terakhir, Anda harus menggunakan Android Studio untuk membuat project terpisah untuk latihan ini.

Prasyarat

Yang akan Anda butuhkan

  • Komputer yang dilengkapi akses internet dan Android Studio.

2. Artikel Compose

Aplikasi Learn Together menampilkan daftar artikel tentang beberapa library Jetpack. Pengguna dapat memilih topik yang diinginkan dan mempelajari pengembangan terbarunya.

Dalam latihan ini, Anda akan mem-build layar untuk aplikasi tersebut, yang menampilkan tutorial untuk Jetpack Compose. Anda dapat menggunakan resource gambar dan string yang disediakan di bagian Resource untuk soal ini.

Screenshot final

Setelah menyelesaikan implementasi, desain Anda akan cocok dengan screenshot ini:

c8c16974d0aef074.png

Spesifikasi UI

Ikuti spesifikasi UI ini:

Spesifikasi UI untuk mem-build layar artikel Compose.

  1. Setel gambar untuk mengisi lebar seluruh layar.
  2. Setel composable Text pertama ke ukuran font 24sp dan padding 16dp (awal, akhir, bawah, dan atas).
  3. Setel composable Text kedua ke ukuran font default, padding 16dp (awal dan akhir), dan perataan teks Justify.
  4. Setel composable Text ketiga ke ukuran font default, padding 16dp (awal, akhir, bawah, dan atas), dan perataan teks Justify.

Resource

Anda memerlukan gambar ini untuk diimpor ke project dan string berikut:

  • Jetpack Compose tutorial
  • Jetpack Compose is a modern toolkit for building native Android UI. Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.
  • In this tutorial, you build a simple UI component with declarative functions. You call Compose functions to say what elements you want and the Compose compiler does the rest. Compose is built around Composable functions. These functions let you define your app\'s UI programmatically because they let you describe how it should look and provide data dependencies, rather than focus on the process of the UI\'s construction, such as initializing an element and then attaching it to a parent. To create a Composable function, you add the @Composable annotation to the function name.

Petunjuk: Composable mana yang menyejajarkan turunannya secara vertikal?

Referensi

3. Pengelola tugas

Aplikasi Task Manager memungkinkan pengguna mengelola tugas sehari-hari dan memeriksa tugas yang perlu diselesaikan.

Dalam latihan ini, Anda akan mem-build layar yang dilihat oleh pengguna saat mereka menyelesaikan semua tugas untuk hari tertentu.

Screenshot final

Setelah menyelesaikan implementasi, desain Anda akan cocok dengan screenshot ini:

b5a2de2b0064e729.png

Spesifikasi UI

Ikuti spesifikasi UI berikut:

Spesifikasi UI untuk layar tugas selesai.

  1. Tengahkan semua konten secara vertikal dan horizontal pada layar.
  2. Setel composable Text pertama ke ketebalan font Bold, padding atas 24dp, dan padding bawah 8dp.
  3. Setel composable Text kedua ke ukuran font 16sp.

Resource

Gambar ini, yang perlu Anda download lalu impor ke project, dan string berikut:

  • All tasks completed
  • Nice work!

4. Kuadran Compose

Dalam latihan ini, Anda perlu menerapkan sebagian besar konsep yang telah Anda pelajari sejauh ini, lalu melangkah lebih jauh untuk menjelajahi Modifier dan properti baru. Tampaknya seperti tantangan tambahan, tetapi jangan khawatir! Anda dapat memeriksa bagian Referensi untuk soal ini. Di sana Anda dapat menemukan link ke class dan properti Modifier ini, serta menggunakannya untuk implementasi.

Anda perlu membuat aplikasi yang menampilkan informasi tentang fungsi Composable yang Anda telah pelajari.

Layar dibagi menjadi empat kuadran. Setiap kuadran memberikan nama fungsi Composable dan menjelaskannya dalam satu kalimat.

Screenshot final

Setelah menyelesaikan implementasi, desain Anda akan cocok dengan screenshot ini:

c0c70117bbd3b5b5.png

Spesifikasi UI

Ikuti spesifikasi UI ini untuk seluruh layar:

  • Bagi seluruh layar menjadi empat bagian yang sama, yang masing-masing berisi kartu Compose dan menampilkan informasi tentang fungsi Composable.

5b11c91ad6a356eb.png

Ikuti spesifikasi berikut untuk setiap kuadran:

e6befaa575985819.png

  1. Setel seluruh kuadran (awal, akhir, atas, dan bawah) ke padding 16dp.
  2. Tengahkan semua konten secara vertikal dan horizontal di setiap kuadran.
  3. Format composable Text pertama dalam cetak tebal dan setel ke padding bawah 16dp.
  4. Setel composable Text kedua ke ukuran font Default.

Resource

Warna ini:

  • Color(0xFFEADDFF)
  • Color(0xFFD0BCFF)
  • Color(0xFFB69DF8)
  • Color(0xFFF6EDFF)

String ini:

  • Text composable
  • Displays text and follows the recommended Material Design guidelines.
  • Image composable
  • Creates a composable that lays out and draws a given Painter class object.
  • Row composable
  • A layout composable that places its children in a horizontal sequence.
  • Column composable
  • A layout composable that places its children in a vertical sequence.

Referensi

5. Kode solusi