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

SDK iOS: Membuat Menu Accordion Kustom

by
Read Time:16 minsLanguages:

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

Tutorial ini akan mengajari Anda cara membuat Menu Accordion kustom. Menu animasi ini akan memungkinkan Anda mengumpulkan masukan dari pengguna dengan cara yang menarik dan sederhana. Baca terus untuk mempelajari lebih lanjut!


Pratinjau Tutorial


Tentang Menu Accordion

Posisi awal menu akordeon akan berada di tengah tampilan target yang muncul. Ketika menu muncul, setengahnya akan bergerak ke arah atas tampilan target, sementara setengah lainnya akan bergerak ke bagian bawah tampilan, meluas ke ketinggian penuh yang diizinkan. Selama digunakan, baik titik asal Y dan ketinggian akan dimodifikasi sehingga efek yang diinginkan dapat terjadi. Menu itu sendiri akan terdiri dari tampilan tabel. hal ini akan memberi kita fleksibilitas yang besar mengenai jumlah opsi yang ditambahkan ke menu. Tampilan tabel akan ada sebagai subview pada tampilan dan akan muncul pada tampilan target. Tampilan utama view controller menu accordion akan berfungsi sebagai penutup untuk subview yang ada di belakang, sehingga pengguna tidak dapat mengetuk apa pun kecuali untuk opsi menu kita.

Mari kita lanjutkan dan mewujudkan ide ini. Berikut ini gambar seperti apa produk akhir nantinya.

final_accordion_menufinal_accordion_menufinal_accordion_menu

1. Membuat Accordion Menu View Controller

Langkah 1

Hal pertama yang harus kita lakukan adalah membuat pengendali tampilan baru untuk menu akordeon. Sebelum itu, kita akan membuat grup baru di Xcode untuk menjaga semuanya tetap rapi dan rapi.

Di panel Project Navigator di sisi kiri Xcode, Control + Click (klik kanan) pada grup CustomViewsDemo. Pilih opsi New Group dari menu popup.

create_group_2

Set Accordion Menu sebagai nama.

group_name_2

Langkah 2

Mari kita buat pengontrol tampilan sekarang. Control + Click (klik kanan) pada grup Accordion Menu. Pilih opsi New File ... dari menu popup.

create_file_2create_file_2create_file_2

Pilih kelas Objective-C sebagai template untuk file baru dan klik berikutnya.

new_file_template_2new_file_template_2new_file_template_2

Gunakan nama AccordionMenuViewController di bidang kelas dan pastikan bahwa dalam Subclass bidang nilai UIViewController dipilih. Jangan lupa untuk membiarkan opsi "With XIB for user interface" dicentang.

accmenu_view_controlleraccmenu_view_controlleraccmenu_view_controller

Akhirnya, klik tombol create. Pastikan bahwa Menu Accordion adalah grup yang dipilih, seperti yang ditunjukkan pada gambar berikutnya.



2. Konfigurasikan antarmuka

Hal pertama yang perlu kita lakukan dengan pengontrol tampilan baru adalah mengatur antarmuka di Interface Builder, yang seharusnya cukup sederhana. Sebagian besar pekerjaan akan dilakukan dalam kode.

Langkah 1

Klik pada file AccordionMenuViewController.xib untuk menghidupkan Interface Builder. Klik pada tampilan default dan matikan fitur Autolayout sehingga berfungsi pada versi iOS sebelum 6.

  • Klik pada tombol Utilities di toolbar Xcode untuk menampilkan panel Utilities jika tidak terlihat.
  • Klik pada File Inspector.
  • Gulir ke bagian bawah sedikit dan klik pada opsi "Use Autolayout" untuk mematikannya.
autolayout_2

Selanjutnya, pergi ke Attributes Inspector. Di bagian Simulated Metrics, tetapkan nilai Size ke None sehingga akan berfungsi pada layar 3.5 "juga.

view_size_2

Langkah 2

Lanjutkan dan tambahkan tampilan baru, tetapi pastikan Anda tidak menambahkannya sebagai subview ke tampilan default. Lakukan hal berikut:

  • Buka bagian Simulated Metrics dari Attributes Inspector dan tetapkan Size ke None.
  • Ubah warna background menjadi abu-abu gelap.
second_view_config

Langkah 3

Ambil tampilan tabel dari Object Library dan tambahkan sebagai subview ke tampilan yang kita tambahkan pada langkah sebelumnya. Selesaikan konfigurasi selanjutnya di bagian Attributes Inspector.

  • Setel Shows Horizontal Scrollers ke nonaktif.
  • Setel Shows Vertical Scrollers ke nonaktif.
  • Setel Scrolling Enabled untuk nonaktif.
  • Ubah warna background untuk bersih.
