উইন্ডো আকার ক্লাস ব্যবহার করুন

কম্পোজ পদ্ধতিটি চেষ্টা করুন

অ্যান্ড্রয়েডের জন্য Jetpack Compose হলো প্রস্তাবিত UI টুলকিট। Compose-এ কীভাবে উইন্ডো সাইজ ক্লাস ব্যবহার করতে হয় তা শিখুন।

কম্পোজে উইন্ডো সাইজের ক্লাসসমূহ →

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

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

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

যদিও সাইজ ক্লাসগুলোকে ভৌত ডিভাইস হিসেবে কল্পনা করা উপযোগী হতে পারে, উইন্ডো সাইজ ক্লাসগুলো ডিভাইসের স্ক্রিনের আকার দ্বারা স্পষ্টভাবে নির্ধারিত হয় না। উইন্ডো সাইজ ক্লাসগুলো isTablet- ধরনের লজিকের জন্য উদ্দিষ্ট নয়। বরং, অ্যাপটি কোন ধরনের ডিভাইসে চলছে তা নির্বিশেষে, আপনার অ্যাপ্লিকেশনের জন্য উপলব্ধ উইন্ডো সাইজ দ্বারা উইন্ডো সাইজ ক্লাসগুলো নির্ধারিত হয়, যার দুটি গুরুত্বপূর্ণ প্রভাব রয়েছে:

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

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

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

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

আপনি Jetpack WindowManager লাইব্রেরি দ্বারা প্রদত্ত WindowSizeClass#compute() ফাংশন ব্যবহার করে বর্তমান WindowSizeClass গণনা করতে পারেন। নিচের উদাহরণটি দেখায় কিভাবে উইন্ডোর আকারের শ্রেণী গণনা করা যায় এবং যখনই উইন্ডোর আকারের শ্রেণী পরিবর্তিত হয় তখন আপডেটগুলি গ্রহণ করতে হয়:

class MainActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // ...

        // Replace with a known container that you can safely add a
        // view to where the view won't affect the layout and the view
        // won't be replaced.
        val container: ViewGroup = binding.container

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged(). This is required for all
        // activities, even those that don't handle configuration
        // changes. You can't use Activity.onConfigurationChanged(),
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged() is
        // called in those scenarios.
        container.addView(object : View(this) {
            override fun onConfigurationChanged(newConfig: Configuration?) {
                super.onConfigurationChanged(newConfig)
                computeWindowSizeClasses()
            }
        })

        computeWindowSizeClasses()
    }

    private fun computeWindowSizeClasses() {
        val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this)
        val width = metrics.bounds.width()
        val height = metrics.bounds.height()
        val density = resources.displayMetrics.density
        val windowSizeClass = WindowSizeClass.compute(width/density, height/density)
        // COMPACT, MEDIUM, or EXPANDED
        val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass
        // COMPACT, MEDIUM, or EXPANDED
        val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // ...

        // Replace with a known container that you can safely add a
        // view to where the view won't affect the layout and the view
        // won't be replaced.
        ViewGroup container = binding.container;

        // Add a utility view to the container to hook into
        // View.onConfigurationChanged(). This is required for all
        // activities, even those that don't handle configuration
        // changes. You can't use Activity.onConfigurationChanged(),
        // since there are situations where that won't be called when
        // the configuration changes. View.onConfigurationChanged() is
        // called in those scenarios.
        container.addView(new View(this) {
            @Override
            protected void onConfigurationChanged(Configuration newConfig) {
                super.onConfigurationChanged(newConfig);
                computeWindowSizeClasses();
            }
        });

        computeWindowSizeClasses();
    }

    private void computeWindowSizeClasses() {
        WindowMetrics metrics = WindowMetricsCalculator.getOrCreate()
                .computeCurrentWindowMetrics(this);

        int width = metrics.getBounds().width();
        int height = metrics.getBounds().height();
        float density = getResources().getDisplayMetrics().density;
        WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density);
        // COMPACT, MEDIUM, or EXPANDED
        WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass();
        // COMPACT, MEDIUM, or EXPANDED
        WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass();

        // Use widthWindowSizeClass and heightWindowSizeClass.
    }
}

পরীক্ষার উইন্ডোর আকারের শ্রেণী

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

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

পরবর্তী পদক্ষেপ

রেসপন্সিভ/অ্যাডাপ্টিভ লেআউট তৈরি করতে উইন্ডো সাইজ ক্লাস কীভাবে ব্যবহার করতে হয়, সে সম্পর্কে আরও জানতে নিম্নলিখিতটি দেখুন:

• কম্পোজ-ভিত্তিক লেআউটের জন্য: বিভিন্ন ডিসপ্লে সাইজ সমর্থন করে

• ভিউ-ভিত্তিক লেআউটের জন্য: ভিউ সহ রেসপন্সিভ/অ্যাডাপ্টিভ ডিজাইন

কী কারণে একটি অ্যাপ সব ডিভাইস ও স্ক্রিন সাইজে চমৎকার কাজ করে, সে সম্পর্কে আরও জানতে দেখুন:

• আপনার UI রেসপন্সিভ লেআউটে স্থানান্তর করুন
• বড় স্ক্রিনে অ্যাপের গুণমান