Làm thế nào để xử lý tỷ lệ hình ảnh trên tất cả các độ phân giải có sẵn của iPhone?

Kích thước nào là tốt nhất để sử dụng cho hình ảnh: background.png, background@2x.png và background@3x.png nếu chúng ta muốn sử dụng hình ảnh này để bao phủ toàn bộ chiều rộng và nửa chiều cao của màn hình trên tất cả các độ phân giải cho ứng dụng chân dung iPhone?

Đây là những gì chúng ta có bây giờ:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

Một số người nói rằng đối với hình ảnh từ cạnh sang cạnh (như biểu ngữ ở dưới cùng từ cạnh trái sang phải của màn hình) cho iPhone 6 Plus, họ sẽ chuẩn bị back@3x.png với chiều rộng 1242 và cho iPhone 6 back@2x.png với chiều rộng 750 để phù hợp với kích thước màn hình iPhone 6 tuy nhiên tôi không nghĩ rằng đây là một ý tưởng hay vì 1242/3 = 414 và 750/2 = 375 nên việc đặt tên chúng là @ 2x và @ 3x là không hợp lý. Và sau đó chiều rộng nào nên có back.png - 375 hoặc 414?

Tên đồ họa đang sử dụng hậu tố @ 2x và @ 3x, vì vậy nếu ví dụ: image@3x.png có độ phân giải 30x30 thì theo suy nghĩ logic image@2x.png phải có độ phân giải 20x20 và image.png phải là 10x10. Điều này có nghĩa là nếu chúng ta muốn có hình ảnh toàn chiều rộng sắc nét cho mỗi màn hình thì có lẽ chúng ta nên tạo back@3x.png với chiều rộng 414 3 = 1242px, back@2x.png với chiều rộng 414 2 = 828px và back.png với chiều rộng 414px . Tuy nhiên, điều này có nghĩa là trên mọi iPhone, ngoại trừ iPhone 6 Plus, bạn sẽ cần phải thiết lập các uiimages của mình để sử dụng như chế độ nội dung phù hợp với khung hình và chúng sẽ bị thu hẹp lại vì vậy đây không phải là giải pháp lỗi và có thể sẽ thực sự làm chậm ứng dụng nếu chúng tôi sử dụng rất nhiều scalling trên các thiết bị cũ hơn.

Vậy bạn nghĩ đâu sẽ là giải pháp tốt nhất để giải quyết vấn đề này?

Bạn không cần phải có mỗi hình ảnh trong tất cả các tỷ lệ nếu nó không được sử dụng. Chỉ tạo các kích thước bạn cần và đặt tên theo chiều rộng của chúng. Đối với hình ảnh dọc theo chiều rộng toàn thiết bị, bạn cần rộng 320px ở 1x và 2x, rộng 375px ở 2x và 414px ở 3x.

4 "thiết bị được sử dụng hậu tố" -568h "để đặt tên cho hình ảnh ra mắt của chúng, vì vậy tôi khuyên bạn nên sử dụng sơ đồ đặt tên tương tự:

• ImageName-320w (@ 1x & @ 2x)
• ImageName-375w (@ 2x)
• ImageName-414w (@ 3x)

Sau đó, tìm ra hình ảnh bạn cần trong thời gian chạy:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

Điều này có thể bị phá vỡ nếu các chiều rộng khác được thêm vào trong tương lai, nhưng cho đến nay Apple luôn yêu cầu xây dựng lại ứng dụng để hỗ trợ màn hình mới, vì vậy tôi nghĩ rằng có phần an toàn khi cho rằng họ sẽ tiếp tục làm điều đó.

Cá nhân tôi sẽ làm:

ImageName @ 2x iPhone 4 / 4s
ImageName-568h @ 2x iPhone 5 / 5s
ImageName-667h @ 2x iPhone 6
ImageName-736h @ 3x iPhone 6Plus

Logic đằng sau điều này là nó cho thấy sự khác biệt giữa tất cả các thiết bị, trong khi chiều rộng có cùng giá trị trên iPhone 5s và iPhone 4s

Biên tập:

Đây chỉ là quy ước đặt tên mà tôi đang sử dụng cho các tài nguyên phụ thuộc vào thiết bị, chẳng hạn như hình nền chiếm toàn bộ màn hình, hầu hết tất cả những gì bạn muốn là:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / Chế độ thu phóng

Đối với cuộc thảo luận @ 2x và @ 3x, bạn không thực sự phải quan tâm đến điều đó. Quan tâm đến kích thước điểm của màn hình và đảm bảo rằng có nội dung @ 2x với kích thước điểm gấp đôi và nội dung @ 3x với kích thước điểm gấp ba lần tính bằng pixel. Thiết bị sẽ tự động chọn đúng. Nhưng đọc bài của bạn tôi đoán bạn đã biết điều này.

