99

画像に使用するのに最適なサイズ: background.png、background@2x.png、および background@3x.png (たとえば、この画像を使用して、すべての解像度で画面の全幅と半分の高さをカバーする場合) iPhoneの似顔絵アプリ？

これは私たちが今持っているものです：

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"

iPhoneの解像度

iPhone 6 Plus では幅 1242 の back@3x.png を用意し、幅 1242 で 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 の解像度が 30x30 の場合、論理的に考えると image@2x.png の解像度は 20x20、image.png の解像度は 10x10 になります。これは、各画面に鮮明な全幅画像を表示したい場合、幅 414 3=1242px の back@3x.png、幅 414 2=828px の back@2x.png、および幅 414px の back.png を作成する必要があることを意味します。 . ただし、これは、iPhone 6 Plus を除くすべての iPhone で、たとえばアスペクト フィット コンテンツ モードを使用するように uiimages をセットアップする必要があることを意味します。これらはスケール ダウンされるため、これも完璧なソリューションではなく、アプリケーションの速度が大幅に低下する可能性があります。古いデバイスでは多くのスケーリングを使用しています。

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

4

8 に答える 8

41

私は個人的にやります：

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 で width が同じ値を共有しているのに対し、すべてのデバイスの違いを示しているということです。

編集：

これは、画面全体を占める背景画像など、デバイスに依存するリソースに使用している命名規則にすぎません。ほとんどの場合、必要なのは次のとおりです。

ImageName@2x iPhone 4/4s/5/5s/6
ImageName@3x iPhone 6Plus/ズームモード

于 2014-09-29T08:46:47.837 に答える
8

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

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

于 2014-09-22T08:39:37.373 に答える
2

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

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

于 2015-02-26T15:27:06.473 に答える
2

@2 と @3 は実際の画像のスケーリングではなく、実際のピクセルが画面上の 1 つの仮想ピクセルを表す量を表すだけであり、Android ユニバースの hdpi/xhdpi/xxhdpi/blabla のようなものです。一部のデバイス画面にどの画像を使用する必要があるかをシステムに示すだけです。

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

于 2014-10-17T08:07:42.460 に答える
2

場合によっては、グラフィックによっては、幅 414 ポイント x 高さ 100 ポイント (可能な限り最大の幅と一定の高さ) のサイズのバナーなど、1 つの画像のみを使用して、固定されている UIImageView に配置すると、うまく機能する場合があります。画面の左端と右端は固定高さ 100 で、その UIImageView のアスペクト フィル モードを設定します。小さいデバイスでは、画像の左右がカットされ、画像の中央部分のみが表示されます。

于 2014-11-12T19:05:16.143 に答える
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)
于 2016-06-01T11:34:08.877 に答える