Jaki powinien być rozmiar obrazów TabBar?

Mam ikony dla tabBar o rozmiarze 100.

Sprawdziłem w Wytycznych dotyczących interfejsu ludzkiego Apple z 2013 r. I mówi, że rozmiar obrazu powinien wynosić 30x30/ 60x60.

Ale ponieważ wysokość kontrolera paska kart wynosi 50, utrzymałem rozmiar obrazu przy 50x50 .

Teraz, kiedy uruchamiam projekt, widzę brzydki projekt poniżej:

Masz pomysł, jakiego rozmiaru obrazy powinienem użyć, aby projekt był idealny?

Uwaga: nie piszę również tekstu (np. Strona główna, Wyszukiwarka itp.). Tekst przycisku karty znajduje się na samym obrazie.

30x30 to punkty, co oznacza 30px @ 1x, 60px @ 2x, a nie gdzieś pomiędzy. Ponadto osadzenie tytułu karty w obrazie nie jest dobrym pomysłem - będziesz miał dość kiepską dostępność i takie wyniki lokalizacji.

Zgodnie z wytycznymi Apple dotyczącymi interfejsu ludzkiego :

@ 1x: około 25 x 25 (maks .: 48 x 32)

@ 2x: około 50 x 50 (maks .: 96 x 64)

@ 3x: około 75 x 75 (maks .: 144 x 96)

Zgodnie z najnowszymi wytycznymi Apple dotyczącymi interfejsu ludzkiego:

W orientacji pionowej ikony paska kart pojawiają się nad tytułami kart. W orientacji poziomej ikony i tytuły są wyświetlane obok siebie. W zależności od urządzenia i orientacji system wyświetla zwykły lub kompaktowy pasek z kartami. Twoja aplikacja powinna zawierać niestandardowe ikony paska kart dla obu rozmiarów.

Proponuję skorzystać z powyższego linku, aby zrozumieć całą koncepcję. Ponieważ Apple aktualizuje swój dokument w regularnych odstępach czasu

Źródła: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons /] .

Więc rozmiar 50x50 to dobry wybór.

Zgodnie z moją praktyką używam ikony 40 x 40 dla standardowej ikony paska zakładek iPada, 80 x 80 dla siatkówki.

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

Jeśli chcesz utworzyć ikonę paska, która wygląda tak, jakby była związana z rodziną ikon iOS 7, narysuj ją bardzo cienkim pociągnięciem. W szczególności obrys 2-pikselowy (wysoka rozdzielczość) działa dobrze w przypadku ikon szczegółowych, a obrys 3-pikselowy działa dobrze w przypadku ikon mniej szczegółowych.

Niezależnie od stylu wizualnego ikony utwórz pasek narzędzi lub ikonę paska nawigacji w następujących rozmiarach:

Około 44 x 44 piksele Około 22 x 22 piksele (rozdzielczość standardowa) Niezależnie od stylu wizualnego ikony utwórz ikonę paska kart w następujących rozmiarach:

Około 50 x 50 pikseli (maksymalnie 96 x 64 pikseli) Około 25 x 25 pikseli (maksymalnie 48 x 32 piksele) przy standardowej rozdzielczości

Kciuki w górę przed użyciem kodów proszę !!! Utwórz obraz, który w pełni zakrywa cały element paska kart dla każdego elementu. Jest to konieczne, aby użyć utworzonego obrazu jako przycisku elementu paska kart. Upewnij się, że stosunek wysokości do szerokości jest taki sam dla każdego elementu paska kart. Następnie:

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