Đối với hình ảnh tràn cạnh, rất tiếc là bạn phải tạo nó cho tất cả các độ phân giải màn hình. Vì vậy, đối với một chiếc iPhone dọc, nó sẽ là 320 điểm, 375 điểm và 414 điểm, trong đó 414 điểm sẽ phải là @ 3x. Giải pháp tốt hơn có thể là làm cho hình ảnh của bạn có thể thay đổi tỷ lệ bằng cách thiết lập phần cắt trong trình tạo giao diện (nghĩa là nếu bạn sử dụng danh mục hình ảnh). Tuy nhiên, tùy thuộc vào hình ảnh, đây có thể là một tùy chọn hoặc không, tùy thuộc vào việc hình ảnh có một phần có thể lặp lại hoặc có thể kéo giãn. Hình ảnh có thể mở rộng được thiết lập như thế này có rất ít tác động đến hiệu suất.

@ 2 và @ 3 không phải là tỷ lệ hình ảnh thực, mà chỉ biểu thị số lượng pixel thực đại diện cho một pixel ảo trên màn hình, một số loại hdpi / xhdpi / xxhdpi / blabla từ vũ trụ android. nó chỉ hiển thị cho hệ thống hình ảnh nào nên được sử dụng cho một số màn hình thiết bị.

vì vậy nếu bạn cần sử dụng hình ảnh toàn màn hình - hãy chuẩn bị hình ảnh đó tùy thuộc vào kích thước màn hình thực.

Tùy thuộc vào đồ họa trong một số trường hợp, nó có thể hoạt động tốt khi chúng tôi chỉ sử dụng một hình ảnh duy nhất, chẳng hạn như biểu ngữ có kích thước chiều rộng 414 điểm x chiều cao 100 điểm (chiều rộng lớn nhất có thể và một số chiều cao cố định) và đặt nó vào UIImageView được ghim vào cạnh trái và phải của màn hình, có chiều cao cố định 100 và đặt chế độ điền vào khung hình cho UIImageView đó. Sau đó, trên các thiết bị nhỏ hơn, bên trái và bên phải của hình ảnh sẽ bị cắt và chúng ta sẽ chỉ thấy phần trung tâm của hình ảnh.

Tôi đã tạo danh mục cho cái này:

+ (UIImage *)sizedImageWithName:(NSString *)name {
    UIImage *image;
    if (IS_IPHONE_5) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-568h",name]];
        if (!image) {
            image = [UIImage imageNamed:name];
        }
    }
    else if (IS_IPHONE_6) {
        image = [UIImage imageNamed:[NSString stringWithFormat:@"%@-750w",name]];
    }
    else {
        image = [UIImage imageNamed:name];
    }
    return image;
}

bạn có thể lấy mã đầy đủ tại đây: https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

Tôi nghĩ giải pháp tốt nhất cho hình ảnh tràn cạnh hoặc toàn màn hình là quan tâm đến kích thước màn hình thực tính bằng pixel (không phải trong điểm), và bạn phải kiểm tra trong thời gian chạy mô hình của thiết bị và chọn hình ảnh thích hợp, tức là:

image-iphone4-4s.png (640x960/2) for 1/2 screen height, image-iphone5-5c-5s.png (640x1136/2) for 1/2 screen height, image-iphone6-6s.png (750x1334/2) for 1/2 screen height, image-iphone6plus-6splus.png (1242x2208/2) for 1/2 screen height,

không cần @? x trong tình huống này của người hỏi.

Tôi nghĩ chúng ta nên sử dụng kích thước hình nền khác nhau cho các thiết bị khác nhau. Chỉ cần sử dụng hình ảnh tỷ lệ @ 3x cho nền.

Bạn có thể phát hiện thiết bị với các dòng dưới đây.

#define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
#define IS_IPHONE (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
#define IS_RETINA ([[UIScreen mainScreen] scale] >= 2.0)

#define SCREEN_WIDTH ([[UIScreen mainScreen] bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen] bounds].size.height)
#define SCREEN_MAX_LENGTH (MAX(SCREEN_WIDTH, SCREEN_HEIGHT))
#define SCREEN_MIN_LENGTH (MIN(SCREEN_WIDTH, SCREEN_HEIGHT))

#define IS_IPHONE_4_OR_LESS (IS_IPHONE && SCREEN_MAX_LENGTH < 568.0)
#define IS_IPHONE_5 (IS_IPHONE && SCREEN_MAX_LENGTH == 568.0)
#define IS_IPHONE_6 (IS_IPHONE && SCREEN_MAX_LENGTH == 667.0)
#define IS_IPHONE_6P (IS_IPHONE && SCREEN_MAX_LENGTH == 736.0)