Advertisement
  1. Code
  2. iOS 10

Buah Sebuah Alert Controller Kostum di iOS 10

Scroll to top
Read Time: 8 mins

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Pengantar

Sebuah UIAlertController digunakan untuk menampilkan pesan peringatan dalam aplikasimu. Contohnya, jika terjadi error, peringatan bisa menunjukkan deskripsi dan tombol untuk mengambil tindakan lebih lanjut. Kamu bisa menggunakan peringatan untuk membuat pengguna masuk atau mendaftar, menunjukkan hasil dari perintah yang mereka buat, atau menawarkan pengaturan tambahan - misalnya ketika kamu tidak memiliki tempat untuk tombol ekstra di layar tapi kamu ingin pengguna bisa melakukan lebih banyak aksi terhadap ojek tertentu.

Semenjak iOS9, Apple telah mengganti UIAlertViewdengan UIAlertController Kamu tidak lagi perlu menambahkan UIAlertViewDelegate ke class-mu dan sekarang bisa mengkostumisasi peringatan sesukamu. Kami bisa mengkostumisasi font dari judul dan pesan, mengganti warna latar, dan menambahkan bagian teks. Demi tutorial ini kita telah membuat sebuah aplikasi demo dengan tiga tombol, dan tiap tombol akan memacu peringatan yang berbeda. Kamu bisa mengunduhnya dari sumber repo tutorial di GitHub. Sekarang lihat betapa mudahnya membuat peringatan kostum!

Peringatan dengan Kotak Teks

Peringatan pertama yang akan kita buat memiliki TextField terlampir di mana kamu bisa memasukkan apapun yang kamu inginkan dari keyboard iOS. Untuk menginisialisi sebuah UIAlertController, kamu harus memulainya dengan tiga baris berikut:

Di baris pertama, kita mengatur sebuah kalimat sederhana sebagai judul dari peringatan. Baris kedua berisi pesan yang akan tampil di bawah judul. Di baris ketiga, tipe peringatan di atur ke .alert (Pilihan lainnya adalah .actionSheet, tapi kamu tidak bisa mengkostumisasi action sheet seperti yang kamu lakukan di alert.)

Di alert controller, tombol didefinisikan sebagai elemen UIAlertAction. Jadi kita akan membuat sebuah UIAlertAction yang akan menjadi tombol pertama di sisi kiri peringatan.

Kita telah memanggil aksi submitAction, atur judulnya menjadi "Submit" berikan gaya biasa dan untuk handlernya cetak konten dari sebuah kolom teks. Karena kolom teks di peringatan memiliki sebuah indeks, kita memilih yang pertama di posisi 0. Kemudian kita akan melihat cara menambahkan banyak kolom teks ke sebuah peringatan.

Ketika kamu telah menekan tombol Submit di peringatanmu, Xcode console akan mencetak teks yang kamu masukkan dan peringatan dismiss.

Mari buat sebuah tombol untuk menyembunyikan peringatan.

Seperti yang bisa kamu lihat, aksi ini tidak memili sebuah handler. Ini karena kita ingin menghilangkan peringatan dan tidak melakukan aksi lain. Tombol ini akan menunjukkan sebuah tombol Cancel karena kita mengatur style-nya ke .destructive yang Apple API akan pahami.

Sebelum menambahkan dua aksi ke Alert, kita harus menginisialisasi kolom teks kita:

Dengan kamu familiar dengan UITextField, kamu akan sadar ini sebagai atribut standar yang mengatur properti seperti jenis dan penambilan keyboard, autocorrection, pesan placeholder dan tombol clear. (Kita telah mengatur tombol clear untuk muncul ketika kamu mulai mengetik sesuatu)

Sekarang mari selesaikan peringatan kita.

UIAlertController tidak mengatur array dari aksi, jadi kita harus menambahnya satu persatu. Terakhir kita menghadirkan peringatan dengan controller lain- menggunakan fungsi present().

Di aplikasi demo kita, saya melekatkan semua kode di atas ke sebuah Button, jadi jika kamu menjalankan aplikasi dan menjalankannya kamu harusnya melihat sesuatu seperti ini.

Alert controller with 1 text fieldAlert controller with 1 text fieldAlert controller with 1 text field

