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

SDK iOS: Membuat Tampilan Input Teks Kustom

by
Read Time:19 minsLanguages:

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

Mengembangkan aplikasi luar biasa bukanlah pekerjaan yang sederhana. Secara tradisional, salah satu aspek yang paling sulit dalam melakukannya adalah menciptakan antarmuka yang kaya dan menarik. Tutorial ini akan mengajarkan Anda cara membangun tampilan input teks kustom yang akan membantu membuat aplikasi Anda sendiri bersinar!


Tutorial Tinjauan


Overview Seri

Tutorial ini adalah yang pertama dalam koleksi untuk membangun elemen antarmuka khusus. Dalam tutorial ini, kita akan membahas tampilan input teks yang disesuaikan, dan dalam dua tutorial berikutnya kita akan membahas menu akordeon khusus dan tampilan peringatan. Format seri adalah sebagai berikut:

Dalam tutorial ini kita akan membuat aplikasi daftar sederhana, yang akan menggabungkan beberapa fitur dasar. Dalam contoh ini, aplikasi kita hanya akan dapat menambah dan mengedit item menggunakan tampilan masukan teks kustom baru. Proyek akhir dari tutorial ini akan menjadi dasar untuk yang berikutnya, di mana kita akan membuat menu akordeon untuk menyediakan pengguna dengan beberapa opsi. Pada tutorial ketiga dan terakhir, kita akan menggunakan proyek akhir dari tutorial kedua untuk membuat tampilan peringatan kustom.


1. Buat proyek

Mulailah dengan meluncurkan Xcode dan membuat Aplikasi Tampilan Tunggal:

Lanjutkan dan tetapkan nama untuk proyek tersebut. Saya menamai milik saya CustomViewsDemo. Pastikan untuk memeriksa opsi Gunakan Penghitungan Referensi Otomatis juga:

Akhirnya, pilih folder untuk menyimpan proyek dan klik Create:


2. Siapkan Antarmuka

Langkah 1

Klik pada file ViewController.xib untuk membiarkan Interface Builder muncul di layar. Pertama, matikan opsi Autolayout (kita melakukan ini agar proyek demo ini berfungsi pada iOS yang lebih lama dari 6 - Autolayout adalah fitur iOS 6):

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

Langkah 2

Sekarang klik pada Attributes Inspector dan di bawah bagian Simulated Metrics mengatur nilai Size ke None, sehingga bekerja pada layar 3,5 "juga.

Langkah 3

Tambahkan UIToolBar ke dalam tampilan dan letakkan di bagian bawah tampilan. Lakukan hal berikut:

  • Tambahkan Flexible Space Bar Button Item di sebelah kiri item tombol bar standar untuk memaksanya tetap berada di sisi kanan bilah alat.
  • Atur judul item tombol bar ke Add item.
  • Atur Tint Color tombol ke: (R: 51, G: 51, B: 51).
  • Atur Tint Color pada toolbar ke (R: 0, G: 0, B: 51).

Langkah 4

Selanjutnya, tambahkan UITableView di dalam ruang kosong yang tersisa dari tampilan. Atur gayanya ke Grouped dan pemisah ke Single Line:

Juga, atur warna background ke (R: 51, G: 51, B: 51). Antarmuka Anda sekarang harus terlihat seperti ini:


3. IBOutlet Properties & IBAction Methods

