Development Tip

iPhone 6/7 사용자 정의 전폭 이미지의 크기를 지정하는 방법은 무엇입니까?

yourdevel 2020. 12. 5. 10:45
반응형

iPhone 6/7 사용자 정의 전폭 이미지의 크기를 지정하는 방법은 무엇입니까?


번들 이미지가 iPhone 앱에서 사용 가능한 모든 화면 너비 (예 : 배너)를 차지하도록하고 싶습니다. 내가 만들 것 my_banner.png320px, my_banner@2x.png너비 640pxmy_banner@3x.png대한 아이폰 6 플러스1242px. 그러나 iPhone 6 의 해상도 750×1334픽셀입니다. 여전히 너비 @2x가있는 iPhone 4 및 5와 접미사를 공유합니다 640px.

무엇 권장되는 방법 이나 좋은 방법 용으로 최적화 된 이미지 파일 지정 750px의 폭 아이폰 6는 ? 그것은 할 수없는 것 같습니다 asset catalog? 프로그래밍 방식으로 수행해야합니까? iPhone 6에 사용할 수있는 다른 접미사가 있습니까?

iPhone 4,5,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, 2x320x640의 기초에
  • 이미지를 지정 4 2x하고 3x320x568의 기초에 (아이폰 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의 차이점을 설명합니다. 포인트, 렌더링 된 픽셀 및 물리적 픽셀로 화면 크기를 비교할 수 있습니다.

그게 다야

여기에 이미지 설명 입력

여기에 이미지 설명 입력

문제가 있으면 의견을 보내주십시오.

참고 URL : https://stackoverflow.com/questions/25892207/how-to-specify-size-for-iphone-6-7-customised-edge-to-edge-image

반응형