TabBar 이미지의 크기는 얼마입니까?

크기가 100 인 tabBar에 대한 아이콘이 있습니다.

2013 년 Apple의 Human Interface Guidelines에서 확인한 결과 이미지 크기는 30x30/ 이어야합니다 60x60.

하지만 탭바 컨트롤러의 높이가 50이므로 이미지 크기를 50x50.

이제 프로젝트를 실행하면 아래의 추악한 디자인이 보입니다.

디자인이 완벽 할 수 있도록 어떤 크기의 이미지를 사용해야하는지 아십니까?

참고 : 텍스트도 작성하지 않습니다 (예 : 홈, 검색 등). 탭 버튼의 텍스트는 이미지 자체에 있습니다.

30x30은 포인트로 중간 어딘가가 아니라 30px @ 1x, 60px @ 2x를 의미합니다. 또한 탭의 제목을 이미지에 삽입하는 것은 좋은 생각이 아닙니다. 액세스 가능성과 현지화 결과가 상당히 나빠질 것입니다.

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)

최신 Apple Human Interface Guidelines 에 따르면 :

세로 방향에서는 탭 표시 줄 아이콘이 탭 제목 위에 나타납니다. 가로 방향에서는 아이콘과 제목이 나란히 표시됩니다. 장치 및 방향에 따라 시스템은 일반 또는 소형 탭 모음을 표시합니다. 앱에는 두 크기에 대한 사용자 지정 탭 표시 줄 아이콘이 포함되어야합니다.

전체 개념을 이해하려면 위의 링크를 사용하는 것이 좋습니다. 사과는 정기적으로 문서를 업데이트하기 때문에

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

따라서 50x50 크기가 좋은 선택입니다.

내 연습에 따르면 표준 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