Sebelum melangkah lebih jauh kita perlu menghubungkan UITableView ke properti IBOutlet dan membuat metode IBAction untuk item tombol bar toolbar (tombol "Tambah item" "). Untuk melakukan ini, sementara di Interface Builder, klik di tengah tombol bagian Editor pada toolbar Xcode untuk membuka Asisten Editor:

Langkah 1

Untuk memasukkan properti IBOutlet baru, Control + Click (Klik kanan) pada Table View > Klik pada Outlet Referensi Baru > Seret dan Turunkan ke Asisten Editor.

Selanjutnya tentukan nama untuk properti baru. Saya hanya menamakannya table.

Langkah 2

Untuk membuat IBAction untuk item tombol bar, Control + Click (Klik kanan) pada item Bar Button > Klik pada pilihan Selector di bagian Tindakan Terkini > Drag dan Drop ke Asisten Editor:

Tetapkan nama untuk metode ini. Saya menamai milik saya addItem.


4. UITableView Methods

Langkah 1

Dalam langkah ini kita perlu menerapkan metode tampilan tabel minimum yang diperlukan agar table berfungsi dengan benar. Tetapi sebelum kita melakukan itu, kita perlu mengatur pandangan pengendali sebagai delegasi dan sumber data untuk tampilan tabel.

Klik pada file ViewController.h. Bentuk header @interface sebagai berikut:

Kemudian di dalam file ViewController.m dan dalam metode viewDidLoad tambahkan yang berikut:

Langkah 2

Array NSMutableArray akan menjadi sumber dari daftar item kami (isi tabel). Pertama, bagaimanapun, kita perlu mendeklarasikan dan menginisialisasi. Di dalam file ViewController.m, pergi ke bagian atas dan di dalam bagian pribadi dari @interface tambahkan baris berikutnya:

Juga di dalam viewDidLoad:

Langkah 3

Sekarang mari kita menerapkan beberapa metode tampilan tabel. Kita akan mulai dengan jumlah bagian:

Selanjutnya atur jumlah total baris. Angka ini sama dengan total objek yang ada dalam array _sampleDataArray.

Mari setel ketinggian setiap baris:

Sekarang, mari siapkan sel kita. Di dalam kode Anda akan menemukan semua kustomisasi untuk sel. Ada komentar yang menjelaskan hampir semuanya. Anda dapat mengubah apa pun yang Anda inginkan atas keinginan Anda sendiri:

Akhirnya, tambahkan -(void)tableView:didSelectRowAtIndexPath: metode delegasi:

Sekarang biarkan metode ini kosong. Kita akan mengunjunginya lagi nanti.

Untuk meringkas sejauh ini, kita telah membuat proyek dan mengatur interface menggunakan Interface Builder. Kita menghubungkan properti IBOutlet yang diperlukan dan metode IBAction dan menerapkan metode minimum yang diperlukan untuk membuat tabel (daftar kita) berfungsi dengan baik. Mari maju untuk membuat masukan teks khusus. Kita akan kembali ke ViewController sebentar lagi.


5. Custom Text Input Lihat Pengontrol

Ketika mengembangkan proyek, itu adalah kebiasaan yang baik untuk menjaga semuanya tetap rapi dan teratur. Untuk alasan ini, kita akan membuat grup baru (folder virtual) untuk pengontrol tampilan input teks.

Langkah 1

Pada panel Project Navigator di sisi kiri Xcode, Control + Click (Klik kanan) pada grup CustomViewsDemo > Pilih opsi Grup Baru dari menu popup:

Beri nama pada tampilan Custom Text Input View:

Langkah 2

Sekarang kita siap untuk menambahkan pengontrol tampilan baru. Control+Click (Right click) on the CustomViewsDemo group > Select the New File... option from the popup menu:

Sebagai template untuk file baru pilih kelas Objective-C dan klik Next.

Berikan nama CustomTextInputViewController di bidang kelas dan pastikan bahwa dalam Subkelas bidang nilai UIViewController dipilih. Juga, jangan lupa untuk mengatur Dengan XIB untuk memeriksa opsi interface pengguna:

Akhirnya, klik tombol Create. Pastikan bahwa Custom Text Input View adalah grup yang dipilih, seperti yang ditunjukkan pada gambar berikut:


6. Antarmuka Tampilan Input Teks

Langkah 1

Klik pada file CustomTextInputViewController.xib untuk mengungkapkan Interface Builder dan mengatur antarmuka. Lakukan hal berikut:

  • Sama seperti sebelumnya, matikan opsi Autolayout (Utilities Pane > File Inspector > Click on the Use Autolayout checkbox).
  • Klik pada Attributes Inspector dan di bawah bagian Simulated Metrics mengubah Ukuran menjadi None.

Langkah 2

Sekarang saatnya menambahkan subview yang diinginkan ke dalam pandangan kita. Tambahkan subview berikutnya dan atur propertinya seperti yang dijelaskan:

  1. UILabel
    • Frame: X: 0.0, Y: 145.0, Width: 320.0, Height: 30
    • Font:: Georgia, 17.0
    • Color:: Hitam
    • Alignment:: Center
    • Background Color: (R: 204, G: 204, B: 204)
  2. UITextField
    • Frame: X: 0.0, Y: 180.0, Width: 320.0, Height: 30.0
    • Font: Georgia, 15.0
    • Color: Hitam
    • Border Style: Bezel
    • Clear button: Appears while editing
    • Capitalization:Sentences
    • Return Key: Done
    • Background Color: Putih

    Sebagian besar pengaturan ini akan muncul di gambar berikutnya:

  3. UIToolBar
    • Frame: X: 0.0, Y: 225.0, Width: 320.0, Height: 44.0
    • Tint Color: (R: 204, G: 204, B: 204)

Perhatikan bahwa titik Y tidak penting sekarang karena itu akan diatur secara terprogram untuk setiap subview.

Langkah 3

Selain hal di atas, tambahkan item UIBarButton berikut ke toolbar di samping item baris bar default:

  • Item tombol bilah spasi yang fleksibel
  • Item tombol bar lainnya

Pilih kedua item tombol bar (bukan item ruang fleksibel) dan atur warnanya ke (R: 51, G: 51, B: 51). Untuk tombol bilah kiri, atur judul ke Oke. Untuk tombol bilah kanan, atur judul menjadi Cancel.

Akhirnya, pilih ketiga subview (UILabel, UITextField, dan UIToolBar) dan atur nilai Autosizing seperti yang ditunjukkan di bawah ini (Lebar Fleksibel, Margin Kanan Fleksibel, Margin Kiri Fleksibel, dan Margin Bawah Fleksibel):


7. IBOutlets & IBActions

Saya sebelumnya menunjukkan kepada Anda cara membuat properti IBOutlet dan metode IBAction dan cara menyambungkannya ke sublihat. Mengikuti metode yang sama seperti yang dijelaskan di atas, buat dan hubungkan properti selanjutnya ke UILabel, UITextField, dan UIToolbar masing-masing:

Lalu pergi untuk menyatakan dan menghubungkan metode IBAction berikutnya ke tombol Oke dan Cancel:

Pada titik ini pekerjaan kami dengan Builder Antarmuka sudah berakhir. Saatnya untuk mengkodekan perilaku yang kita perlukan dari tampilan input teks.


8. Coding

Langkah 1

Pertama, kita perlu membuat semacam pengaturan dalam kode, sebelum menerapkan metode apa pun. Kita akan mulai dengan mengatur pengendali tampilan sebagai delegasi untuk textfield. Klik pada file CustomTextInputViewController.h dan modifikasi header @interface sesuai dengan ini:

Selanjutnya, buka file CustomTextInputViewController.m dan di dalam metode viewDidLoad atur delegasi:

Juga, di dalam viewDidLoad mengatur UIToolbar (toolbarIAV) sebagai Input Accessory view dari textfield:

Sejauh ini bagus. Pada awal tutorial ini, saya menyebutkan bahwa tampilan pengontrol tampilan akan berfungsi sebagai penutup dengan sasaran untuk mencegah pengguna mengetuk apa pun yang ada di belakang tampilan kita. Kita juga membutuhkannya agar semi-transparan juga, sehingga terlihat bagus. Oleh karena itu, buka dan tambahkan baris berikutnya yang mengonfigurasi tampilan kami:

Sekarang mari pikirkan. Seperti yang kita katakan di awal, membutuhkan textfield agar muncul tepat di atas tampilan aksesori input (bilah alat) dan label judul di atas textfield. Untuk mencapai tata letak ini, kita perlu mengetahui asal-usul keyboard dan tampilan aksesori input, sehingga kita dapat menyesuaikan textfield dan label yang sesuai. Tapi bagaimana kita tahu kapan keyboard muncul dan bagaimana kita mendapatkan ukurannya atau asalnya?

Jawabannya sederhana. Setiap kali keyboard akan muncul, iOS mengirimkan pemberitahuan, bernama UIKeyboardWillShowNotification (sebenarnya, iOS mengirim lebih banyak notifikasi tetapi kita tidak peduli tentang itu sekarang). Kita akan menambahkan controller tampilan sebagai pengamat untuk pemberitahuan ini dan ketika itu tiba metode yang telah ditentukan (oleh kita) akan dipanggil. Dengan pemikiran ini, tambahkan baris berikutnya, lagi ke dalam metode viewDidLoad:

Perhatikan bahwa keyboardWillShowWithNotification: adalah metode yang akan kita terapkan dalam beberapa saat.

Hal lain yang harus kita pertimbangkan adalah status bar. Posisi di mana subview kita muncul bergantung pada bilah status dan tingginya. Oleh karena itu, akan lebih baik jika kita memiliki variabel yang membuat offset yang dibuat oleh status bar (tinggi) ketika terlihat.

Pergi ke bagian atas file dan di dalam bagian pribadi dari @interface menyatakan variabel CGFloat yang akan mewakili offset batang status. Seiring dengan yang menyatakan keyboardWillShowWithNotification: Saya sebutkan sedikit lebih awal:

Saya akan menyebutkan bijih tentang status bar segera.

Langkah 2

Sekarang kita siap untuk melanjutkan ke tahap implementasi dan kita dapat membuat metode publik yang diperlukan yang dapat diakses oleh kelas lain. Buka file CustomTextInputViewController.h dan deklarasikan tiga metode berikut:

Harus jelas apa yang akan dilakukan masing-masing metode.

Mari kita mulai dengan metode showCustomTextInputViewInView:withText:andWithTitle. Sebelum kita mulai coding, ada beberapa poin yang harus saya sebutkan. Pertama-tama, kita perlu memeriksa apakah status bar terlihat atau tidak dan menetapkan nilai statusBarOffset secara tepat. Kita dapat dengan mudah mengetahui apakah itu terlihat dan mendapatkan ukurannya. Namun, ada jebakan kecil jika bilah status terlihat dan kita harus berurusan dengan orientasi potret dan lanskap. Dalam mode potret, ukuran batang status dalam bentuk Width x Height (misalnya 320.0 x 20.0). Dalam mode lansekap ukurannya dalam bentuk Height x Width (misalnya 20.0 x 480.0). Cara termudah bagi kami untuk menentukan tinggi bar status adalah untuk memeriksa nilai minimum antara width dan height. Dengan metode ini dapat dipastikan bahwa kita akan mendapatkan nilai yang benar. Tambahkan ini tepat setelah ke dalam potongan kode yang berikut.

Selain itu Anda mungkin ingat kita mematikan fitur Autolayout, jadi kita bertanggung jawab untuk menyajikan pandangan dengan benar di semua orientasi. Ini artinya kita harus memeriksa orientasi setiap kali metode ini dipanggil dan mengatur bingkai tampilan yang sesuai. Penting untuk dicatat bahwa ketika kita berada dalam mode lansekap, lebar layar adalah tinggi untuk tampilan dan ketinggian layar adalah lebar untuk tampilan. Juga karena status bar terlihat, padding dibuat di sisi kiri tampilan dalam mode lansekap, yang perlu dihilangkan. Itu mengapa kita mengumumkan status statusBarOffset sebelumnya.

Akhirnya, kita ingin tampilan tidak terlihat di awal dan animasi untuk meluncur dengan mulus ke layar.

Tapi pertama-tama mari kita lihat semuanya dalam aksi. Buka CustomTextInputViewController.m dan terapkan metode:

Komentar di dalam metode menjelaskan semuanya. Perhatikan bahwa di dalamnya kita memanggil metode becomeFirstResponder dari textfield _txtText, sehingga keyboard akan muncul juga. Kita akan melihat sementara betapa pentingnya panggilan ini, karena itulah titik kunci untuk pandangan kita untuk diposisikan dengan benar.

Sekarang, mari kita terapkan metode selanjutnya. Penutupan dari pandangan adalah tindakan yang berlawanan dari pertunjukan.

Perhatikan bahwa kita menghapus tampilan dari superview tidak sekaligus tetapi setelah animasi selesai.

Akhirnya, metode ketiga:

Langkah 3

Langkah selanjutnya ini akan menunjukkan cara menangani keyboard. Sebelumnya di dalam bagian pribadi dari interface kita menyatakan metode ini:

Ini adalah metode yang akan dipanggil setiap kali keyboard akan muncul dan pemberitahuan UIKeyboardWillShowNotification akan tiba. Sekarang kita bisa mulai mengerjakannya. Parameter notification berisi NSDictionary dengan informasi mengenai keyboard. Sepotong informasi itu adalah ukuran dan asal keyboard. Apa yang sebenarnya kita perlukan di sini adalah titik asal karena jika kita tahu koordinasi Y dari keyboard (tampilan aksesori masukan disertakan), kita dapat mengatur letak textfield dan label dengan benar. Sekali lagi, dalam mode lansekap berubah dan koordinasi X keyboard adalah koordinasi Y yang diinginkan untuk textfield kita. Ini kode yang Anda butuhkan:

Saya yakin Anda telah memperhatikan pengurangan statusBarOffset dalam kode di atas. Jika kita tidak melakukannya, textfield akan bersembunyi di bawah tampilan aksesori input.

Langkah 4

Pada fase ini kita perlu bekerja pada definisi protokol. Sampai titik ini pengontrol tampilan hampir siap, tetapi tidak sepenuhnya selesai. Apa yang tidak ada di sini adalah definisi protokol yang memungkinkan kelas delegasi yang mengadopsinya (dalam kasus kita, ViewController) untuk menerapkan metode yang diperlukan untuk menangani tombol Oke dan tombol Batal.

Buka file CustomTextInputViewController.h dan tentukan protokol, bersama dengan metode delegasi selanjutnya:

Juga, tepat setelah header @interface, tambahkan baris yang disorot:

Menurut apa yang telah kita lakukan, kelas delegasi harus menerapkan metode shouldAcceptTextChanges untuk menangani penyadapan tombol Oke dan metode shouldDismissTextChanges untuk menangani tombol Batal mengetuk.

Tapi, bagaimana dengan metode IBAction dari kelas ini? Mereka telah dibiarkan kosong sampai sekarang. Mari sekarang isi mereka di:

Seperti yang Anda lihat, ketika tombol Oke mengetuk metode delegasi shouldAcceptTextChanges dipanggil, sementara ketika tombol Batal mengetuk metode delegasi shouldDismissTextChanges dipanggil.

Agar sepenuhnya benar, ada satu langkah lagi untuk diselesaikan: buat tombol Done dari keyboard. Untuk melakukan ini, kita hanya perlu menerapkan metode delegasi - (BOOL) textFieldShouldReturn::

Sekarang tampilan kustom baru sudah siap. Yang perlu kita lakukan adalah mencobanya.


9. Tampilan Input Teks dalam Aksi

Langkah 1

Sebelum kita melihat tampilan masukan teks kustom baru berfungsi, ada beberapa langkah lagi yang perlu diselesaikan. Pertama-tama, kita harus menyatakan kelas ViewController sebagai delegasinya. Buka file ViewController.h, impor file CustomTextInputViewController.h dan buat kelas delegasinya di header antarmuka:

Sekarang beralih ke file ViewController.m dan di dalam bagian pribadi dari @interface menyatakan objek CustomTextInputViewController. Saya menamainya textInput:

Mari inisialisasi di dalam metode viewDidLoad:

Langkah 2

Pergi ke metode IBAction addItem untuk membuat tampilan input teks kita muncul:

Sederhana, benar?

Jika Anda menjalankan aplikasi sekarang, Anda akan melihat tampilan input teks dalam tindakan, tetapi tombol Oke dan Batal tidak akan berfungsi karena kita belum menerapkan metode delegasi. Jadi, mari lakukan sekarang:

Jalankan dan itu akan berhasil. Teks apa pun yang Anda masukkan ke dalam bidang teks akan muncul di tabel. Tetapi belum sepenuhnya siap karena tidak dapat mengedit item apa pun.

Langkah 3

Saatnya untuk mengunjungi metode delegasi tampilan tabel -(void)tableView:didSelectRowAtIndexPath:. Kita ingin setiap baris yang disadap untuk diedit dalam tampilan masukan teks kustom. Tetapi kita juga perlu tahu kapan pengguna menambahkan atau mengedit satu baris. Untuk alasan itu, kita akan menggunakan bendera yang akan menunjukkan apakah pengguna mengedit baris atau tidak.

Pergi ke bagian pribadi dari @interface dan tambahkan variabel berikut:

Jangan lupakan tanda kurung kurawal. Sekarang ke dalam metode viewDidLoad tetapkan nilainya ke NO.

Pindahkan ke metode delegasi tabel:

Pada titik ini, ketika Anda mengetuk baris yang ada pada tampilan tabel, tampilan input teks akan muncul untuk mengeditnya. Tetapi tidak peduli seberapa keras Anda mencoba, perubahan Anda tidak akan disimpan ke dalam baris yang diedit, tetapi mereka akan disimpan sebagai baris baru. Itu berarti bahwa kita harus sedikit memodifikasi metode pendelegasian seharusnya -(void)shouldAcceptTextChanges:

Ingat bahwa ketika mengedit konten baris, objek yang setara di dalam array data sampel diganti. Juga, perhatikan isEditingItem. Itu mendapat nilai NO lagi.

Sekarang semuanya sudah siap untuk bekerja. Jalankan aplikasi dan uji dalam orientasi potret dan lanskap.


Kesimpulan

Seperti yang telah Anda sadari, terkadang ada baiknya untuk membuat tampilan kustom yang melayani kebutuhan Anda lebih baik daripada tampilan SDK iOS standar. Tampilan input teks kustom adalah komponen yang dapat digunakan kembali dengan sedikit atau tanpa modifikasi. Ini dapat digunakan di banyak proyek, dan kita telah melakukan semuanya dengan menggunakan teknik dan prinsip pemrograman sederhana. Tampilan masukan teks kustom ini, yang sekarang tersedia untuk semua orang, dapat menjadi subjek untuk penyesuaian dan perbaikan lebih lanjut, dan semoga ini akan bermanfaat bagi banyak programmer! Dalam tutorial berikutnya, kita akan menggunakan proyek ini dan akan menambahkan fitur baru, menu akordeon dengan opsi yang diberikan kepada pengguna. Tetapi untuk sekarang menikmati tampilan input teks kustom!

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.