tableview_options

Inilah tampilan interface Anda pada titik ini.

ib_sample_2ib_sample_2ib_sample_2

3. Setel Properti IBOutlet

Langkah 1

Selanjutnya, kita akan membuat dua properti IBOutlet untuk tampilan tambahan dan tampilan tabel yang kita tambahkan ke proyek sebelumnya. Pertama, kita harus membuat Assistant Editor muncul. Klik pada tombol tengah di bagian Editor pada toolbar Xcode untuk mengungkapkannya.

assistant_editor2_1

Langkah 2

Untuk menghubungkan tampilan ke properti IBOutlet baru, buka Show Document Outline > Control + Click (right click) > New Referencing Outlet. Seret dan lepaskan ke Assistant Editor.

insert_outlet_2insert_outlet_2insert_outlet_2

Saya memberi nama properti viewAccordionMenu dan saya menyarankan Anda menggunakan nama yang sama untuk menghindari masalah saat coding. Setel opsi Storage ke Strong, bukan nilai Weak default.

iboutlet_name_2

Langkah 3

Sekarang mari tambahkan properti IBOutlet untuk tampilan tabel. Sama seperti yang dilakukan di atas, buat properti baru bernama tblAccordionMenu. Atur opsi Storage ke Strong juga.

Berikut adalah dua properti IBOutlet.


4. Lakukan Beberapa Pengaturan Tingkat Kode

Sejauh ini bagus! Kita telah membuat view controller untuk menu akordeon, telah menyiapkan interface, dan kita telah membuat dua properti IBOutlet yang diperlukan untuk tampilan yang ditambahkan ke pembuat. Sekarang saatnya untuk mulai menulis beberapa kode.

Langkah 1

Pertama-tama, kita harus mengatur pandangan pengendali sebagai delegasi dan sumber data dari tampilan tabel yang dibuat di Interface Builder. View controller kita harus mengadopsi protokol masing-masing. Klik pada file AccordionMenuViewController.h dan tepat di sebelah header @interface tambahkan yang berikut.

Langkah 2

Klik pada file AccordionMenuViewController.m dan terapkan metode init sederhana. Atur view controller sebagai delegasi dan sumber data dari tampilan tabel.

Untuk membuat menu terlihat lebih baik, mari tambahkan batas. Di dalam init, tambahkan kode yang disorot.

Pastikan untuk menambahkan ini ke bagian atas file.

Atur warna background dari tampilan default ke abu-abu terang dengan transparansi.

Langkah 3

Sebaiknya tentukan tinggi baris tampilan tabel sebagai konstanta. Terlepas dari metode tableView:heightForRowAtIndexPath, kita akan menggunakannya dalam metode lain. Tepat setelah perintah #import, tambahkan yang berikut.

Menu accordion akan menggunakan animasi untuk muncul dan menghilang. Kita bisa mengatur durasi animasi sebagai konstanta.

Mulai sekarang, jika kita ingin mengubah tinggi baris atau durasi animasi, kita akan melakukannya sekali tanpa mengubah nilai dalam setiap metode.

Langkah 4

Kita harus mendeklarasikan dua variabel privat dan NSArray. Variabel-variabel menganggap lebar dan tinggi menu akordion, yang berarti lebar dan tinggi tampilan induk dari tampilan tabel kita. NSArray adalah larik yang akan menyimpan opsi menu, dan ini akan menjadi sumber data dari tampilan tabel.

Di bagian atas file AccordionMenuViewController.m menambahkan baris berikutnya di bagian @interface.

Pastikan Anda tidak melupakan tanda kurung kurawal!


5. Terapkan Metode Publik

Setidaknya ada tiga metode publik yang harus diterapkan agar menu akordeon berfungsi dengan baik. Metode pertama akan digunakan untuk mengatur opsi menu, metode kedua akan membuat menu akordeon muncul, dan metode ketiga akan membuatnya menghilang.

Langkah 1

Pertama-tama, kita harus menyatakan metode yang saya sebutkan di atas ke dalam file .h Jadi, klik pada file AccordionMenuViewController.h dan tambahkan yang berikut.

Langkah 2

Mari terapkan metode pertama. Klik pada file AccordionMenuViewController.m dan tulis atau salin/tempel kode berikut.

