सभी उपलब्ध iPhone प्रस्तावों पर छवि पैमाने को कैसे संभालें?


99

छवियों के लिए उपयोग करने के लिए कौन से आकार सबसे अच्छे होंगे: background.png, background@2x.png और background@3x.png यदि हम उदाहरण के लिए इस चित्र का उपयोग करना चाहते हैं, तो सभी प्रस्तावों पर स्क्रीन की पूरी चौड़ाई और आधी ऊंचाई को कवर करने के लिए iPhone पोर्ट्रेट ऐप?

यह अब हमारे पास है:

Device          Points    Pixels     Scale  Physical Pixels   PPI   Ratio   Size
iPhone XS Max   896x414   2688x1242  3x     2688x1242         458   19.5:9  6.5"
iPhone XR       896x414   1792x828   2x     1792x828          326   19.5:9  6.1"
iPhone X        812x375   2436x1125  3x     2436x1125         458   19.5:9  5.8"
iPhone 6 Plus   736x414   2208x1242  3x     1920x1080         401   16:9    5.5"
iPhone 6        667x375   1334x750   2x     1334x750          326   16:9    4.7"
iPhone 5        568x320   1136x640   2x     1136x640          326   16:9    4.0"
iPhone 4        480x320   960x640    2x     960x640           326   3:2     3.5"
iPhone 3GS      480x320   480x320    1x     480x320           163   3:2     3.5"

iPhone संकल्प

कुछ लोगों का कहना है कि iPhone 6 प्लस के लिए एज टू एज इमेज (स्क्रीन के बाएं से दाएं किनारे पर एक बैनर की तरह) वे back@3x.png को 1242 की चौड़ाई और iPhone 6 के लिए back@2x.png के साथ तैयार करेंगे। चौड़ाई 750 iPhone 6 स्क्रीन के आकार से मेल खाने के लिए लेकिन मुझे नहीं लगता कि यह एक अच्छा विचार है क्योंकि 1242/3 = 414 और 750/2 = 375 इसलिए उन्हें @ 2x और @ 3x के रूप में नाम देना समझ में नहीं आता है। और फिर क्या चौड़ाई वापस होनी चाहिए। 3ng - 375 या 414?

ग्राफ़िक्स नाम @ 2x और @ 3x प्रत्यय का उपयोग कर रहे हैं, उदाहरण के लिए अगर image@3x.png में 30x30 रिज़ॉल्यूशन है तो तार्किक रूप से सोचकर इमेज@2x.png में 20x20 रिज़ॉल्यूशन और छवि होनी चाहिए। png 10x10 होना चाहिए। इसका मतलब है कि अगर हम प्रत्येक स्क्रीन के लिए तीव्र पूर्ण चौड़ाई वाली छवि चाहते हैं, तो हमें संभवतः 414 3 = 1242px चौड़ाई के साथ back@3x.png बनाना चाहिए , चौड़ाई 414 2 = 828px के साथ back@2x.png और चौड़ाई 414px के साथ वापस .png । हालांकि इसका मतलब यह है कि iPhone 6 प्लस को छोड़कर हर iPhone पर आपको उदाहरण के लिए उपयुक्त सामग्री मोड में उपयोग करने के लिए अपने uiimages को सेटअप करने की आवश्यकता होगी और उन्हें नीचे दबा दिया जाएगा ताकि यह फिर से एक लंबित समाधान न हो और संभवतः एप्लिकेशन को धीमा कर देगा हम पुराने उपकरणों पर बहुत अधिक उपयोग कर रहे हैं।

तो आपको क्या लगता है कि इस समस्या को हल करने का सबसे अच्छा समाधान होगा?


1
iPhone 6 स्क्रीन डिमसिफाइड लिंक: bit.ly/1qHEBKk आईफोन रिज़ॉल्यूशन के लिए अंतिम गाइड लिंक: bit.ly/1paVXLd
King-Wizard

iPhone 6 Plus 414 x 736 अंक 1242 x 2208 पिक्सेल 3x स्केल 1080 x 1920 भौतिक पिक्सेल 401 भौतिक ppi 5.5 "iPhone 6 375 x 667 अंक 750 x 1334 पिक्सेल 2x स्केल 750 x 1334 भौतिक पिक्सेल 326 भौतिक ppi 4.7" iPhone 5 320 x 568 अंक 640 x 1136 पिक्सेल 2x स्केल 640 x 1136 भौतिक पिक्सेल 326 भौतिक ppi 4.0 "
किंग-विजार्ड

