iPhone 6/7 사용자 정의 전폭 이미지의 크기를 지정하는 방법은 무엇입니까?
번들 이미지가 iPhone 앱에서 사용 가능한 모든 화면 너비 (예 : 배너)를 차지하도록하고 싶습니다. 내가 만들 것 my_banner.png
폭 320px
, my_banner@2x.png
너비 640px
및 my_banner@3x.png
대한 아이폰 6 플러스 폭 1242px
. 그러나 iPhone 6 의 해상도 는 750×1334
픽셀입니다. 여전히 너비 @2x
가있는 iPhone 4 및 5와 접미사를 공유합니다 640px
.
무엇 권장되는 방법 이나 좋은 방법 용으로 최적화 된 이미지 파일 지정 750px
의 폭 아이폰 6는 ? 그것은 할 수없는 것 같습니다 asset catalog
? 프로그래밍 방식으로 수행해야합니까? iPhone 6에 사용할 수있는 다른 접미사가 있습니까?
( http://www.iphoneresolution.com 에서 추출한 이미지 )
이러한 답변 중 많은 부분이 올바른 미디어 파일을로드하는 데 관심이 있다고 생각하는 imageView를 제한하는 방법을 해결하려는 것 같습니다. 나는 다음과 같은 미래의 확장 가능한 솔루션을 생각 해낼 것입니다.
"UIImage + DeviceSpecificMedia.h"-(UIImage의 범주)
상호 작용:
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSInteger, thisDeviceClass) {
thisDeviceClass_iPhone,
thisDeviceClass_iPhoneRetina,
thisDeviceClass_iPhone5,
thisDeviceClass_iPhone6,
thisDeviceClass_iPhone6plus,
// we can add new devices when we become aware of them
thisDeviceClass_iPad,
thisDeviceClass_iPadRetina,
thisDeviceClass_unknown
};
thisDeviceClass currentDeviceClass();
@interface UIImage (DeviceSpecificMedia)
+ (instancetype )imageForDeviceWithName:(NSString *)fileName;
@end
이행:
#import "UIImage+DeviceSpecificMedia.h"
thisDeviceClass currentDeviceClass() {
CGFloat greaterPixelDimension = (CGFloat) fmaxf(((float)[[UIScreen mainScreen]bounds].size.height),
((float)[[UIScreen mainScreen]bounds].size.width));
switch ((NSInteger)greaterPixelDimension) {
case 480:
return (( [[UIScreen mainScreen]scale] > 1.0) ? thisDeviceClass_iPhoneRetina : thisDeviceClass_iPhone );
break;
case 568:
return thisDeviceClass_iPhone5;
break;
case 667:
return thisDeviceClass_iPhone6;
break;
case 736:
return thisDeviceClass_iPhone6plus;
break;
case 1024:
return (( [[UIScreen mainScreen]scale] > 1.0) ? thisDeviceClass_iPadRetina : thisDeviceClass_iPad );
break;
default:
return thisDeviceClass_unknown;
break;
}
}
@implementation UIImage (deviceSpecificMedia)
+ (NSString *)magicSuffixForDevice
{
switch (currentDeviceClass()) {
case thisDeviceClass_iPhone:
return @"";
break;
case thisDeviceClass_iPhoneRetina:
return @"@2x";
break;
case thisDeviceClass_iPhone5:
return @"-568h@2x";
break;
case thisDeviceClass_iPhone6:
return @"-667h@2x"; //or some other arbitrary string..
break;
case thisDeviceClass_iPhone6plus:
return @"-736h@3x";
break;
case thisDeviceClass_iPad:
return @"~ipad";
break;
case thisDeviceClass_iPadRetina:
return @"~ipad@2x";
break;
case thisDeviceClass_unknown:
default:
return @"";
break;
}
}
+ (instancetype )imageForDeviceWithName:(NSString *)fileName
{
UIImage *result = nil;
NSString *nameWithSuffix = [fileName stringByAppendingString:[UIImage magicSuffixForDevice]];
result = [UIImage imageNamed:nameWithSuffix];
if (!result) {
result = [UIImage imageNamed:fileName];
}
return result;
}
@end
실제로 작동하는 몇 가지 트릭을 사용하고 있습니다.
- 특정 장치에 대한 자산 카탈로그
- 에 대한 이미지를 지정
1x
,2x
320x640의 기초에 - 이미지를 지정
4 2x
하고3x
320x568의 기초에 (아이폰 5) - 특히 iPhone 6 용 새 이미지 세트를 만듭니다 (가장자리 간 바인딩 문제를 일으키는 유일한 장치이므로)
2x
전체 해상도 (750x1334)의 iPhone 6 용 이미지 만 제공
상수 선언
#define IS_IPHONE_6 [[UIScreen mainScreen]nativeBounds].size.width == 750.0 ? true : false
다음과 같이 사용하십시오.
UIImage *image = [UIImage imageNamed:@"Default_Image_Name"];
if(IS_IPHONE_^) {
image = [UIImage imageNamed:@"Iphone6_Image_Name"];
}
이것은 가장 아름다운 솔루션이 아닐 수도 있지만, 최소한 애플이 에지 간 바인딩을위한 더 나은 API를 제공하지 않는 한 작동합니다.
자동 레이아웃은 이러한 상황에 도움이됩니다 ..
이제 @Nicklas Berglund에게 장치가 회전하면 어떻게 하시겠습니까? 이제 가로 모드에 있다고 가정 해 보겠습니다. 이미지 자산에없는 가로 공간을 더 이상 채우는 방법은 무엇입니까?
생각을위한 음식 .. 자동 레이아웃은 어떤 방향이나 앱을 실행중인 장치에 관계없이 화면을 관리해야합니다 ..
아마도 애플은 미래에 이미지 자산에서 장치 방향을 목표로 시작해야할까요?
질문으로 돌아 갑시다. 해결책은 @ 2x 이미지를 750px 너비의 이미지로 교체 한 다음 자동 레이아웃이 작동하도록하는 것입니다. 오 그래, 이건 까다로운 부분 ..
제약 조건을 추가하기 만하면 4 인치 화면에 표시 될 때 수평으로 압축되지만 배율을 사용하여 이미지의 크기를 적절하게 조정할 수 있습니다. 방법은 다음과 같습니다.
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[imageFooterView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(imageFooterView)]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageFooterView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(imageFooterView)]];
float aspectRatio = imageFooterView.frame.size.height/imageFooterView.frame.size.width;
[imageFooterView addConstraint:[NSLayoutConstraint constraintWithItem:imageFooterView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:imageFooterView attribute:NSLayoutAttributeWidth multiplier:aspectRatio constant:0.0f]];
iPhone 6을 제외한 모든 장치에서 자산 카탈로그와 완벽하게 크기가 조정 된 배경 이미지가 있었기 때문에 방법을 찾을 수 없었습니다. 내 수정 사항 (SpriteKit에서 수행했습니다)?
if (bgNode.size.width != self.frame.size.width) {
bgNode.texture = [SKTexture textureWithImageNamed:@"i6bg.png"];
[bgNode runAction:[SKAction scaleXTo:self.frame.size.width/bgNode.size.width y:self.frame.size.width/bgNode.size.height duration:.1]];
}
bgNode는 장치가 가져 오는 배경 이미지입니다. iPhone 6의 경우 화면에 맞지 않으므로 배경 이미지 너비가 화면 너비와 동일하지 않습니다. 장치가 iPhone 6으로 인식되면 텍스처를 R4 텍스처 (레티 나의 경우 @ 2x)로 변경하고 올바른 크기로 조정합니다.
일반 @ 2x 이미지로 동일한 작업을 시도했지만 배율이 조정 된 이미지가 매우 나빠 보입니다 (너무 늘어나고 눈에 띄었습니다). R4 텍스처 크기를 조정하면 너비 / 높이의 비율이 조금 더 좋아 져서 변화가 눈에 띄지 않습니다. Apple이 iPhone 6 자산을 추가하기 전에 할 수있는 일에 대한 아이디어를 제공하기를 바랍니다.
이것이 사용자 정의 된 가장자리 간 이미지와 관련된 모든 문제를 해결하기를 바랍니다.
Xcode 6-범용 이미지 지원을위한 xcassets
자동 레이아웃을 사용하는 경우 모든 모서리에 대해 핀이 0으로 설정되어 있고 여백에 대한 제한이 선택 해제되어 있는지 확인하십시오.
시작 화면 이미지를 보려면이 링크를 방문 할 수도 있습니다.
http://www.paintcodeapp.com/news/iphone-6-screens-demystified
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone- 해상도
Apple 기술 지원팀에 동일한 질문을 제기했으며 전체 화면 이미지의 경우 자산 카탈로그에서 수행 할 수 없음을 확인했습니다. "현재 자산 카탈로그에서 장치 별 이미지를로드 할 방법이 없습니다. 앱이 장치를 지원해야하는 경우 특정 이미지는 화면 크기를 감지하고 적절한 이미지를 선택하기 위해 자체 코드를 구현해야합니다. 다음 링크를 사용하여 개선 요청을 제출할 수 있습니다.이 기능에 대한 사용 사례를 설명하십시오. "
Xcode 6을 통해 자산 카탈로그에서 생성 된 실행 이미지의 이름 지정 규칙을 확인했으며, 예를 들어 iPhone 6+ 용 가로 버전은 다음과 같습니다. LaunchImage-Landscape-736h @ 3x .png
이를 바탕으로 기본 파일 desert .png를 가정하면 레티 나 장치의 경우 다음과 같을 것이라고 가정합니다 .
- desert @ 2x : iPhone 4s (320 x 420)
- desert-568h @ 2x : iPhones 5, 5C 및 5S (320 x 568)
- desert-667h @ 2x : iPhone 6 (375 x 667)
- desert-736h @ 3x : iPhone 6+ (414 x 736)
- desert @ 2x ~ ipad : iPad (1024 x 768)
이 경우에 대한 기본 에셋 지원이 없으므로 문서화되지 않은 파일 이름으로 작업하면 나중에 쉽게 손상 될 수 있으므로 수동으로 수행하는 것이 좋습니다.
장치 치수를 측정하고 원하는 이미지를 호출하십시오. 즉 프로그래밍 방식으로 수행
그래서 당신의 appdelegate에서 글로벌
deviceHeight = self.window.frame.size.height;
deviceWidth = self.window.frame.size.width;
반복적으로 전화 할 수 있습니다. 그런 다음 확인하고 적절한 이미지를 호출하십시오.
if (deviceWidth == 640){
image = IPHONE4IMAGE;
deviceString = @"iPhone4";
}
else...
제 경우에는 기본 뷰 컨트롤러 하위 클래스가 시작 이미지와 동일한 배경 이미지를 갖도록 만드는 데 관심이있었습니다.
참고 : 이 방법은 특정 요구 사항이 아니면 작동하지 않습니다.
또한 iPhone 6 (750x1334)에 맞는 크기의 배경 이미지를 만들려고 할 때도 해당 이미지를 패턴 이미지로보기의 배경색으로로드하면 이미지가 바람직하지 않게 확대되었습니다.
이 답변 은 저에게 좋은 솔루션을 찾는 데 필요한 코드를 제공했습니다.
다음은 내 시작 이미지가 내 UIViewController
배경 이미지 와 일치하도록 (또는 그 반대로) 작업 한 코드입니다 .
- (void)viewDidLoad {
[super viewDidLoad];
UIImage *background = [UIImage imageNamed:[self splashImageName]];
UIColor *backgroundColor = [UIColor colorWithPatternImage:background];
self.view.backgroundColor = backgroundColor;
}
- (NSString *)splashImageName {
UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
CGSize viewSize = self.view.bounds.size;
NSString *viewOrientation = @"Portrait";
if (UIDeviceOrientationIsLandscape(orientation)) {
viewSize = CGSizeMake(viewSize.height, viewSize.width);
viewOrientation = @"Landscape";
}
NSArray *imagesDict = [[[NSBundle mainBundle] infoDictionary] valueForKey:@"UILaunchImages"];
for (NSDictionary *dict in imagesDict) {
CGSize imageSize = CGSizeFromString(dict[@"UILaunchImageSize"]);
if (CGSizeEqualToSize(imageSize, viewSize) && [viewOrientation isEqualToString:dict[@"UILaunchImageOrientation"]])
return dict[@"UILaunchImageName"];
}
return nil;
}
프로그래밍 방식으로 이미지 이름을 변경하려면이 클래스를 시도하십시오.
import UIKit
class AGTools: NSObject {
class func fullWidthImage(imageName: String!) -> String!{
let screenWidth = UIScreen.mainScreen().bounds.size.width
switch (screenWidth){
case 320:
// scale 2x or 1x
return (UIScreen.mainScreen().scale > 1.0) ? "\(imageName)@2x" : imageName
case 375:
return "\(imageName)-375w@2x"
case 414:
return "\(imageName)-414w@3x"
default:
return imageName
}
}
}
이 방법을 이렇게 사용하십시오.
_imgTest.image = UIImage(named: AGTools.fullWidthImage("imageName"))
우선 , 모든 화면을 덮도록 imageView를 구성해야합니다. 자동 레이아웃 은이 작업에 많은 도움이 될 것입니다. 아래 링크를 살펴보고 제약 조건을 고정하는 방법 (선행 공간, 후행 공간, 상단 공간 및 하단 Space) 스토리 보드 사용 :
http://www.thinkandbuild.it/learn-to-love-auto-layout/
두 번째 단계는 이미지 자산 (아래 이미지)에 장치 별 이미지 세트를 생성하여 장치에 따라 다른 이미지를 표시하는 것입니다.
이 인포 그래픽을 확인하세요 : http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
이전 iPhone, iPhone 6 및 iPhone 6 Plus의 차이점을 설명합니다. 포인트, 렌더링 된 픽셀 및 물리적 픽셀로 화면 크기를 비교할 수 있습니다.
그게 다야
문제가 있으면 의견을 보내주십시오.
'Development Tip' 카테고리의 다른 글
REST : 하나의 요청으로 여러 리소스 업데이트-표준입니까 아니면 피해야합니까? (0) | 2020.12.05 |
---|---|
Visual Studio에서 새 데이터 항목을 추가 할 때 EF 6.x DbContext 생성기 옵션의 목적 (0) | 2020.12.05 |
git은 파일이 수정되었음을 어떻게 감지합니까? (0) | 2020.12.05 |
Maven에서 종속성에 대한 저장소를 지정하는 방법 (0) | 2020.12.05 |
node_modules 위치 변경 (0) | 2020.12.05 |