Meskipun ini adalah metode yang sangat sederhana, biarkan saya menjelaskannya sedikit. Saya rasa lebih mudah bagi pengguna dan programmer untuk menyediakan array dengan opsi menu only. Anda tidak perlu khawatir tentang opsi yang disebut close menu. Itu benar-benar hanya berguna ketika seseorang akan menggunakan menu akordeon di lebih dari satu kasus. Saya menggunakan tempArray gumpalan array untuk mengumpulkan kedua opsi pengguna dan opsi tutup. Jika Anda tahu bahwa _optionsArray tidak bisa berubah, Anda akan mengerti bahwa ia tidak dapat menerima objek baru setelah dibuat. Saya menginisialisasi array _optionsArray. Ini pilihan Anda untuk menghindari menggunakan logika ini atau mengubah judul opsi menu tutup.

Langkah 3

Mari kita lanjutkan ke metode selanjutnya. Itu akan berkaitan dengan cara menu accordion muncul di layar. Banyak langkah berbeda terjadi di dalamnya, jadi saya akan menyajikan dan membahasnya dalam beberapa bagian.

Pertama-tama, kita perlu mengambil status bar di bawah pertimbangan ketika menu accordion akan muncul. Ini karena kita akan menggunakan tampilan target di mana menu akan muncul dan bingkainya sebagai basis untuk mengonfigurasi tampilan. Jadi, sangat penting untuk menangani status bar dengan benar. Jika status bar disembunyikan, tidak ada masalah sama sekali. Jika terlihat, ruang kosong yang sama dengan tinggi status bar akan dibuat ketika kita membuat tampilan kita muncul. Jadi, sebagai langkah pertama, kita perlu memeriksa apakah status bar terlihat dan menyimpan tingginya untuk memperbaiki offset yang dibuat oleh ini.

Ini adalah pendekatan yang kita ikuti selama tutorial sebelumnya dalam tampilan input teks kustom.

Selanjutnya, kita harus menentukan apa lebar dan tinggi dari pandangan target tergantung pada orientasi. Tergantung lagi pada orientasi, kita harus "memberi tahu" apakah offset yang harus dipindahkan oleh tampilan default kita adalah pada X atau sumbu Y.

Langkah selanjutnya mudah. Kita hanya akan mengatur tampilan default, self.view, dengan mengatur frame dan offset yang sesuai, nilai alfa, dan akhirnya menambahkannya sebagai subview ke tampilan target.

Sekarang saatnya untuk mengonfigurasi tampilan yang berisi tampilan tabel. Kita harus menentukan ukurannya di sini, dengan mengingat bahwa itu akan menempati sebagian dari layar. Saya mengatur lebarnya menjadi 260.0 px, tetapi Anda dapat mengubahnya sesuai dengan keinginan Anda. Ketinggiannya akan dihitung berdasarkan opsi total dan tinggi setiap baris. Itu berarti bahwa tinggi akan sama dengan total baris dikalikan dengan tinggi setiap baris. Dalam kasus terlalu banyak opsi, dan tinggi menu yang lebih besar dari tinggi tampilan target di salah satu orientasi, kita harus secara manual mengecilkan menu dan mengaktifkan pengguliran pada tampilan tabel. Untuk mencapai itu, kita akan menggunakan variabel sementara yang akan menjaga ketinggian dalam setiap kasus.

Untuk mencapai efek accordion, kita perlu mengatur bingkainya dua kali. Pada awalnya, kita akan memberikannya bingkai normal dan akan memusatkannya sesuai dengan titik pusat tampilan target. Kemudian akan menyimpan titik asal Y dan mengatur bingkai lagi. Kita akan melakukan ini dengan menetapkan titik asal Y ke titik asal Y dari pusatnya dan menyetel tingginya ke 0.0. Ketika titik asal Y dan ketinggiannya kembali ke nilai aslinya, kita akan memiliki efek accordion yang hebat.

Saatnya untuk menganimasikan menu. Tidak ada yang istimewa untuk dibahas di sini. Kita cukup mengubah nilai alfa dari self.view dan mengatur frame terakhir ke tampilan menu.

Akhirnya, muat ulang data tabel sehingga opsi menu muncul di tampilan tabel. Perhatikan bahwa metode ini berakhir di sini.

Langkah 4

Mari kita tulis metode selanjutnya mengenai penutupan menu. Tidak ada yang perlu saya sebutkan di sini. Saya hanya akan menekankan bahwa ia menggunakan parameter boolean yang menentukan apakah penutupan harus beranimasi atau tidak.


6. Pertimbangkan Perubahan Orientasi

