লেআউট

অ্যান্ড্রয়েড অটো-এর অভিযোজিত-প্রতিক্রিয়াশীল (AR) ফ্রেমওয়ার্ক অ্যাপ লেআউটকে যে কোনো গাড়ির স্ক্রিনের আকারে মানিয়ে নেয়।

অ্যাপ UI এবং বৈশিষ্ট্যগুলি, যেমন মিডিয়া ব্রাউজিং এবং প্লেব্যাক অ্যাকশনগুলি, ব্যবহারকারীর ফোন থেকে প্রজেক্ট করা অ্যাপগুলির জন্য Android Auto-সামঞ্জস্যপূর্ণ গাড়িগুলিতে স্বয়ংক্রিয়ভাবে অভিযোজিত হয়৷

এক পলকে

  • লেআউটগুলি নির্দিষ্ট ব্রেকপয়েন্টে স্ক্রিনের আকারের সাথে সামঞ্জস্য করে
  • 8dp বৃদ্ধিতে প্যাডিং প্রয়োগ করুন
  • ছোট উপাদানের মধ্যে 12dp প্যাডিং অল্প পরিমাণে রাখুন

লেআউট কিভাবে নির্ধারিত হয়

অ্যান্ড্রয়েড অটোর এআর ফ্রেমওয়ার্ক অভিযোজিত ডিজাইন এবং প্রতিক্রিয়াশীল ডিজাইন উভয়ই ব্যবহার করে:

  • প্রতিক্রিয়াশীল ডিজাইন (সঠিক পর্দার আকার লেআউট নির্ধারণ করে) বাম এবং ডান মার্জিনের জন্য ব্যবহার করা হয়
  • অভিযোজিত নকশা (স্ক্রীনের উচ্চতা এবং প্রস্থের রেঞ্জ লেআউট নির্ধারণ করে) লেআউটের জন্য ব্যবহার করা হয়

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

অভিযোজিত ব্রেকপয়েন্ট অ্যানিমেশন

অভিযোজিত

অ্যাডাপটিভ ডিজাইন একটি স্ক্রিনের লেআউট নির্ধারণ করতে ব্রেকপয়েন্ট ব্যবহার করে। স্ক্রিনের আকারের একটি সংজ্ঞায়িত পরিসরের জন্য (যেমন 1280dp এর কম প্রশস্ত) একটি নির্দিষ্ট লেআউট প্রদর্শিত হয়।
প্রতিক্রিয়াশীল ব্রেকপয়েন্ট অ্যানিমেশন

প্রতিক্রিয়াশীল

প্রতিক্রিয়াশীল ডিজাইন একটি বিন্যাসকে এমনভাবে অভিযোজিত করে যা সঠিক পর্দার আকারের সমানুপাতিক। উপাদানগুলিতে ফ্লেক্স এলাকা রয়েছে যা প্রতিটি গাড়ির স্ক্রিনের জন্য উপযুক্ত আকারে প্রসারিত বা সঙ্কুচিত করা যেতে পারে।

অভিযোজিত ব্রেকপয়েন্ট

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

বিভিন্ন স্ক্রিনের আকারে ব্রেকপয়েন্ট
সংকীর্ণ (0-600dp), স্ট্যান্ডার্ড (600-930dp), প্রশস্ত (930-1280dp), এবং অতিরিক্ত চওড়া (1280dp+) স্ক্রীন মাপ জুড়ে অভিযোজিত ব্রেকপয়েন্ট

প্রতিক্রিয়াশীল মার্জিন

Android Auto সম্পূর্ণ গাড়ির স্ক্রিনের আকারের উপর ভিত্তি করে প্রতিক্রিয়াশীল মার্জিন ব্যবহার করে। বাম এবং ডান মার্জিনগুলি স্ক্রীনের প্রস্থের 12% এর সাথে সামঞ্জস্য করে এবং সেগুলিতে সাধারণত স্ক্রোল বার এবং নেভিগেশন নিয়ন্ত্রণ থাকে। অবশিষ্ট স্ক্রীন স্পেস, অ্যাপ ক্যানভাস নামে পরিচিত, অ্যাপের বিষয়বস্তু ধারণ করে।

আরও জায়গা দেওয়ার জন্য, ছোট পর্দার আকারে ডানদিকের মার্জিন সরানো যেতে পারে। অতিরিক্ত তথ্য দেখানোর জন্য এই স্থানটিকে একটি গৌণ এলাকা হিসেবে অ্যাপ ব্যবহার করতে পারে।