iPhone 4 320 x 480 अंक 640 x 960 पिक्सेल 2x स्केल 640 x 960 भौतिक पिक्सेल 326 भौतिक ppi 3.5 "iPhone 3GS 320 x 480 अंक 320 x 480 पिक्सेल 1x स्केल 320 x 480 भौतिक पिक्सेल 163 भौतिक ppi 3.5"
किंग-विजार्ड

जवाबों:


49

यदि इसका उपयोग नहीं किया जाएगा तो आपके पास सभी तराजू में प्रत्येक छवि नहीं है। केवल उन आकारों को बनाएं जिनकी आपको ज़रूरत है और उन्हें उनकी चौड़ाई के अनुसार नाम दें। चित्र पूर्ण-उपकरण-चौड़ाई चित्रों के लिए, आपको 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 को हमेशा नए डिस्प्ले का समर्थन करने के लिए ऐप को पुनर्निर्माण करने की आवश्यकता है, इसलिए मुझे लगता है कि यह मान लेना कुछ सुरक्षित है कि वे ऐसा करना जारी रखेंगे।


अच्छी तरह से एक कारण यह है कि ऐप्पल ने नए iphones.16 जीबी संस्करण के 32 जीबी संस्करण को परीक्षण उपकरणों के रूप में पेश नहीं किया है और उपयोग के लिए 64। ग्राफिक्स के कारण नाटकीय आकार में नाटकीय रूप से वृद्धि होगी।
Ilker Baltaci

1
@IlkerBaltaci मैं समझ सकता हूं कि अगर वे केवल डेवलपर्स को 16 जीबी संस्करण खरीदने देते हैं, लेकिन इस तरह से कई लोग होंगे जो डिस्क स्थान की कमी के कारण अपने ओएस को अपग्रेड करने में सक्षम नहीं होंगे।
फिलिप रेडेलिक

32 जीबी के साथ भी यह सच है कि मुझे एक सप्ताह तक सफाई करने और IOS 8 के लिए 5 जीबी स्थान बनाने के लिए इंतजार करना पड़ा।
Ilker Baltaci

2
IB में इनका उपयोग कैसे करें?
Khawar

@FilipRadelic iPhone5 के बारे में क्या? चौड़ाई 640 है, लेकिन ऊँचाई आईफ़ोन 4 के लिए इस्तेमाल की जाने वाली ऊंचाई से भिन्न है
MeV

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 पर समान मूल्य साझा करती है

संपादित करें:

यह सिर्फ नामकरण सम्मेलन है जो मैं उन उपकरणों के लिए उपयोग कर रहा हूं जो डिवाइस पर निर्भर हैं, जैसे कि एक पृष्ठभूमि छवि जो पूरी स्क्रीन ले रही है, अधिकांश समय आप चाहते हैं:

ImageName @ 2x iPhone 4 / 4s / 5 / 5s / 6
ImageName @ 3x iPhone 6Plus / ज़ूम मोड


1
IPhone 6 प्लस में "ज़ूम मोड" के बारे में क्या? क्या हमें एक ImageName-667h @ 3x भी उपलब्ध कराने की आवश्यकता नहीं है?
फ्रांस्वा वेरी

@thewormsterror मुझे लगता है कि आपकी छवि के अंतिम नामकरण सम्मेलन का नाम वर्डम है
हेड्स

@thewormsterror महान जवाब, आप यह भी जोड़ सकते हैं कि कैसे आईपैड छवियों का नाम होना चाहिए।
लुकास

यदि एक एपीआई से आने वाली छवि 1024 x 768 है, तो क्या इसका मतलब अधिकतम आकार है जिसका मैं उपयोग कर सकता हूं यह 256 @ 3x है?
मिरको

8

@ 2x और @ 3x चर्चा के लिए, आपको वास्तव में इस बात की परवाह नहीं करनी चाहिए। स्क्रीन के बिंदु आकार के बारे में ध्यान रखें, और सुनिश्चित करें कि पिक्सेल बिंदु में दो बार बिंदु आकार के साथ @ 2x परिसंपत्तियाँ हैं और पिक्सेल में बिंदु आकार के साथ 3x संपत्ति हैं। डिवाइस स्वचालित रूप से सही उठाएगा। लेकिन आपके पोस्ट को पढ़कर मुझे लगता है कि आप यह पहले से ही जानते हैं।

