ক্যানোনিকাল লেআউটগুলি প্রমাণিত, বহুমুখী লেআউট যা বিভিন্ন ফর্ম ফ্যাক্টরের উপর সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।
ক্যানোনিকাল লেআউটগুলি ছোট স্ক্রিনের ফোনের পাশাপাশি ট্যাবলেট, ফোল্ডেবল এবং ChromeOS ডিভাইসগুলিকেও সমর্থন করে। মেটেরিয়াল ডিজাইন নির্দেশিকা থেকে প্রাপ্ত, লেআউটগুলি নান্দনিক এবং কার্যকরী উভয়ই।
অ্যান্ড্রয়েড ফ্রেমওয়ার্কে বিশেষায়িত উপাদান রয়েছে যা লেআউটগুলির বাস্তবায়নকে সহজ এবং নির্ভরযোগ্য করে তোলে।
ক্যানোনিকাল লেআউটগুলি আকর্ষণীয়, উৎপাদনশীলতা-বর্ধক UI তৈরি করে যা দুর্দান্ত অ্যাপগুলির ভিত্তি তৈরি করে।
তালিকা-বিস্তারিত
তালিকা-বিস্তারিত লেআউট ব্যবহারকারীদের বর্ণনামূলক, ব্যাখ্যামূলক, বা অন্যান্য সম্পূরক তথ্য - আইটেমের বিবরণ - সহ আইটেমের তালিকা অন্বেষণ করতে সক্ষম করে।
লেআউটটি অ্যাপ উইন্ডোটিকে দুটি পাশাপাশি দুটি প্যানে বিভক্ত করে: একটি তালিকার জন্য, একটি বিশদের জন্য। ব্যবহারকারীরা আইটেমের বিশদ প্রদর্শনের জন্য তালিকা থেকে আইটেম নির্বাচন করেন। বিশদের মধ্যে থাকা ডিপ লিঙ্কগুলি বিশদের প্যানে অতিরিক্ত সামগ্রী প্রকাশ করে।
প্রসারিত-প্রস্থ প্রদর্শন ( উইন্ডো আকারের ক্লাস ব্যবহার করুন দেখুন) একই সাথে তালিকা এবং বিশদ উভয়কেই সমন্বিত করে। একটি তালিকা আইটেম নির্বাচন নির্বাচিত আইটেমের জন্য সম্পর্কিত সামগ্রী দেখানোর জন্য বিশদ ফলক আপডেট করে।
মাঝারি এবং কমপ্যাক্ট-প্রস্থের ডিসপ্লেগুলি অ্যাপের সাথে ব্যবহারকারীর মিথস্ক্রিয়ার উপর নির্ভর করে তালিকা বা বিশদ প্রদর্শন করে। যখন কেবল তালিকাটি দৃশ্যমান হয়, তখন তালিকার আইটেম নির্বাচন করলে তালিকার পরিবর্তে বিশদ প্রদর্শন করা হয়। যখন কেবল বিশদটি দৃশ্যমান হয়, তখন পিছনের বোতাম টিপলে তালিকাটি পুনরায় প্রদর্শিত হয়।
ডিভাইসের ওরিয়েন্টেশন পরিবর্তন বা অ্যাপ উইন্ডোর আকার পরিবর্তনের মতো কনফিগারেশন পরিবর্তনগুলি ডিসপ্লের উইন্ডোর আকারের শ্রেণী পরিবর্তন করতে পারে। একটি তালিকা-বিস্তারিত লেআউট সেই অনুযায়ী সাড়া দেয়, অ্যাপের অবস্থা সংরক্ষণ করে:
- যদি একটি বর্ধিত-প্রস্থের ডিসপ্লে যেখানে তালিকা এবং বিস্তারিত উভয় প্যানেল দেখানো হয়, তা মাঝারি বা কম্প্যাক্টে সংকুচিত হয়, তাহলে বিস্তারিত প্যানেলটি দৃশ্যমান থাকে এবং তালিকা প্যানেলটি লুকানো থাকে।
- যদি একটি মাঝারি বা কমপ্যাক্ট-প্রস্থের ডিসপ্লেতে কেবল বিস্তারিত ফলকটি দৃশ্যমান হয় এবং উইন্ডো আকারের শ্রেণীটি প্রসারিত করার জন্য প্রশস্ত হয়, তাহলে তালিকা এবং বিস্তারিত একসাথে দেখানো হয় এবং তালিকাটি নির্দেশ করে যে বিস্তারিত ফলকের বিষয়বস্তুর সাথে সম্পর্কিত আইটেমটি নির্বাচন করা হয়েছে।
- যদি একটি মাঝারি বা কমপ্যাক্ট-প্রস্থের ডিসপ্লেতে কেবল তালিকার ফলকটি দৃশ্যমান হয় এবং প্রসারিত করার জন্য প্রশস্ত হয়, তাহলে তালিকা এবং একটি স্থানধারক বিশদ ফলক একসাথে দেখানো হয়।
তালিকা-বিস্তারিত মেসেজিং অ্যাপ , যোগাযোগ ব্যবস্থাপক , ইন্টারেক্টিভ মিডিয়া ব্রাউজার বা যেকোনো অ্যাপের জন্য আদর্শ যেখানে বিষয়বস্তু অতিরিক্ত তথ্য প্রকাশ করে এমন আইটেমের তালিকা হিসাবে সংগঠিত করা যেতে পারে।
বাস্তবায়ন
কম্পোজের ঘোষণামূলক দৃষ্টান্ত উইন্ডো আকারের ক্লাস লজিককে সমর্থন করে যা একই সময়ে তালিকা এবং বিস্তারিত প্যানগুলি দেখাবে কিনা তা নির্ধারণ করে (যখন প্রস্থ উইন্ডো আকারের শ্রেণী প্রসারিত হয়) বা শুধুমাত্র তালিকা বা বিস্তারিত ফলক (যখন প্রস্থ উইন্ডো আকারের শ্রেণীটি মাঝারি হয়) বা কমপ্যাক্ট)।
একমুখী ডেটা প্রবাহ নিশ্চিত করতে, বর্তমান উইন্ডো আকারের শ্রেণী এবং নির্বাচিত তালিকা আইটেমের বিশদ (যদি থাকে) সহ সমস্ত স্থিতি উত্তোলন করুন , যাতে সমস্ত কম্পোজেবলের ডেটাতে অ্যাক্সেস থাকে এবং সঠিকভাবে রেন্ডার করতে পারে।
ছোট উইন্ডো আকারে শুধুমাত্র বিস্তারিত ফলক দেখানোর সময়, বিস্তারিত ফলকটি সরাতে একটি BackHandler যোগ করুন এবং শুধুমাত্র তালিকা ফলকটি প্রদর্শন করুন। BackHandler সামগ্রিক অ্যাপ নেভিগেশনের অংশ নয় কারণ হ্যান্ডলারটি উইন্ডো আকারের শ্রেণী এবং নির্বাচিত বিশদ অবস্থার উপর নির্ভরশীল।
একটি উদাহরণ বাস্তবায়নের জন্য, রচনা নমুনা সহ তালিকা-বিশদ দেখুন।
,কম্পোজের ঘোষণামূলক দৃষ্টান্ত উইন্ডো আকারের ক্লাস লজিককে সমর্থন করে যা একই সময়ে তালিকা এবং বিস্তারিত প্যানগুলি দেখাবে কিনা তা নির্ধারণ করে (যখন প্রস্থ উইন্ডো আকারের শ্রেণী প্রসারিত হয়) বা শুধুমাত্র তালিকা বা বিস্তারিত ফলক (যখন প্রস্থ উইন্ডো আকারের শ্রেণীটি মাঝারি হয়) বা কমপ্যাক্ট)।
একমুখী ডেটা প্রবাহ নিশ্চিত করতে, বর্তমান উইন্ডো আকারের শ্রেণী এবং নির্বাচিত তালিকা আইটেমের বিশদ (যদি থাকে) সহ সমস্ত স্থিতি উত্তোলন করুন , যাতে সমস্ত কম্পোজেবলের ডেটাতে অ্যাক্সেস থাকে এবং সঠিকভাবে রেন্ডার করতে পারে।
ছোট উইন্ডো আকারে শুধুমাত্র বিস্তারিত ফলক দেখানোর সময়, বিস্তারিত ফলকটি সরাতে একটি BackHandler যোগ করুন এবং শুধুমাত্র তালিকা ফলকটি প্রদর্শন করুন। BackHandler সামগ্রিক অ্যাপ নেভিগেশনের অংশ নয় কারণ হ্যান্ডলারটি উইন্ডো আকারের শ্রেণী এবং নির্বাচিত বিশদ অবস্থার উপর নির্ভরশীল।
একটি উদাহরণ বাস্তবায়নের জন্য, রচনা নমুনা সহ তালিকা-বিশদ দেখুন।
খাওয়ান
একটি ফিড লেআউট একটি কনফিগারযোগ্য গ্রিডে সমতুল্য কন্টেন্ট উপাদানগুলিকে সাজিয়ে রাখে যাতে প্রচুর পরিমাণে কন্টেন্ট দ্রুত এবং সুবিধাজনকভাবে দেখা যায়।
আকার এবং অবস্থান বিষয়বস্তুর উপাদানগুলির মধ্যে সম্পর্ক স্থাপন করে।
উপাদানগুলিকে একই আকারে তৈরি করে এবং তাদের একসাথে স্থাপন করে কন্টেন্ট গ্রুপ তৈরি করা হয়। উপাদানগুলিকে কাছাকাছি উপাদানগুলির চেয়ে বড় করে তাদের প্রতি দৃষ্টি আকর্ষণ করা হয়।
কার্ড এবং তালিকা হল ফিড লেআউটের সাধারণ উপাদান।
একটি ফিড লেআউট প্রায় যেকোনো আকারের ডিসপ্লে সমর্থন করে কারণ গ্রিডটি একটি একক, স্ক্রলিং কলাম থেকে একাধিক-কলাম স্ক্রলিং কন্টেন্ট ফিডে অভিযোজিত হতে পারে।
ফিডগুলি বিশেষ করে সংবাদ এবং সোশ্যাল মিডিয়া অ্যাপের জন্য উপযুক্ত।
বাস্তবায়ন
একটি ফিডে একটি গ্রিডে রাখা উল্লম্ব স্ক্রোলিং কন্টেনারে প্রচুর পরিমাণে বিষয়বস্তু উপাদান থাকে। অলস তালিকাগুলি দক্ষতার সাথে কলাম বা সারিগুলিতে প্রচুর পরিমাণে আইটেম রেন্ডার করে। অলস গ্রিডগুলি গ্রিডে আইটেমগুলিকে রেন্ডার করে, আইটেমের আকার এবং স্প্যানগুলির কনফিগারেশন সমর্থন করে৷
গ্রিড আইটেমগুলির জন্য ন্যূনতম অনুমোদিত প্রস্থ সেট করতে উপলব্ধ প্রদর্শন এলাকার উপর ভিত্তি করে গ্রিড বিন্যাসের কলামগুলি কনফিগার করুন৷ গ্রিড আইটেম সংজ্ঞায়িত করার সময়, কিছু আইটেম অন্যদের উপর জোর দিতে কলাম স্প্যান সামঞ্জস্য করুন।
সেকশন হেডার, ডিভাইডার বা ফিডের সম্পূর্ণ প্রস্থ দখল করার জন্য ডিজাইন করা অন্যান্য আইটেমগুলির জন্য, লেআউটের সম্পূর্ণ প্রস্থ নিতে maxLineSpan ব্যবহার করুন।
কমপ্যাক্ট-প্রস্থ ডিসপ্লেতে যেখানে একাধিক কলাম দেখানোর জন্য পর্যাপ্ত স্থান নেই, LazyVerticalGrid ঠিক একটি LazyColumn মতো আচরণ করে।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ ফিড দেখুন।
,একটি ফিডে একটি গ্রিডে রাখা উল্লম্ব স্ক্রোলিং কন্টেনারে প্রচুর পরিমাণে বিষয়বস্তু উপাদান থাকে। অলস তালিকাগুলি দক্ষতার সাথে কলাম বা সারিগুলিতে প্রচুর পরিমাণে আইটেম রেন্ডার করে। অলস গ্রিডগুলি গ্রিডে আইটেমগুলিকে রেন্ডার করে, আইটেমের আকার এবং স্প্যানগুলির কনফিগারেশন সমর্থন করে৷
গ্রিড আইটেমগুলির জন্য ন্যূনতম অনুমোদিত প্রস্থ সেট করতে উপলব্ধ প্রদর্শন এলাকার উপর ভিত্তি করে গ্রিড বিন্যাসের কলামগুলি কনফিগার করুন৷ গ্রিড আইটেম সংজ্ঞায়িত করার সময়, কিছু আইটেম অন্যদের উপর জোর দিতে কলাম স্প্যান সামঞ্জস্য করুন।
সেকশন হেডার, ডিভাইডার বা ফিডের সম্পূর্ণ প্রস্থ দখল করার জন্য ডিজাইন করা অন্যান্য আইটেমগুলির জন্য, লেআউটের সম্পূর্ণ প্রস্থ নিতে maxLineSpan ব্যবহার করুন।
কমপ্যাক্ট-প্রস্থ ডিসপ্লেতে যেখানে একাধিক কলাম দেখানোর জন্য পর্যাপ্ত স্থান নেই, LazyVerticalGrid ঠিক একটি LazyColumn মতো আচরণ করে।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ ফিড দেখুন।
সাপোর্টিং ফলক
সাপোর্টিং প্যান লেআউট অ্যাপের কন্টেন্টকে প্রাথমিক এবং মাধ্যমিক প্রদর্শন এলাকায় সংগঠিত করে।
প্রাথমিক প্রদর্শন এলাকাটি অ্যাপ উইন্ডোর বেশিরভাগ অংশ দখল করে (সাধারণত প্রায় দুই-তৃতীয়াংশ) এবং এতে মূল বিষয়বস্তু থাকে। সেকেন্ডারি প্রদর্শন এলাকাটি হল একটি ফলক যা অ্যাপ উইন্ডোর বাকি অংশ দখল করে এবং মূল বিষয়বস্তুকে সমর্থন করে এমন সামগ্রী উপস্থাপন করে।
ল্যান্ডস্কেপ ওরিয়েন্টেশনে সম্প্রসারিত-প্রস্থের ডিসপ্লেতে ( উইন্ডো আকারের ক্লাস ব্যবহার করুন দেখুন) সাপোর্টিং প্যান লেআউটগুলি ভালো কাজ করে। মাঝারি বা কমপ্যাক্ট-প্রস্থের ডিসপ্লেগুলি প্রাথমিক এবং মাধ্যমিক উভয় ডিসপ্লে এলাকা দেখানো সমর্থন করে যদি বিষয়বস্তু সংকীর্ণ ডিসপ্লে স্পেসের সাথে খাপ খাইয়ে নেওয়া যায়, অথবা অতিরিক্ত বিষয়বস্তু প্রাথমিকভাবে নীচে বা পাশের শীটে লুকানো যেতে পারে যা মেনু বা বোতামের মতো নিয়ন্ত্রণের মাধ্যমে অ্যাক্সেসযোগ্য।
একটি সাপোর্টিং প্যান লেআউট প্রাথমিক এবং গৌণ কন্টেন্টের সম্পর্কের ক্ষেত্রে একটি তালিকা-বিস্তারিত লেআউট থেকে আলাদা। গৌণ প্যান কন্টেন্ট শুধুমাত্র প্রাথমিক কন্টেন্টের সাথে সম্পর্কিত অর্থবহ; উদাহরণস্বরূপ, একটি সাপোর্টিং প্যান টুল উইন্ডো নিজেই অপ্রাসঙ্গিক। তবে, একটি তালিকা-বিস্তারিত লেআউটের বিশদ প্যানে সম্পূরক কন্টেন্ট প্রাথমিক কন্টেন্ট ছাড়াই অর্থবহ, উদাহরণস্বরূপ, একটি পণ্য তালিকা থেকে একটি পণ্যের বর্ণনা।
সাপোর্টিং প্যানের ব্যবহারের ক্ষেত্রে অন্তর্ভুক্ত:
- উৎপাদনশীলতা অ্যাপ: একটি ডকুমেন্ট বা স্প্রেডশিট যার সাথে একটি সাপোর্টিং প্যানে পর্যালোচকের মন্তব্য থাকবে।
- মিডিয়া অ্যাপস: একটি স্ট্রিমিং ভিডিও যা একটি সাপোর্টিং প্যানে সম্পর্কিত ভিডিওর তালিকা দ্বারা পরিপূরক , অথবা একটি প্লেলিস্টের সাথে সম্পূরক সঙ্গীতের অ্যালবামের চিত্রণ।
- টুলস এবং সেটিংস: একটি মিডিয়া এডিটিং টুল যেখানে প্যালেট, ইফেক্ট এবং অন্যান্য সেটিংস একটি সাপোর্ট প্যানে থাকে।
বাস্তবায়ন
কম্পোজ উইন্ডো সাইজ ক্লাস লজিক সমর্থন করে, যা আপনাকে একই সময়ে প্রধান বিষয়বস্তু এবং সমর্থনকারী বিষয়বস্তু উভয়ই দেখাতে হবে বা একটি বিকল্প স্থানে সমর্থনকারী সামগ্রী স্থাপন করতে হবে কিনা তা নির্ধারণ করতে সক্ষম করে।
বর্তমান উইন্ডো সাইজ ক্লাস এবং মূল বিষয়বস্তু এবং সমর্থনকারী সামগ্রীতে ডেটা সম্পর্কিত তথ্য সহ সমস্ত অবস্থা উত্তোলন করুন।
কমপ্যাক্ট-প্রস্থ প্রদর্শনের জন্য, প্রধান বিষয়বস্তুর নীচে বা নীচের শীটের ভিতরে সহায়ক সামগ্রী রাখুন৷ মাঝারি এবং প্রসারিত প্রস্থের জন্য, উপলভ্য বিষয়বস্তু এবং স্থানের উপর ভিত্তি করে সঠিকভাবে মাপের মূল বিষয়বস্তুর পাশে সহায়ক সামগ্রী রাখুন। মাঝারি প্রস্থের জন্য, প্রধান এবং সমর্থনকারী সামগ্রীর মধ্যে সমানভাবে ডিসপ্লে স্পেস বিভক্ত করুন। প্রসারিত প্রস্থের জন্য, মূল বিষয়বস্তুতে 70% স্থান দিন, সমর্থনকারী সামগ্রীতে 30%।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ সমর্থনকারী ফলকটি দেখুন।
,কম্পোজ উইন্ডো সাইজ ক্লাস লজিক সমর্থন করে, যা আপনাকে একই সময়ে প্রধান বিষয়বস্তু এবং সমর্থনকারী বিষয়বস্তু উভয়ই দেখাতে হবে বা একটি বিকল্প স্থানে সমর্থনকারী সামগ্রী স্থাপন করতে হবে কিনা তা নির্ধারণ করতে সক্ষম করে।
বর্তমান উইন্ডো সাইজ ক্লাস এবং মূল বিষয়বস্তু এবং সমর্থনকারী সামগ্রীতে ডেটা সম্পর্কিত তথ্য সহ সমস্ত অবস্থা উত্তোলন করুন।
কমপ্যাক্ট-প্রস্থ প্রদর্শনের জন্য, প্রধান বিষয়বস্তুর নীচে বা নীচের শীটের ভিতরে সহায়ক সামগ্রী রাখুন৷ মাঝারি এবং প্রসারিত প্রস্থের জন্য, উপলভ্য বিষয়বস্তু এবং স্থানের উপর ভিত্তি করে সঠিকভাবে মাপের মূল বিষয়বস্তুর পাশে সহায়ক সামগ্রী রাখুন। মাঝারি প্রস্থের জন্য, প্রধান এবং সমর্থনকারী সামগ্রীর মধ্যে সমানভাবে ডিসপ্লে স্পেস বিভক্ত করুন। প্রসারিত প্রস্থের জন্য, মূল বিষয়বস্তুতে 70% স্থান দিন, সমর্থনকারী সামগ্রীতে 30%।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ সমর্থনকারী ফলকটি দেখুন।
অতিরিক্ত সম্পদ
- মেটেরিয়াল ডিজাইন — ক্যানোনিকাল লেআউট
ক্যানোনিকাল লেআউটগুলি প্রমাণিত, বহুমুখী লেআউট যা বিভিন্ন ফর্ম ফ্যাক্টরের উপর সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।
ক্যানোনিকাল লেআউটগুলি ছোট স্ক্রিনের ফোনের পাশাপাশি ট্যাবলেট, ফোল্ডেবল এবং ChromeOS ডিভাইসগুলিকেও সমর্থন করে। মেটেরিয়াল ডিজাইন নির্দেশিকা থেকে প্রাপ্ত, লেআউটগুলি নান্দনিক এবং কার্যকরী উভয়ই।
অ্যান্ড্রয়েড ফ্রেমওয়ার্কে বিশেষায়িত উপাদান রয়েছে যা লেআউটগুলির বাস্তবায়নকে সহজ এবং নির্ভরযোগ্য করে তোলে।
ক্যানোনিকাল লেআউটগুলি আকর্ষণীয়, উৎপাদনশীলতা-বর্ধক UI তৈরি করে যা দুর্দান্ত অ্যাপগুলির ভিত্তি তৈরি করে।
তালিকা-বিস্তারিত
তালিকা-বিস্তারিত লেআউট ব্যবহারকারীদের বর্ণনামূলক, ব্যাখ্যামূলক, বা অন্যান্য সম্পূরক তথ্য - আইটেমের বিবরণ - সহ আইটেমের তালিকা অন্বেষণ করতে সক্ষম করে।
লেআউটটি অ্যাপ উইন্ডোটিকে দুটি পাশাপাশি দুটি প্যানে বিভক্ত করে: একটি তালিকার জন্য, একটি বিশদের জন্য। ব্যবহারকারীরা আইটেমের বিশদ প্রদর্শনের জন্য তালিকা থেকে আইটেম নির্বাচন করেন। বিশদের মধ্যে থাকা ডিপ লিঙ্কগুলি বিশদের প্যানে অতিরিক্ত সামগ্রী প্রকাশ করে।
প্রসারিত-প্রস্থ প্রদর্শন ( উইন্ডো আকারের ক্লাস ব্যবহার করুন দেখুন) একই সাথে তালিকা এবং বিশদ উভয়কেই সমন্বিত করে। একটি তালিকা আইটেম নির্বাচন নির্বাচিত আইটেমের জন্য সম্পর্কিত সামগ্রী দেখানোর জন্য বিশদ ফলক আপডেট করে।
মাঝারি এবং কমপ্যাক্ট-প্রস্থের ডিসপ্লেগুলি অ্যাপের সাথে ব্যবহারকারীর মিথস্ক্রিয়ার উপর নির্ভর করে তালিকা বা বিশদ প্রদর্শন করে। যখন কেবল তালিকাটি দৃশ্যমান হয়, তখন তালিকার আইটেম নির্বাচন করলে তালিকার পরিবর্তে বিশদ প্রদর্শন করা হয়। যখন কেবল বিশদটি দৃশ্যমান হয়, তখন পিছনের বোতাম টিপলে তালিকাটি পুনরায় প্রদর্শিত হয়।
ডিভাইসের ওরিয়েন্টেশন পরিবর্তন বা অ্যাপ উইন্ডোর আকার পরিবর্তনের মতো কনফিগারেশন পরিবর্তনগুলি ডিসপ্লের উইন্ডোর আকারের শ্রেণী পরিবর্তন করতে পারে। একটি তালিকা-বিস্তারিত লেআউট সেই অনুযায়ী সাড়া দেয়, অ্যাপের অবস্থা সংরক্ষণ করে:
- যদি একটি বর্ধিত-প্রস্থের ডিসপ্লে যেখানে তালিকা এবং বিস্তারিত উভয় প্যানেল দেখানো হয়, তা মাঝারি বা কম্প্যাক্টে সংকুচিত হয়, তাহলে বিস্তারিত প্যানেলটি দৃশ্যমান থাকে এবং তালিকা প্যানেলটি লুকানো থাকে।
- যদি একটি মাঝারি বা কমপ্যাক্ট-প্রস্থের ডিসপ্লেতে কেবল বিস্তারিত ফলকটি দৃশ্যমান হয় এবং উইন্ডো আকারের শ্রেণীটি প্রসারিত করার জন্য প্রশস্ত হয়, তাহলে তালিকা এবং বিস্তারিত একসাথে দেখানো হয় এবং তালিকাটি নির্দেশ করে যে বিস্তারিত ফলকের বিষয়বস্তুর সাথে সম্পর্কিত আইটেমটি নির্বাচন করা হয়েছে।
- যদি একটি মাঝারি বা কমপ্যাক্ট-প্রস্থের ডিসপ্লেতে কেবল তালিকার ফলকটি দৃশ্যমান হয় এবং প্রসারিত করার জন্য প্রশস্ত হয়, তাহলে তালিকা এবং একটি স্থানধারক বিশদ ফলক একসাথে দেখানো হয়।
তালিকা-বিস্তারিত মেসেজিং অ্যাপ , যোগাযোগ ব্যবস্থাপক , ইন্টারেক্টিভ মিডিয়া ব্রাউজার বা যেকোনো অ্যাপের জন্য আদর্শ যেখানে বিষয়বস্তু অতিরিক্ত তথ্য প্রকাশ করে এমন আইটেমের তালিকা হিসাবে সংগঠিত করা যেতে পারে।
বাস্তবায়ন
কম্পোজের ঘোষণামূলক দৃষ্টান্ত উইন্ডো আকারের ক্লাস লজিককে সমর্থন করে যা একই সময়ে তালিকা এবং বিস্তারিত প্যানগুলি দেখাবে কিনা তা নির্ধারণ করে (যখন প্রস্থ উইন্ডো আকারের শ্রেণী প্রসারিত হয়) বা শুধুমাত্র তালিকা বা বিস্তারিত ফলক (যখন প্রস্থ উইন্ডো আকারের শ্রেণীটি মাঝারি হয়) বা কমপ্যাক্ট)।
একমুখী ডেটা প্রবাহ নিশ্চিত করতে, বর্তমান উইন্ডো আকারের শ্রেণী এবং নির্বাচিত তালিকা আইটেমের বিশদ (যদি থাকে) সহ সমস্ত স্থিতি উত্তোলন করুন , যাতে সমস্ত কম্পোজেবলের ডেটাতে অ্যাক্সেস থাকে এবং সঠিকভাবে রেন্ডার করতে পারে।
ছোট উইন্ডো আকারে শুধুমাত্র বিস্তারিত ফলক দেখানোর সময়, বিস্তারিত ফলকটি সরাতে একটি BackHandler যোগ করুন এবং শুধুমাত্র তালিকা ফলকটি প্রদর্শন করুন। BackHandler সামগ্রিক অ্যাপ নেভিগেশনের অংশ নয় কারণ হ্যান্ডলারটি উইন্ডো আকারের শ্রেণী এবং নির্বাচিত বিশদ অবস্থার উপর নির্ভরশীল।
একটি উদাহরণ বাস্তবায়নের জন্য, রচনা নমুনা সহ তালিকা-বিশদ দেখুন।
,কম্পোজের ঘোষণামূলক দৃষ্টান্ত উইন্ডো আকারের ক্লাস লজিককে সমর্থন করে যা একই সময়ে তালিকা এবং বিস্তারিত প্যানগুলি দেখাবে কিনা তা নির্ধারণ করে (যখন প্রস্থ উইন্ডো আকারের শ্রেণী প্রসারিত হয়) বা শুধুমাত্র তালিকা বা বিস্তারিত ফলক (যখন প্রস্থ উইন্ডো আকারের শ্রেণীটি মাঝারি হয়) বা কমপ্যাক্ট)।
একমুখী ডেটা প্রবাহ নিশ্চিত করতে, বর্তমান উইন্ডো আকারের শ্রেণী এবং নির্বাচিত তালিকা আইটেমের বিশদ (যদি থাকে) সহ সমস্ত স্থিতি উত্তোলন করুন , যাতে সমস্ত কম্পোজেবলের ডেটাতে অ্যাক্সেস থাকে এবং সঠিকভাবে রেন্ডার করতে পারে।
ছোট উইন্ডো আকারে শুধুমাত্র বিস্তারিত ফলক দেখানোর সময়, বিস্তারিত ফলকটি সরাতে একটি BackHandler যোগ করুন এবং শুধুমাত্র তালিকা ফলকটি প্রদর্শন করুন। BackHandler সামগ্রিক অ্যাপ নেভিগেশনের অংশ নয় কারণ হ্যান্ডলারটি উইন্ডো আকারের শ্রেণী এবং নির্বাচিত বিশদ অবস্থার উপর নির্ভরশীল।
একটি উদাহরণ বাস্তবায়নের জন্য, রচনা নমুনা সহ তালিকা-বিশদ দেখুন।
খাওয়ান
একটি ফিড লেআউট একটি কনফিগারযোগ্য গ্রিডে সমতুল্য কন্টেন্ট উপাদানগুলিকে সাজিয়ে রাখে যাতে প্রচুর পরিমাণে কন্টেন্ট দ্রুত এবং সুবিধাজনকভাবে দেখা যায়।
আকার এবং অবস্থান বিষয়বস্তুর উপাদানগুলির মধ্যে সম্পর্ক স্থাপন করে।
উপাদানগুলিকে একই আকারে তৈরি করে এবং তাদের একসাথে স্থাপন করে কন্টেন্ট গ্রুপ তৈরি করা হয়। উপাদানগুলিকে কাছাকাছি উপাদানগুলির চেয়ে বড় করে তাদের প্রতি দৃষ্টি আকর্ষণ করা হয়।
কার্ড এবং তালিকা হল ফিড লেআউটের সাধারণ উপাদান।
একটি ফিড লেআউট প্রায় যেকোনো আকারের ডিসপ্লে সমর্থন করে কারণ গ্রিডটি একটি একক, স্ক্রলিং কলাম থেকে একাধিক-কলাম স্ক্রলিং কন্টেন্ট ফিডে অভিযোজিত হতে পারে।
ফিডগুলি বিশেষ করে সংবাদ এবং সোশ্যাল মিডিয়া অ্যাপের জন্য উপযুক্ত।
বাস্তবায়ন
একটি ফিডে একটি গ্রিডে রাখা উল্লম্ব স্ক্রোলিং কন্টেনারে প্রচুর পরিমাণে বিষয়বস্তু উপাদান থাকে। অলস তালিকাগুলি দক্ষতার সাথে কলাম বা সারিগুলিতে প্রচুর পরিমাণে আইটেম রেন্ডার করে। অলস গ্রিডগুলি গ্রিডে আইটেমগুলিকে রেন্ডার করে, আইটেমের আকার এবং স্প্যানগুলির কনফিগারেশন সমর্থন করে৷
গ্রিড আইটেমগুলির জন্য ন্যূনতম অনুমোদিত প্রস্থ সেট করতে উপলব্ধ প্রদর্শন এলাকার উপর ভিত্তি করে গ্রিড বিন্যাসের কলামগুলি কনফিগার করুন৷ গ্রিড আইটেম সংজ্ঞায়িত করার সময়, কিছু আইটেম অন্যদের উপর জোর দিতে কলাম স্প্যান সামঞ্জস্য করুন।
সেকশন হেডার, ডিভাইডার বা ফিডের সম্পূর্ণ প্রস্থ দখল করার জন্য ডিজাইন করা অন্যান্য আইটেমগুলির জন্য, লেআউটের সম্পূর্ণ প্রস্থ নিতে maxLineSpan ব্যবহার করুন।
কমপ্যাক্ট-প্রস্থ ডিসপ্লেতে যেখানে একাধিক কলাম দেখানোর জন্য পর্যাপ্ত স্থান নেই, LazyVerticalGrid ঠিক একটি LazyColumn মতো আচরণ করে।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ ফিড দেখুন।
,একটি ফিডে একটি গ্রিডে রাখা উল্লম্ব স্ক্রোলিং কন্টেনারে প্রচুর পরিমাণে বিষয়বস্তু উপাদান থাকে। অলস তালিকাগুলি দক্ষতার সাথে কলাম বা সারিগুলিতে প্রচুর পরিমাণে আইটেম রেন্ডার করে। অলস গ্রিডগুলি গ্রিডে আইটেমগুলিকে রেন্ডার করে, আইটেমের আকার এবং স্প্যানগুলির কনফিগারেশন সমর্থন করে৷
গ্রিড আইটেমগুলির জন্য ন্যূনতম অনুমোদিত প্রস্থ সেট করতে উপলব্ধ প্রদর্শন এলাকার উপর ভিত্তি করে গ্রিড বিন্যাসের কলামগুলি কনফিগার করুন৷ গ্রিড আইটেম সংজ্ঞায়িত করার সময়, কিছু আইটেম অন্যদের উপর জোর দিতে কলাম স্প্যান সামঞ্জস্য করুন।
সেকশন হেডার, ডিভাইডার বা ফিডের সম্পূর্ণ প্রস্থ দখল করার জন্য ডিজাইন করা অন্যান্য আইটেমগুলির জন্য, লেআউটের সম্পূর্ণ প্রস্থ নিতে maxLineSpan ব্যবহার করুন।
কমপ্যাক্ট-প্রস্থ ডিসপ্লেতে যেখানে একাধিক কলাম দেখানোর জন্য পর্যাপ্ত স্থান নেই, LazyVerticalGrid ঠিক একটি LazyColumn মতো আচরণ করে।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ ফিড দেখুন।
সাপোর্টিং ফলক
সাপোর্টিং প্যান লেআউট অ্যাপের কন্টেন্টকে প্রাথমিক এবং মাধ্যমিক প্রদর্শন এলাকায় সংগঠিত করে।
প্রাথমিক প্রদর্শন এলাকাটি অ্যাপ উইন্ডোর বেশিরভাগ অংশ দখল করে (সাধারণত প্রায় দুই-তৃতীয়াংশ) এবং এতে মূল বিষয়বস্তু থাকে। সেকেন্ডারি প্রদর্শন এলাকাটি হল একটি ফলক যা অ্যাপ উইন্ডোর বাকি অংশ দখল করে এবং মূল বিষয়বস্তুকে সমর্থন করে এমন সামগ্রী উপস্থাপন করে।
ল্যান্ডস্কেপ ওরিয়েন্টেশনে সম্প্রসারিত-প্রস্থের ডিসপ্লেতে ( উইন্ডো আকারের ক্লাস ব্যবহার করুন দেখুন) সাপোর্টিং প্যান লেআউটগুলি ভালো কাজ করে। মাঝারি বা কমপ্যাক্ট-প্রস্থের ডিসপ্লেগুলি প্রাথমিক এবং মাধ্যমিক উভয় ডিসপ্লে এলাকা দেখানো সমর্থন করে যদি বিষয়বস্তু সংকীর্ণ ডিসপ্লে স্পেসের সাথে খাপ খাইয়ে নেওয়া যায়, অথবা অতিরিক্ত বিষয়বস্তু প্রাথমিকভাবে নীচে বা পাশের শীটে লুকানো যেতে পারে যা মেনু বা বোতামের মতো নিয়ন্ত্রণের মাধ্যমে অ্যাক্সেসযোগ্য।
একটি সাপোর্টিং প্যান লেআউট প্রাথমিক এবং গৌণ কন্টেন্টের সম্পর্কের ক্ষেত্রে একটি তালিকা-বিস্তারিত লেআউট থেকে আলাদা। গৌণ প্যান কন্টেন্ট শুধুমাত্র প্রাথমিক কন্টেন্টের সাথে সম্পর্কিত অর্থবহ; উদাহরণস্বরূপ, একটি সাপোর্টিং প্যান টুল উইন্ডো নিজেই অপ্রাসঙ্গিক। তবে, একটি তালিকা-বিস্তারিত লেআউটের বিশদ প্যানে সম্পূরক কন্টেন্ট প্রাথমিক কন্টেন্ট ছাড়াই অর্থবহ, উদাহরণস্বরূপ, একটি পণ্য তালিকা থেকে একটি পণ্যের বর্ণনা।
সাপোর্টিং প্যানের ব্যবহারের ক্ষেত্রে অন্তর্ভুক্ত:
- উৎপাদনশীলতা অ্যাপ: একটি ডকুমেন্ট বা স্প্রেডশিট যার সাথে একটি সাপোর্টিং প্যানে পর্যালোচকের মন্তব্য থাকবে।
- মিডিয়া অ্যাপস: একটি স্ট্রিমিং ভিডিও যা একটি সাপোর্টিং প্যানে সম্পর্কিত ভিডিওর তালিকা দ্বারা পরিপূরক , অথবা একটি প্লেলিস্টের সাথে সম্পূরক সঙ্গীতের অ্যালবামের চিত্রণ।
- টুলস এবং সেটিংস: একটি মিডিয়া এডিটিং টুল যেখানে প্যালেট, ইফেক্ট এবং অন্যান্য সেটিংস একটি সাপোর্ট প্যানে থাকে।
বাস্তবায়ন
কম্পোজ উইন্ডো সাইজ ক্লাস লজিক সমর্থন করে, যা আপনাকে একই সময়ে প্রধান বিষয়বস্তু এবং সমর্থনকারী বিষয়বস্তু উভয়ই দেখাতে হবে বা একটি বিকল্প স্থানে সমর্থনকারী সামগ্রী স্থাপন করতে হবে কিনা তা নির্ধারণ করতে সক্ষম করে।
বর্তমান উইন্ডো সাইজ ক্লাস এবং মূল বিষয়বস্তু এবং সমর্থনকারী সামগ্রীতে ডেটা সম্পর্কিত তথ্য সহ সমস্ত অবস্থা উত্তোলন করুন।
কমপ্যাক্ট-প্রস্থ প্রদর্শনের জন্য, প্রধান বিষয়বস্তুর নীচে বা নীচের শীটের ভিতরে সহায়ক সামগ্রী রাখুন৷ মাঝারি এবং প্রসারিত প্রস্থের জন্য, উপলভ্য বিষয়বস্তু এবং স্থানের উপর ভিত্তি করে সঠিকভাবে মাপের মূল বিষয়বস্তুর পাশে সহায়ক সামগ্রী রাখুন। মাঝারি প্রস্থের জন্য, প্রধান এবং সমর্থনকারী সামগ্রীর মধ্যে সমানভাবে ডিসপ্লে স্পেস বিভক্ত করুন। প্রসারিত প্রস্থের জন্য, মূল বিষয়বস্তুতে 70% স্থান দিন, সমর্থনকারী সামগ্রীতে 30%।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ সমর্থনকারী ফলকটি দেখুন।
,কম্পোজ উইন্ডো সাইজ ক্লাস লজিক সমর্থন করে, যা আপনাকে একই সময়ে প্রধান বিষয়বস্তু এবং সমর্থনকারী বিষয়বস্তু উভয়ই দেখাতে হবে বা একটি বিকল্প স্থানে সমর্থনকারী সামগ্রী স্থাপন করতে হবে কিনা তা নির্ধারণ করতে সক্ষম করে।
বর্তমান উইন্ডো সাইজ ক্লাস এবং মূল বিষয়বস্তু এবং সমর্থনকারী সামগ্রীতে ডেটা সম্পর্কিত তথ্য সহ সমস্ত অবস্থা উত্তোলন করুন।
কমপ্যাক্ট-প্রস্থ প্রদর্শনের জন্য, প্রধান বিষয়বস্তুর নীচে বা নীচের শীটের ভিতরে সহায়ক সামগ্রী রাখুন৷ মাঝারি এবং প্রসারিত প্রস্থের জন্য, উপলভ্য বিষয়বস্তু এবং স্থানের উপর ভিত্তি করে সঠিকভাবে মাপের মূল বিষয়বস্তুর পাশে সহায়ক সামগ্রী রাখুন। মাঝারি প্রস্থের জন্য, প্রধান এবং সমর্থনকারী সামগ্রীর মধ্যে সমানভাবে ডিসপ্লে স্পেস বিভক্ত করুন। প্রসারিত প্রস্থের জন্য, মূল বিষয়বস্তুতে 70% স্থান দিন, সমর্থনকারী সামগ্রীতে 30%।
একটি উদাহরণ বাস্তবায়নের জন্য, কম্পোজ নমুনা সহ সমর্থনকারী ফলকটি দেখুন।
অতিরিক্ত সম্পদ
- মেটেরিয়াল ডিজাইন — ক্যানোনিকাল লেআউট