Kita telah berhasil membuat menu muncul dengan benar saat dipanggil. Apa yang terjadi ketika pengguna memutar perangkat itu? Tidak ada! Ini karena kita belum menulis apapun tentang ini, jadi ayo lakukan sekarang. Kita akan menerapkan metode viewWillLayoutSubviews, yang dipanggil setiap kali orientasi diubah. Anda dapat membaca lebih lanjut tentang hal itu di situs web pengembang Apple.

Inilah versi singkat dari apa yang akan kita lakukan. Pertama, kita akan mengatur bingkai tampilan menu, berdasarkan pada menuViewWidth dan variabel menuViewHeight yang kita atur sebelumnya. Kita akan memusatkannya sesuai dengan titik pusat self.view. Selanjutnya, tergantung pada orientasi perangkat, kita akan menghitung tinggi superview. Terakhir, kita akan memeriksa apakah tinggi tampilan lebih besar dari tinggi superview. Jika itu benar, kita akan mengecilkannya secara manual dan membuat scrolling diaktifkan, sama seperti yang dilakukan dalam metode -(void)showAccordionMenuInView:(UIView *)targetView. Jika tidak, kita akan cukup memutar ke bawah.


7. Implementasikan Metode Tableview

Langkah 1

Berikut adalah metode minimum yang diperlukan untuk membuat tampilan tabel berfungsi. Perhatikan bahwa di metode -(UITableViewCell *)tableView:cellForRowAtIndexPath:, kita akan memeriksa untuk melihat apakah baris saat ini adalah yang terakhir atau tidak.

Langkah 2

Kita juga perlu menangani ketukan pada baris tampilan tabel. Perhatikan dalam metode berikut bahwa kita menghapus pilihan dari baris yang disadap.

Kita akan segera kembali ke metode ini.


8. Definisi Protokol

Ketika pengguna mengetuk baris, atau dengan kata lain opsi menu, kita ingin pemanggil view controller diberi tahu tentang pilihan yang dipilih.

Langkah 1

Klik pada file AccordionMenuViewController.h dan tulis kode berikut, tepat sebelum header @interface.

Langkah 2

Sekarang, nyatakan properti delegasi.

Langkah 3

Kapan metode delegasi userSelectedOptionWithIndex digunakan? Setiap kali opsi menu dipilih. Kembali ke metode -(void)tableView:didSelectRowAtIndexPath: dan tambahkan baris berikut.


9. Menu Accordion dalam Tindakan.

Menu accordion sekarang siap. Saatnya untuk melihatnya beraksi. Buat persiapan yang dibutuhkan dalam kelas ViewController.

Langkah 1

Pertama-tama, kelas ViewController harus mengadopsi protokol AccordionMenuViewControllerDelegate. Buka file ViewController.h, impor kelas AccordionMenuViewController.h dan tambahkan protokol di header @interface.

Langkah 2

Buka file ViewController.m dan pergi ke bagian pribadi dari @interface di bagian atas file. Di sana, tambahkan NSArray yang akan digunakan untuk opsi yang akan kita sediakan menu accordion dengan, serta objek AccordionMenuViewController.

Langkah 3

Di dalam metode viewDidLoad, kita perlu menginisialisasi array dan objek yang kita nyatakan pada langkah sebelumnya.

Kita hanya akan menggunakan dua opsi dari daftar di atas. Untuk sementara waktu, sisanya hanya untuk keperluan demonstrasi.

Langkah 4

Buka metode -(void)tableView:didSelectRowAtIndexPath: dan tambahkan yang berikut.

Jika Anda melanjutkan proyek dari tutorial sebelumnya, hapus atau komentari konten yang ada.

Langkah 5

Akhirnya, kita hanya perlu mengimplementasikan metode delegasi -(void)userSelectedOptionWithIndex:(NSUInteger)index. Di sinilah setiap tindakan diambil ketika pengguna mengetuk opsi menu.

Sudah selesai! Jalankan aplikasi di simulator atau di perangkat dan lihat menu. Bermain-main dengan itu, dan jangan ragu untuk memperbaikinya atau mengubahnya sesuai dengan kebutuhan Anda.


Kesimpulan

Menyediakan pengguna dengan opsi menu yang berbeda dari yang sudah ditentukan biasanya selalu menjadi tantangan besar bagi seorang programmer. Seperti yang Anda ketahui sekarang, kita dapat mencapai hasil yang bagus tanpa menggunakan teknik yang sulit atau ekstrim. Menu accordion yang disajikan dalam tutorial ini adalah cara yang cukup bagus untuk menampilkan opsi kepada pengguna dan, yang paling penting, itu dapat digunakan kembali. Saya berharap ini akan menjadi alat yang berguna bagi semua orang yang menggunakannya!

Advertisement
Did you find this post useful?
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.