সমস্ত উপলব্ধ আইফোন রেজোলিউশনে চিত্র স্কেল কীভাবে পরিচালনা করবেন?

Question 1

চিত্রগুলির জন্য কী আকারগুলি ব্যবহার করা ভাল তা হবে: ব্যাকগ্রাউন্ড.পিএনজি, ব্যাকগ্রাউন্ড@2x.png এবং ব্যাকগ্রাউন্ড@3x.png যদি আমরা এই চিত্রটি উদাহরণস্বরূপ সমস্ত রেজোলিউশনে স্ক্রিনের পূর্ণ প্রস্থ এবং অর্ধেক উচ্চতা কভার করতে চাই তবে আইফোন পোর্ট্রেট অ্যাপ?

আমাদের এখন এটি রয়েছে:

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"

আইফোন রেজোলিউশন

কিছু লোক বলেছেন যে প্রান্ত থেকে প্রান্তের চিত্রের জন্য (পর্দার নীচে বাম থেকে ডান প্রান্তের ব্যানারের মতো) আইফোন 6 প্লাসের জন্য তারা 1242 প্রস্থের সাথে back@3x.png প্রস্তুত করবে এবং আইফোন 6 back@2x.png সহ আইফোন 6 স্ক্রিনের আকারের সাথে মেলাতে প্রস্থ 750 তবে আমি মনে করি না যে এটি একটি ভাল ধারণা কারণ 1242/3 = 414 এবং 750/2 = 375 তাই তাদের @ 2x এবং @ 3x হিসাবে নামকরণ করার কোনও অর্থ নেই। এবং তারপরে কোন প্রস্থের back.png থাকা উচিত - 375 বা 414?

গ্রাফিক্সের নামগুলি @ 2x এবং @ 3x প্রত্যয় ব্যবহার করছে সুতরাং উদাহরণস্বরূপ যদি চিত্র@3x.png এর 30x30 রেজোলিউশন থাকে তবে যৌক্তিকভাবে ভাবনা image@2x.png এর 20x20 রেজোলিউশন এবং চিত্র.png 10x10 হওয়া উচিত। এর অর্থ হ'ল আমরা যদি প্রতিটি স্ক্রিনের জন্য তীব্র পূর্ণ প্রস্থের চিত্র পেতে চাই তবে আমাদের সম্ভবত 414 3 = 1242px প্রস্থ সহ back@3x.png তৈরি করা উচিত , প্রস্থের 414 2 = 828px এবং back.png প্রস্থ 414px সহ । তবে এর অর্থ হ'ল আইফোন Plus প্লাস বাদে প্রতিটি আইফোনে আপনাকে আপনার ইউআইমেজেসগুলি সেটআপ করতে হবে উদাহরণস্বরূপ বিষয়বস্তু মোডের জন্য এবং সেগুলি খালি করা হবে সুতরাং এটি আবার কোনও পারফেক্ট সমাধান নয় এবং সম্ভবত অ্যাপ্লিকেশনটি ধীর করে দিবে যদি আমরা পুরানো ডিভাইসগুলিতে প্রচুর স্কেলিং ব্যবহার করি।

তাহলে আপনি কী মনে করেন যে এই সমস্যাটি সমাধানের সর্বোত্তম সমাধান হতে পারে?

Question 2

আপনার যদি প্রতিটি ছবিতে কোনও স্কেল ব্যবহার না করে তবে তা ব্যবহার করতে হবে না। আপনার প্রয়োজনীয় আকারগুলিই তৈরি করুন এবং তাদের প্রস্থ অনুসারে তাদের নাম দিন। প্রতিকৃতি পূর্ণ ডিভাইস-প্রস্থ ইমেজগুলির জন্য আপনার 1x এবং 2x এ 320px প্রশস্ত, 2x এ 375 পিক্স প্রশস্ত এবং 3x এ 411 পিক্স প্রশস্ত করতে হবে।

4 "ডিভাইসগুলি তাদের প্রবর্তন চিত্রগুলির নামকরণের জন্য" -568h "প্রত্যয় ব্যবহার করেছে, সুতরাং আমি অনুরূপ একটি নামকরণ স্কিমের পরামর্শ দেব:

চিত্রনাম -320W (@ 1x & @ 2x)
চিত্রনাম-375৫ ওয়া (@ ২ এক্স)
চিত্রনাম -১১৪ ডাব্লু (@ 3x)

তারপরে রানটাইমে আপনার কী চিত্রের প্রয়োজন তা নির্ধারণ করুন:

NSNumber *screenWidth = @([UIScreen mainScreen].bounds.size.width);
NSString *imageName = [NSString stringWithFormat:@"name-%@w", screenWidth];
UIImage *image = [UIImage imageNamed:imageName];

ভবিষ্যতে অন্য প্রস্থগুলি যুক্ত করা থাকলে এটি ভেঙে যেতে পারে, তবে এখনও পর্যন্ত অ্যাপল নতুন অ্যাপ্লিকেশনগুলির জন্য নতুন অ্যাপ্লিকেশনটি পুনঃনির্মাণের প্রয়োজন বোধ করেছে তাই আমি অনুমান করি যে তারা এটি চালিয়ে যাবেন বলে ধরে নেওয়া কিছুটা নিরাপদ।

Question 3

আমি ব্যক্তিগতভাবে করবো:

ইমেজনাম @ 2x আইফোন
4/4 এস
ইমেজনাম -56h @ 2x আইফোন 5/5 এস চিত্রনাম -667h @ 2x আইফোন 6
ইমেজনাম -736h @ 3x আইফোন প্লাস

এর পিছনে যুক্তিটি হ'ল এটি সমস্ত ডিভাইসের মধ্যে পার্থক্য দেখায়, যখন প্রস্থটি আইফোন 5s এবং আইফোন 4 এস এ একই মান ভাগ করে দেয়

সম্পাদনা করুন:

এটি কেবলমাত্র নামকরণের কনভেনশন যা আমি সংস্থানগুলি ডিভাইস নির্ভর, যেমন একটি পটভূমি চিত্র পুরো পর্দা গ্রহণ করে, বেশিরভাগ সময় আপনি যা চান তা হ'ল:

চিত্রনাম @ 2x আইফোন 4 / 4s / 5 / 5s / 6
চিত্রনাম @ 3x আইফোন 6 প্লাস / জুম মোড

Question 4

@ 2x এবং @ 3x আলোচনার জন্য, আপনাকে সত্যই এগুলির যত্ন নিতে হবে না। স্ক্রিনের পয়েন্ট আকার সম্পর্কে যত্ন নিন এবং নিশ্চিত করুন যে পয়েন্টের আকারের দ্বিগুণ এবং @ পিক্সেলগুলিতে পয়েন্টের আকারের তিনবারের সাথে @ 3x সম্পদ রয়েছে 2 ডিভাইসটি স্বয়ংক্রিয়ভাবে সঠিকটিকে বেছে নেবে। তবে আপনার পোস্টটি পড়ে আমার ধারণা আপনি ইতিমধ্যে এটি জানেন।

প্রান্ত থেকে প্রান্তের চিত্রগুলির জন্য, তবে দুর্ভাগ্যক্রমে আপনাকে এটিকে সমস্ত স্ক্রিন রেজোলিউশনের জন্য তৈরি করতে হবে। সুতরাং, একটি প্রতিকৃতি আইফোন জন্য, এটি 320 পয়েন্ট, 375 পয়েন্ট এবং 414 পয়েন্ট হবে, যেখানে 414 পয়েন্ট এক 3x 3x হতে হবে। ইন্টারফেস বিল্ডারে স্লাইসিং সেটআপ করে আপনার চিত্রগুলিকে স্কেলেবল করে তোলার আরও ভাল সমাধান হতে পারে (যদি আপনি চিত্রের ক্যাটালগগুলি ব্যবহার করেন, তা হ'ল)। তবে চিত্রটির উপর নির্ভর করে এটি একটি বিকল্প হতে পারে বা নাও পারে, নির্ভর করে যে চিত্রটির পুনরাবৃত্তিযোগ্য বা প্রসারিত অংশ রয়েছে কিনা depending এর মতো সেট আপ করা যায় এমন চিত্রগুলি খুব কম পারফরম্যান্সের প্রভাব ফেলে।

Question 5

@ 2 এবং @ 3 আসল চিত্রের স্কেলিং নয়, তবে কেবলমাত্র রিয়েল পিক্সেলটি স্ক্রিনে একটি ভার্চুয়াল পিক্সেলকে উপস্থাপন করে, অ্যান্ড্রয়েড মহাবিশ্বের hdpi / xhdpi / xxhdpi / ব্লেবলা কিছু প্রকারের প্রতিনিধিত্ব করে। এটি কেবলমাত্র কিছু ডিভাইসের স্ক্রিনের জন্য কোন চিত্রটি ব্যবহার করা উচিত তা সিস্টেমকে দেখায়।

সুতরাং আপনার যদি পুরো স্ক্রীন চিত্র ব্যবহার করার প্রয়োজন হয় - এটি বাস্তব পর্দার আকারের উপর নির্ভরশীলভাবে প্রস্তুত করুন।

Question 6

গ্রাফিক্সের উপর নির্ভর করে এটি ঠিকঠাক কাজ করতে পারে যখন আমরা কেবলমাত্র একটি একক চিত্র ব্যবহার করি উদাহরণস্বরূপ, 414 পয়েন্ট প্রস্থের x 100 পয়েন্ট উচ্চতা (বৃহত্তম সম্ভাব্য প্রস্থ এবং কিছু স্থির উচ্চতা) সহ একটি ব্যানার এবং এটিকে পিনযুক্ত একটি ইউআইআইভিউভিউতে রাখি স্ক্রিনের বাম এবং ডান প্রান্তে, উচ্চতা 100 স্থির করেছে এবং সেই ইউআইআইভিজভিউয়ের জন্য অ্যাসপেক্ট ফিল ফিল্ড মোড রয়েছে। তারপরে ছোট ডিভাইসে চিত্রের বাম এবং ডান দিকটি কেটে যাবে এবং আমরা কেবলমাত্র চিত্রটির মাঝের অংশটি দেখতে পাব।

Question 7

আমি এর জন্য বিভাগ তৈরি করেছি:

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

Question 8

আমি মনে করি প্রান্ত থেকে প্রান্ত বা পূর্ণ পর্দার চিত্রগুলির সর্বোত্তম সমাধান হ'ল পিক্সেলের আসল পর্দার আকার সম্পর্কে চিন্তা করা (বিন্দুতে নয়) এবং আপনাকে অবশ্যই রানটাইমের সময় ডিভাইসের মডেলটি পরীক্ষা করে যথাযথ চিত্রটি বেছে নিতে হবে:

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 এর কোনও প্রয়োজন নেই।

Question 9

আমি মনে করি আমাদের বিভিন্ন ডিভাইসের জন্য বিভিন্ন আকারের পটভূমি চিত্র ব্যবহার করা উচিত। পটভূমির জন্য @ 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)