গ্রিড এবং ইউনিট

অ্যান্ড্রয়েড ডিভাইসগুলোর বিভিন্ন ধরনের স্ক্রিন ডেনসিটি, সাইজ ক্লাস, ফর্ম ফ্যাক্টর এবং অ্যাসপেক্ট রেশিওর সাথে সামঞ্জস্যপূর্ণভাবে সাড়া দেয় এমন লেআউট তৈরি করতে ও ফন্ট উপস্থাপনের জন্য ডেনসিটি ইন্ডিপেন্ডেন্ট পিক্সেল (dp) এবং স্কেলেবল পিক্সেল (sp) অপরিহার্য।

মূল বিষয়গুলো

  • বেসলাইন গ্রিড ব্যবহার করলে, ৪ এবং ৮ পরিমাপেই সীমাবদ্ধ থাকুন।
  • পিক্সেলের পরিবর্তে ডিপি এবং এসপি-তে স্পেসিফিকেশন উল্লেখ করুন।
  • সমস্ত বাকেটের জন্য বিটম্যাপ (রাস্টার) গ্রাফিক্স রপ্তানি করুন।
  • বিভিন্ন সাইজ ক্লাস, রেজোলিউশন এবং অ্যাস্পেক্ট রেশিও মাথায় রেখে রেসপন্সিভ মানসিকতা নিয়ে ডিজাইন করুন।
  • ঘনত্ব-নিরপেক্ষ পিক্সেল (dp) : ঘনত্ব-নিরপেক্ষ পিক্সেল হলো নমনীয় একক যা যেকোনো স্ক্রিনে একই মাপে পরিবর্তিত হয়। এগুলি স্ক্রিনের ভৌত ঘনত্বের উপর ভিত্তি করে তৈরি। এই এককগুলি একটি ১৬০ ডিপিআই (ডটস পার ইঞ্চি) স্ক্রিনের সাপেক্ষে নির্ধারিত, যেখানে ১ dp প্রায় ১ px-এর সমান।
  • স্কেলেবল পিক্সেল (sp) : স্কেলেবল পিক্সেল dp-এর মতোই কাজ করে, তবে এটি ফন্টের জন্য ব্যবহৃত হয়। একটি sp-এর ডিফল্ট মান একটি dp-এর ডিফল্ট মানের সমান। অ্যান্ড্রয়েড সিস্টেম ডিভাইস এবং ডিভাইসের সেটিংসে সেট করা ব্যবহারকারীর পছন্দের উপর ভিত্তি করে ব্যবহারের জন্য প্রকৃত ফন্ট সাইজ গণনা করে।
dp বনাম sp চিহ্নিতকরণ

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

অ্যান্ড্রয়েড এই ইউনিটগুলো ব্যবহার করে বিভিন্ন ডিভাইস এবং রেজোলিউশনে সামঞ্জস্য বিধান ও অনুবাদ করতে সাহায্য করে।

ঘনত্ব বালতি

উচ্চ-ঘনত্বের স্ক্রিনে নিম্ন-ঘনত্বের স্ক্রিনের তুলনায় প্রতি ইঞ্চিতে বেশি পিক্সেল থাকে। ফলে, একই পিক্সেল আকারের UI উপাদানগুলো নিম্ন-ঘনত্বের স্ক্রিনে বড় এবং উচ্চ-ঘনত্বের স্ক্রিনে ছোট দেখায়। এই কারণেই পরিমাপ পিক্সেলে প্রকাশ করা উচিত নয়।

অ্যান্ড্রয়েড স্ক্রিন ডেনসিটির বিভিন্ন রেঞ্জকে "বাকেট"-এ ভাগ করে এবং আপনার ডিভাইসে অ্যাসেটগুলোর সর্বোত্তম সেট সরবরাহ করার জন্য সেগুলো ব্যবহার করে। সবচেয়ে বেশি ব্যবহৃত ডেনসিটি বাকেটগুলো হলো mdpi , hdpi , xhdpi , xxhdpi , এবং xxxhdpi ( nodpi এবং anydpi এমন একটি বাকেটকে বোঝায় যা ডিভাইসের রেজোলিউশন অনুযায়ী স্কেল করে না, সাধারণত ভেক্টর ড্রয়েবলের জন্য ব্যবহৃত হয়)। এগুলোর প্রত্যেকটি আপনার অ্যাপের একটি রিসোর্স ফাইলের সাথে সম্পর্কিত।

mdpi-এর ঘনত্ব x1, hdpi-এর ঘনত্ব x1.5,  xhdpi-এর ঘনত্ব x2, xxhdpi-এর ঘনত্ব x3, এবং  xxxhdpi-এর ঘনত্ব x4
নিজ নিজ ঘনত্বে পার্টি ক্যান্টালুপ

ডিপি গণনা করতে:

dp = (প্রস্থ (পিক্সেল) * ১৬০) / স্ক্রিন ডেনসিটি

বেসলাইন গ্রিড

একটি অন্তর্নিহিত গ্রিড ব্যবহার করে কাঠামো তৈরি করলে আপনার UI জুড়ে সামঞ্জস্যপূর্ণ ব্যবধান এবং সারিবদ্ধতা বজায় রাখতে সাহায্য করে। অ্যান্ড্রয়েড UI লেআউট, কম্পোনেন্ট এবং ব্যবধানের জন্য একটি ৮ ডিপি গ্রিড ব্যবহার করে।

৮ দশমিক স্থান পর্যন্ত বৃদ্ধিকে হাইলাইট করে একটি ৮ দশমিক স্থান পর্যন্ত গ্রিড দেখানো হচ্ছে।

