Jaki powinien być rozmiar obrazów TabBar?

99

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:

wprowadź opis obrazu tutaj

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.

Fahim Parkar
źródło
1
„Mam ikony dla paska kart o rozmiarze 100”. Czy chodziło Ci o 50?
Blaszard

Odpowiedzi:

112

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.

garrettmurray
źródło
3
Wiedziałem o tym, ale jeśli chcę sformułowania wewnątrz samego obrazu, to co można zrobić?
Fahim Parkar,
Jeśli planujesz stworzyć całkowicie niestandardowy pasek UITabBar, prawdopodobnie powinieneś to zrobić, zamiast używać obrazów dla standardowej wersji UIKit. W przeciwnym razie myślę, że zostaniesz z martwą przestrzenią na dole.
garrettmurray
hmmm, co się dzieje ... zadam projektanta do tworzenia zdjęć domyślne dla paska kart oni droga wsparcia jabłkowym ... dzięki
Fahim Parkar
Dzięki stary. To była duża i szybka pomoc.
Felipe
208

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)

rsc
źródło
Tak, to poprawne Według Apple. Sprawdź poniższe łącze, aby uzyskać więcej informacji developer.apple.com/library/ios/documentation/UserExperience/…
Chamath Jeevan
fajnie, ale jak to możliwe, aby obraz był tak mały bez rozmycia?
niX
2
Od tego czasu został zaktualizowany do 23x23 (dla kwadratów) lub 25x25 (dla okrągłych obrazów) ( developer.apple.com/ios/human-interface-guidelines/… )
Seop Yoon
Seop, możesz po prostu zaktualizować moją odpowiedź, aby odzwierciedlała najnowsze informacje. Ale zauważyłem, że powiedziałem „około 25”, więc uznałbym, że 23 jest w granicach zakresu.
rsc
Przeważnie używam kwadratowych glifów, takich jak ikona domu, cieszę się, że @SeopYoon to wskazał. Będę używał 23x23 dla rozmiaru ikony paska kart.
Cons Bulaquena
44

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.

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

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

Mihir Oza
źródło
2
Należy to bardziej pochwalić, ponieważ jest to ich nowa wytyczna.
Seop Yoon
Aby uzyskać instrukcje, jak ustawić inną ikonę dla zwykłego lub kompaktowego paska kart, zobacz tę odpowiedź: stackoverflow.com/questions/49492229/tab-bar-icon-size/…
Marián Černý
2

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

firelyu
źródło
-3

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
James
źródło