লেআউট বেসিক

একটি লেআউট আপনার অ্যাপের সাথে ইন্টারফেস করার জন্য ব্যবহারকারীর ভিজ্যুয়াল কাঠামোকে সংজ্ঞায়িত করে, যেমন একটি কার্যকলাপে। অ্যান্ড্রয়েড বিভিন্ন লাইব্রেরি, ক্যানোনিকাল স্টার্টিং পয়েন্ট এবং কন্টেন্ট প্রদর্শন ও অবস্থানের কৌশল প্রদান করে।

Takeaways

• Honor ডিভাইস নিরাপদ এলাকা, যার মধ্যে UI এর কিছু অংশ যেমন ডিসপ্লে কাটআউট, এজ-টু-এজ ইনসেট, এজ ডিসপ্লে, সফ্টওয়্যার কীবোর্ড এবং সিস্টেম বার রয়েছে।

• করুন: ব্যবহারকারীদের কীবোর্ডের সাথে ইন্টারঅ্যাক্ট করার জন্য একটি নমনীয় লেআউট প্রদান করুন।

• প্রাইমারি নেভিগেশনের মতো প্রয়োজনীয় মিথস্ক্রিয়াগুলি একটি পৌঁছানোর যোগ্য স্ক্রীন এলাকায় রাখুন৷

  

• বিষয়বস্তু এবং কর্মের মাধ্যমে ব্যবহারকারীকে গাইড করতে গোষ্ঠী সম্পর্কিত বিষয়বস্তুতে কন্টেনমেন্ট ব্যবহার করুন।

  

• অনুরূপ সামগ্রী এবং UI উপাদানগুলির মধ্যে সামঞ্জস্যপূর্ণ প্রান্তিককরণ প্রদান করুন।

  করবেন না: উপাদানগুলির মতো অসঙ্গতিপূর্ণ ব্যবধানের দ্বারা পঠনযোগ্যতা ব্যাহত করুন, যা ডিজাইনগুলিকে এলোমেলো দেখাতে পারে৷

  করুন: অনুরূপ উপাদানগুলির মধ্যে সামঞ্জস্যপূর্ণ ব্যবধান স্থাপন করুন।

  

• পোর্ট্রেট বা আদর্শ লেআউটে আটকে থাকবেন না: ব্যবহারকারীদের সম্মুখীন হতে পারে এমন বিভিন্ন আকৃতির অনুপাত, আকারের শ্রেণী এবং রেজোলিউশন বিবেচনা করুন।

• প্রতি ভিউতে অনেক বেশি অ্যাকশন দিয়ে আপনার ব্যবহারকারীকে অভিভূত করবেন না।

• কাস্টম লেআউট তৈরি করার সময়, সারিবদ্ধকরণ, সীমাবদ্ধতা বা মাধ্যাকর্ষণ পদ ব্যবহার করে লেআউটের মধ্যে বিষয়বস্তু কীভাবে বসতে হবে তা নোট করুন। সঠিকভাবে প্রদর্শন করার জন্য চিত্রগুলি তাদের কন্টেইনারে কীভাবে প্রতিক্রিয়া জানাতে হবে তা অন্তর্ভুক্ত করুন।

একটি সাধারণ অ্যান্ড্রয়েড অ্যাপ স্ক্রিনের অংশ

বেশিরভাগ অ্যান্ড্রয়েড অ্যাপ্লিকেশানগুলি সিস্টেম বার , নেভিগেশন এলাকা এবং বডি হিসাবে উল্লেখ করা অঞ্চলগুলি নিয়ে গঠিত৷

সিস্টেম বার

স্ট্যাটাস বার এবং নেভিগেশন বার - একত্রে সিস্টেম বার নামে পরিচিত - ব্যাটারি স্তর, সময় এবং বিজ্ঞপ্তি সতর্কতার মতো গুরুত্বপূর্ণ তথ্য প্রদর্শন করে এবং যেকোনো জায়গা থেকে সরাসরি ডিভাইসের মিথস্ক্রিয়া প্রদান করে। সিস্টেম বার সম্পর্কে আরও পড়ুন।

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

একটি শীর্ষ স্তর হিসাবে বার যোগ করুন. আপনার অ্যাপের থিমে সিস্টেম বারে রঙ প্রয়োগ করতে android:navigationBarColor এবং android:statusBarColor ব্যবহার করুন।

