প্রতিক্রিয়াশীল লেআউটে আপনার UI স্থানান্তর করুন

অ্যান্ড্রয়েড অ্যাপ্লিকেশানগুলিকে ডিভাইস ফর্ম ফ্যাক্টরগুলির একটি নিরন্তর প্রসারিত ইকোসিস্টেমকে সমর্থন করতে হবে৷ একটি অ্যাপের UI একটি বিস্তৃত স্ক্রীনের আকারের পাশাপাশি বিভিন্ন অভিযোজন এবং ডিভাইসের অবস্থার সাথে মানানসই হতে হবে।

প্রতিক্রিয়াশীল UI নমনীয়তা এবং ধারাবাহিকতার নীতির উপর কেন্দ্র করে।

নমনীয়তা উপলব্ধ স্থানের সর্বোত্তম ব্যবহার করে এবং উপলব্ধ স্থান পরিবর্তিত হলে সামঞ্জস্য করা লেআউটগুলিকে বোঝায়। সামঞ্জস্যগুলি অনেকগুলি রূপ নিতে পারে: কেবলমাত্র একটি একক দৃশ্যের আকার বৃদ্ধি করা, দৃশ্যগুলিকে পুনঃস্থাপন করা যাতে সেগুলি আরও অ্যাক্সেসযোগ্য অবস্থানে থাকে, অতিরিক্ত দৃশ্যগুলি দেখানো বা লুকিয়ে রাখা, বা এইগুলির একটি সংমিশ্রণ৷

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

এড়ানোর জিনিস

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

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

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

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

পূর্ববর্তী কৌশলগুলির কোনো চেষ্টা করার পরিবর্তে, ব্রেকপয়েন্ট এবং উইন্ডো আকারের ক্লাসগুলি ব্যবহার করুন।

ব্রেকপয়েন্ট এবং উইন্ডো সাইজ ক্লাস

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

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

স্থায়ী UI উপাদান

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

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

<!-- res/layout/main_activity.xml -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view(s) -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>


<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        ... />

    <!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>

বিষয়বস্তু

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

নিশ্চিত করুন যে সমস্ত ডেটা বিভিন্ন আকারের জন্য উপলব্ধ

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

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

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

বিষয়বস্তু প্রসারিত করুন

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

প্রসারিত স্থান জিনিসগুলিকে সহজভাবে বড় করার এবং আপনার বিষয়বস্তুকে পুনরায় ফর্ম্যাট করার একটি সুযোগ হতে পারে যাতে এটি আরও অ্যাক্সেসযোগ্য হয়৷

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

স্বতন্ত্র আইটেমগুলি আরও সামগ্রী প্রদর্শন করতে এবং আইটেমের সীমানাকে আরও সহজে আলাদা করতে একটি ভিন্ন আকার বা আকার ব্যবহার করতে পারে।

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

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

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

মার্জিন প্রসারিত করুন। যদি স্থানটি এত বড় হয় যে আপনি আপনার সমস্ত সামগ্রী ব্যবহার করার পরেও একটি আকর্ষণীয় ফিট খুঁজে না পান, তাহলে লেআউটের মার্জিনগুলিকে প্রসারিত করুন যাতে বিষয়বস্তু কেন্দ্রীভূত থাকে এবং পৃথক দৃষ্টিভঙ্গিগুলির মধ্যে স্বাভাবিক আকার এবং ফাঁক থাকে৷

বিকল্পভাবে, একটি পূর্ণ স্ক্রীন উপাদান একটি ভাসমান ডায়ালগ UI এ রূপান্তরিত হতে পারে। এটি বিশেষভাবে উপযুক্ত যখন সেই উপাদানটির জন্য একটি অবিলম্বে ব্যবহারকারীর কাজ, যেমন একটি ইমেল রচনা বা একটি ক্যালেন্ডার ইভেন্ট তৈরি করার জন্য একচেটিয়া ফোকাসের প্রয়োজন হয়৷

বিষয়বস্তু যোগ করুন

ক্যানোনিকাল লেআউট : সহায়ক ফলক, তালিকা-বিশদ দৃশ্য

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

প্যানে দেখানোর জন্য পর্যাপ্ত জায়গা না থাকলে এই বিষয়বস্তুটি কোথায় রাখবেন তা একটি গুরুত্বপূর্ণ বিবেচনা। এখানে অন্বেষণ করার জন্য কয়েকটি বিকল্প রয়েছে:

• DrawerLayout ব্যবহার করে ট্রেলিং প্রান্তে সাইড ড্রয়ার
• BottomSheetBehavior ব্যবহার করে নিচের ড্রয়ার
• একটি মেনু আইকনে ট্যাপ করে মেনু বা পপআপ উইন্ডো অ্যাক্সেসযোগ্য

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

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

একটি টু-প্যান লেআউট তৈরি করুন SlidingPaneLayout ব্যবহার সম্পর্কে আরও বিশদ রয়েছে। এছাড়াও মনে রাখবেন যে এই প্যাটার্নটি আপনার নেভিগেশন গ্রাফকে কীভাবে গঠন করে তা প্রভাবিত করতে পারে ( প্রতিক্রিয়াশীল UI এর জন্য নেভিগেশন দেখুন)।

অতিরিক্ত সম্পদ

• মেটেরিয়াল ডিজাইন - লেআউট প্রয়োগ করা