Какого размера должны быть изображения TabBar?

99

У меня есть значки для tabBar размером 100.

Я проверил руководство Apple Human Interface Guidelines от 2013 года, и в нем говорится, что размер изображения должен быть 30x30/ 60x60.

Но поскольку высота контроллера панели вкладок составляет 50, я сохранил размер изображения 50x50.

Теперь, когда я запускаю проект, я вижу уродливый дизайн ниже:

введите описание изображения здесь

Есть идеи, изображения какого размера мне следует использовать, чтобы дизайн был идеальным?

Примечание. Я также не пишу текст (например, «Домой», «Поиск» и т. Д.). Текст кнопки табуляции находится на самом изображении.

ios objective-c uitabbarcontroller uitabbar uitabbaritem Фахим Паркар
источник
1
«У меня есть значки для tabBar размером 100». Вы имели в виду 50?
Blaszard

Ответы:

112

30x30 - это точки, что означает 30px @ 1x, 60px @ 2x, а не где-то посередине. Кроме того, вставлять заголовок вкладки в изображение - не лучшая идея - у вас будут такие плохие результаты по доступности и локализации.

Garrettmurray
источник
3
Я знал это, но если мне нужны формулировки внутри самого изображения, что тогда делать?
Fahim Parkar 05
Если вы планируете создать полностью настраиваемый UITabBar, вам, вероятно, следует сделать именно это, а не использовать изображения для стандартной версии UIKit. В противном случае я считаю, что у вас останется мертвое пространство внизу.
garrettmurray 05
хммм, что происходит ... Я попрошу дизайнера сделать изображения по умолчанию для панели вкладок, как они поддерживают Apple ... спасибо
Фахим Паркар
Спасибо друг. Это была большая и быстрая помощь.
Фелипе
208

Согласно рекомендациям Apple Human Interface Guidelines :

@ 1x: около 25 x 25 (макс .: 48 x 32)

@ 2x: около 50 x 50 (макс .: 96 x 64)

@ 3x: около 75 x 75 (макс .: 144 x 96)

rsc
источник
Да, это правильно, по мнению яблока. Проверьте ссылку ниже для получения дополнительной информации developer.apple.com/library/ios/documentation/UserExperience/…
Чамат Дживан,
круто, но как сделать изображение таким маленьким без размытия?
niX
2
С тех пор был обновлен до 23x23 (для квадратов) или 25x25 (для круглых изображений) ( developer.apple.com/ios/human-interface-guidelines/… )
Сеоп Юн
Сеоп, вы можете просто обновить мой ответ, чтобы он отражал последнюю информацию. Но заметил, что я сказал «около 25», поэтому я считаю, что 23 находятся в пределах этого диапазона.
rsc
В основном я использую квадратные глифы, такие как значок дома, рад, что @SeopYoon указал на это. Я буду использовать 23x23 для размера значка панели вкладок.
Cons Bulaquena
44

Согласно последним рекомендациям Apple Human Interface Guidelines:

В книжной ориентации значки панели вкладок отображаются над заголовками вкладок. В альбомной ориентации значки и заголовки отображаются рядом. В зависимости от устройства и ориентации система отображает обычную или компактную панель вкладок. Ваше приложение должно включать пользовательские значки панели вкладок для обоих размеров.

введите описание изображения здесь

введите описание изображения здесь

Я предлагаю вам использовать приведенную выше ссылку, чтобы понять полную концепцию. Поскольку яблоко обновляет свой документ через регулярные промежутки времени

Михир Оза
источник
2
За это следует проголосовать больше, поскольку это их новое руководство.
Seop Yoon
Инструкции по установке другого значка для обычной или компактной панели вкладок см. В этом ответе: stackoverflow.com/questions/49492229/tab-bar-icon-size/…
Мариан Черны
2

Согласно моей практике, я использую размер 40 x 40 для стандартного значка элемента панели вкладок iPad, 80 X 80 для Retina.

Из справки Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Если вы хотите создать значок панели, который выглядит так, как будто он связан с семейством значков iOS 7, используйте очень тонкий штрих, чтобы нарисовать его. В частности, двухпиксельный штрих (высокое разрешение) хорошо подходит для детализированных значков, а трехпиксельный штрих - для менее подробных значков.

Независимо от визуального стиля значка создайте значок панели инструментов или панели навигации следующих размеров:

Около 44 x 44 пикселя Около 22 x 22 пикселя (стандартное разрешение) Независимо от визуального стиля значка, создайте значок панели вкладок следующих размеров:

Около 50 x 50 пикселей (максимум 96 x 64 пикселя) Около 25 x 25 пикселей (максимум 48 x 32 пикселя) для стандартного разрешения

Firelyu
источник
-3

Пожалуйста, поднимите палец вверх, прежде чем использовать коды !!! Создайте изображение, которое полностью покрывает весь элемент панели вкладок для каждого элемента. Это необходимо для использования созданного вами изображения в качестве кнопки элемента панели вкладок. Убедитесь, что соотношение высоты и ширины одинаково для каждого элемента панели вкладок. Затем:

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
Джеймс
источник