নেভিগেশন অঞ্চল

নেভিগেশন বিভিন্ন সুযোগ-সুবিধার প্রতিনিধিত্ব করে যা একজন ব্যবহারকারীকে আপনার অ্যাপের মধ্যে নেভিগেট করতে, গুরুত্বপূর্ণ অ্যাকশন অ্যাক্সেস করতে বা Android প্ল্যাটফর্ম জুড়ে অনুমতি দেয়।

শরীরের অঞ্চল

শরীরের অঞ্চল পর্দার বিষয়বস্তু ধারণ করে। বডি কন্টেন্ট অতিরিক্ত গ্রুপিং এবং লেআউট প্যারামিটার দিয়ে গঠিত। এটি অবশ্যই নেভিগেশন এবং সিস্টেম বার অঞ্চলের অধীনে চলতে হবে।

এজ-টু-এজ ইনসেটের জন্য WindowCompat.setDecorFitsSystemWindows(window, false) ঘোষণা করুন।

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

বিষয়বস্তু রচনা এবং গঠন

আপনার বিষয়বস্তুর জন্য একটি কাঠামো এবং নিয়ন্ত্রণ পদ্ধতি সহ একটি নমনীয় প্রবাহ এবং ছন্দ তৈরি করুন।

ভিত্তি গঠন: ভিজ্যুয়াল গার্ডেলের জন্য মার্জিন এবং কলাম ব্যবহার করুন

সামঞ্জস্যপূর্ণ গার্ডেলের সাথে একটি শক্ত কাঠামো তৈরি করা শুরু করতে, আপনার লেআউটে মার্জিন এবং কলাম যোগ করুন।

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

আপনি এই ধাপে ইনসেট নিরাপদ অঞ্চল বা ইনসেট নিশ্চিত করতে পারেন। সিস্টেম বার ইনসেটগুলি গুরুত্বপূর্ণ অ্যাকশনগুলিকে সিস্টেম বারগুলির অধীনে পড়া থেকে বাধা দেয়। বিস্তারিত জানার জন্য সিস্টেম বারের পিছনে আপনার সামগ্রী আঁকুন দেখুন।

সামঞ্জস্যপূর্ণ প্রান্তিককরণের জন্য একটি নমনীয় গ্রিড কাঠামো তৈরি করতে এবং বডি এলাকার মধ্যে বিষয়বস্তু ভাগ করে একটি লেআউটে উল্লম্ব সংজ্ঞা প্রদান করতে কলামগুলি ব্যবহার করুন৷ বিষয়বস্তু কলাম ধারণকারী পর্দার এলাকায় যায়. এই কলামগুলি আপনার লেআউটে কাঠামোকে ধার দেয়, উপাদানগুলি সাজানোর জন্য সুবিধাজনক কাঠামো প্রদান করে।

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

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

দৃশ্যত উপাদানগুলিকে গ্রুপ করতে কন্টেনমেন্ট ব্যবহার করুন

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

আপনি বিষয়বস্তুর মাধ্যমে ব্যবহারকারীকে গাইড করতে সাহায্য করার জন্য সাদা স্থান বা দৃশ্যমান বিভাজনের সাথে অনুরূপ আইটেমগুলিকে একত্রিত করতে পারেন।

অন্তর্নিহিত কন্টেনমেন্ট কন্টেইনার সীমানা তৈরি করার জন্য দৃশ্যত বিষয়বস্তুকে গোষ্ঠীভুক্ত করতে সাদা স্থান ব্যবহার করে যখন স্পষ্ট কন্টেনমেন্ট সামগ্রীকে একসাথে গোষ্ঠীভুক্ত করতে বিভাজক লাইন এবং কার্ডের মতো বস্তু ব্যবহার করে।

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

বিষয়বস্তুর অবস্থান

অ্যান্ড্রয়েডের নিজ নিজ পাত্রে বিষয়বস্তু উপাদানগুলি পরিচালনা করার একাধিক উপায় রয়েছে যা মাধ্যাকর্ষণ, ব্যবধান এবং স্কেলিং সহ তাদের যথাযথভাবে অবস্থান করতে সহায়তা করতে পারে।