एज-टू-एज छवियों के लिए, फिर दुर्भाग्य से आपको इसे सभी स्क्रीन रिज़ॉल्यूशन के लिए बनाना होगा। तो, एक चित्र iPhone के लिए, यह 320 अंक, 375 अंक और 414 अंक होगा, जहां 414 अंक एक को @ 3x होना होगा। इंटरफ़ेस बिल्डर में स्लाइसिंग स्थापित करके (यदि आप छवि कैटलॉग का उपयोग करते हैं, तो) आपकी छवियों को मापनीय बनाने के लिए एक बेहतर समाधान हो सकता है। लेकिन, छवि के आधार पर यह एक विकल्प हो सकता है या नहीं भी हो सकता है, यह इस बात पर निर्भर करता है कि छवि में दोहराव या खिंचाव का हिस्सा है या नहीं। स्केलेबल इमेज को इस तरह सेट करने पर बहुत कम प्रदर्शन प्रभाव पड़ता है।


1
मुझे एक uicollectionviewcell (जाहिर है एक uicollectionview फिटिंग किसी भी स्क्रीन के अंदर) के अंदर एक छवि के साथ स्क्रीन की चौड़ाई फिट करने की आवश्यकता है। IPhone 6 प्लस के लिए मैं 3x a (414x3 = 1242 px) के लिए डालने का संकल्प करता हूं, 2x को मुझे किस आकार का उपयोग करना है? इसे iphone4s / 5 / 5s और 6 स्क्रीन भी फिट करना होगा ...
jerrygdm

1
मेरे पास 222px x 260px आकार का एक आइकन है, जो iPhone5 / 5s स्क्रीन पर पूरी तरह फिट दिखता है। अब ऐप को iPhone6 ​​और 6plus स्क्रीन के अनुकूल बनाते समय 1) उस आइकन का आकार क्या होना चाहिए? तीन बार नियम के अनुसार, यह 333px x 390px होना चाहिए? 2) क्या मुझे xib में छवि के अनुरूप किसी भी ऑटो को लागू करने की आवश्यकता है?
Ans

@ jerrygdm, मेरा भी तुम्हारा जैसा ही हाल है। आपने दिन के अंत में क्या किया? क्या आप मेरे साथ कृपया साझा कर सकते हैं?
तुलून

@ एन्स, क्या आपने iphone6 ​​और iphone6Plus के लिए 3x आइकन का उपयोग किया है।
JiteshW

@ जितेश मैं एक ही सवाल पूछ रहा हूं ... मुझे x3x आइकन किस आकार में बनाना चाहिए? मैं जोड़ना चाहता हूं लेकिन इसका आकार क्या होना चाहिए ... यह मेरा सवाल था
Ans

2

@ 2 और @ 3 वास्तविक छवि स्केलिंग नहीं है, लेकिन केवल यह दर्शाता है कि स्क्रीन पर एक वर्चुअल पिक्सेल कितना वास्तविक पिक्सेल का प्रतिनिधित्व करता है, किसी प्रकार का एचडीपीआई / xhdpi / xxhdpi / blabla Android ब्रह्मांड से। यह केवल सिस्टम को दिखाता है कि कुछ डिवाइस स्क्रीन के लिए किस छवि का उपयोग किया जाना चाहिए।

इसलिए यदि आपको संपूर्ण स्क्रीन छवि का उपयोग करने की आवश्यकता है - तो इसे वास्तविक स्क्रीन आकार के भरोसेमंद रूप से तैयार करें।


2

कुछ मामलों में ग्राफिक्स के आधार पर यह ठीक काम कर सकता है, जब हम उदाहरण के लिए केवल एक ही चित्र का उपयोग करते हैं जिसका आकार 414 अंक चौड़ाई x 100 अंक ऊँचाई (सबसे बड़ी संभव चौड़ाई और कुछ निश्चित ऊँचाई) के साथ एक बैनर है और इसे UIImageView में डाला जाता है स्क्रीन के बाएं और दाएं किनारे पर, उस UIImageView के लिए ऊंचाई 100 और सेट पहलू भरण मोड निर्धारित किया गया है। फिर छवि के बाईं और दाईं ओर छोटे उपकरणों को काट दिया जाएगा और हम छवि का केवल केंद्र भाग देखेंगे।


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


0

मुझे लगता है कि एज टू एज या फुल स्क्रीन इमेज के लिए सबसे अच्छा समाधान है, पिक्सेल में वास्तविक स्क्रीन आकार (बिंदु में नहीं) के बारे में ध्यान रखना है, और आपको रनटाइम पर डिवाइस के मॉडल की जांच करनी चाहिए और उचित छवि चुननी चाहिए:

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) 
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.