Hapus teks item tab bar, tampilkan gambar saja

Pertanyaan sederhana, bagaimana saya bisa menghapus teks item tab bar dan hanya menampilkan gambar?

Saya ingin item bar disukai di aplikasi instagram:

Di inspektur di xcode 6 saya menghapus judul dan memilih gambar @ 2x (50px) dan @ 3x (75px). Namun gambar tersebut tidak menggunakan ruang kosong dari teks yang dihapus. Ada ide bagaimana cara mendapatkan gambar item tab bar yang sama seperti di aplikasi instagram?

Anda harus bermain dengan imageInsetsproperti UITabBarItem. Berikut adalah contoh kode:

let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)

Nilai di dalamnya UIEdgeInsetstergantung pada ukuran gambar Anda. Inilah hasil dari kode itu di aplikasi saya:

// Remove the titles and adjust the inset to account for missing title
for(UITabBarItem * tabBarItem in self.tabBar.items){
    tabBarItem.title = @"";
    tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
}

Inilah cara Anda melakukannya di papan cerita.

Hapus teks judul, dan atur inset gambar seperti gambar di bawah

Ingat ukuran ikon harus mengikuti pedoman desain apel

Ini berarti Anda harus memiliki 25px x 25px untuk @ 1x, 50px x 50px untuk @ 2x, 75px x 75px untuk @ 3x

Menggunakan pendekatan dengan pengaturan masing-masing UITabBarItems titleproperti untuk "" dan pembaruan imageInsetstidak akan berfungsi jika dalam pandangan kontroler self.titlediatur. Misalnya jika self.viewControllersUITabBarController tertanam UINavigationControllerdan Anda membutuhkan judul untuk ditampilkan di bilah navigasi. Dalam hal ini set UINavigationItemjudul langsung menggunakan self.navigationItem.title, bukan self.title.

Versi cepat dari jawaban ddiego

Kompatibel dengan iOS 11

Panggil fungsi ini dalam viewDidLoad dari setiap turunan pertama viewControllers setelah menyetel judul viewController

Praktek terbaik:

Bergantian seperti yang disarankan @daspianist dalam komentar

Buat subclass seperti kelas ini BaseTabBarController: UITabBarController, UITabBarControllerDelegate dan letakkan fungsi ini di subclass viewDidLoad

func removeTabbarItemsText() {

    var offset: CGFloat = 6.0

    if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
        offset = 0.0
    }

    if let items = tabBar.items {
        for item in items {
            item.title = ""
            item.imageInsets = UIEdgeInsets(top: offset, left: 0, bottom: -offset, right: 0)
        }
    }
}

Jika Anda menggunakan papan cerita, ini akan menjadi pilihan terbaik Anda. Ini loop melalui semua item tab bar dan untuk masing-masing itu menetapkan judul menjadi tidak ada dan membuat gambar layar penuh. (Anda harus menambahkan gambar di storyboard)

for tabBarItem in tabBar.items!
{
   tabBarItem.title = ""
   tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}

iOS 11 membuat masalah pada banyak solusi ini, jadi saya baru saja memperbaiki masalah saya di iOS 11 dengan subclass UITabBar dan mengganti layoutSubviews.

class MainTabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        // iOS 11: puts the titles to the right of image for horizontal size class regular. Only want offset when compact.
        // iOS 9 & 10: always puts titles under the image. Always want offset.
        var verticalOffset: CGFloat = 6.0

        if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
            verticalOffset = 0.0
        }

        let imageInset = UIEdgeInsets(
            top: verticalOffset,
            left: 0.0,
            bottom: -verticalOffset,
            right: 0.0
        )

        for tabBarItem in items ?? [] {
            tabBarItem.title = ""
            tabBarItem.imageInsets = imageInset
        }
    }
}

Saya menggunakan kode berikut di viewDidLoad BaseTabBarController saya. Perhatikan bahwa dalam contoh saya, saya memiliki 5 tab, dan gambar yang dipilih akan selalu menjadi base_image + "_selected".

// Get tab bar and set base styles
let tabBar = self.tabBar;
tabBar.backgroundColor = UIColor.whiteColor()

// Without this, images can extend off top of tab bar
tabBar.clipsToBounds = true

// For each tab item..
let tabBarItems = tabBar.items?.count ?? 0
for i in 0 ..< tabBarItems {
    let tabBarItem = tabBar.items?[i] as UITabBarItem

    // Adjust tab images (Like mstysf says, these values will vary)
    tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -6, 0);

    // Let's find and set the icon's default and selected states
    // (use your own image names here)
    var imageName = ""
    switch (i) {
    case 0: imageName = "tab_item_feature_1"
    case 1: imageName = "tab_item_feature_2"
    case 2: imageName = "tab_item_feature_3"
    case 3: imageName = "tab_item_feature_4"
    case 4: imageName = "tab_item_feature_5"
    default: break
    }
    tabBarItem.image = UIImage(named:imageName)!.imageWithRenderingMode(.AlwaysOriginal)
    tabBarItem.selectedImage = UIImage(named:imageName + "_selected")!.imageWithRenderingMode(.AlwaysOriginal)
}

Pendekatan Swift 4

Saya bisa melakukan trik dengan mengimplementasikan fungsi yang mengambil TabBarItem dan melakukan beberapa format untuk itu.

Memindahkan gambar sedikit ke bawah agar lebih terpusat dan juga menyembunyikan teks pada Tab Bar. Berfungsi lebih baik daripada hanya menyetel judulnya ke string kosong, karena saat Anda memiliki NavigationBar juga, TabBar mendapatkan kembali judul viewController saat dipilih

func formatTabBarItem(tabBarItem: UITabBarItem){
    tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .selected)
    tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .normal)
}

Sintaks terbaru

extension UITabBarItem {
    func setImageOnly(){
        imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .selected)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .normal)
    }
 }

Dan gunakan saja di tabBar Anda sebagai:

tabBarItem.setImageOnly()

Berikut adalah cara yang lebih baik dan lebih mudah untuk melakukan ini selain jawaban teratas:

[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateHighlighted];

Letakkan ini di Anda AppDelegate.didFinishLaunchingWithOptionssehingga itu memengaruhi semua tombol bilah tab sepanjang masa pakai aplikasi Anda.

Ekstensi UITabBarController minimal dan aman di Swift (berdasarkan jawaban @ korgx9):

extension UITabBarController {
  func removeTabbarItemsText() {
    tabBar.items?.forEach {
      $0.title = ""
      $0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    }
  }
}

Berdasarkan jawaban ddiego , di Swift 4.2 :

extension UITabBarController {
    func cleanTitles() {
        guard let items = self.tabBar.items else {
            return
        }
        for item in items {
            item.title = ""
            item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        }
    }
}

Dan Anda hanya perlu memanggil self.tabBarController?.cleanTitles()pengontrol tampilan Anda.

Berdasarkan semua jawaban bagus di halaman ini, saya telah membuat solusi lain yang juga memungkinkan Anda menampilkan judulnya lagi. Alih-alih menghapus isi judul, saya hanya mengubah warna font menjadi transparan.

extension UITabBarItem {

    func setTitleColorFor(normalState: UIColor, selectedState: UIColor) {
        self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: normalState], for: .normal)
        self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: selectedState], for: .selected)
    }

}


extension UITabBarController {

    func hideItemsTitle() {

        guard let items = self.tabBar.items else {
            return
        }

        for item in items {
            item.setTitleColorFor(normalState: UIColor(white: 0, alpha: 0), selectedState: UIColor(white: 0, alpha: 0))
            item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        }

    }

    func showItemsTitle() {

        guard let items = self.tabBar.items else {
            return
        }

        for item in items {
            item.setTitleColorFor(normalState: .black, selectedState: .yellow)
            item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        }

    }

}

kode:

private func removeText() {
    if let items = yourTabBarVC?.tabBar.items {
       for item in items {
          item.title = ""
       }
    }
 }

Cara termudah dan selalu berhasil:

class TabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        subviews.forEach { subview in
            if subview is UIControl {
                subview.subviews.forEach {
                    if $0 is UILabel {
                        $0.isHidden = true
                        subview.frame.origin.y = $0.frame.height / 2.0
                    }
                }
            }
        }
    }
}

Dalam kasus saya, ViewController yang sama digunakan di TabBar dan aliran navigasi lainnya. Di dalam ViewController saya, saya telah mengatur self.title = "Some Title"mana yang muncul di TabBar terlepas dari judul pengaturan nilatau kosong saat menambahkannya di bilah tab. Saya juga telah menetapkan imageInsetssebagai berikut:

item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)

Jadi di dalam ViewController saya, saya telah menangani judul navigasi sebagai berikut:

if isFromTabBar {
   // Title for NavigationBar when ViewController is added in TabBar
   // NOTE: Do not set self.title = "Some Title" here as it will set title of tabBarItem
   self.navigationItem.title = "Some Title"
} else {
   // Title for NavigationBar when ViewController is opened from navigation flow
   self.title = "Some Title"
}

buat subclass UITabBarController dan tetapkan itu ke tabBar Anda, lalu dalam metode viewDidLoad tempatkan baris kode ini:

tabBar.items?.forEach({ (item) in
        item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
    })

TabBar Khusus - iOS 13, Swift 5, XCode 11

• Item TabBar tanpa teks
• Item TabBar berada di tengah secara vertikal
• Tampilan Rounded TabBar
• TabBar Posisi dinamis dan bingkai

Berbasis papan cerita. Itu juga bisa dicapai dengan mudah lewat program. Hanya 4 Langkah untuk diikuti:

1. Ikon Tab Bar harus dalam 3 ukuran, berwarna hitam. Biasanya, saya mendownload dari fa2png.io - ukuran: 25x25, 50x50, 75x75. File gambar PDF tidak berfungsi!

   

2. Di Storyboard untuk item tab bar, atur ikon yang ingin Anda gunakan melalui Attributes Inspector. (lihat tangkapan layar)

3. TabBarController Kustom -> File Baru -> Jenis: UITabBarController -> Setel di storyboard. (lihat tangkapan layar)

4. UITabBarController

   class RoundedTabBarViewController: UITabBarController {

   override func viewDidLoad() {
       super.viewDidLoad()
   
       // Do any additional setup after loading the view.
       // Custom tab bar view
       customizeTabBarView()
   }
   
   private func customizeTabBarView() {
       let tabBarHeight = tabBar.frame.size.height
       self.tabBar.layer.masksToBounds = true
       self.tabBar.isTranslucent = true
       self.tabBar.barStyle = .default
       self.tabBar.layer.cornerRadius = tabBarHeight/2
       self.tabBar.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
   }
   
   override func viewDidLayoutSubviews() {
       super.viewDidLayoutSubviews()
       let viewWidth = self.view.bounds.width
       let leadingTrailingSpace = viewWidth * 0.05
   
       tabBar.frame = CGRect(x: leadingTrailingSpace, y: 200, width: viewWidth - (2 * leadingTrailingSpace), height: 49)
   }
   

   }

5. Hasil

Jika Anda ingin menengahkan tab / mengubah inset gambar tanpa menggunakan angka ajaib, hal berikut ini berhasil untuk saya (di Swift 5.2.2):

Dalam subkelas UITabBarController , Anda dapat menambahkan sisipan gambar setelah menyetel pengontrol tampilan.

override var viewControllers: [UIViewController]? {
    didSet {
      addImageInsets()
    }
}

func addImageInsets() {
    let tabBarHeight = tabBar.frame.height

    for item in tabBar.items ?? [] where item.image != nil {
      let imageHeight = item.image?.size.height ?? 0
      let inset = CGFloat(Int((tabBarHeight - imageHeight) / 4))
      item.imageInsets = UIEdgeInsets(top: inset,
                                      left: 0,
                                      bottom: -inset,
                                      right: 0)
    }
}

Beberapa opsi di atas mencantumkan solusi untuk menangani penyembunyian teks.