লোমশ বন্ধু এবং অভিযোজিত এপিআই

অ্যান্ড্রয়েড বিভিন্ন ধরণের ডিভাইস, ধরন এবং স্ক্রিন সাইজে কাজ করে, তাই নির্দিষ্ট পিক্সেল-পারফেক্ট লেআউটের জন্য ডিজাইন করা কেবল অকার্যকরই নয়, এটি ব্যবহারকারীর অভিজ্ঞতার উপরও নেতিবাচক প্রভাব ফেলতে পারে। এর পরিবর্তে, অভিযোজনযোগ্যভাবে ডিজাইন, নির্মাণ এবং চিন্তা করুন। আমরা সম্প্রতি নতুন এপিআই (API) চালু করেছি যা কিছু পরিচিত ডিজাইন ধারণাকে অভিযোজিত লেআউট তৈরিতে সাহায্য করে।

Pawparazzi হলো একটি নমুনা অ্যাপ যা এই ধারণাগুলো প্রদর্শন করে। এটি গ্রিড এবং ফ্লেক্সবক্সের মতো অ্যাডাপ্টিভ এপিআই ব্যবহার করে অ্যাডাপ্টিভ ডিজাইন তুলে ধরার জন্য ডিজাইন ও তৈরি করা হয়েছে।

অভিযোজনমূলক চিন্তাভাবনা কেবল নির্দিষ্ট সীমারেখা মাথায় রেখে নকশা করার বিষয় নয়, বরং বিষয়বস্তুকে নমনীয় আঙ্গিকে ভাবার বিষয়।

সবকিছুই একটা গ্রিড!

কন্টেন্ট কাঠামোবদ্ধ করার জন্য একটি ভিত্তি থাকা ভালো ডিজাইন চর্চায় সাহায্য করে এবং কন্টেন্ট কীভাবে পরিবর্তিত হবে, তা নির্ধারণ করতেও সহায়তা করে। অ্যান্ড্রয়েডের একটি অন্তর্নিহিত ৮ ডিপি বেসলাইন গ্রিড রয়েছে, যার সাথে আমরা সমস্ত কন্টেন্টকে অতি সূক্ষ্ম স্তরে সারিবদ্ধ করতে পারি।

Pawparazzi একটি সুষম মডিউলার গ্রিড বা একমুখী কলাম গ্রিডের পরিবর্তে একটি স্তরক্রমিক লেআউট গ্রিড ব্যবহার করে, যার অর্থ হলো, এটিকে গঠনকারী কলাম এবং সারিগুলো বিষয়বস্তুর স্তরক্রমের উপর ভিত্তি করে নির্ধারিত হয়।

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

Pawparazzi-এর জন্য প্রাথমিক লক্ষ্য ছিল দলের পোষ্যদের বিভিন্ন উপায়ে দেখানো, যা শুরু হতো পোষ্যদের একটি সংক্ষিপ্ত বিবরণ, বিস্তারিত তথ্য এবং তারপরে র‍্যাঙ্ক অনুযায়ী সাজানো পোষ্যদের দিয়ে। এর মানে হলো, পোষ্যদের গ্যালারিটি মূল কন্টেন্ট প্যান এবং গ্রিডের একটি বড় অংশ জুড়ে থাকবে, যার পরে থাকবে নেভিগেশন এবং ফিল্টার এলিমেন্ট। যখন আরও জায়গা পাওয়া যায়, তখন এটি গ্যালারিটিকে আরও বেশি সারি, আরও বেশি পোষ্য জুড়ে প্রসারিত হতে এবং একই সাথে পোষ্যদের বিস্তারিত তথ্য দেখাতে সাহায্য করে। এই অভিযোজনমূলক নীতিটি হলো ‘রিভিল’, অর্থাৎ বড় লেআউটে আরও বেশি কন্টেন্ট দেখানো।

অ্যাপটির মূল লক্ষ্য এবং বিষয়বস্তু পর্যালোচনা করে এটি নির্ধারণ করা সম্ভব হয়েছিল যে, লেআউট গ্রিডটিকে কখন এবং কীভাবে মানিয়ে নিতে হবে: যেমন—কোন উইন্ডো ক্লাস সাইজ, হিঞ্জের অবস্থান এবং ডিভাইসের ওরিয়েন্টেশন।

লেআউট গ্রিড থেকে সাবগ্রিডগুলো আরও নমনীয় কন্টেন্ট কাঠামো তৈরি করতে সাহায্য করে। গ্যালারিগুলো নিজেরাই একটি গ্রিড। ছোট আকারের জন্য, পাশাপাশি দুটি করে সাজানোর গ্রিড ব্যবহার করা হয়।

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

এটি আরও আকর্ষণীয় লেআউট তৈরি করতে বা একটি স্পষ্টতর দৃশ্যমান স্তরবিন্যাস গড়ে তুলতে ব্যবহার করা যেতে পারে, যেমন 'সপ্তাহের সেরা পোষ্য' (Pet of the week), যেখানে শীর্ষস্থানীয় পোষ্যদের বোঝানোর জন্য গ্রিড ব্যবহার করা হয়। গ্রিডটি ২x৪ হতে পারে, কিন্তু শীর্ষস্থানটি ২টি কলাম এবং সারি জুড়ে বিস্তৃত থাকে।

এই সবকিছু গ্রিড এপিআই (Grid API) এর মাধ্যমে সম্পন্ন করা হয়।

সেই উপাদানগুলো নমনীয় করুন

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

সূক্ষ্ম প্রশ্ন

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

Pawparazzi-তে এর অর্থ ছিল সুনির্দিষ্ট পয়েন্টার ইনপুটের সুবিধা নেওয়া, যেখানে লক্ষ্যবস্তুর ক্ষেত্রফল ছোট এবং বিষয়বস্তু আরও ঘন থাকে।