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

iOS dari awal dengan Swift: menjelajahi Tab Bar Controller

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called iOS From Scratch With Swift.
iOS From Scratch With Swift: Navigation Controllers and View Controller Hierarchies
iOS From Scratch With Swift: Data Persistence and Sandboxing on iOS

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

Dalam tutorial sebelumnya, kita diskusikan bagaimana pengontrol navigasi memungkinkan pengguna untuk menavigasi hirarkis konten atau kompleks data dengan mengelola tumpukan Lihat controller. Tab bar controller juga mengelola sebuah array dari tampilan controller. Perbedaannya adalah bahwa kontroler lihat tab bar controller tentu tidak memiliki keterkaitan satu sama lain. Dalam tutorial ini, kita akan menjelajahi tab bar controller secara lebih rinci dengan membuat tab aplikasi dari awal.

Pengenalan

UITabBarController adalah lain subclass UIViewController. Sementara navigasi controller mengatur tumpukan controller terkait tampilan, tab bar controller mengelola serangkaian pemandangan pengendali yang tidak eksplisit berkaitan satu sama lain.

Aplikasi jam dan musik pada iOS adalah dua contoh dari tab bar controller. Seperti subclass UIViewController lain, tab bar controller mengelola sebuah instance UIView.

The Clock application is a great example of a tab bar controller in use

Tampilan tab bar controller terdiri dari dua subviews:

  • Bilah tab di bagian bawah tampilan
  • pandangan dari salah satu controller lihat tab bar controller mengatur
Anatomy of a Tab Bar Controller

Sebelum kita mulai

Ada beberapa keberatan terhadap sadar ketika bekerja dengan tab bar controller. Meskipun contoh UITabBar hanya dapat menampilkan lima tab, UITabBarController dapat mengelola lebih Lihat controller. Jika tab bar controller mengelola lebih dari lima tampilan controller, Bilah tab terakhir pada bilah tab berjudul lebih.

A tab bar controller can manage an unlimited number of view controllers

Kontroler tambahan pemandangan yang dapat diakses melalui tab ini dan itu bahkan dimungkinkan untuk mengedit posisi tab dalam bilah tab.

The additional view controllers can be accessed via the More tab

Meskipun tab bar controller mengatur tampilan, aplikasi Anda tidak seharusnya untuk langsung berinteraksi dengan tampilan tab bar controller. Tab bar controller diperlukan untuk menjadi pengendali Lihat akar jendela aplikasi. Dengan kata lain, akar pemandangan dari jendela aplikasi adalah selalu tampilan tab bar controller. Tab bar controller harus tidak pernah diinstal sebagai anak lain lihat controller. Ini adalah salah satu perbedaan kunci dengan navigasi controller.

Tab Perpustakaan

Dalam artikel ini, kita kembali aplikasi perpustakaan yang kami bangun di artikel sebelumnya. Melakukannya akan Mari kita kembali beberapa kelas dan mendapatkan sampai dengan kecepatan lebih cepat. Selain itu, ia akan menampilkan navigasi controller dan tab bar controller yang berbeda dan bahwa mereka yang digunakan dalam situasi yang berbeda dan menggunakan kasus-kasus.

Karena aplikasi kita membangun dalam pelajaran ini didasarkan pada kelas UITabBarController, itu akan memberikan tampilan dan nuansa sangat spesifik ke aplikasi, memungkinkan untuk sedikit fleksibilitas dalam hal antarmuka pengguna dan pengalaman. Tab bar controller sangat berguna, tetapi Anda harus menerima bahwa mereka menempatkan batasan pada antarmuka pengguna aplikasi Anda sampai batas tertentu.

Buka Xcode, buat proyek baru (File> New> Project ...), dan pilih template Aplikasi Tampilan Tunggal.

Choosing an Application Template

Nama proyek perpustakaan Tabbed, menetapkan nama organisasi dan pengenal, menetapkan bahasa ke Swift, dan mengatur perangkat untuk iPhone. Memberitahu Xcode mana Anda ingin menyimpan proyek dan klik buat.

