UITabBar và UITabBarItem với hình ảnh cụ thể @ 2x cho iPhone 5 và iPhone 6

Question

Tôi đang phát triển một ứng dụng mới và tôi đang gặp một số vấn đề để tùy chỉnh UITabBar và làm cho nó hoạt động (thiết kế) tuyệt vời trong iPhone 5 và 6 bằng cách sử dụng @ 2x hình ảnh.

Trong AppDelegate.m, trong phương thức didFinishLaunchingWithOptions, tôi đặt hình ảnh cho nền, sản phẩm được chọn:

//TABBAR 
UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController; 
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]; 
UITabBarItem *tabBarItem5 = [tabBar.items objectAtIndex:4]; 

[[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"tab_bg"]]; 
[[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"icone_home_selecionado"]]; 
[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]]; 

Và sau đó, trong cùng một phương pháp, đối với mỗi mục I thiết lập các hình ảnh và hình chữ nhật:

tabBarItem1.title = nil; 
tabBarItem1.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0); 
[tabBarItem1 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]; 

tabBarItem2.title = nil; 
tabBarItem2.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0); 
[tabBarItem2 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]; 

tabBarItem3.title = nil; 
tabBarItem3.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0); 
[tabBarItem3 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]; 

tabBarItem4.title = nil; 
tabBarItem4.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0); 
[tabBarItem4 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]; 

tabBarItem5.title = nil; 
tabBarItem5.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0); 
[tabBarItem5 setImage:[[UIImage imageNamed:@"icone_home_teste"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]; 

vấn đề của tôi là liên quan đến iPhone 5 và 6 chiều rộng bằng cách sử dụng cùng một hình ảnh @ 2x, như iPhone 5 có 640px (320pts) và iPhone 6 có 750px (375pts), vì vậy tôi quyết định để tạo ra các selectedIndicatorImage gọi là “ icone_home_selecionado@2x.png ”với chiều rộng = 150px

Bởi vì tôi có 5 UITabBarItem, vì vậy 750/5 = 150px (mỗi mục)

ảnh icone_home_selecionado@2x.png (150px x x 96px):

Nó hoạt động thực sự tuyệt vời khi chạy trên iPhone 6 như bạn có thể thấy:

Nhưng khi thử nghiệm trên iPhone 5, khi mục được chọn, khu vực UITabBarItem được mở rộng cho cùng kích thước 150px (như chiều rộng hình ảnh) ead giảm xuống còn 128px (giả sử kích thước này vừa với iPhone 5) như bạn có thể thấy:

(lưu ý sự khác biệt về chiều rộng từ mục đầu tiên đến mục thứ hai chẳng hạn, nhưng nó xảy ra với tất cả có vẻ như hình ảnh được chọn chồng lên UITabBarItem)

Hình ảnh @ 2x của tôi có 150px, nhưng vì tôi phải sử dụng @ 2x hình ảnh cho iPhone 5 và 6, làm cách nào tôi có thể xử lý trường hợp này để vừa với hình ảnh trong UITabBarItem? Dường như nó sẽ chỉ hoạt động nếu tôi có một hình ảnh 150px (cho 6) và một hình ảnh khác 128px (cho 5)

Có giải pháp nào sử dụng cùng một hình ảnh @ 2x hay không cần mã để xác định kích thước màn hình đó sau đó chọn hình ảnh nào?

Answer 1

Cùng một vấn đề với:

UITabBar.appearance().backgroundImage = UIImage(named: "bg_bottom_menu") 

Do hình ảnh được giải quyết trong vòng 4 inch hiển thị nó không hoạt động đúng trong iPhone 6.

Tôi đang sử dụng mã sau để khắc phục:

if Utilities.isIphone5() { 
    UITabBar.appearance().backgroundImage = UIImage(named: "bg_bottom_menu_4_inches") 
} else { 
    UITabBar.appearance().backgroundImage = UIImage(named: "bg_bottom_menu") 
} 

Trong utilties:

class func isIphone5() -> Bool { 
    return isIphone() && UIScreen.mainScreen().bounds.size.height == 568.0 
} 

EDIT:

Mã trước hoạt động nhưng giải pháp tốt nhất là theo sau.

Đi vào Images.xcssets -> Hình ảnh của bạn -> Thanh tra thuộc tính -> Chọn thiết bị cụ thể trong phần Thiết bị -> chọn Retina 4 inch và kéo và thả hình ảnh 4 inch.