Programing

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

lottogame 2020. 8. 27. 08:07
반응형

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


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

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 /] .

여기에 이미지 설명 입력

So the 50x50 size is a good choice.


According to my practice, I use the 40 x 40 for standard iPad tab bar item icon, 80 X 80 for retina.

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

If you want to create a bar icon that looks like it's related to the iOS 7 icon family, use a very thin stroke to draw it. Specifically, a 2-pixel stroke (high resolution) works well for detailed icons and a 3-pixel stroke works well for less detailed icons.

Regardless of the icon’s visual style, create a toolbar or navigation bar icon in the following sizes:

About 44 x 44 pixels About 22 x 22 pixels (standard resolution) Regardless of the icon’s visual style, create a tab bar icon in the following sizes:

표준 해상도의 경우 약 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

참고 URL : https://stackoverflow.com/questions/18068597/what-size-should-tabbar-images-be

반응형