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?
ios
swift
uitabbaritem
Suara positif
sumber
sumber
""
untuk judulnya, mungkin?Jawaban:
Anda harus bermain dengan
imageInsets
propertiUITabBarItem
. 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
UIEdgeInsets
tergantung pada ukuran gambar Anda. Inilah hasil dari kode itu di aplikasi saya:sumber
// 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); }
sumber
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
sumber
Menggunakan pendekatan dengan pengaturan masing-masing
UITabBarItem
stitle
properti untuk""
dan pembaruanimageInsets
tidak akan berfungsi jika dalam pandangan kontrolerself.title
diatur. Misalnya jikaself.viewControllers
UITabBarController tertanamUINavigationController
dan Anda membutuhkan judul untuk ditampilkan di bilah navigasi. Dalam hal ini setUINavigationItem
judul langsung menggunakanself.navigationItem.title
, bukanself.title
.sumber
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
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) } } }
sumber
class BaseTabBarController: UITabBarController, UITabBarControllerDelegate
dan meletakkan fungsi ini di subkelasviewDidLoad
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) }
sumber
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 } } }
sumber
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) }
sumber
for var i = 0; i < tabBar...
, Anda bisa saja berkata;for tabBarItems in tabBar.items!
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:
sumber
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.didFinishLaunchingWithOptions
sehingga itu memengaruhi semua tombol bilah tab sepanjang masa pakai aplikasi Anda.sumber
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) } } }
sumber
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.sumber
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) } } }
sumber
kode:
private func removeText() { if let items = yourTabBarVC?.tabBar.items { for item in items { item.title = "" } } }
sumber
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 } } } } } }
sumber
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 pengaturannil
atau kosong saat menambahkannya di bilah tab. Saya juga telah menetapkanimageInsets
sebagai 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" }
sumber
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) })
sumber
TabBar Khusus - iOS 13, Swift 5, XCode 11
Berbasis papan cerita. Itu juga bisa dicapai dengan mudah lewat program. Hanya 4 Langkah untuk diikuti:
Ikon Tab Bar harus dalam 3 ukuran, berwarna hitam. Biasanya, saya mendownload dari fa2png.io - ukuran: 25x25, 50x50, 75x75. File gambar PDF tidak berfungsi!
Di Storyboard untuk item tab bar, atur ikon yang ingin Anda gunakan melalui Attributes Inspector. (lihat tangkapan layar)
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) }
}
Hasil
sumber
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.
sumber