মাধ্যাকর্ষণ নির্দিষ্ট ব্যবহারের ক্ষেত্রে একটি সম্ভাব্য বড় পাত্রের মধ্যে একটি বস্তু স্থাপন করার জন্য একটি মানক। নিচের চিত্রটি অবজেক্টের স্টার্ট এবং সেন্টার ( 1 ), উপরে এবং কেন্দ্র অনুভূমিক ( 2 ), নীচে বাম ( 3 ), এবং শেষ এবং ডান ( 1 ) অবস্থানের উদাহরণ দেখায়।

স্কেলিং

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

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

যে বিষয়বস্তুটি উল্লেখ করা হয়নি তা আপনার প্রত্যাশা বা চাওয়ার চেয়ে ভিন্নভাবে প্রদর্শিত হতে পারে।

পিন করা সামগ্রী

অনেক উপাদান স্লট বা স্ক্যাফোল্ডের সাথে মিথস্ক্রিয়া, স্ক্রলিং এবং অবস্থানের মধ্যে তৈরি করেছে। স্ক্রোলিং-এ প্রতিক্রিয়া দেখানোর পরিবর্তে স্থির থাকার জন্য কিছু উপাদান পরিবর্তন করা যেতে পারে, উদাহরণস্বরূপ ফ্লোটিং অ্যাকশন বোতাম (এফএবি) যেগুলি সমালোচনামূলক কাজ করে।

প্রান্তিককরণ

কাস্টম অ্যালাইনমেন্ট লাইন তৈরি করতে AlignmentLine ব্যবহার করুন, যেটি প্যারেন্ট লেআউট তাদের বাচ্চাদের সারিবদ্ধ করতে এবং অবস্থান করতে ব্যবহার করতে পারে।

করবেন না: উপাদানগুলির মতো অসঙ্গতিপূর্ণ ব্যবধানের দ্বারা পঠনযোগ্যতা ব্যাহত করুন, যা ডিজাইনগুলিকে এলোমেলো দেখাতে পারে৷

করুন: অনুরূপ উপাদানগুলির মধ্যে সামঞ্জস্যপূর্ণ ব্যবধান স্থাপন করুন।

কম্পোনেন্ট লেআউট

উপাদান 3 উপাদান মিথস্ক্রিয়া এবং বিষয়বস্তুর জন্য তাদের নিজস্ব কনফিগারেশন এবং অবস্থা প্রদান করে।

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

লেআউট এবং নেভিগেশন নিদর্শন

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

লেআউট এবং নেভিগেশন পেয়ারিং

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

ন্যাভিগেশন বার একই শ্রেণিবিন্যাস স্তর জুড়ে তিন থেকে পাঁচটি নেভিগেশন গন্তব্য রাখতে পারে। এই উপাদানটি বড় পর্দার জন্য নেভিগেশন রেলে অনুবাদ করে।

যদিও নেভিগেশন ড্রয়ারটি পাঁচটির বেশি নেভিগেশন গন্তব্য ধারণ করতে পারে, তবে কম্প্যাক্ট আকারে শীর্ষ বারে পৌঁছানোর প্রয়োজনের কারণে প্যাটার্নটি নেভিগেশন বারের মতো আদর্শ নয়।

উপাদান 3 ট্যাব এবং নীচের অ্যাপ বার হল সেকেন্ডারি নেভিগেশন প্যাটার্ন যা আপনি প্রাথমিক নেভিগেশন পরিপূরক করতে ব্যবহার করতে পারেন বা শিশুদের ভিউতে দেখাতে পারেন।

লেআউট কর্ম

ব্যবহারকারীদের কর্ম সম্পাদন করতে সক্ষম করার জন্য নিয়ন্ত্রণ প্রদান করুন। সাধারণ নিদর্শনগুলির মধ্যে রয়েছে শীর্ষ বার অ্যাকশন, ফ্লোটিং অ্যাকশন বোতাম (এফএবি), এবং মেনু।

সর্বোচ্চ গুরুত্বের কর্মের জন্য, একটি FAB ব্যবহারকারীর জন্য একটি বড় এবং বিশিষ্ট বোতাম প্রদান করে। এই স্তরে একবারে শুধুমাত্র একটি কাজ প্রদান করুন। একটি FAB একাধিক আকার এবং একটি প্রসারিত আকারে প্রদর্শিত হতে পারে, যার মধ্যে একটি লেবেল রয়েছে। একটি FAB পিন করতে Scaffold ব্যবহার করুন, নিশ্চিত করুন যে এটি সর্বদা স্ক্রোল করলেও দৃশ্যমান হয়।

আপনি উপরের বারের মধ্যে সেকেন্ডারি অ্যাকশন রাখতে পারেন বা, যদি এটি পৃষ্ঠার মধ্যে সম্পর্কিত বিষয়বস্তুর কাছাকাছি গ্রুপ করা হয়।

যেকোন অতিরিক্ত ক্রিয়াগুলির জন্য যা অবিলম্বে বা ঘন ঘন প্রয়োজন হয় না, সেই ক্রিয়াগুলিকে একটি ওভারফ্লো মেনুতে যুক্ত করুন৷

ক্যানোনিকাল লেআউট

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

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

তালিকা-বিশদ বিন্যাস

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

বিষয়বস্তু স্থির বা গতিশীল হতে পারে।

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

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

তালিকা উপাদান এবং চশমা উপর আরো নকশা নির্দেশিকা জন্য উপাদান 3 তালিকা অন্বেষণ.

ফিড লেআউট

একটি ফিড বিন্যাস একটি কনফিগারযোগ্য গ্রিডে সমতুল্য বিষয়বস্তু উপাদানগুলির ব্যবস্থা করে যাতে প্রচুর পরিমাণে সামগ্রী দ্রুত, সুবিধাজনকভাবে দেখার জন্য। ( একটি সংগ্রহে কার্ড ব্যবহার করার জন্য উপাদান 3 নির্দেশিকা দেখুন।) ফিডগুলি তালিকা- বা গ্রিড-ভিত্তিক কনফিগারেশন হতে পারে কমপ্যাক্ট ডিসপ্লেতে, সাধারণত কার্ড বা টাইলগুলিতে। বিষয়বস্তু গতিশীল হতে পারে, যার অর্থ এটি একটি গতিশীল বাহ্যিক উত্স যেমন একটি API থেকে "ফেড ইন" হয়৷

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

আপনি অলস তালিকা বা অলস গ্রিডের সাথে রচনা করুন, বা RecyclerView বা CardView সহ ভিউ-এ একটি ফিড বিন্যাস বাস্তবায়ন করতে পারেন।

সাপোর্টিং প্যান লেআউট

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

নীচের শীটগুলির জন্য M3 নির্দেশিকা সম্পর্কে জানুন।

আপেক্ষিক বিন্যাস

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

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

আপনি অলস সারি এবং অলস কলাম সহ স্ক্রলিং সারি বা কলামে সামগ্রী উপস্থাপন করতে পারেন।

রচনা লেআউট বেসিক সম্পর্কে আরও জানুন এবং একটি কম্পোজযোগ্য কি তৈরি করে।

প্রমাণীকরণ হল একটি সাধারণ আপেক্ষিক বিন্যাস, যা নিম্নলিখিত চিত্রে দেখানো হয়েছে।

পূর্ণ-স্ক্রীন লেআউট হল আরেকটি সাধারণ বিন্যাস, যা ইমারসিভ মোডে ব্যবহৃত হয়।

আপনি যদি রচনার পরিবর্তে ভিউ নিয়ে কাজ করেন, তাহলে আপনি বড় এবং জটিল লেআউটের অনুমতি দিয়ে ভাইবোন ভিউ এবং প্যারেন্ট লেআউটের মধ্যে সম্পর্ক অনুযায়ী ভিউ সাজাতে ConstraintLayout ব্যবহার করতে পারেন। ConstraintLayout আপনাকে লেআউট এডিটর ব্যবহার করে XML সম্পাদনা করার পরিবর্তে টেনে এনে সম্পূর্ণভাবে তৈরি করতে দেয়। লেআউট এডিটর দিয়ে একটি UI নির্মাণ সম্পর্কে আরও জানুন।

লেআউট মানিয়ে নিন

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

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

যদিও প্রতিটি অ্যাপ্লিকেশান প্রতিটি স্ক্রিনের আকারে উপলব্ধ হওয়ার প্রয়োজন নেই, তবে এটি আপনার ব্যবহারকারীদের এরগনোমিক্স, ব্যবহারযোগ্যতা এবং অ্যাপের গুণমান সম্পর্কে আরও স্বাধীনতা দেয়৷

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

লেআউট সম্পর্কে আরও জানতে, মেটেরিয়াল ডিজাইন 3 (M3) বোঝার লেআউট পৃষ্ঠাটি দেখুন।

ওয়েবভিউ

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

