Welche Größe sollten TabBar-Bilder haben?

Question

Ich habe Symbole für eine tabBar der Größe 100.

ich at Apple's Human Interface Guidelines geprüft und es sagt, die Bildgröße 30x30/60x60 sein sollte.

Aber wie die Höhe der Tab-Leiste Controller 50 ist, behielt ich die Größe des Bildes bei 50x50. Jetzt

, wenn ich das Projekt ausführen, sehe ich das hässliche Design unter:

Jede Idee, welche Größe Bilder soll ich verwenden, so dass das Design perfekt sein?

Hinweis: Ich schreibe auch keinen Text (z. B. Home, Suche usw.). Der Text der Tab-Schaltfläche ist dort im Bild selbst.

Answer 1

30x30 ist Punkte, was bedeutet 30px @ 1x, 60px @ 2x, nicht irgendwo dazwischen. Außerdem ist es keine gute Idee, den Titel des Tabs in das Bild einzubetten - Sie werden ziemlich schlechte Zugänglichkeits- und Lokalisierungsergebnisse haben.

Answer 2

Nach meiner Praxis verwende ich die 40 x 40 für Standard-iPad-Tab-Leiste Symbol, 80 X 80 für Retina.

Von der Apple-Referenz. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Wenn Sie ein Balkensymbol erstellen möchten, das aussieht, als wäre es mit der iOS 7-Symbolfamilie verwandt, verwenden Sie einen sehr dünnen Strich, um es zu zeichnen. Insbesondere eignet sich ein 2-Pixel-Strich (hohe Auflösung) gut für detaillierte Symbole und ein 3-Pixel-Strich eignet sich gut für weniger detaillierte Symbole.

Unabhängig vom visuellen Stil auf dem Symbols, eine Symbolleiste oder Navigationsleiste Symbol in folgenden Größen erstellen:

über 44 x 44 Pixel über 22 x 22 Pixel (Standardauflösung) Unabhängig vom visuellen Stil des Symbols, erstellen eine Registerleiste Symbol in den folgenden Größen:

Ungefähr 50 x 50 Pixel (96 x 64 Pixel maximal) Ungefähr 25 x 25 Pixel (48 x 32 Pixel maximal) für Standardauflösung

Answer 3

Gemäß den Apple Human Interface Guidelines :

@ 1x: ca. 25 x 25 (max: 48 x 32)

@ 2x: ca. 50 x 50 (max: 96 x 64)

@ 3x: ca. 75 x 75 (max: 144 x 96)

Answer 4

Daumen hoch zuerst vor Gebrauch Codes bitte !!! Erstellen Sie ein Bild, das das gesamte Registerkartenelement für jedes Element vollständig abdeckt. Dies ist erforderlich, um das Bild zu verwenden, das Sie als Schaltfläche für die Tab-Leiste erstellt haben. Stellen Sie sicher, dass das Verhältnis Höhe/Breite für jedes Element der Tableiste gleich ist. Dann:

UITabBarController *tabBarController = (UITabBarController *)self; 
UITabBar *tabBar = tabBarController.tabBar; 
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0]; 
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1]; 
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:2]; 
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:3]; 

int x,y; 

x = tabBar.frame.size.width/4 + 4; //when doing division, it may be rounded so that you need to add 1 to each item; 
y = tabBar.frame.size.height + 10; //the height return always shorter, this is compensated by added by 10; you can change the value if u like. 

//because the whole tab bar item will be replaced by an image, u dont need title 
tabBarItem1.title = @""; 
tabBarItem2.title = @""; 
tabBarItem3.title = @""; 
tabBarItem4.title = @""; 

[tabBarItem1 setFinishedSelectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-select.png"] scaledToSize:CGSizeMake(x, y)] withFinishedUnselectedImage:[self imageWithImage:[UIImage imageNamed:@"item1-deselect.png"] scaledToSize:CGSizeMake(x, y)]];//do the same thing for the other 3 bar item 

Answer 5

Referenz: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/].

So ist die 50x50 Größe eine gute Wahl.

Answer 6

Nach neuesten Apple Human Interface Guidelines: