এই বিভাগটি স্ক্রীন লেআউটগুলির জন্য ডিজাইন নির্দেশিকা প্রদান করে যা স্ক্রীন আকারের একটি পরিসর জুড়ে স্কেল করা যেতে পারে।
এখানে সংজ্ঞায়িত প্যাডিং এবং কী-লাইন মানগুলি উপাদান , মিডিয়া স্পেক্স , নোটিফিকেশন সেন্টার স্পেক্স এবং ডায়লার স্পেক্সে ব্যবহৃত হয়।
এক নজরে নির্দেশিকা (TL:DR):
- উপযুক্ত স্ক্রীন-আকারের বিভাগগুলিতে বেস লেআউট
- প্রান্তিককরণের জন্য একটি 8dp গ্রিড ব্যবহার করুন
- অ্যাপ কাজের জায়গার 12% মার্জিন প্রস্থ সেট করুন
- মার্জিনে স্ক্রল বার এবং নেভিগেশন সহায়কগুলি রাখুন
- উপাদানগুলির মধ্যে নির্দিষ্ট ব্যবধানের জন্য প্যাডিং ব্যবহার করুন
মূল লেআউট ধারণা
- অ্যাপের কাজের স্থান: গাড়ি প্রস্তুতকারক এবং সিস্টেম UI বৈশিষ্ট্য দ্বারা দখলকৃত স্ক্রীন স্থানের জন্য অ্যাকাউন্টিং করার পরে একটি অ্যাপে উপলব্ধ স্ক্রিনের এলাকা
- স্ক্রীন-আকারের বিভাগ: 4টি স্ক্রীন-প্রস্থ রেঞ্জের একটি সেট (স্ট্যান্ডার্ড, প্রশস্ত, অতিরিক্ত প্রশস্ত এবং সুপার ওয়াইড), এবং 3টি স্ক্রীন-উচ্চতা রেঞ্জ (ছোট, মানক এবং লম্বা), যেখানে "স্ক্রিন" অ্যাপের কাজকে বোঝায় প্রান্ত থেকে প্রান্তে পূর্ণ স্থানের পরিবর্তে স্থান
- প্যাডিং: ব্যবধান মানগুলির একটি সেট যা একটি বিন্যাসে উপাদান এবং উপাদানগুলির মধ্যে নির্দিষ্ট উল্লম্ব এবং অনুভূমিক ব্যবধান নির্দিষ্ট করে
- কীলাইন: পরিবর্তনশীল-প্রস্থ ব্যবধান মানগুলির একটি সেট - প্রস্থ বিভাগ দ্বারা নির্ধারিত - যা একটি মার্জিন বা উপাদান প্রান্ত এবং একটি লেআউটের একটি উপাদানের মধ্যে অনুভূমিক স্থান নির্দেশ করে
- ফ্লেক্স এলাকা: একটি উপাদানের একটি অংশ, কখনও কখনও একটি সর্বনিম্ন বা সর্বোচ্চ মান নির্ধারণ করা হয়, যা স্ক্রিনের আকারের সাথে মাপসই করা যেতে পারে
অ্যাপ কাজের জায়গা
একটি অ্যাপের কাজের স্থান হল উপলব্ধ স্ক্রীন এলাকা যা গাড়ি-নির্মাতা এবং সিস্টেম-ইউআই বৈশিষ্ট্য দ্বারা দখল করা স্ক্রীন স্থানের জন্য হিসাব করার পরে অবশিষ্ট থাকে। অ্যাপের কাজ করার স্থানটি বাম এবং ডান মার্জিন এবং অ্যাপের ক্যানভাস, যা অ্যাপের প্রাথমিক বিষয়বস্তু এলাকা।
প্রতিটি মার্জিন অ্যাপের কাজের জায়গার প্রস্থের 12% সমান হওয়া উচিত। মার্জিনে সাধারণত অ্যাপের জন্য স্ক্রোল বার এবং নেভিগেশনাল সুবিধা থাকে।
পর্দার মাপ
রেফারেন্স-স্পেক লেআউটগুলি অ্যাপের কাজের জায়গার প্রস্থ এবং উচ্চতার উপর ভিত্তি করে স্ক্রীন-আকারের বিভাগগুলির একটি সেটের সাথে চাবিকাঠি করা হয়।
এই নির্দেশিকা জুড়ে চশমা, এই বিভাগগুলি নাম দ্বারা উল্লেখ করা হয়. উদাহরণস্বরূপ, "প্রশস্ত" বলতে 930dp থেকে 1279dp রেঞ্জের সমস্ত স্ক্রীন প্রস্থকে বোঝায়।
স্ক্রীন-আকারের বিভাগগুলি এর জন্য সুপারিশগুলিকে প্রভাবিত করে:
- উপাদান এবং উপাদানগুলির মধ্যে কীলাইন ব্যবধান
- উপাদান ফ্লেক্স এলাকায় স্কেলিং
- মিনিমাইজড কন্ট্রোল বারে অ্যালবাম শিল্পের মতো ঐচ্ছিক উপাদানগুলি কখন লুকাবেন বা প্রদর্শন করবেন৷
প্রস্থ বিভাগ
| স্ট্যান্ডার্ড | প্রশস্ত | অতীব চওরা | সুপার প্রশস্ত | |
|---|---|---|---|---|
| স্ক্রীন-প্রস্থ পরিসীমা | 690 - 929dp | 930 - 1279dp | 1280 - 1919dp | ≥ 1920dp |
উচ্চতা বিভাগ
| সংক্ষিপ্ত | স্ট্যান্ডার্ড | লম্বা | |
|---|---|---|---|
| স্ক্রীন-উচ্চতার পরিসর | 0 - 609dp | 610 - 1199dp | ≥ 1200dp |
ব্যবধান
রেফারেন্স-স্পেক লেআউটগুলি একটি 8dp গ্রিডে গঠন করা হয়। অনুশীলনে, এর অর্থ হল UI উপাদান এবং স্পেসগুলিতে উপাদানগুলি 8dp এর গুণিতক দ্বারা পৃথক করা হয়েছে।
দুটি ধরণের ব্যবধান রয়েছে:
স্থির-প্রস্থ এবং নির্দিষ্ট-উচ্চতার ব্যবধানের জন্য প্যাডিং
পরিবর্তনশীল-প্রস্থ ব্যবধানের জন্য কীলাইন
প্যাডিং
প্যাডিং একটি রেফারেন্স-স্পেক লেআউটে উপাদানগুলির মধ্যে নির্দিষ্ট-প্রস্থ এবং নির্দিষ্ট-উচ্চতার ব্যবধান স্থাপন করে। এটি একটি উপাদানের মধ্যে উপাদানগুলির মধ্যে নির্দিষ্ট ব্যবধান নির্ধারণ করতে পারে, যেমন ডায়ালপ্যাড উপাদানের সংলগ্ন সংখ্যা লক্ষ্যগুলির মধ্যে স্থান। সাধারণত, দুটি উপাদানের মধ্যে সম্পর্ক যত ঘনিষ্ঠ হয়, তাদের মধ্যে প্যাডিং তত সংকীর্ণ হয়।
9টি প্যাডিং মান আছে, P0 - P8 হিসাবে মনোনীত।
এখানে প্যাডিং মান এবং তাদের সংশ্লিষ্ট মাপ আছে:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
কীলাইনগুলির বিপরীতে যা স্ক্রীন-প্রস্থের বিভাগের উপর ভিত্তি করে ব্যবধানের মান পরিবর্তন করে, প্যাডিং মানগুলি স্থির থাকে। উদাহরণস্বরূপ, P1 সর্বদা 8dp হয়। কিছু ক্ষেত্রে, যাইহোক, বিভিন্ন স্ক্রীন আকারের জন্য রেফারেন্স-স্পেক লেআউটে উপাদান বা উপাদানগুলির একটি নির্দিষ্ট সেটের মধ্যে দূরত্বের বিভিন্ন প্যাডিং মান থাকতে পারে। উদাহরণস্বরূপ, গ্রিড আইটেমগুলির মধ্যে প্রস্তাবিত উল্লম্ব ব্যবধান হল ছোট পর্দার জন্য P4 এবং মানক এবং লম্বা পর্দাগুলির জন্য P5।
কীলাইন
একটি রেফারেন্স স্পেকের উপাদানগুলির মধ্যে প্যাডিং নির্দেশ করার পরিবর্তে, কীলাইনগুলি নির্দিষ্ট করে যে একটি উপাদানটি একটি উপাদানের নিকটতম মার্জিন বা প্রান্ত থেকে কত দূরে। পর্দার প্রস্থের উপর ভিত্তি করে কীলাইন মান পরিবর্তন করে। তারা উপাদানগুলির আনুপাতিক, অনুভূমিক ব্যবধান বজায় রেখে বিভিন্ন স্ক্রীন আকারে একটি বিন্যাস স্কেল করার একটি সুবিধাজনক উপায় অফার করে।
KL0 থেকে KL4 হিসাবে মনোনীত 5টি কীলাইন রয়েছে৷
প্রতিটি স্ক্রিনের প্রস্থের জন্য এখানে কীলাইন মান রয়েছে:
| পর্দার প্রস্থ | স্ট্যান্ডার্ড | প্রশস্ত | অতীব চওরা | সুপার প্রশস্ত |
|---|---|---|---|---|
| KL0 | 16dp | 24dp | 24dp | 32dp |
| KL1 | 24dp | 32dp | 32dp | 48dp |
| KL2 | 96dp | 112dp | 112dp | 112dp |
| KL3 | 112dp | 128dp | 128dp | 152dp |
| KL4 | 148dp | 168dp | 168dp | 168dp |
স্কেলিং কৌশল
রেফারেন্স-স্পেক লেআউটগুলি বিভিন্ন স্ক্রিনের আকারে অ্যাপগুলিকে স্কেলিং করার জন্য নির্দেশিকা প্রদান করে। মসৃণ স্কেলিংয়ে সাহায্য করার জন্য, চশমাগুলি সাধারণত অন্তর্ভুক্ত করে:
- একটি ফ্লেক্স এলাকা , যা একটি উপাদানের একটি অংশ যা গাড়ি নির্মাতাদের তাদের নির্দিষ্ট পর্দার আকারের মধ্যে মাপসই করার জন্য প্রসারিত বা চুক্তি করা উচিত
- ফ্লেক্স এলাকার জন্য ঐচ্ছিক প্রস্তাবিত সর্বনিম্ন এবং সর্বাধিক প্রস্থ , যা অবাঞ্ছিত আকারে স্কেলিং উপাদানগুলি প্রতিরোধ করার উদ্দেশ্যে
- উপাদানগুলির আনুপাতিক, অনুভূমিক ব্যবধান বজায় রাখতে ব্যবহৃত কীলাইনগুলি , যা স্ক্রীন-প্রস্থ বিভাগের উপর ভিত্তি করে আলাদাভাবে স্কেল করে
- উপাদান এবং উপাদানগুলির মধ্যে নির্দিষ্ট ব্যবধান নির্দিষ্ট করার জন্য প্যাডিং
ঐচ্ছিকভাবে, কিছু স্পেস স্ক্রিনের প্রস্থের উপর ভিত্তি করে কিছু উপাদান লুকাতে বা প্রদর্শন করতে হবে কিনা তা নির্দিষ্ট করে।
উদাহরণ 1: মিনিমাইজড কন্ট্রোল বার
মিনিমাইজড কন্ট্রোল বার হল এমন একটি কম্পোনেন্টের উদাহরণ যার জন্য রেফারেন্স-স্পেক লেআউট কম্পোনেন্টের প্রস্থকে ফ্লেক্স করার পরামর্শ দেয় এবং ছোট পর্দার আকারে একটি অপ্রয়োজনীয় উপাদান লুকিয়ে রাখে।
একটি মিনিমাইজড কন্ট্রোল বারের স্পেকের মধ্যে 2টি স্কেলিং নির্দেশিকা রয়েছে:
- বাম দিকে বর্গাকার উপাদান (সাধারণত অ্যালবাম শিল্পের জন্য ব্যবহৃত হয়) শুধুমাত্র তখনই প্রদর্শিত হবে যখন স্ক্রিনের প্রস্থ 930dp বা তার বেশি হয় এবং
- মাঝখানের নমনীয়-প্রস্থ অংশটি কখনই 440dp-এর চেয়ে সংকীর্ণ হওয়া উচিত নয় এবং যতক্ষণ না পুরো উপাদানের প্রস্থ 1028dp-এর বেশি না হয় ততক্ষণ পর্যন্ত বিস্তৃত স্ক্রিনের জন্য স্কেল করা যেতে পারে।
উদাহরণ 2: গ্রিড
গ্রিডগুলি এমন উপাদানগুলির একটি উদাহরণ যা একটি লেআউটের মধ্যে কলাম এবং সারিতে স্থাপন এবং আকার দেওয়া যেতে পারে।
কলামের প্রস্তাবিত সংখ্যা (সংকীর্ণ পর্দায় 3, চওড়া পর্দায় 4) পর্দার আকারের উপর নির্ভর করে। কলামের প্রস্থ এবং সারি উচ্চতা একটি স্ক্রীন বিভাগের মধ্যে সামঞ্জস্য করা যেতে পারে যতক্ষণ না গ্রিডগুলি সুপারিশকৃত ন্যূনতম প্রস্থের চেয়ে কম না হয়৷ নীচের অ্যানিমেশনটি দেখায় যে কীভাবে রেফারেন্স লেআউটগুলিতে সুপারিশগুলি অনুসরণ করে গ্রিডগুলিকে আরও প্রশস্ত এবং সংকীর্ণ স্ক্রিনে স্কেল করা যেতে পারে৷