Jika kamu mengetik sesuatu di kolom teks kosong dan menekan tombol Submit, Xcode console akan mencetaknya.

Peringatan dengan Tiga Kolom Teks

Sekarang mari buat sebuah peringatan baru dengan banyak Text Fields untuk membuat sebuah perintah login. Kita akan mulai lagi dengan tiga baris yang kita inisialisasi di peringatan kita:

Kita masih memiliki dua Buttons, satu untuk melakukan aksi login dan satu lagi tombol batal.

Seperti yang dapat kamu lihat, peringatan kita memiliki tiga bagian. Mereka diindeks berdasarkan posisinya. Kita akan memperlakukan yang pertama sebagai user name, yang ditengah sebagai password dan yang terakhir nomor telepon.

Sekarang tambahkan tombol Cancel:

Sekarang kita akan membuat dan mengkostumisasi Text Field:

Kode di atas tampak sangat mirip dengan contoh pertama kita, dengan tambahan instance textColor.

Hal yang sama terjadi pada kolom teks kedua:

Semenjak kata sandi biasanya disembunyikan kita mengatur atribut isSecureTextEntry ke Kolom Teks kita. Perintah ini akan mengganti karakter yang kamu tulis dengan titikm seperti yang dilakukan kolom password di sebuah situs. Kita juga bisa mengatur warna teks menjadi merah.

Dan elemen ketiga untuk kolom nomor telepon.

Atribut keyboardType di atur sebagai .numberPad sehingga aplikasi akan langsung hanya menunjukkan keyboard numerik saja. Kamu mungkin juga menyadari kita telah merubah font dari kolom teks menjadi American Typewriter di baris terakhir kode.

Kita hampir selesai-kita hanya perlu menambahkan aksi kita dan menghadirkan AlertController lagi:

Sekarang jika kamu menjalankan aplikasi dan membuka peringatan ini, kamu akan melihat sesuatu seperti ini:

Alert controller with 3 text fieldsAlert controller with 3 text fieldsAlert controller with 3 text fields

Jika kmau mencoba mengetik di kolom teks kamu akan melihat style yang telah kita terapkan.

Customized text fields in the AlertCustomized text fields in the AlertCustomized text fields in the Alert

Peringatan dengan Empat Tombol

Untuk contoh terakhir, saya akan menunjukkan sebuah peringatan dengan emap aksi dan penampilan yang berbeda.

Semenjak kita mengkostumisasi atribut judul dan pesan untuk peringatan ini nanti, kode inisialisasi kita akan memiliki empat string kosong sekarang:

Ini adalah bagaimana kita mengatur ukuran dan font dari judul dan kolom pesan:

Di dua baris pertama kita mengatur nama font dan unkutannya sebagai Dictionary dari NSFontAttributeName. Tolong ingat bahwa kamu harus mengetik nama PostScript yang tepat dari font yang ingin kamu gunakan. Jika tidak Xcode tidak akan mengenalinya dan akan emnujukkan font bawaan. Situs iOS Fonts adalah referensi untuk nama font yang tepat.

Di sini kita juga akan mengatur judul dan pesan denga nsebuah instance dari NSMutableAttributedString.

Mari buat empat aksi, termasuk tombol Cancel bawaan:

Sebelum melampirkan aksi tersebut ke peringatan kita, mari beri gaya sedikit.

Meskipun UIAlertController API terbatas, sehingga pengembang tidak bisa mengganti struktur bawaannya secara utuh, kita bisa mengganti gayanya seperti yang telah kita lakukan pada kode di atas.

Akhirnya kita bisa menambahkan semua aksi dan menampilkan peringatan kita.

Sekarang, jika kamu jalankan kodemu, kamu akan mendapatkan sesuatu seperti ini:

Alert Controller with 4 buttonsAlert Controller with 4 buttonsAlert Controller with 4 buttons

Kesimpulan

Di tutorial ini kita telah membuat sebuah seri dari UIAlertView dengan kolom teks dan gaya kustom. Saya harap kamu bisa mengambil ilmu untuk digunakan di aplikasi iOS-mu selanjutnya.

Di waktu luang, ceklah beberapa panduan lain dari Swift dan pengembangan aplikasi iOS.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.