Welche Größe sollten TabBar-Bilder haben?

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

Ich habe die Richtlinien für die Benutzeroberfläche von Apple von 2013 überprüft und festgestellt, dass die Bildgröße 30x30/ sein sollte 60x60.

Da die Höhe des Registerkartenleisten-Controllers jedoch 50 beträgt, habe ich die Größe des Bildes beibehalten 50x50.

Wenn ich jetzt das Projekt starte, sehe ich das hässliche Design unten:

Irgendeine Idee, welche Bildgröße ich verwenden sollte, damit das Design perfekt ist?

Hinweis: Ich schreibe auch keinen Text (z. B. Startseite, Suche usw.). Der Text der Registerkarte befindet sich im Bild selbst.

30x30 sind Punkte, dh 30px @ 1x, 60px @ 2x, nicht irgendwo dazwischen. Es ist auch keine gute Idee, den Titel der Registerkarte in das Bild einzubetten - Sie werden ziemlich schlechte Zugänglichkeits- und Lokalisierungsergebnisse wie diese haben.

Gemäß den Apple Human Interface Guidelines :

@ 1x: ungefähr 25 x 25 (max: 48 x 32)

@ 2x: ungefähr 50 x 50 (max: 96 x 64)

@ 3x: ungefähr 75 x 75 (max: 144 x 96)

Gemäß den neuesten Richtlinien für die Benutzeroberfläche von Apple:

Im Hochformat werden Registerkartensymbole über Tabulatortiteln angezeigt. Im Querformat werden die Symbole und Titel nebeneinander angezeigt. Je nach Gerät und Ausrichtung zeigt das System entweder eine normale oder eine kompakte Registerkartenleiste an. Ihre App sollte benutzerdefinierte Registerkartensymbole für beide Größen enthalten.

Ich empfehle Ihnen, den obigen Link zu verwenden, um das vollständige Konzept zu verstehen. Da Apple das Dokument in regelmäßigen Abständen aktualisiert

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

Die Größe 50x50 ist also eine gute Wahl.

Gemäß meiner Praxis verwende ich das 40 x 40 für das Standard-Symbol für die iPad-Registerkartenleiste und 80 x 80 für die Netzhaut.

Aus 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 mit der iOS 7-Symbolfamilie verwandt ist, zeichnen Sie es mit einem sehr dünnen Strich. Insbesondere ein 2-Pixel-Strich (hohe Auflösung) eignet sich gut für detaillierte Symbole und ein 3-Pixel-Strich eignet sich gut für weniger detaillierte Symbole.

Erstellen Sie unabhängig vom visuellen Stil des Symbols eine Symbolleiste oder ein Navigationsleistensymbol in den folgenden Größen:

Ungefähr 44 x 44 Pixel Ungefähr 22 x 22 Pixel (Standardauflösung) Erstellen Sie unabhängig vom visuellen Stil des Symbols ein Registerkartensymbol in den folgenden Größen:

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

Daumen hoch, bevor Sie Codes verwenden !!! Erstellen Sie ein Bild, das das gesamte Element der Registerkartenleiste für jedes Element vollständig abdeckt. Dies ist erforderlich, um das von Ihnen erstellte Bild als Elementschaltfläche in der Registerkartenleiste zu verwenden. Stellen Sie sicher, dass das Verhältnis von Höhe zu Breite auch für jedes Element der Registerkartenleiste 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