Daftar Isi:

Aplikasi Android Bagian 1: Layar Pembuka Menggunakan Fragmen/Kotlin: 5 Langkah
Aplikasi Android Bagian 1: Layar Pembuka Menggunakan Fragmen/Kotlin: 5 Langkah

Video: Aplikasi Android Bagian 1: Layar Pembuka Menggunakan Fragmen/Kotlin: 5 Langkah

Video: Aplikasi Android Bagian 1: Layar Pembuka Menggunakan Fragmen/Kotlin: 5 Langkah
Video: Dicoding Developer Coaching #10: Android | Multiple View dalam Satu Layar Menggunakan Fragment 2024, November
Anonim
Image
Image
Pengelola Fragmen dan 3 Layar
Pengelola Fragmen dan 3 Layar

Halo lagi, kemungkinan besar Anda memiliki waktu "bebas" di rumah karena COVID19 dan Anda dapat kembali untuk memeriksa topik yang ingin Anda pelajari di masa lalu.

Pengembangan Aplikasi Android jelas merupakan salah satunya bagi saya dan saya memutuskan beberapa minggu yang lalu untuk mencoba kedua kalinya.

Pemrograman di Kotlin jelas mengurangi upaya pengkodean dan membantu mencapai hasil dalam waktu yang cukup singkat. Ini Benar-Benar Hebat!

Dalam seri tutorial ini, saya akan menjelaskan cara mengembangkan Pelacak Skor Tenis. Aplikasi ini dapat digunakan saat Anda bermain dengan teman dan/atau keluarga (Anda dapat memberikan tablet kepada anak Anda dan membuatnya sibuk:)). Aplikasi ini didasarkan pada contoh Penghitung Kotlin berikut.

Tutorial memiliki bagian-bagian berikut:

Bagian 1: Splash Screen menggunakan Fragmen (kita di sini sekarang)

Bagian 2: Konfigurasi Cocok - Properti

Bagian 3: Pelacak Skor Pertandingan

Ide utamanya adalah untuk membagi aplikasi dalam 3 layar berbeda yang masing-masing akan memanggil yang berikutnya, setelah selesai atau ketika pengguna menekan tombol masing-masing.

Di bagian pertama ini, saya akan menjelaskan cara membuat layar intro -> cek video di atas.

Perlengkapan

Fitur Android yang digunakan di Bagian ini:

  • Fragmen
  • Animasi
  • Getaran
  • Pemutar Media
  • Pendengar

Alat yang Diperlukan:

  • Android Studio
  • Kotlin 1.3.61
  • API tingkat 28

Aset yang Diperlukan

File suara bip

Langkah 1: Desain Pengalaman Pengguna

Mari kita jelaskan fitur layar Intro kita.

  1. kami ingin memiliki layar penuh dalam warna putih
  2. kami ingin layar selalu dalam mode lansekap
  3. kami ingin warna teks logo kami berwarna abu-abu
  4. kami ingin warna bola kami dalam nada hijau
  5. kami ingin teks logo kami memudar
  6. kami ingin bola tenis bergerak di layar (bola memantul)
  7. kami ingin memainkan suara setiap kali bola menyentuh permukaan
  8. kami ingin memicu getaran telepon saat suara diputar
  9. kami ingin durasi intro kurang dari 4 detik.

Langkah 2: Pengelola Fragmen dan 3 Layar

Pengelola Fragmen dan 3 Layar
Pengelola Fragmen dan 3 Layar

Mari kita ingat ide utama dari App kita, kita ingin memiliki 3 layar (Intro, Properties dan Match Score). Untuk ini kita akan menggunakan Fragmen. Jadi kita membutuhkan 3 dari mereka satu untuk setiap layar. Lihat cuplikan kode pertama.

Di bagian kedua, kita dapat menemukan bagaimana kita memanggil fragmen pertama kita. Fragmen Splash adalah yang akan digunakan untuk Intro kami.

Langkah 3: Tata Letak Layar Aplikasi dan Intro

Tata Letak Layar Aplikasi dan Intro
Tata Letak Layar Aplikasi dan Intro
Tata Letak Layar Aplikasi dan Intro
Tata Letak Layar Aplikasi dan Intro
Tata Letak Layar Aplikasi dan Intro
Tata Letak Layar Aplikasi dan Intro
  • Untuk memperbaiki posisi layar dan mengabaikan rotasi telepon, kita perlu menambahkan kode berikut Gambar 1 di AndroidManifest.xml.
  • Untuk menghapus Action Bar dari semua layar, kita perlu menambahkan kode berikut Gambar 2 di styles.xml
  • Untuk mendorong layar penuh di semua layar, kita perlu mengatur beberapa tanda seperti pada Gambar 3 dengan 2 metode berbeda. Oncreate() dan onWindowFocusChanged.

Langkah 4: Menentukan Logo dan Sistem Bola

Mendefinisikan Logo dan Sistem Bola
Mendefinisikan Logo dan Sistem Bola
Mendefinisikan Logo dan Sistem Bola
Mendefinisikan Logo dan Sistem Bola
  • kami mendefinisikan sebelum teks kami sebagai abu-abu, ini dilakukan di bawah file styles.xml. Lihat Gambar 1.
  • kami mendefinisikan juga bahwa bola harus dalam nada hijau. Untuk ini, kami membuat ball.xml di bawah folder drawable. Cek Gambar 2

Langkah 5: Deskripsi Animasi

Disini saya akan menjelaskan logika dan urutan animasinya. Saya pikir tidak masuk akal untuk menambahkan potongan kode di sini, lebih baik Anda membaca sendiri kodenya.

Ide animasinya adalah sebagai berikut:

  • Setelah fragmen dibuat, logo teks dibuat dan dimulai
  • Setelah animasi logo teks selesai, gerakan parabola pertama bola tenis dipanggil
  • Setelah gerakan parabola pertama selesai, sebuah suara dimainkan dan telepon bergetar..dan gerakan parabola berikutnya dipanggil
  • Setelah gerakan parabola terakhir selesai dan suara/getaran dijalankan, kita mencapai titik untuk memanggil layar kedua kita.

Catatan: Saya tidak membuat kelas abstrak untuk animasi, karena saya ingin menjaga agar kode tetap datar… lebih mudah diikuti setidaknya untuk saya:)

Saya akan memposting bagian kedua dari seri di hari-hari berikutnya, ikuti saya jika Anda menyukai bagian ini dan jika tidak, saya akan senang untuk mendapatkan tanggapan Anda.

Direkomendasikan: