Hapus teks item tab bar, tampilkan gambar saja

90

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

Saya ingin item bar disukai di aplikasi instagram:

masukkan deskripsi gambar di sini

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?

Suara positif
sumber
1
gunakan ""untuk judulnya, mungkin?
holex
1
Mengatur offset hanyalah tipuan, jawaban yang benar ada di bawah. Anda harus menggunakan navigationItem.title = "some title"
Davit Siradeghyan

Jawaban:

129

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:

masukkan deskripsi gambar di sini

mustafa
sumber
25
Anda juga dapat menyesuaikan sisipan gambar di inspektur.
Suara
Angka ajaib adalah ide yang buruk. Silakan lihat jawaban saya untuk cara yang kompatibel secara universal untuk mencapai hal yang sama.
Ezekiel Victor
4
Ini tidak lagi berfungsi di iOS 11 - jika Anda mengklik dua kali tab aktif, itu akan menggandakan insets karena alasan tertentu.
Ben Gotow
@ BenGotow masalah yang sama Anda punya solusi?
Dixit Akabari
@DixitAkabari orang lain telah memposting beberapa solusi bagus untuk iOS 11
Pranav Kasetti
78
// 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);
}
ddiego
sumber
1
Alih-alih menghapus judul, ubah warna teks menjadi jelas. Judul bisa bermanfaat.
Eduardo Mauro
1
Kodos ke Eduardo! Membuat saya menyadari pilihan yang baik juga untuk mengatur UIOffset vertikal pada judul itemPositionAjustement
Julius
2
Di mana Anda meletakkan ini di TabBar Controller kustom Anda?
UKDataGeek
69

Inilah cara Anda melakukannya di papan cerita.

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

masukkan deskripsi gambar di sini

Ingat ukuran ikon harus mengikuti pedoman desain apel

masukkan deskripsi gambar di sini

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

nuynait
sumber
45

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.

Stefan
sumber
2
Ini sepertinya metode cara yang lebih bersih. +1 @Oleg ini harus ditandai sebagai jawabannya.
akseli
29

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)
        }
    }
}
korgx9
sumber
2
Fungsi yang bagus! Sebagai alternatif, Anda dapat membuat subkelas seperti ini class BaseTabBarController: UITabBarController, UITabBarControllerDelegatedan meletakkan fungsi ini di subkelasviewDidLoad
daspianist
26

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)
}
Marcos Reboucas
sumber
Perlu diperhatikan bahwa jika Anda tidak menyetel insets atas dan bawah, gambar akan melengkung.
Julius
16

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
        }
    }
}
atlwx
sumber
ini adalah satu-satunya hal yang berhasil untuk saya tetapi saya harus meletakkan kode di dalam 'override func viewDidLayoutSubviews' dari subkelas MyTabBarController. Saya membuat subclass tabBarController dan menamakannya
Lance Samaria
Solusi berhasil untuk saya, dengan baik. Saya menggunakannya sebagai ekstensi sehingga lebih mudah untuk ditambahkan
Michal Gumny
@LanceSamaria ini berfungsi tanpa saya perlu menyentuh kode pengontrol bilah tab
Pranav Kasetti
12

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)
}
Empat
sumber
1
Alih-alih menggunakan for var i = 0; i < tabBar... , Anda bisa saja berkata; for tabBarItems in tabBar.items!
Jesse Onolemen
10

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()
Jose Tapizquent
sumber
6

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.

Ezekiel Victor
sumber
3
Ini hanya menyembunyikan judul dan tidak menyesuaikan posisi gambar.
mustafa
2
Ya, tapi pertanyaannya tidak mengatakan apa-apa tentang menyesuaikan gambar. Hanya menyembunyikan teksnya. Dan menyembunyikan teks dengan baik sehingga dapat menghilangkan judul dari pengontrol tampilan tampaknya salah. Terutama ketika Anda dapat menggunakan judul itu untuk menampilkannya sebagai bagian dari
pengontrol tampilan
6

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)
    }
  }
}
Federico Zanetello
sumber
2

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.

j_gonfer
sumber
1

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)
        }

    }

}
ladislas.dll
sumber
0

masukkan deskripsi gambar di sini

kode:

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

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
                    }
                }
            }
        }
    }
}
JulianKro
sumber
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"
}
Chintan Shah
sumber
0

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)
    })
soheil pakgohar
sumber
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!

    masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

  1. 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)
    }
    

    }

  2. Hasil masukkan deskripsi gambar di sini

Doci
sumber
0

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.

Campbell_Souped
sumber