Configuring the Project

Meskipun Xcode termasuk template tab aplikasi, saya lebih suka untuk memulai dengan aplikasi dasar template sehingga Anda memahami bagaimana berbagai potongan teka-teki cocok bersama. Anda akan melihat bahwa tab bar controller tidak yang rumit.

Mengambil kepala mulai

Ketika aplikasi tab Perpustakaan selesai, tab bar controller aplikasi akan mengelola enam Lihat controller. Alih-alih membuat setiap kelas controller pemandangan dari awal, kita akan menipu sedikit oleh menggunakan tampilan controller kelas kami menciptakan dalam artikel sebelumnya. Selain itu, kami akan membuat beberapa contoh tampilan controller kelas yang sama untuk menyelamatkan kita beberapa waktu. Tujuan artikel ini adalah bukan untuk menciptakan sekelompok Lihat controller kelas. Pada titik ini, Anda harus cukup akrab dengan cara kerjanya.

Men-download kode sumber dari artikel sebelumnya dan membuka proyek Xcode yang disertakan dalam file sumber di jendela Finder baru. Menemukan kelas AuthorsViewController, BooksViewController dan BookCoverViewController dan menyeret mereka ke proyek baru Anda. Pastikan untuk menyalin file ke proyek baru dengan memeriksa kotak centang salinan item jika diperlukan dan jangan lupa untuk menambahkan file ke target tab Perpustakaan.

Copy Files to Project

Selain ini tiga kelas, kita juga perlu untuk menyalin folder sumber daya, yang berisi Books.plist dan file gambar, untuk proyek baru kami. Tarik folder bernama sumber daya untuk proyek kami dan menggunakan pengaturan yang sama yang kita gunakan untuk menyalin file kelas. Sekarang kita siap untuk instantiate aplikasi tab bar controller dan mengisi dengan view controller yang pertama.

Menambahkan sebuah Tab Bar Controller

Jika Anda membuka Main.storyboard, Anda akan melihat bahwa storyboard berisi instance kelas ViewController. Pilih tampilan controller dan tekan delete atau backspace. Buka Perpustakaan objek di sebelah kanan dan seret tab bar controller ke ruang kerja.

Xcode secara otomatis menambahkan dua anak lihat controller ke tab bar controller. Karena saya ingin menunjukkan bagaimana Anda bagaimana secara manual menambahkan anak lihat controller untuk kontroler bar tab, kami akan menghapus yang Xcode telah menciptakan bagi kita. Pilih anak lihat controller dan tekan delete atau backspace untuk menghapus mereka.

Pilih tab bar controller, buka Inspektur atribut, dan centang kotak adalah awal View Controller. Jika kita tidak mengatur tab bar controller sebagai controller lihat awal, aplikasi akan crash pada peluncuran.

Adding a Tab Bar Controller

Jika Anda menjalankan aplikasi dalam simulator, Anda akan melihat sebuah tab bar di bagian bawah dan latar belakang hitam. Ini mungkin tampak tidak penting, tapi itu menunjukkan bagaimana tab bar controller bekerja. Tab bar controller mengatur array Lihat controller, mirip dengan bagaimana mengelola kontroler navigasi tumpukan Lihat controller.

Kita perlu menambahkan beberapa tampilan controller untuk storyboard dan menambahkannya ke properti viewControllers dari tab bar controller. Mari kita lihat bagaimana ini bekerja.

Menambahkan Lihat Pengontrol

Seret instance UITableViewController dari Object Library ke ruang kerja dan setel kelasnya ke AuthorsViewController di Identity Inspector. Pilih tampilan tabel pengontrol tampilan dan atur sel Prototype menjadi 0 di Inspektur Atribut.

Adding a Table View Controller

