TabBar resimleri ne boyutta olmalıdır?

100 boyutunda bir TabBar için simgelerim var.

Apple'ın 2013 İnsan Arabirimi Yönergelerine baktım ve görüntü boyutunun 30x30/ olması gerektiğini söylüyor 60x60.

Ancak sekme çubuğu denetleyicisinin yüksekliği 50 olduğu için görüntünün boyutunu da tuttum 50x50.

Şimdi, projeyi çalıştırdığımda aşağıdaki çirkin tasarımı görüyorum:

Tasarımın mükemmel olması için hangi boyutta görseller kullanmam gerektiğine dair bir fikriniz var mı?

Not: Ayrıca metin yazmıyorum (örn. Ana Sayfa, Arama, vb.). Sekme düğmesinin metni görüntünün kendisinde bulunur.

30x30 noktadır, yani 30px @ 1x, 60px @ 2x, arada bir yerde değil. Ayrıca, sekmenin başlığını resme yerleştirmek de harika bir fikir değil - oldukça zayıf erişilebilirlik ve bunun gibi yerelleştirme sonuçlarına sahip olacaksınız.

Göre Apple İnsan Arabirimi Rehberi :

@ 1x: yaklaşık 25 x 25 (maks: 48 x 32)

@ 2x: yaklaşık 50 x 50 (maks: 96 x 64)

@ 3x: yaklaşık 75 x 75 (maks: 144 x 96)

En son Apple İnsan Arabirimi Yönergelerine göre:

Dikey yönde, sekme çubuğu simgeleri sekme başlıklarının üzerinde görünür. Yatay yönlendirmede, simgeler ve başlıklar yan yana görünür. Cihaza ve yönlendirmeye bağlı olarak, sistem ya normal ya da kompakt bir sekme çubuğu görüntüler. Uygulamanız her iki boyut için de özel sekme çubuğu simgeleri içermelidir.

Konseptin tamamını anlamak için yukarıdaki bağlantıyı kullanmanızı öneririm. Apple güncellemesi nedeniyle düzenli aralıklarla belge

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

Bu yüzden 50x50 boyutu iyi bir seçimdir.

Uygulamama göre, standart iPad sekme çubuğu öğe simgesi için 40 x 40, retina için 80 X 80 kullanıyorum.

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

İOS 7 simge ailesiyle ilişkili gibi görünen bir çubuk simgesi oluşturmak istiyorsanız, onu çizmek için çok ince bir çizgi kullanın. Özellikle, 2 piksel kontur (yüksek çözünürlük) ayrıntılı simgeler için ve 3 piksel kontur daha az ayrıntılı simgeler için iyi çalışır.

Simgenin görsel stilinden bağımsız olarak, aşağıdaki boyutlarda bir araç çubuğu veya gezinme çubuğu simgesi oluşturun:

Yaklaşık 44 x 44 piksel Yaklaşık 22 x 22 piksel (standart çözünürlük) Simgenin görsel stilinden bağımsız olarak, aşağıdaki boyutlarda bir sekme çubuğu simgesi oluşturun:

Yaklaşık 50 x 50 piksel (maksimum 96 x 64 piksel) Standart çözünürlük için yaklaşık 25 x 25 piksel (maksimum 48 x 32 piksel)

Lütfen kodları kullanmadan önce beğeniniz !!! Her öğe için tüm sekme çubuğu öğesini tamamen kaplayan bir görüntü oluşturun. Oluşturduğunuz görüntüyü bir sekme çubuğu öğe düğmesi olarak kullanmak için bu gereklidir. Yükseklik / genişlik oranının her sekme çubuğu öğesi için de aynı olduğundan emin olun. Sonra:

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