একটি লেআউট আপনার অ্যাপের সাথে ইন্টারফেস করার জন্য ব্যবহারকারীর ভিজ্যুয়াল কাঠামোকে সংজ্ঞায়িত করে, যেমন একটি কার্যকলাপে। অ্যান্ড্রয়েড বিভিন্ন লাইব্রেরি, ক্যানোনিকাল স্টার্টিং পয়েন্ট এবং কন্টেন্ট প্রদর্শন ও অবস্থানের কৌশল প্রদান করে।

Takeaways

• Honor ডিভাইস নিরাপদ এলাকা, যার মধ্যে UI এর কিছু অংশ যেমন ডিসপ্লে কাটআউট, এজ-টু-এজ ইনসেট, এজ ডিসপ্লে, সফ্টওয়্যার কীবোর্ড এবং সিস্টেম বার রয়েছে।

• করুন: ব্যবহারকারীদের কীবোর্ডের সাথে ইন্টারঅ্যাক্ট করার জন্য একটি নমনীয় লেআউট প্রদান করুন।

• প্রাইমারি নেভিগেশনের মতো প্রয়োজনীয় মিথস্ক্রিয়াগুলি একটি পৌঁছানোর যোগ্য স্ক্রীন এলাকায় রাখুন৷

  

• বিষয়বস্তু এবং কর্মের মাধ্যমে ব্যবহারকারীকে গাইড করতে গোষ্ঠী সম্পর্কিত বিষয়বস্তুতে কন্টেনমেন্ট ব্যবহার করুন।

  

• অনুরূপ সামগ্রী এবং UI উপাদানগুলির মধ্যে সামঞ্জস্যপূর্ণ প্রান্তিককরণ প্রদান করুন।

  করবেন না: উপাদানগুলির মতো অসঙ্গতিপূর্ণ ব্যবধানের দ্বারা পঠনযোগ্যতা ব্যাহত করুন, যা ডিজাইনগুলিকে এলোমেলো দেখাতে পারে৷

  করুন: অনুরূপ উপাদানগুলির মধ্যে সামঞ্জস্যপূর্ণ ব্যবধান স্থাপন করুন।

  

• পোর্ট্রেট বা আদর্শ লেআউটে আটকে থাকবেন না: ব্যবহারকারীদের সম্মুখীন হতে পারে এমন বিভিন্ন আকৃতির অনুপাত, আকারের শ্রেণী এবং রেজোলিউশন বিবেচনা করুন।

• প্রতি ভিউতে অনেক বেশি অ্যাকশন দিয়ে আপনার ব্যবহারকারীকে অভিভূত করবেন না।

• কাস্টম লেআউট তৈরি করার সময়, সারিবদ্ধকরণ, সীমাবদ্ধতা বা মাধ্যাকর্ষণ পদ ব্যবহার করে লেআউটের মধ্যে বিষয়বস্তু কীভাবে বসতে হবে তা নোট করুন। সঠিকভাবে প্রদর্শন করার জন্য চিত্রগুলি তাদের কন্টেইনারে কীভাবে প্রতিক্রিয়া জানাতে হবে তা অন্তর্ভুক্ত করুন।

একটি সাধারণ অ্যান্ড্রয়েড অ্যাপ স্ক্রিনের অংশ

বেশিরভাগ অ্যান্ড্রয়েড অ্যাপ্লিকেশানগুলি সিস্টেম বার , নেভিগেশন এলাকা এবং বডি হিসাবে উল্লেখ করা অঞ্চলগুলি নিয়ে গঠিত৷

সিস্টেম বার

স্ট্যাটাস বার এবং নেভিগেশন বার - একত্রে সিস্টেম বার নামে পরিচিত - ব্যাটারি স্তর, সময় এবং বিজ্ঞপ্তি সতর্কতার মতো গুরুত্বপূর্ণ তথ্য প্রদর্শন করে এবং যেকোনো জায়গা থেকে সরাসরি ডিভাইসের মিথস্ক্রিয়া প্রদান করে। সিস্টেম বার সম্পর্কে আরও পড়ুন।

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

একটি শীর্ষ স্তর হিসাবে বার যোগ করুন. আপনার অ্যাপের থিমে সিস্টেম বারে রঙ প্রয়োগ করতে android:navigationBarColor এবং android:statusBarColor ব্যবহার করুন।

নেভিগেশন অঞ্চল

নেভিগেশন বিভিন্ন সুযোগ-সুবিধার প্রতিনিধিত্ব করে যা একজন ব্যবহারকারীকে আপনার অ্যাপের মধ্যে নেভিগেট করতে, গুরুত্বপূর্ণ অ্যাকশন অ্যাক্সেস করতে বা Android প্ল্যাটফর্ম জুড়ে অনুমতি দেয়।

শরীরের অঞ্চল

শরীরের অঞ্চল পর্দার বিষয়বস্তু ধারণ করে। বডি কন্টেন্ট অতিরিক্ত গ্রুপিং এবং লেআউট প্যারামিটার দিয়ে গঠিত। এটি অবশ্যই নেভিগেশন এবং সিস্টেম বার অঞ্চলের অধীনে চলতে হবে।

এজ-টু-এজ ইনসেটের জন্য WindowCompat.setDecorFitsSystemWindows(window, false) ঘোষণা করুন।

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

বিষয়বস্তু রচনা এবং গঠন

আপনার বিষয়বস্তুর জন্য একটি কাঠামো এবং নিয়ন্ত্রণ পদ্ধতি সহ একটি নমনীয় প্রবাহ এবং ছন্দ তৈরি করুন।

ভিত্তি গঠন: ভিজ্যুয়াল গার্ডেলের জন্য মার্জিন এবং কলাম ব্যবহার করুন

সামঞ্জস্যপূর্ণ গার্ডেলের সাথে একটি শক্ত কাঠামো তৈরি করা শুরু করতে, আপনার লেআউটে মার্জিন এবং কলাম যোগ করুন।

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

আপনি এই ধাপে ইনসেট নিরাপদ অঞ্চল বা ইনসেট নিশ্চিত করতে পারেন। সিস্টেম বার ইনসেটগুলি গুরুত্বপূর্ণ অ্যাকশনগুলিকে সিস্টেম বারগুলির অধীনে পড়া থেকে বাধা দেয়। বিস্তারিত জানার জন্য সিস্টেম বারের পিছনে আপনার সামগ্রী আঁকুন দেখুন।

সামঞ্জস্যপূর্ণ প্রান্তিককরণের জন্য একটি নমনীয় গ্রিড কাঠামো তৈরি করতে এবং বডি এলাকার মধ্যে বিষয়বস্তু ভাগ করে একটি লেআউটে উল্লম্ব সংজ্ঞা প্রদান করতে কলামগুলি ব্যবহার করুন৷ বিষয়বস্তু কলাম ধারণকারী পর্দার এলাকায় যায়. এই কলামগুলি আপনার লেআউটে কাঠামোকে ধার দেয়, উপাদানগুলি সাজানোর জন্য সুবিধাজনক কাঠামো প্রদান করে।

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

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

দৃশ্যত উপাদানগুলিকে গ্রুপ করতে কন্টেনমেন্ট ব্যবহার করুন

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

আপনি বিষয়বস্তুর মাধ্যমে ব্যবহারকারীকে গাইড করতে সাহায্য করার জন্য সাদা স্থান বা দৃশ্যমান বিভাজনের সাথে অনুরূপ আইটেমগুলিকে একত্রিত করতে পারেন।

অন্তর্নিহিত কন্টেনমেন্ট কন্টেইনার সীমানা তৈরি করার জন্য দৃশ্যত বিষয়বস্তুকে গোষ্ঠীভুক্ত করতে সাদা স্থান ব্যবহার করে যখন স্পষ্ট কন্টেনমেন্ট সামগ্রীকে একসাথে গোষ্ঠীভুক্ত করতে বিভাজক লাইন এবং কার্ডের মতো বস্তু ব্যবহার করে।

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

বিষয়বস্তুর অবস্থান

অ্যান্ড্রয়েডের নিজ নিজ পাত্রে বিষয়বস্তু উপাদানগুলি পরিচালনা করার একাধিক উপায় রয়েছে যা মাধ্যাকর্ষণ, ব্যবধান এবং স্কেলিং সহ তাদের যথাযথভাবে অবস্থান করতে সহায়তা করতে পারে।

মাধ্যাকর্ষণ নির্দিষ্ট ব্যবহারের ক্ষেত্রে একটি সম্ভাব্য বড় পাত্রের মধ্যে একটি বস্তু স্থাপন করার জন্য একটি মানক। নিচের চিত্রটি অবজেক্টের স্টার্ট এবং সেন্টার ( 1 ), উপরে এবং কেন্দ্র অনুভূমিক ( 2 ), নীচে বাম ( 3 ), এবং শেষ এবং ডান ( 1 ) অবস্থানের উদাহরণ দেখায়।

স্কেলিং

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

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

যে বিষয়বস্তুটি উল্লেখ করা হয়নি তা আপনার প্রত্যাশা বা চাওয়ার চেয়ে ভিন্নভাবে প্রদর্শিত হতে পারে।

পিন করা সামগ্রী

অনেক উপাদান স্লট বা স্ক্যাফোল্ডের সাথে মিথস্ক্রিয়া, স্ক্রলিং এবং অবস্থানের মধ্যে তৈরি করেছে। স্ক্রোলিং-এ প্রতিক্রিয়া দেখানোর পরিবর্তে স্থির থাকার জন্য কিছু উপাদান পরিবর্তন করা যেতে পারে, উদাহরণস্বরূপ ফ্লোটিং অ্যাকশন বোতাম (এফএবি) যেগুলি সমালোচনামূলক কাজ করে।

প্রান্তিককরণ

কাস্টম অ্যালাইনমেন্ট লাইন তৈরি করতে AlignmentLine ব্যবহার করুন, যেটি প্যারেন্ট লেআউট তাদের বাচ্চাদের সারিবদ্ধ করতে এবং অবস্থান করতে ব্যবহার করতে পারে।

করবেন না: উপাদানগুলির মতো অসঙ্গতিপূর্ণ ব্যবধানের দ্বারা পঠনযোগ্যতা ব্যাহত করুন, যা ডিজাইনগুলিকে এলোমেলো দেখাতে পারে৷

করুন: অনুরূপ উপাদানগুলির মধ্যে সামঞ্জস্যপূর্ণ ব্যবধান স্থাপন করুন।

কম্পোনেন্ট লেআউট

উপাদান 3 উপাদান মিথস্ক্রিয়া এবং বিষয়বস্তুর জন্য তাদের নিজস্ব কনফিগারেশন এবং অবস্থা প্রদান করে।

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

লেআউট এবং নেভিগেশন নিদর্শন

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

লেআউট এবং নেভিগেশন পেয়ারিং

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

ন্যাভিগেশন বার একই শ্রেণিবিন্যাস স্তর জুড়ে তিন থেকে পাঁচটি নেভিগেশন গন্তব্য রাখতে পারে। এই উপাদানটি বড় পর্দার জন্য নেভিগেশন রেলে অনুবাদ করে।

যদিও নেভিগেশন ড্রয়ারটি পাঁচটির বেশি নেভিগেশন গন্তব্য ধারণ করতে পারে, তবে কম্প্যাক্ট আকারে শীর্ষ বারে পৌঁছানোর প্রয়োজনের কারণে প্যাটার্নটি নেভিগেশন বারের মতো আদর্শ নয়।

উপাদান 3 ট্যাব এবং নীচের অ্যাপ বার হল সেকেন্ডারি নেভিগেশন প্যাটার্ন যা আপনি প্রাথমিক নেভিগেশন পরিপূরক করতে ব্যবহার করতে পারেন বা শিশুদের ভিউতে দেখাতে পারেন।

লেআউট কর্ম

ব্যবহারকারীদের কর্ম সম্পাদন করতে সক্ষম করার জন্য নিয়ন্ত্রণ প্রদান করুন। সাধারণ নিদর্শনগুলির মধ্যে রয়েছে শীর্ষ বার অ্যাকশন, ফ্লোটিং অ্যাকশন বোতাম (এফএবি), এবং মেনু।

সর্বোচ্চ গুরুত্বের কর্মের জন্য, একটি FAB ব্যবহারকারীর জন্য একটি বড় এবং বিশিষ্ট বোতাম প্রদান করে। এই স্তরে একবারে শুধুমাত্র একটি কাজ প্রদান করুন। একটি FAB একাধিক আকার এবং একটি প্রসারিত আকারে প্রদর্শিত হতে পারে, যার মধ্যে একটি লেবেল রয়েছে। একটি FAB পিন করতে Scaffold ব্যবহার করুন, নিশ্চিত করুন যে এটি সর্বদা স্ক্রোল করলেও দৃশ্যমান হয়।

আপনি উপরের বারের মধ্যে সেকেন্ডারি অ্যাকশন রাখতে পারেন বা, যদি এটি পৃষ্ঠার মধ্যে সম্পর্কিত বিষয়বস্তুর কাছাকাছি গ্রুপ করা হয়।

যেকোন অতিরিক্ত ক্রিয়াগুলির জন্য যা অবিলম্বে বা ঘন ঘন প্রয়োজন হয় না, সেই ক্রিয়াগুলিকে একটি ওভারফ্লো মেনুতে যুক্ত করুন৷

ক্যানোনিকাল লেআউট

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

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

তালিকা-বিশদ বিন্যাস

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

বিষয়বস্তু স্থির বা গতিশীল হতে পারে।

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

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

তালিকা উপাদান এবং চশমা উপর আরো নকশা নির্দেশিকা জন্য উপাদান 3 তালিকা অন্বেষণ.

ফিড লেআউট

একটি ফিড বিন্যাস একটি কনফিগারযোগ্য গ্রিডে সমতুল্য বিষয়বস্তু উপাদানগুলির ব্যবস্থা করে যাতে প্রচুর পরিমাণে সামগ্রী দ্রুত, সুবিধাজনকভাবে দেখার জন্য। ( একটি সংগ্রহে কার্ড ব্যবহার করার জন্য উপাদান 3 নির্দেশিকা দেখুন।) ফিডগুলি তালিকা- বা গ্রিড-ভিত্তিক কনফিগারেশন হতে পারে কমপ্যাক্ট ডিসপ্লেতে, সাধারণত কার্ড বা টাইলগুলিতে। বিষয়বস্তু গতিশীল হতে পারে, যার অর্থ এটি একটি গতিশীল বাহ্যিক উত্স যেমন একটি API থেকে "ফেড ইন" হয়৷

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

আপনি অলস তালিকা বা অলস গ্রিডের সাথে রচনা করুন, বা RecyclerView বা CardView সহ ভিউ-এ একটি ফিড বিন্যাস বাস্তবায়ন করতে পারেন।

সাপোর্টিং প্যান লেআউট

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

নীচের শীটগুলির জন্য M3 নির্দেশিকা সম্পর্কে জানুন।

আপেক্ষিক বিন্যাস

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

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

আপনি অলস সারি এবং অলস কলাম সহ স্ক্রলিং সারি বা কলামে সামগ্রী উপস্থাপন করতে পারেন।

রচনা লেআউট বেসিক সম্পর্কে আরও জানুন এবং একটি কম্পোজযোগ্য কি তৈরি করে।

প্রমাণীকরণ হল একটি সাধারণ আপেক্ষিক বিন্যাস, যা নিম্নলিখিত চিত্রে দেখানো হয়েছে।

পূর্ণ-স্ক্রীন লেআউট হল আরেকটি সাধারণ বিন্যাস, যা ইমারসিভ মোডে ব্যবহৃত হয়।

আপনি যদি রচনার পরিবর্তে ভিউ নিয়ে কাজ করেন, তাহলে আপনি বড় এবং জটিল লেআউটের অনুমতি দিয়ে ভাইবোন ভিউ এবং প্যারেন্ট লেআউটের মধ্যে সম্পর্ক অনুযায়ী ভিউ সাজাতে ConstraintLayout ব্যবহার করতে পারেন। ConstraintLayout আপনাকে লেআউট এডিটর ব্যবহার করে XML সম্পাদনা করার পরিবর্তে টেনে এনে সম্পূর্ণভাবে তৈরি করতে দেয়। লেআউট এডিটর দিয়ে একটি UI নির্মাণ সম্পর্কে আরও জানুন।

লেআউট মানিয়ে নিন

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

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

যদিও প্রতিটি অ্যাপ্লিকেশান প্রতিটি স্ক্রিনের আকারে উপলব্ধ হওয়ার প্রয়োজন নেই, তবে এটি আপনার ব্যবহারকারীদের এরগনোমিক্স, ব্যবহারযোগ্যতা এবং অ্যাপের গুণমান সম্পর্কে আরও স্বাধীনতা দেয়৷

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

লেআউট সম্পর্কে আরও জানতে, মেটেরিয়াল ডিজাইন 3 (M3) বোঝার লেআউট পৃষ্ঠাটি দেখুন।

ওয়েবভিউ

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