Hình ảnh TabBar nên có kích thước bao nhiêu?

Tôi có các biểu tượng cho thanh tab có kích thước 100.

Tôi đã kiểm tra Nguyên tắc giao diện con người của Apple năm 2013 và nó cho biết kích thước hình ảnh phải là 30x30/ 60x60.

Nhưng vì chiều cao của bộ điều khiển thanh tab là 50, tôi giữ nguyên kích thước của hình ảnh 50x50.

Bây giờ, khi tôi chạy dự án, tôi thấy thiết kế xấu xí bên dưới:

Bất kỳ ý tưởng nào về kích thước hình ảnh tôi nên sử dụng để thiết kế sẽ hoàn hảo?

Lưu ý: Tôi cũng không viết văn bản (ví dụ: Trang chủ, Tìm kiếm, v.v.). Văn bản của nút tab có trong chính hình ảnh.

30x30 là điểm, có nghĩa là 30px @ 1x, 60px @ 2x, không nằm ở giữa. Ngoài ra, không phải là một ý tưởng hay khi nhúng tiêu đề của tab vào hình ảnh — bạn sẽ có khả năng truy cập và kết quả bản địa hóa khá kém như vậy.

Theo Nguyên tắc giao diện con người của Apple :

@ 1x: khoảng 25 x 25 (tối đa: 48 x 32)

@ 2x: khoảng 50 x 50 (tối đa: 96 x 64)

@ 3x: khoảng 75 x 75 (tối đa: 144 x 96)

Theo Nguyên tắc giao diện con người mới nhất của Apple:

Ở hướng dọc, biểu tượng thanh tab xuất hiện phía trên tiêu đề tab. Theo hướng ngang, các biểu tượng và tiêu đề xuất hiện cạnh nhau. Tùy thuộc vào thiết bị và hướng, hệ thống hiển thị thanh tab thông thường hoặc nhỏ gọn. Ứng dụng của bạn nên bao gồm các biểu tượng thanh tab tùy chỉnh cho cả hai kích thước.

Tôi đề nghị bạn sử dụng liên kết trên để hiểu khái niệm đầy đủ. Bởi vì apple update nó là tài liệu thường xuyên

Tham khảo: https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/[https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons /] .

Vì vậy kích thước 50x50 là một lựa chọn tốt.

Theo thực tế của tôi, tôi sử dụng biểu tượng mục trên thanh tab tiêu chuẩn của iPad 40 x 40, 80 X 80 cho võng mạc.

Từ tài liệu tham khảo của Apple. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1

Nếu bạn muốn tạo một biểu tượng thanh có vẻ như liên quan đến họ biểu tượng iOS 7, hãy sử dụng một nét vẽ rất mảnh để vẽ nó. Cụ thể, nét vẽ 2 pixel (độ phân giải cao) hoạt động tốt đối với các biểu tượng chi tiết và nét vẽ 3 pixel hoạt động tốt đối với các biểu tượng ít chi tiết hơn.

Bất kể kiểu trực quan của biểu tượng là gì, hãy tạo biểu tượng thanh công cụ hoặc thanh điều hướng theo các kích thước sau:

Khoảng 44 x 44 pixel Khoảng 22 x 22 pixel (độ phân giải tiêu chuẩn) Bất kể kiểu trực quan của biểu tượng, hãy tạo biểu tượng thanh tab theo các kích thước sau:

Khoảng 50 x 50 pixel (tối đa 96 x 64 pixel) Khoảng 25 x 25 pixel (tối đa 48 x 32 pixel) cho độ phân giải tiêu chuẩn

Hãy đồng ý đầu tiên trước khi sử dụng mã !!! Tạo hình ảnh bao phủ toàn bộ mục trên thanh tab cho từng mục. Điều này là cần thiết để sử dụng hình ảnh bạn đã tạo làm nút mục trên thanh tab. Đảm bảo rằng tỷ lệ chiều cao / chiều rộng của mỗi mục trên thanh tab cũng giống nhau. Sau đó:

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