web-dev-qa-db-ja.com

利用可能なすべてのiPhone解像度で画像スケールを処理する方法

画像に使用するのに最適なサイズ：background.png、background @ 2x.png、および[email protected]この画像を使用してすべての解像度で画面の全幅と半高をカバーする場合iPhoneポートレートアプリ？

これが今あるものです：

Device          Points    Pixels     Scale  Physical Pixels   Physical PPI  Size
iPhone X        812x375   2436x1125  3x     2436x1125         458           5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401           5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326           4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326           4.0"
iPhone 4        480x320   960x640    2x     960x640           326           3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163           3.5"

iPhone resolutions

一部の人々は、iPhone 6 PlusではEdge to Edgeの画像（画面の左から右への下部のバナーのような）のために幅1242で[email protected]を準備し、iPhone 6では[email protected]でiPhone 6の画面サイズに合わせて幅750ですが、1242/3 = 414および750/2 = 375なので、@ 2xと@ 3xという名前は意味がないため、これは良い考えではないと思います。そして、back.png-375または414の幅はどれくらいですか？

グラフィック名は@ 2xと@ 3xのサフィックスを使用しているため、たとえば[email protected]の解像度が30x30である場合、論理的に考える[email protected]の解像度は20x20で、image.pngは10x10である必要があります。これは、各画面にシャープな全幅画像を作成する場合、おそらく幅414 * 3 = 1242pxの[email protected]、幅414 * 2 = 828pxの[email protected]、および幅414px。ただし、これは、iPhone 6 Plusを除くすべてのiPhoneで、たとえば縦横比コンテンツモードを使用するためにuiimagesをセットアップする必要があり、それらが呼び出されるため、これは適切なソリューションではなく、おそらくアプリケーションを本当に遅くすることを意味します古いデバイスでは多くのスケーリングを使用します。

この問題を解決するための最良の解決策は何だと思いますか？

iosiphonescreen-resolutioniphone-6iphone-6-plus
98
Leszek Szary

使用しない場合は、すべての縮尺で各画像を使用する必要はありません。必要なサイズのみを作成し、幅に応じて名前を付けます。ポートレートのフルデバイス幅の画像の場合、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は常に新しいディスプレイをサポートするためにアプリを再構築する必要がありました。

49
Filip Radelic

私は個人的にやっています：

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 /ズームモード

41
thewormsterror

@ 2xおよび@ 3xの議論では、実際にそれを気にする必要はありません。画面のポイントサイズに注意し、ポイントサイズの2倍の@ 2xアセットとポイントサイズの3倍の@ 3xアセットがあることを確認します。デバイスは自動的に正しいものを選択します。しかし、あなたの投稿を読んで、私はあなたがすでにこれを知っていると思います。

Edge-to-Edge画像の場合、残念ながらすべての画面解像度に合わせて作成する必要があります。そのため、ポートレートiPhoneの場合、320ポイント、375ポイント、414ポイントとなり、414ポイントは@ 3xでなければなりません。より良い解決策は、インターフェイスビルダーでスライシングを設定することで画像をスケーラブルにすることです（つまり、画像カタログを使用する場合）。しかし、画像に応じて、これはオプションである場合とそうでない場合があり、画像に繰り返し可能な部分があるか伸縮可能な部分があるかによって異なります。このように設定されたスケーラブルなイメージは、パフォーマンスにほとんど影響しません。

8
Emiel

このカテゴリを作成しました：

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

2
George

@ 2と@ 3は実際の画像のスケーリングではなく、画面上の1つの仮想ピクセル、Androidユニバースのhdpi/xhdpi/xxhdpi/blablaを表す実際のピクセルの大きさのみを表します。一部のデバイス画面に使用する画像をシステムに表示するだけです。

画面イメージ全体を使用する必要がある場合は、実際の画面サイズに応じて準備してください。

2
Denis Kozhukhov

場合によってはグラフィックに応じて、幅414ポイントx高さ100ポイント（最大幅と固定の高さ）のサイズのバナーなどの単一の画像を使用し、ピン留めされたUIImageViewに配置すると正常に機能する場合があります画面の左端と右端の高さは100に固定され、そのUIImageViewの縦横塗りモードが設定されます。その後、小さなデバイスでは、画像の左側と右側が切り取られ、画像の中央部分のみが表示されます。

2
Leszek Szary

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は不要です。

0
ناصر عبده عبده محمد

デバイスごとに異なるサイズの背景画像を使用する必要があると思います。背景に@ 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)
0
user2024885