사용 가능한 모든 iPhone 해상도에서 이미지 스케일을 처리하는 방법은 무엇입니까?
예를 들어 iPhone 세로 앱의 모든 해상도에서 화면의 전체 너비와 절반 높이를 커버하려면 이미지에 background.png, background@2x.pn g 및 background@3x.pn g 중 어떤 크기를 사용하는 것이 가장 좋을까요?
이것이 현재 우리가 가지고 있는 것입니다.
Device Points Log. Res. Sc. Real Res. PPI Ratio Size
iPhone 12 Pro Max, 13 Pro Max 926x428 2778x1284 3x 2778x1284 458 19.5:9 6.7"
iPhone 12, 12 Pro, 13, 13 Pro 844x390 2532x1170 3x 2532x1170 460 19.5:9 6.1"
iPhone 12 mini, 13 mini 812x375 2436x1125 3x 2340x1080 476 19.5:9 5.4"
iPhone XS Max, 11 Pro Max 896x414 2688x1242 3x 2688x1242 458 19.5:9 6.5"
iPhone XR, 11 896x414 1792x828 2x 1792x828 326 19.5:9 6.1"
iPhone X, XS, 11 Pro 812x375 2436x1125 3x 2436x1125 458 19.5:9 5.8"
iPhone 6+, 6S+, 7+, 8+ 736x414 2208x1242 3x 1920x1080 401 16:9 5.5"
iPhone 6, 6S, 7, 8, SE2 667x375 1334x750 2x 1334x750 326 16:9 4.7"
iPhone 5, 5S, 5C, SE1 568x320 1136x640 2x 1136x640 326 16:9 4.0"
iPhone 4, 4S 480x320 960x640 2x 960x640 326 3:2 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3:2 3.5"
어떤 사람들은 아이폰 6 플러스의 엣지 투 엣지 이미지(화면 왼쪽에서 오른쪽 끝에 있는 배너와 같은)를 위해 폭 1242의 back@3x.pn g와 아이폰 6의 백@2x를 준비할 것이라고 말합니다.iPhone6 화면 크기와 일치하는 너비 750의 png 그러나 1242/3 = 414 및 750/2 = 375이므로 @2x 및 @3x로 이름 짓는 것은 의미가 없기 때문에 이것은 좋은 생각이 아니라고 생각합니다.그런 다음 back.png - 375 또는 414의 너비를 가져야 합니까?
그래픽 이름은 @2x 및 @3x 접미사를 사용하므로 예를 들어 image@3x.pn g의 해상도가 30x30인 경우 논리적으로 생각하면 image@2x.pn g의 해상도와 이미지가 20x20이어야 합니다.png는 10x10이어야 합니다.즉, 각 화면에 대해 선명한 전체 너비 이미지를 만들려면 너비가 4143=1242인치인 back@3x.pn g, 너비가 4142=828인치인 back@2x.pn g, 너비가 414인치인 back.png을 만들어야 합니다.그러나 이는 아이폰 6 Plus를 제외한 모든 아이폰에서 가로 맞춤 콘텐츠 모드와 같이 사용할 UI 이미지를 설정해야 한다는 것을 의미하며, 이는 다시 완벽한 솔루션이 아니며 오래된 장치에서 많은 호출을 사용하면 애플리케이션 속도가 느려질 수 있습니다.
그렇다면 이 문제를 해결하기 위한 가장 좋은 해결책은 무엇이라고 생각하십니까?
각 이미지가 사용되지 않을 경우 모든 스케일의 이미지를 가질 필요는 없습니다.필요한 크기만 만들고 너비에 따라 이름을 지정합니다.세로 전체 장치 너비 이미지의 경우 1x 및 2x에서 320px 너비, 2x에서 375px 너비, 3x에서 414px 너비가 필요합니다.
4" 장치는 시작 이미지의 이름을 지정하기 위해 "-568h" 접미사를 사용했으므로, 저는 비슷한 이름 지정 체계를 추천합니다.
- ImageName-320w(@1x & @2x)
- 이미지명-375w(@2x)
- 이미지명-414w(@3x)
그런 다음 런타임에 필요한 이미지를 파악합니다.
NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];
나중에 다른 폭이 추가되면 이것은 깨질 수 있지만, 지금까지 애플은 항상 새로운 디스플레이를 지원하기 위해 앱을 다시 빌드해야 했기 때문에 그들이 계속 그럴 것이라고 가정하는 것이 어느 정도 안전하다고 생각합니다.
저는 개인적으로 다음을 수행할 것입니다.
4sImageName@2x이폰아4/s
5s【-568h@2x】5/5s
@2x아6
이미명지-736h@3x플6러스이폰아플
아이폰5s와 아이폰4s에서 폭은 동일한 값을 공유하는 반면, 모든 기기 간의 차이를 보여준다는 논리입니다.
편집:
이것은 전체 화면을 촬영하는 배경 이미지와 같은 장치 종속 리소스에 사용하는 명명 규칙일 뿐입니다. 대부분의 경우 원하는 것은 다음과 같습니다.
6이미지명@2x아이폰4/4s/5/5s/6
모드이미지Name@3x아이폰6Plus/Zoom 드
@2x 및 @3x 토론의 경우에는 이에 대해 별로 신경 쓰지 않아도 됩니다.화면의 포인트 크기에 주의하고 포인트 크기가 2배인 @2x 자산과 포인트 크기가 3배인 @3x 자산이 있는지 확인합니다.장치가 자동으로 올바른 것을 선택합니다.하지만 당신의 게시물을 보니 당신은 이미 이것을 알고 있는 것 같습니다.
가장자리 대 가장자리 이미지의 경우 안타깝게도 모든 화면 해상도에 맞게 만들어야 합니다.초상화 아이폰의 경우 320점, 375점, 414점이 될 것이고, 414점은 @3x가 될 것입니다.인터페이스 빌더에서 슬라이싱을 설정하여 이미지를 확장할 수 있도록 하는 것이 더 나은 솔루션일 수 있습니다(이미지 카탈로그를 사용하는 경우).그러나 이미지에 따라 이미지에 반복 가능한 부분이 있는지 또는 확장 가능한 부분이 있는지 여부에 따라 선택사항이 될 수도 있고 아닐 수도 있습니다.이렇게 설정된 확장 가능한 이미지는 성능에 거의 영향을 주지 않습니다.
@2와 @3는 실제 이미지 스케일링이 아니라 화면에서 실제 픽셀이 하나의 가상 픽셀을 나타내는 정도만 나타냅니다. 안드로이드 월드에서 온 hdpi/xhdpi/xxhdpi/bla의 일종입니다.일부 장치 화면에 사용해야 하는 이미지만 시스템에 표시됩니다.
따라서 전체 화면 이미지를 사용해야 할 경우 실제 화면 크기에 따라 준비합니다.
그래픽에 따라 크기가 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
엣지 투 엣지(edge to edge) 또는 전체 화면 이미지에 대한 가장 좋은 해결책은 픽셀 단위의 실제 화면 크기에 관심을 갖는 것이며 런타임에 장치 모델을 확인하고 적절한 이미지를 선택해야 합니다.
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)
언급URL : https://stackoverflow.com/questions/25969533/how-to-handle-image-scale-on-all-the-available-iphone-resolutions
'programing' 카테고리의 다른 글
| CSS를 사용하여 HTML 앵커 태그를 클릭/링크할 수 없도록 만드는 것이 가능합니까? (0) | 2023.08.20 |
|---|---|
| 행 선택 위치IndexPath가 잘못된 IndexPath를 반환함 (0) | 2023.08.20 |
| 정수 필드를 텍스트로 바꿀 대소문자가 있는 MySQL SELECT (0) | 2023.08.20 |
| jsPDF 라이브러리를 올바르게 사용하는 방법 (0) | 2023.08.20 |
| Add-PsSnapIn과 Import-Module의 차이점은 무엇입니까? (0) | 2023.08.20 |