Question simple, comment puis-je supprimer le texte de l'élément de la barre d'onglets et afficher uniquement l'image?
Je veux que les éléments de barre aiment dans l'application instagram:
Dans l'inspecteur de xcode 6, je supprime le titre et choisis une image @ 2x (50px) et une image @ 3x (75px). Cependant, l'image n'utilise pas l'espace libre du texte supprimé. Des idées comment atteindre la même image d'élément de barre de tabulation comme dans l'application instagram?
Vous devriez jouer avec la propriété imageInsets
de UITabBarItem
. Voici un exemple de code:
let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)
Les valeurs dans UIEdgeInsets
dépendent de la taille de votre image. Voici le résultat de ce code dans mon application:
// 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);
}
Voici comment vous le faites dans un storyboard.
Effacez le texte du titre et réglez l'image en incrustation comme sur la capture d'écran ci-dessous.
N'oubliez pas que la taille de l'icône doit suivre/ Apple Design Guideline
Cela signifie que vous devriez avoir 25 pixels x 25 pixels pour @ 1x, 50 pixels x 50 pixels pour @ 2x, 75 pixels x 75 pixels pour @ 3x
Utiliser l'approche pour définir chaque propriété UITabBarItem
s title
sur ""
.__ et mettre à jour imageInsets
ne fonctionnera pas correctement si le contrôleur de vue self.title
est défini. Par exemple, si self.viewControllers
de UITabBarController est incorporé dans UINavigationController
et que vous devez afficher le titre dans la barre de navigation. Dans ce cas, définissez le titre UINavigationItem
s directement à l'aide de self.navigationItem.title
et non de self.title
.
Version Swift de ddiego answer
Compatible avec iOS 11
Appelez cette fonction dans viewDidLoad de chaque premier enfant de viewControllers après la définition du titre de viewController.
Meilleur entrainement:
Alternativelly comme @daspianist suggéré dans les commentaires
Créez une sous-classe comme celle-ci BaseTabBarController: UITabBarController, UITabBarControllerDelegate et mettre cette fonction dans viewDidLoad de la sous-classe
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 = UIEdgeInsetsMake(offset, 0, -offset, 0);
}
}
}
Si vous utilisez des storyboards, ce serait votre meilleure option. Il parcourt tous les éléments de la barre d'onglets et définit pour chacun d'eux le titre sans effet et rend l'image en plein écran. (Vous devez avoir ajouté une image dans le storyboard)
for tabBarItem in tabBar.items!
{
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
iOS 11 pose un problème dans bon nombre de ces solutions. Je viens donc de résoudre mes problèmes sur iOS 11 en sous-classant UITabBar et en redéfinissant 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
}
}
}
J'ai utilisé le code suivant dans viewDidLoad ..__ de mon contrôleur BaseTabBarController. Notez que dans mon exemple, j'ai 5 onglets et que l'image sélectionnée sera toujours image_base + "_sélectionné".
// 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)
}
Approche rapide 4
J'ai été capable de faire le tour en implémentant une fonction qui prend un TabBarItem et le met en forme.
Déplace l'image un peu vers le bas pour la rendre plus centrée et cache également le texte de la barre de tabulation . titre du viewController lorsque sélectionné
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)
}
Une extension UITabBarController minimale et sûre dans Swift (selon @ korgx9 answer):
extension UITabBarController {
func removeTabbarItemsText() {
tabBar.items?.forEach {
$0.title = ""
$0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
Voici un moyen plus simple et plus sûr de procéder ainsi que de donner la meilleure réponse:
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateHighlighted];
Mettez ceci dans votre AppDelegate.didFinishLaunchingWithOptions
afin qu'il affecte tous les boutons de la barre d'onglets tout au long de la vie de votre application.
Basé sur le réponse de ddiego , dans 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)
}
}
}
Et il vous suffit d'appeler self.tabBarController?.cleanTitles()
dans votre contrôleur de vue.
créez une sous-classe de UITabBarController et assignez-la à votre tabBar, puis placez cette ligne de code dans la méthode viewDidLoad:
tabBar.items?.forEach({ (item) in
item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
})
Le moyen le plus simple et fonctionne toujours:
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
}
}
}
}
}
}
Sur la base de toutes les bonnes réponses de cette page, j'ai créé une autre solution qui vous permet également d'afficher à nouveau le titre. Au lieu de supprimer le contenu du titre, je modifie simplement la couleur de la police en transparente.
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)
}
}
}