Bilah Tab Kustom di Swift

Jika Anda mencoba untuk mencapainya, akan ada hambatan. Saya sudah memilikinya; semua orang pernah memilikinya. Tetapi rintangan tidak harus menghentikan Anda. Jika Anda menabrak tembok, jangan berbalik dan menyerah. Cari tahu cara memanjatnya, melewatinya, atau menyiasatinya.

- Michael Jordan

Hari ini saya akan membuat bilah tab khusus, yang merupakan jenis dari setiap jenis aplikasi seluler, seperti Facebook, Instagram, Whatsapp, dll.

Bilah tab adalah baris atau panel di bagian bawah layar dengan tombol yang terus terlihat, yang memberikan akses ke berbagai layar. Saat ini, bilah tab menjadi semakin populer. Sebelum debut perangkat layar besar, hanya ada iPhone 3,5 inci dan 4 inci. Salah satu kelemahan bilah tab adalah Anda mengorbankan sedikit ruang layar. Ini benar-benar masalah untuk perangkat layar kecil. Saat Apple meluncurkan iPhone 6 dan 6 Plus dengan ukuran layar lebih besar pada akhir 2014, pengembang aplikasi mulai mengganti menu yang ada di aplikasi mereka dengan bilah tab. Aplikasi Facebook telah beralih dari desain menu bilah sisi ke bilah tab. Aplikasi populer lainnya seperti Twitter, Quora, dan Apple Music juga mengadopsi bilah tab untuk navigasi. Menjadi lebih mudah untuk menavigasi aplikasi.

Bilah tab memungkinkan pengguna mengakses fitur inti aplikasi dengan cepat, hanya dengan satu ketukan. Meskipun membutuhkan sedikit ruang layar, itu sangat berharga.

Sementara pengontrol navigasi memungkinkan pengguna menavigasi konten hierarkis dengan mengelola tumpukan pengontrol tampilan, bilah tab mengelola beberapa pengontrol tampilan yang tidak harus memiliki hubungan satu sama lain. Biasanya pengontrol bilah tab berisi setidaknya dua tab dan Anda diizinkan untuk menambahkan hingga lima tab tergantung pada kebutuhan Anda.

Membuat Proyek

Setelah membuat proyek baru, kita harus pergi ke Main.storyboard dan menghapus View Controller dan kita akan mulai dengan papan tulis yang benar-benar kosong. Pertama, kita harus pergi ke Library dan pilih Tab Bar Controller, dan seret ini ke storyboard. Kita akan melihat bahwa ini memberikan dua templat yang sudah dibuat dengan dua pengontrol yang sudah terpasang.

Mari klik kedua ViewController dan hapus karena kita akan melakukannya sendiri. Kemudian, kita harus mengklik panel di atas Tab Bar Controller, dan di Inspectors, kita harus mengklik Is Initial View Controller.

Setelah itu, kita membutuhkan tambahan lima Pengontrol Tampilan, jadi lima tab. Untuk Pengontrol Tab Bar, kita harus mendefinisikan hubungan ke lima Pengontrol Tampilan ini. Dengan menekan tombol kontrol dan menyeret dari Pengontrol Tab Bar ke Pengontrol Tampilan dan memilih pengontrol tampilan , kita akan melihat tautan antara Pengontrol Tab Bar dan Pengontrol Tampilan.

Mari kita coba ubah background dengan menggunakan Inspector untuk membedakan masing-masing VC (View Controller). Hasilnya akan terlihat seperti ini:

Jadi mari kita ubah warna dan ikon untuk masing-masing, dengan mengklik tab bar VC pertama dan kemudian mengedit labelnya. Kami akan menulis "Hari Ini", "Game", "Aplikasi", "Arkade", dan "Pencarian". Untuk menyetel ikon, kita perlu menemukan ikon yang tepat di opsi Gambar .

Untuk menyesuaikan bilah Tab, kita harus membuat kelas untuk setiap Scene, untuk melakukan itu kita dapat membuat file swift untuk setiap Scene atau membuat class dalam satu file ViewController. Mari kita lanjutkan dengan yang kedua. Kita perlu membuka ViewController.swift dan membuat kelas untuk masing-masing kelas.

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

class ThirdViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

class ForthViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

class LastViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

Hasil di simulator: