Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Titanium Mobile

Titanium Mobile: Membuat Menu Slide untuk iOS

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Ibnukholil (you can also view the original English article)

Tutorial ini akan mengajarkan kamu bagai mana cara untuk membuat sebuah menu slide seperti yang ada di aplikasi Facebook menggunakan Titanium Mobile.


Langkah 1 : Mulai 

Menu geser ini terdiri dari jendela berukuran penuh (jendela utama) di atas yang lebih kecil yang berisi tampilan tabel (menu). untuk membuat efek bergeser, kita harus memicu animasi nya berjalan dan mengikuti gerakan sentuhan secara horisontal. Namun, mari kita simpan untuk nanti. untuk sekarang, kita akan memulai dari menyiapkan jendela-jendalanya.

Pertama, kita akan membuat menu:

Ini adalah setup tampilan tabel yang sangat mendasar, tapi kita akan melakukannya. Jadi sekarang Anda harus memiliki sesuatu seperti berikut ini:


Langkah 2: Jendela Utama

Sekarang kita membutuhkan sebuah jendela dengan panel navigasi dan sebuah tombol di dalamnya yang akan memungkinkan kita untuk membuka menu dengan animasi. Jadi, untuk mencapai hal ini, sebenarnya kita memerlukan dua jendela: satu berisi navigationGroup (sangat diperlukan untuk memiliki panel navigasi) dan satu lagi yang ada di navigationGroup:

Hei, Anda mungkin memperhatikan bahwa toggle: true properti di tombol kita, bukan? Itu tidak benar-benar ada; Ini adalah properti khusus yang saya tambahkan. Anda bisa menggunakan cukup banyak nama yang Anda inginkan atau bahkan membuat variabel untuk itu (contoh var toggle = true;) jika itu membuat Anda merasa lebih nyaman. Namun, saya sarankan Anda menggunakan trik kecil ini karena sangat berguna saat Anda memiliki banyak properti khusus di aplikasi Anda.

Inilah jendela utama nya:


Langkah 3: Toggle Menu

Oke, sekarang kita akan memberi animasi pada jendela kita sehingga slide dari kiri ke kanan akan bergerak saat kita menekan tombol 'Menu'.

Ayo liat bagaimana ini bekerja:

Anda lihat saat kita mengklik button, kita memanggil function (e), dimana e adalah objek kita (tombolnya). Dengan memanggil e.source.toggle, kita memeriksa custom properti 'toggle' yang dibahas di atas (Anda juga dapat menggunakan menuButton.toggle, itu adalah hal yang sama). Jika false, kita memindahkan jendela kita ke kanan dan mengganti properti menjadi true. Jadi, tentu saja, jika true, jendela kembali normal dan properti kita kemudian diubah menjadi false lagi.

curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT hanyalah cara untuk memperlancar animasi.


Langkah 4: Tracking

Ya, ini terlihat sangat rapi dan indah, bukan? Tapi itu bagian yang mudah, karena sekarang kita semakin serius! kita akan membuat pergerakan ketika disentuh sehingga kita bisa melihatkan menu dengan menggerakkan jendela utama secara horisontal. Tapi sebelum itu. kita akan menambah beberapa properti khusus:

Sekali lagi, Anda dapat memberi nama properti ini sesuai keinginan Anda, atau Anda bahkan dapat membuat variabel khusus untuk mereka, namun saya merekomendasikan Anda untuk menggunakan metode ini karena menghemat memori dan lebih mudah dibaca daripada sekumpulan variabel yang tersebar di file bagus Anda.

Sekarang kita akan menggunakan event touchstart untuk mendapatkan posisi jari kita saat menyentuh layar:

Di sini kita mengambil koordinat horizontal (e.x) dari event, menguraikannya sebagai bilangan bulat, dan kemudian menyimpannya di properti khusus axis.

Selanjutnya kita akan mengerakkan jendela bergantung pada posisi jari kita:

Agar jendela tidak bergerak setiap saat kita menyentuhnya, kita menunggu pergerakan di atas 20 piksel sebelum menghidupkan. Kita menjalankan koordinat sentuh nya dengan e.globalPoint.x dan kurangi ke titik awal nya (axis) agar kita dapat memindahkan jendela. Selain itu, tidak dapat bergeser melampaui lebar menu (150 piksel) atau di luar sisi kiri layar.


Langkah 5: Kembali seperti semula

Jika Anda mencoba menjalankan aplikasi Anda, Anda akan melihat bahwa jendela Anda akan tetap berada di tempat Anda meninggalkannya. Itu bukan apa yang kita inginkan. Kita perlu memposisikan ulang saat event sentuhan selesai, jadi akan terbuka / tutup sendiri tergantung di mana itu:

Saat jari kita tidak lagi menyentuh layar, touchend event diakhiri, jadi kita bisa mengatur posisi jendela kita.


Kesimpulan

Kita telah Selesai!  Seperti yang Anda lihat, Kita menggunakan animasi dan matematika yang sangat mendasar untuk mencapai efek hebat dan profesional. Saya sangat berharap kamu menikmati tutorial ini dan belajar beberapa trik baru!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.