Якого розміру повинні бути зображення TabBar?

У мене є піктограми для вкладки розміром 100.

Я перевірив в Інструкціях Apple щодо людського інтерфейсу 2013 року, і там написано, що розмір зображення повинен бути 30x30/ 60x60.

Але оскільки висота контролера панелі вкладок становить 50, я зберігав розмір зображення на 50x50.

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

Будь-яка ідея, які розміри зображень я повинен використовувати, щоб дизайн був ідеальним?

Примітка. Я також не пишу текст (наприклад, Головна, Пошук тощо). Текст кнопки вкладки є в самому зображенні.

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

Відповідно до Правил Apple Human Interface :

@ 1x: приблизно 25 x 25 (максимум: 48 x 32)

@ 2x: приблизно 50 x 50 (макс .: 96 x 64)

@ 3x: приблизно 75 x 75 (макс .: 144 x 96)

Відповідно до останніх Правил Apple щодо людського інтерфейсу:

У орієнтації на портрет піктограми рядка вкладки з’являються над заголовками вкладок. У ландшафтній орієнтації піктограми та назви з’являються поруч. Залежно від пристрою та орієнтації, система відображає звичайну або компактну панель вкладок. У вашому додатку повинні бути спеціальні значки панелі вкладок для обох розмірів.

Я пропоную вам скористатися вищенаведеним посиланням, щоб зрозуміти повну концепцію. Тому що оновлення яблука - це документ у регулярний інтервал

Довідка: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/ evidencehttps: //developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons /] .

Тож розмір 50х50 - хороший вибір.

Згідно зі своєю практикою, я використовую стандарт 40 піктограми панелі вкладки iPad розміром 40 x 40, для сітківки 80 X 80.

З посилання на Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Якщо ви хочете створити піктограму смуги, яка виглядає так, що вона пов’язана із сімейством значків iOS 7, використовуйте дуже тонкий штрих, щоб намалювати її. Зокрема, 2-піксельна обведення (висока роздільна здатність) добре працює для детальних значків, а обробка 3-пікселя добре працює для менш детальних піктограм.

Незалежно від візуального стилю піктограми, створіть піктограму панелі інструментів або навігаційної панелі таких розмірів:

Близько 44 x 44 пікселів Близько 22 x 22 пікселів (стандартна роздільна здатність) Незалежно від візуального стилю піктограми, створіть значок панелі вкладок таких розмірів:

Близько 50 x 50 пікселів (максимум 96 x 64 пікселів) Близько 25 x 25 пікселів (максимум 48 x 32 пікселів) для стандартної роздільної здатності

Перші пальці перед використанням кодів будь ласка !!! Створіть зображення, яке повністю охоплює весь елемент рядка вкладки для кожного елемента. Це потрібно, щоб використовувати створене вами зображення як кнопку елемента рядка на вкладці. Не забудьте, щоб співвідношення висоти / ширини було однаковим і для кожного елемента рядка вкладки. Тоді:

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