আইকন, টাইপ এবং কম্পোনেন্টের ভেতরের কিছু উপাদানের মতো ছোট এলিমেন্টগুলোকে ৪ ডিপি গ্রিডে অ্যালাইন করা সবচেয়ে ভালো।

বেশিরভাগ UI উপাদানের জন্য 8-dp গ্রিড আদর্শ, অন্যদিকে আইকনের মতো ছোট উপাদানগুলোর জন্য 4-dp গ্রিড বেশি ভালো।

লেআউট গ্রিড

গ্রিড যেকোনো লেআউটের মেরুদণ্ড। বিষয়বস্তুর স্তরবিন্যাস, পরিমাণ এবং এমনকি বার্তাও বিবেচনা করুন।

শ্রেণিবদ্ধ গ্রিড

বিষয়বস্তুর স্তরবিন্যাস বা গুরুত্ব মাথায় রেখে একটি স্তরক্রমিক গ্রিড তৈরি করা হয়। একটি সংবাদপত্রের বিন্যাসের কথা ভাবুন: একটি ধারাবাহিক প্রধান সংবাদ বিন্যাসের বেশিরভাগ অংশ জুড়ে থাকে, আর একটি ছোট কলামে পুরোনো নিবন্ধগুলো প্রদর্শন করা হয়।

কম্প্যাক্ট এবং বৃহৎ আকারের উপর একটি শ্রেণিবদ্ধ গ্রিডের উদাহরণ

বিভিন্ন স্ক্রিন সাইজে মানিয়ে নেওয়ার সময়, একটি হায়ারারকিক্যাল লেআউট গ্রিড সেলগুলোকে পুনর্বিন্যাস, আকার পরিবর্তন এবং প্রকাশ করতে পারে।

মডুলার গ্রিড

একটি মডিউলার গ্রিড সুসংগত কলাম এবং সারিতে সাজানো থাকে, যা বিষয়বস্তু বিন্যস্ত করার জন্য একটি আয়তাকার গ্রিড ব্যবস্থা তৈরি করে। মডিউলার গ্রিড একই রকম গুরুত্ব ও আকারের বিষয়বস্তুর জন্য ভালোভাবে কাজ করে, যেমন একটি কার্ড গ্যালারি।

কম্প্যাক্ট এবং বৃহৎ আকারের উপর একটি মডুলার গ্রিডের উদাহরণ

একটি অভিযোজিত মডিউলার গ্রিডে আরও গ্রিড সেল যোগ করা যায় এবং এর ভেতরের কন্টেন্ট বিভিন্ন গ্রিড সেলে স্ন্যাপ বা র‍্যাপ করতে পারে। গ্রিড সেলগুলো বিভিন্ন আকারে একই থাকতে পারে অথবা কন্টেন্টের প্রয়োজন অনুযায়ী নিজেদের আকার পরিবর্তন করতে পারে।

কলাম গ্রিড

কলামগুলো বডি এরিয়ার ভেতরের কন্টেন্টকে ভাগ করে একটি লেআউটের উল্লম্ব রূপরেখা দেওয়ার জন্য একটি গ্রিড কাঠামো তৈরি করে। স্ক্রিনের যে অংশগুলোতে কলাম থাকে, সেখানে কন্টেন্ট স্থাপন করা হয়। কন্টেন্টকে সারিবদ্ধ করতে অন্তর্নিহিত গ্রিডের সাথে অ্যালাইন করুন, তবে এর আকার পরিবর্তনযোগ্য রাখা উচিত।

সংক্ষিপ্ত এবং বড় আকারের একটি কলাম গ্রিড উদাহরণ

লেআউট বেসিকস- এ কীভাবে একটি কলাম গ্রিড সেট আপ করতে হয় এবং কন্টেন্ট প্রয়োগ করতে হয় তার প্রাথমিক ধারণা নিন। কলাম গ্রিডটি স্ক্রিনের আকার অনুযায়ী প্রয়োজনমতো কলামের আকার এবং সংখ্যা পরিবর্তন করে বিভিন্ন ফর্ম ফ্যাক্টরের সাথে মানিয়ে নিতে পারে এবং একই সাথে কন্টেন্টকেও স্কেল করার সুযোগ দেয়।

চার-কলাম গ্রিড

আকারের শ্রেণী

উইন্ডো সাইজ ক্লাস হলো কিছু সুনির্দিষ্ট ভিউপোর্ট ব্রেকপয়েন্টের সমষ্টি, যা আপনাকে রেসপন্সিভ ও অ্যাডাপটিভ অ্যাপ্লিকেশন লেআউট ডিজাইন, ডেভেলপ এবং টেস্ট করতে সাহায্য করে। অ্যান্ড্রয়েড উইন্ডো সাইজ ক্লাসকে ৩টি ভাগে ভাগ করে: কম্প্যাক্ট, মিডিয়াম এবং এক্সপ্যান্ডেড। উইন্ডো সাইজ ক্লাস সম্পর্কে আরও পড়ুন।

আকৃতির অনুপাত

অ্যাস্পেক্ট রেশিও হলো কোনো উপাদানের প্রস্থ ও উচ্চতার অনুপাত। অ্যাস্পেক্ট রেশিও width:height আকারে লেখা হয়।

আপনার লেআউটে সামঞ্জস্য বজায় রাখতে, ছবি, পৃষ্ঠতল এবং স্ক্রিনের আকারের মতো উপাদানগুলিতে একটি সামঞ্জস্যপূর্ণ অ্যাসপেক্ট রেশিও ব্যবহার করুন।

আপনার UI জুড়ে ব্যবহারের জন্য নিম্নলিখিত অ্যাস্পেক্ট রেশিওগুলো সুপারিশ করা হয়:

  • ১৬:৯
  • ৩:২
  • ৪:৩
  • ১:১
  • ৩:৪
  • ২:৩