Untuk menambahkan pengontrol tampilan pengarang ke pengontrol tampilan pengontrol tab bar, seret dari pengontrol tab bar ke pengontrol tampilan pengarang, tekan terus tombol Kontrol. Pilih hubungan Suci Segue > Lihat controller dari menu yang muncul.

Creating a Relationship Segue
Creating a Relationship Segue

Controller tab bar dengan satu tab tidak yang berguna jadi mari kita tambahkan lain lihat controller ke dalam campuran. Tarik contoh UITableViewController lain dari perpustakaan objek, set kelas untuk BooksViewController, dan mengatur sel-sel prototipe ke 0. Menciptakan hubungan Suci segue seperti yang kita lakukan untuk penulis Lihat controller.

Adding Another Table View Controller

Tambahkan sebuah instance UIViewController ke ruang kerja dan set kelas untuk BookCoverViewController di Inspektur identitas. Menambahkan sebuah instance UIImageView ke tampilan controller, menghubungkannya dengan outlet bookCoverView Lihat controller, dan menerapkan tata letak diperlukan kendala. Menciptakan hubungan Suci segue dengan tab bar controller seperti yang kami lakukan untuk meja Lihat controller.

Papan cerita terkadang bisa menjadi sedikit berantakan. Jika Anda mengalami kesulitan dalam membuat segues antara pengontrol tampilan, ketahuilah bahwa Anda juga dapat membuat koneksi, seperti segues, di navigator di sebelah kiri. Ini sering lebih mudah dan kurang kikuk.

Creating Segues Between View Controllers

Membangun dan menjalankan aplikasi. Pada titik ini, tab bar berisi tiga tab. Menekan tab kedua atau ketiga crash aplikasi. Kenapa bisa begitu? Saatnya untuk beberapa debugging.

Memperbaiki Bugs

Memperbaiki penulis View Controller

Jika Anda menekan nama penulis di controller pandangan penulis, aplikasi lumpuh. Hal pertama yang harus Anda lakukan ketika Anda dihadapkan dengan sebuah kecelakaan adalah memeriksa Xcode di konsol. Inilah yang dikatakannya padaku.

Pesan yang menampilkan Xcode di konsol ini tidak sulit untuk memecahkan. Kami memberitahu controller lihat untuk melakukan segue dengan pengenal BooksViewController, tetapi segue itu tidak ada. Hasilnya adalah sebuah kecelakaan.

Bug ini mudah untuk memperbaiki dengan embedding controller pandangan penulis di navigasi controller, menciptakan segue untuk contoh BooksViewController, dan nama segue BooksViewController. Aku meninggalkan bahwa hingga Anda sebagai tugas karena kita sudah melakukan hal ini dalam artikel sebelumnya. Source file tutorial ini berisi solusi.

Isu yang lebih penting dalam contoh ini adalah pemahaman bahwa tiga tampilan controller yang terhubung ke tab bar controller tidak berkomunikasi dengan satu sama lain. Ide di balik bar controller dan pengontrol navigasi tab ini sangat berbeda. Pengontrol navigasi mempertahankan array Lihat controller, tumpukan navigasi. Lihat controller dalam susunan navigasi memiliki hubungan implisit dengan satu sama lain dalam arti bahwa mereka adalah bagian dari susunan navigasi yang sama.

Kontroler bar tab juga mengelola sebuah array dari tampilan controller, tapi lihat controller tidak tahu tentang satu sama lain. Mereka tidak dapat berkomunikasi dengan satu sama lain melalui tab bar controller. Dalam artikel sebelumnya, kami melewati data dari controller pandangan penulis buku Lihat controller ketika pengguna mengetuk seorang penulis. Pola ini tidak berlaku di tab bar controller. Tentu saja, kita dapat menerapkan solusi untuk menunjukkan pengguna buku Lihat controller ketika seorang penulis disadap di controller pandangan penulis, tetapi sangat penting bahwa Anda memahami bahwa itu bukan tujuan dari tab bar controller.

