Daftar Isi:
- Perlengkapan
- Langkah 1: Desain Pengalaman Pengguna
- Langkah 2: Pengelola Fragmen dan 3 Layar
- Langkah 3: Tata Letak Layar Aplikasi dan Intro
- Langkah 4: Menentukan Logo dan Sistem Bola
- Langkah 5: Deskripsi Animasi
Video: Aplikasi Android Bagian 1: Layar Pembuka Menggunakan Fragmen/Kotlin: 5 Langkah
2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:54
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.
- kami ingin memiliki layar penuh dalam warna putih
- kami ingin layar selalu dalam mode lansekap
- kami ingin warna teks logo kami berwarna abu-abu
- kami ingin warna bola kami dalam nada hijau
- kami ingin teks logo kami memudar
- kami ingin bola tenis bergerak di layar (bola memantul)
- kami ingin memainkan suara setiap kali bola menyentuh permukaan
- kami ingin memicu getaran telepon saat suara diputar
- kami ingin durasi intro kurang dari 4 detik.
Langkah 2: 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
- 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
- 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:
Mengunduh dan Menggunakan Android Studio Dengan Kotlin: 4 Langkah
Mengunduh dan Menggunakan Android Studio Dengan Kotlin: Hai, saya harap Anda semua baik-baik saja selama pandemi ini. Dalam tutorial ini saya akan mengajari Anda cara mengunduh Android Studio dan menjalankan aplikasi pertama Anda dengan Kotlin. Di akhir tutorial ini Anda harus tahu cara mengunduh dan membuat aplikasi sederhana menggunakan Andro
Macintosh layar sentuh - Mac Klasik Dengan iPad Mini untuk Layar: 5 Langkah (dengan Gambar)
Macintosh layar sentuh | Mac Klasik Dengan IPad Mini untuk Layar: Ini adalah pembaruan dan desain revisi saya tentang cara mengganti layar Macintosh vintage dengan iPad mini. Ini adalah yang ke-6 yang saya buat selama bertahun-tahun dan saya cukup senang dengan evolusi dan desain yang satu ini! Kembali pada tahun 2013 ketika saya membuat
Mengotomatiskan Rumah Kaca Dengan LoRa! (Bagian 2) -- Pembuka Jendela Bermotor: 6 Langkah (dengan Gambar)
Mengotomatiskan Rumah Kaca Dengan LoRa! (Bagian 2) || Pembuka Jendela Bermotor: Dalam proyek ini saya akan menunjukkan kepada Anda bagaimana saya membuat pembuka jendela bermotor untuk rumah kaca saya. Itu berarti saya akan menunjukkan kepada Anda motor apa yang saya gunakan, bagaimana saya merancang sistem mekanis yang sebenarnya, bagaimana saya menggerakkan motor dan akhirnya bagaimana saya menggunakan Arduino LoRa
Layar LCD I2C / IIC - Gunakan LCD SPI ke Layar LCD I2C Menggunakan Modul SPI ke IIC Dengan Arduino: 5 Langkah
Layar LCD I2C / IIC | Menggunakan LCD SPI ke Layar LCD I2C Menggunakan Modul SPI ke IIC Dengan Arduino: Hai teman-teman karena LCD SPI 1602 yang normal memiliki terlalu banyak kabel untuk dihubungkan sehingga sangat sulit untuk menghubungkannya dengan arduino tetapi ada satu modul yang tersedia di pasaran yang dapat ubah tampilan SPI menjadi tampilan IIC sehingga Anda hanya perlu menghubungkan 4 kabel
Cara Mengatur Samsung Galaxy S7 Dengan Android 8.0 untuk Hanya Menampilkan Layar untuk Satu Aplikasi!!: 5 Langkah
Cara Mengatur Samsung Galaxy S7 Dengan Android 8.0 untuk Hanya Menampilkan Layar untuk Satu Aplikasi!!: Instruksi ini akan menunjukkan kepada Anda cara mengatur samsung galaxy s7 Anda untuk menampilkan layar hanya untuk satu aplikasiIni bagus jika Anda memiliki bayi/anak yang suka bermain dengan ponsel Anda atau ingin memastikan ponsel Anda tetap dalam satu aplikasi hanya ketika orang lain