প্রতিক্রিয়াশীল মার্জিন অ্যানিমেশন
প্রতিক্রিয়াশীল মার্জিন স্ক্রিনের আকারের উপর ভিত্তি করে তাদের প্রস্থ সামঞ্জস্য করে।

লেআউট গ্রিড

অ্যান্ড্রয়েড অটো লেআউটগুলি UI উপাদানগুলিকে একটি 8dp গ্রিড বরাবর সারিবদ্ধ করে, কিছু ছোট উপাদান একটি 4dp গ্রিডে সারিবদ্ধ করে৷

প্যাডিং

প্যাডিং UI উপাদানগুলির মধ্যে স্থান বোঝায়। অ্যান্ড্রয়েড অটো প্যাডিং স্কেল 8dp এর গুণিতক, 96dp পর্যন্ত প্যাডিং আকারে প্রয়োগ করা হয়। যেকোনো বড় পরিমাণ প্যাডিংও 8dp-এর গুণে যোগ করা উচিত।

এই টেবিলটি স্বয়ংক্রিয় UI-তে দেখা সাধারণ প্যাডিং মানগুলির তালিকা করে। আকার বৃদ্ধি ক্রমবর্ধমান ক্রমে তালিকাভুক্ত করা হয়, লেবেল দ্বারা চিহ্নিত করা হয় যা "P" অক্ষর দিয়ে শুরু হয়:

P0 P1 P2 P3 P4 P5 P6 P7 P8
4dp 8dp 12dp 16dp 24dp 32dp 48dp 64dp 96dp
একটি বিন্যাসে প্যাডিং মান
এই লেআউটে, প্যাডিং মান উপরের টেবিলে P1, P3, এবং P5 দ্বারা উপস্থাপিত হয়।

ছোট উপাদান জন্য প্যাডিং

আরও ভাল সারিবদ্ধকরণ তৈরি করতে এবং পর্যাপ্ত ব্যবধানের অনুমতি দিতে, ছোট উপাদানগুলি অল্প পরিমাণে 12dp প্যাডিং ব্যবহার করতে পারে।

একটি উপাদানে প্যাডিং মান
এই উইজেটে, উপাদানগুলি উপরের টেবিলে P2, P3, P4 এবং P5 দ্বারা উপস্থাপিত প্যাডিং মান ব্যবহার করে।

কীলাইন

কীলাইনগুলি এমন পরিমাপ যা একটি UI সংগঠিত করে যেখানে উপাদানগুলি এবং উপাদানগুলিকে একটি বিন্যাসে (x-অক্ষ বরাবর) অনুভূমিকভাবে স্থাপন করা উচিত। এগুলি লেবেল দ্বারা চিহ্নিত করা হয় যা "KL" অক্ষর দিয়ে শুরু হয়।

লেআউটের যেকোন জায়গায় কীলাইন স্থাপন করা যেতে পারে। এগুলি যেকোন দুটি উল্লম্ব প্রান্তের (উপাদান, উপাদান বা পর্দার) মধ্যে দূরত্ব নির্দেশ করতে ব্যবহার করা যেতে পারে। উপাদান এবং উপাদানগুলি তাদের বাম বা ডান প্রান্তটি নিকটতম কীলাইনে সারিবদ্ধ করে।

একটি উপাদানের মধ্যে কীলাইন
এই উপাদানটিতে, KL0 একে অপরের থেকে সামঞ্জস্যপূর্ণ দূরত্বে সমস্ত তালিকা আইকন এবং পাঠ্য সারিবদ্ধ করে। KL1 সমস্ত তালিকা আইটেমকে উপাদানের বাম এবং ডান প্রান্তে সারিবদ্ধ করে।

কীলাইন দিয়ে পরিমাপ করা হচ্ছে

স্ক্রীনের প্রস্থের উপর ভিত্তি করে কীলাইনগুলি পরিবর্তিত হয়, যা UI উপাদানগুলিকে ধারাবাহিকভাবে বিভিন্ন স্ক্রীনের আকার জুড়ে তাদের বসানো স্কেল করার অনুমতি দেয়।

"KL(n)" চিহ্নিত লেবেল দ্বারা উপস্থাপিত স্ক্রীন আকারের একটি পরিসরের জন্য নিম্নলিখিত কীলাইনগুলি সুপারিশ করা হয়৷ এগুলি কী লাইনের আকার বৃদ্ধির ক্রমে দেখানো হয়:

KL(n) সরু পর্দা
(0-600dp)
স্ট্যান্ডার্ড স্ক্রিন
(600-930dp)
প্রশস্ত পর্দা
(930-1280dp)
অতিরিক্ত প্রশস্ত পর্দা
(1280dp+)
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp N/A
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp N/A