Aplikasi jam dan musik pada iOS adalah contoh yang baik bagaimana tab bar controller harus digunakan. Kontroler lihat tab bar controller mengatur dalam aplikasi musik tidak memiliki hubungan satu sama lain selain fakta bahwa mereka menunjukkan lagu.

Sebelum Anda melanjutkan, pastikan bahwa Anda memahami konsep-konsep pengontrol navigasi dan kontroler bar tab. Mereka penting nanti dalam seri ini.

Memperbaiki Pengontrol Tampilan Buku

Saat Anda mengetuk tab kedua dari pengontrol tab bar, aplikasi juga macet. Ini yang saya lihat di konsol Xcode.

Ini tidak mengejutkan baik karena kita tidak menetapkan properti penulis buku Lihat controller. Mari kita memperbarui buku Lihat controller sehingga menunjukkan setiap buku dalam Books.plist.

Kita perlu membuat tiga perubahan. Mari kita mulai dengan perubahan termudah pertama. Buka BooksViewController.swift dan mengubah jenis properti penulis untuk [String: AnyObject]. Properti author adalah sekarang opsional bukan dipaksa membukanya opsional.

Untuk perubahan kedua, kita perlu untuk memperbarui pelaksanaan viewDidLoad(). Kami menampilkan nama penulis jika penulis tidak nol. Jika penulis tidak ada, kami menetapkan judul untuk 'Buku'.

Perubahan terakhir ini sedikit lebih terlibat. Kami mengubah properti dihitung buku menjadi malas properti disimpan. Properti disimpan malas diinisialisasi pertama kalinya diakses melalui. Dengan kata lain, properti tidak diinisialisasi ketika tampilan controller diinisialisasi. Ini adalah apa yang tampak seperti implementasi.

Sifat malas yang disimpan ditandai dengan kata kunci yang malas. Bukan menetapkan nilai biasa ke properti, kami menetapkan penutupan. Namun perlu dicatat bahwa penutupan berakhir dengan dua tanda kurung, (). Ini menandakan penutupan dijalankan ketika buku diakses untuk pertama kalinya. Hal ini sangat mirip dengan fungsi anonim dalam bahasa lain, seperti JavaScript.

Dalam penutupan, kami membuat array tipe kosong [AnyObject]. Jika penulis tidak nol, kita load buku-buku dari properti author. Jika penulis tidak memiliki nilai, kami memuat Books.plist dan menambahkan setiap buku dari setiap penulis ke buffer. Perhatikan bahwa kami mengembalikan deretan buku di akhir penutupan. Menjalankan aplikasi untuk melihat apakah perbaikan kecelakaan yang disebabkan oleh buku Lihat controller.

Jika Anda membuka tab kedua pada aplikasi dan mengetuk buku dari daftar, aplikasi akan mogok karena alasan yang sama dengan yang dilihat pengontrol oleh penulis menyebabkan kerusakan lebih awal. Anda dapat memperbaiki hal ini dengan embedding buku Lihat controller di pengontrol navigasi dan menciptakan segue dengan pengenal BookCoverViewController ke BookCoverViewController instance.

Memperbaiki Pengendali Lihat Sampul Buku

Jika Anda menekan tab ketiga, aplikasi juga lumpuh. Solusinya serupa dengan yang kami diterapkan ke kelas BooksViewController. Mulailah dengan membuat properti buku dari BookCoverViewController opsional.

Kami menyatakan lain malas disimpan properti, bookCoverImage jenis UIImage?. Di bookCoverImage kita pilih buku acak dari buku-buku yang disimpan dalam Books.plist jika properti buku tidak memiliki nilai. Jika buku ini memiliki nilai, kami menampilkan sampul buku buku itu.

Dalam viewDidLoad(), kita menggunakan bookCoverImage properti untuk memperbarui tampilan gambar sampul buku Lihat controller.

