사용 가능한 모든 iPhone 해상도에서 이미지 스케일을 처리하는 방법은 무엇입니까?

예를 들어 모든 해상도에서 화면의 전체 너비와 절반 높이를 덮기 위해이 이미지를 사용하려는 경우 background.png, background@2x.png 및 background@3x.png 이미지에 가장 적합한 크기는 무엇입니까? iPhone 세로 앱?

이것이 우리가 지금 가지고있는 것입니다 :

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"

어떤 사람들은 iPhone 6 Plus의 경우 가장자리에서 가장자리까지의 이미지 (화면의 왼쪽에서 오른쪽 가장자리까지의 배너와 같은)의 경우 너비가 1242 인 back@3x.png를 준비하고 iPhone 6의 경우 back@2x.png를 너비 750을 iPhone 6 화면 크기와 일치 시키려고하지만 1242/3 = 414 및 750/2 = 375이므로 @ 2x 및 @ 3x로 이름을 지정하는 것은 의미가 없기 때문에 이것이 좋은 생각이라고 생각하지 않습니다. 그리고 back.png-375 또는 414의 너비는 얼마입니까?

그래픽 이름은 @ 2x 및 @ 3x 접미사를 사용하므로 예를 들어 image@3x.png의 해상도가 30x30이면 논리적으로 image@2x.png의 해상도는 20x20이고 image.png는 10x10이어야합니다. 즉, 각 화면에 대해 선명한 전체 너비 이미지를 원하면 너비가 414 3 = 1242px 인 back@3x.png, 너비가 414 2 = 828px 인 back@2x.png, 너비가 414px 인 back.png를 만들어야합니다. . 그러나 이것은 iPhone 6 Plus를 제외한 모든 iPhone에서 예를 들어 aspect fit 콘텐츠 모드를 사용하기 위해 uiimages를 설정해야하며 이러한 이미지가 호출 될 것이므로 이는 다시 perferct 솔루션이 아니며 아마도 실제로 응용 프로그램을 느리게 할 것입니다. 우리는 구형 장치에서 많은 호출을 사용합니다.

그렇다면이 문제를 해결하기위한 최선의 해결책은 무엇이라고 생각하십니까?

사용하지 않을 경우 각 이미지를 모든 크기로 가질 필요는 없습니다. 필요한 크기 만 만들고 너비에 따라 이름을 지정합니다. 세로 전체 기기 너비 이미지의 경우 1x 및 2x에서 320px, 2x에서 375px, 3x에서 414px가 필요합니다.

4 "장치는 시작 이미지의 이름을 지정하는 데"-568h "접미사를 사용 했으므로 비슷한 이름 지정 체계를 권장합니다.

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

그런 다음 런타임에 필요한 이미지를 파악합니다.

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

앞으로 다른 너비가 추가되면 깨질 수 있지만 지금까지 Apple은 항상 새로운 디스플레이를 지원하기 위해 앱을 다시 빌드해야했기 때문에 계속 그렇게 할 것이라고 가정하는 것이 다소 안전하다고 생각합니다.

나는 개인적으로 할 것이다 :

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

이것의 논리는 모든 장치 간의 차이를 보여주는 반면 너비는 iPhone 5s 및 iPhone 4s에서 동일한 값을 공유한다는 것입니다.

편집하다:

이것은 전체 화면을 차지하는 배경 이미지와 같이 장치에 따라 달라지는 리소스에 사용하는 명명 규칙입니다. 대부분의 경우 원하는 것은 다음과 같습니다.

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / 줌 모드

@ 2x 및 @ 3x 토론의 경우 실제로 신경 쓸 필요가 없습니다. 화면의 포인트 크기에 신경을 쓰고 포인트 크기가 두 배인 @ 2x 애셋과 픽셀 단위로 포인트 크기가 세 배인 @ 3x 애셋이 있는지 확인합니다. 장치가 자동으로 올바른 것을 선택합니다. 그러나 귀하의 게시물을 읽고 나는 이미 이것을 알고 있다고 생각합니다.

엣지 투 엣지 이미지의 경우 안타깝게도 모든 화면 해상도로 만들어야합니다. 따라서 세로 형 iPhone의 경우 320 점, 375 점 및 414 점이됩니다. 여기서 414 점은 @ 3x 여야합니다. 더 나은 솔루션은 인터페이스 빌더에서 슬라이싱을 설정하여 이미지를 확장 가능하게 만드는 것입니다 (이미지 카탈로그를 사용하는 경우). 그러나 이미지에 따라 이미지에 반복 가능한 부분이 있는지 늘릴 수있는 부분이 있는지 여부에 따라 옵션이 될 수도 있고 아닐 수도 있습니다. 이와 같이 설정된 확장 가능한 이미지는 성능에 거의 영향을 미치지 않습니다.

@ 2 및 @ 3은 실제 이미지 크기 조정이 아니라 실제 픽셀이 화면에 하나의 가상 픽셀을 나타내는 정도만을 나타냅니다. 일종의 hdpi / xhdpi / xxhdpi / blabla는 Android 유니버스에서 제공합니다. 일부 장치 화면에 사용해야하는 이미지 만 시스템에 표시됩니다.

따라서 전체 화면 이미지를 사용해야하는 경우 실제 화면 크기에 따라 준비하십시오.

경우에 따라 그래픽에 따라 크기가 414 포인트 너비 x 100 포인트 높이 (최대 너비 및 일부 고정 높이) 인 배너와 같은 단일 이미지 만 사용하고 고정 된 UIImageView에 넣을 때 제대로 작동 할 수 있습니다. 화면의 왼쪽과 오른쪽 가장자리는 높이가 100이고 해당 UIImageView에 대해 종횡비 채우기 모드를 설정합니다. 그런 다음 작은 장치에서는 이미지의 왼쪽과 오른쪽이 잘리고 이미지의 가운데 부분 만 표시됩니다.

이에 대한 카테고리를 만들었습니다.

+ (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;
}

여기에서 전체 코드를 가져올 수 있습니다 : https://gist.github.com/YGeorge/e0a7fbb479f572b64ba5

나는 엣지 투 엣지 또는 전체 화면 이미지에 대한 최선의 해결책은 픽셀 단위의 실제 화면 크기 (점 단위가 아님)를 고려하는 것이며 런타임시 장치 모델을 확인하고 적절한 이미지를 선택해야합니다.

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,

이 상황에서는 @? x가 필요하지 않습니다.

장치마다 다른 크기의 배경 이미지를 사용해야한다고 생각합니다. 배경에 @ 3x 배율 이미지를 사용하십시오.

아래 줄로 장치를 감지 할 수 있습니다.

#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)