예를 들어 모든 해상도에서 화면의 전체 너비와 절반 높이를 덮기 위해이 이미지를 사용하려는 경우 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의 해상도가 30×30이면 논리적으로 image@2x.png의 해상도는 20×20이고 image.png는 10×10이어야합니다. 즉, 각 화면에 대해 선명한 전체 너비 이미지를 원하면 너비가 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가 필요하지 않습니다.