Jika Anda telah menerapkan perubahan di atas, Anda sekarang harus mampu Jalankan aplikasi tanpa melihat crash. Jika Anda memiliki mata untuk detail, Anda mungkin telah memperhatikan bahwa judul tab kedua dan ketiga hanya muncul ketika tab yang dipilih. Dapatkah kamu menebak mengapa?

Bilah tab item

Penyebab permainan kata-kata aneh ini sebenarnya cukup sederhana. Secara umum, pandangan tidak dimuat ke memori sampai benar-benar perlu. Ini biasanya berarti bahwa pandangan load ke memori ketika itu tentang akan ditampilkan kepada pengguna.

Ketika aplikasi tab Perpustakaan diluncurkan, tab pertama yang dipilih secara default. Selama kedua atau ketiga tab tidak dipilih — oleh pengguna atau pemrograman-tidak perlu untuk memuat tampilan controller Lihat itu. Sebagai hasilnya, viewDidLoad() tidak disebut sampai tab yang dipilih. Ini berarti bahwa judul tidak diatur sampai tab yang dipilih.

Solusinya sederhana. Setiap contoh UIViewController (atau sebuah subclass daripadanya) memiliki properti tabBarItem jenis UITabBarItem!. Properti ini digunakan oleh tab bar controller untuk mengkonfigurasi tab di tab bar. Judul tab tampilan controller diambil dari tampilan controller tabBarItem properti.

Untuk mengatasi masalah di atas, kita perlu untuk mengatur properti title tabBarItem properti ketika kontroler lihat tab bar controller diinisialisasi. Mari kita lihat bagaimana ini bekerja untuk BooksViewController kelas.

Buka BooksViewController.swift dan menambahkan initializer berikut. Sebelum kita Lihatlah implementasi, saya ingin menunjukkan tiga menarik rincian tentang initializer. Swift, initializers adalah tipe khusus dari fungsi.

  • Kata kunci yang diperlukan menunjukkan bahwa penginisialisasi ini diperlukan untuk diimplementasikan oleh setiap subkelas. Namun, tidak perlu mengimplementasikan initializer yang diperlukan jika subclass memenuhi persyaratan dengan initializer yang diwarisi oleh kelas induknya. Inisialisasi adalah topik yang cukup kompleks di Swift yang menyebabkan sedikit kebingungan di antara para pengembang. Karena kerumitannya, saya tidak akan membahasnya secara rinci dalam seri ini.
  • Tanda tanya setelah kata kunci init menunjukkan bahwa inisialisasi mungkin gagal. Ini lebih dikenal sebagai initializer failable. Jika tampilan controller tidak dapat instantiated untuk satu alasan atau lainnya, initializer kembali nol bukan instance kelas.
  • Anda juga mungkin telah memperhatikan bahwa initializer tidak menggunakan kata kunci func. Kata kunci func tidak digunakan untuk initializers.

Dalam initializer, kita memanggil initializer parent class. Kata kunci super mengacu pada superclass. Kami kemudian membuat sebuah tab bar item dan menetapkannya ke properti tabBarItem. Untuk membuat tab bar item, kita memanggil init(title:image:tag:), melewati dalam judul tab bar item, misalnya UIImage dan tag. Tag ini digunakan untuk mengidentifikasi tab bar item.

Catatan bahwa Anda dapat mengabaikan ekstensi nama file. Meskipun kami menggunakan gambar dengan nama ikon-authors.png, nilai yang kami berikan kepada UIImage initializer adalah "ikon-penulis". Saya telah menggunakan gambar disertakan dalam file sumber pada GitHub dan Anda juga dapat menemukan mereka di GraphicRiver jika Anda ingin menggunakannya dalam proyek Anda sendiri.

Untuk setiap gambar, ada dua file, ikon-authors.png dan icon-authors@2x.png. Sistem operasi memilih berkas pertama untuk perangkat yang tidak memiliki layar retina. File kedua digunakan untuk perangkat dengan layar retina. Catatan bahwa Anda tidak perlu menyertakan @2 x specifier dalam string Anda melewati ke UIImage initializer. Sistem operasi cukup pintar untuk mengetahui hal ini.

Anda dapat menyertakan file ketiga dengan @3 x specifier untuk iPhone 6/6S Plus. Kerapatan piksel dari file ini harus trice yang pertama. Lihatlah contoh berikut untuk lebih memahami bagaimana ini bekerja praktek.

  • ikon-authors.png: 30PX x 30px
  • Icon-Authors@2x.PNG: x 60px x 60 piksel
  • Icon-Authors@3x.PNG: 90px x 90px

Mari kita juga membuat item bar tab yang untuk kelas AuthorsViewController dan BookCoverViewController.

Tab bar item juga dapat memiliki lencana. Jika Anda sedang membangun klien email, misalnya, Anda bisa lencana tab dengan jumlah email yang belum dibaca. Anda dapat menambahkan lencana untuk tab bar item dengan mengatur properti badgeValue. Memperbarui initializer buku Lihat controller seperti ditunjukkan di bawah.

Ini adalah hasil apa yang akan terlihat seperti ketika Anda menjalankan aplikasi dalam simulator.

Badging a Tab Bar Item

Dalam pelajaran sebelumnya, saya menulis bahwa setiap tampilan controller pada tumpukan navigasi membuat referensi ke pengontrol navigasi mengelola stack. Hal yang sama juga berlaku untuk lihat controller yang dikelola oleh tab bar controller. Kontroler view yang dikelola oleh tab bar controller membuat referensi ke tab bar controller di properti baru tabBarController, yang merupakan jenis UITabBarController?.

Ketika bekerja dengan tab bar controller, perlu diingat bahwa akar Lihat controller dari setiap tab yang menentukan tampilan item bar tab tab masing-masing. Misalnya, tab bar controller mengelola kontroler navigasi dengan jumlah tampilan controller, Apakah tab bar item pengontrol navigasi akar view controller yang digunakan oleh bar controller Bilah tab tab. Kelas UITabBarItem memiliki beberapa metode lain untuk lebih lanjut menyesuaikan tampilan dan nuansa tab bar item.

Lebih View Controller

Sebelum mengakhiri artikel ini, saya ingin menunjukkan Anda bagaimana Bilah tab terlihat ketika tab bar controller mengatur lebih dari lima Lihat controller. Seperti saya sebutkan sebelumnya, hanya lima tab ditampilkan pada satu waktu, tapi tab bar controller menyediakan dukungan untuk mengelola lebih dari lima anak lihat controller.

Buka storyboard utama dan menambahkan dua contoh UITableViewController dan satu contoh UIViewController. Pada Inspektur identitas, menetapkan kelas controller Lihat ini AuthorsViewController, BooksViewController dan BookCoverViewController masing-masing. Jalankan aplikasi untuk melihat hasil. Jika Anda tab tab pertama dari kanan, Anda harus melihat kontroler dua pandangan yang tidak bisa cocok pada bilah tab.

More Tab Bar Items

Anda bahkan dapat mengubah posisi barang bar tab dengan menekan tombol Edit di bagian kanan atas.

Modify Position of Tab Bar Items

Kami menambahkan kontroler tambahan pemandangan tidak berguna, tetapi mereka menunjukkan bagaimana kontroler bar tab mengelola lebih dari lima anak lihat controller.

Kesimpulan

Hal ini penting untuk memahami bahwa UITabBarController dan UINavigationController masing-masing mewakili sebuah paradigma antarmuka pengguna yang unik. Dalam artikel ini, Anda belajar bahwa bilah tab controller tidak sulit untuk menguasai setelah Anda memahami komponen-komponen yang terlibat. Dalam artikel berikutnya, kami akan mengambil melihat data kekal pada iOS dan pilihan yang Anda miliki sebagai seorang pengembang.

Jika Anda memiliki pertanyaan atau komentar, Anda dapat meninggalkan mereka di komentar di bawah atau mengulurkan tangan kepada saya di Twitter.

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.