دعم أحجام مختلفة للشاشة

ويتيح دعم أحجام الشاشات المختلفة الوصول إلى تطبيقك من خلال أوسع مجموعة من الأجهزة وأكبر عدد من المستخدمين.

لإتاحة أكبر عدد ممكن من أحجام الشاشات، صمِّم تصاميم تطبيقك لتكون متجاوبة وتكيّفية. توفّر التنسيقات المتجاوبة/التكيّفية تجربة مستخدِم محسَّنة بصرف النظر عن حجم الشاشة، ما يتيح لتطبيقك استيعاب الهواتف والأجهزة اللوحية والأجهزة القابلة للطي وأجهزة ChromeOS والاتجاهات العمودية والأفقية وعمليات الضبط التي يمكن تغيير حجمها، مثل وضع النوافذ المتعددة.

فئات حجم النوافذ

فئات حجم النوافذ هي مجموعة من نقاط التوقف لإطار العرض حسب رأي المستخدمين والتي تساعدك في تصميم التنسيقات المتجاوبة/التكيُّفية وتطويرها واختبارها. توازن نقاط التوقف بين بساطة التصميم والمرونة لتحسين تطبيقك بما يتناسب مع حالات فريدة.

تصنّف فئات حجم النوافذ مساحة العرض المتاحة لتطبيقك على أنّها مكثّفة أو متوسطة أو موسَّعة. يتم تصنيف العرض والارتفاع المتاحين بشكل منفصل، لذا يحتوي تطبيقك في أي وقت على فئتين لحجم النافذة، واحدة للعرض والأخرى للارتفاع. عادةً ما يكون العرض المتاح أكثر أهمية من الارتفاع المتاح بسبب انتشار التمرير الرأسي في كل مكان، لذا من المرجح أن تكون فئة حجم نافذة العرض أكثر صلة بواجهة مستخدم تطبيقك.

الشكل 1. تمثيلات لفئات حجم النوافذ المستندة إلى العرض.
الشكل 2. تمثيلات لفئات حجم النوافذ المستندة إلى الارتفاع.

كما هو موضح في الأشكال، تسمح لك نقاط التوقف بمواصلة التفكير في التخطيطات من حيث الأجهزة والتكوينات. تمثل كل نقطة فاصلة لفئة الحجم حالة الأغلبية لسيناريوهات الجهاز النموذجية، والتي يمكن أن تكون إطارًا مرجعيًا مفيدًا عندما تفكر في تصميم التخطيطات المستندة إلى نقطة التوقف.

فئة الحجم نقطة إيقاف تمثيل الجهاز
عرض مضغوط العرض < 600dp 99.96% من الهواتف بالوضع العمودي
عرض متوسط 600 بكسل مستقل الكثافة ≤ العرض < 840 بكسل مستقل الكثافة بنسبة 93.73% من الأجهزة اللوحية بالوضع العمودي

معظم الشاشات الداخلية الكبيرة غير المطوية في وضع عمودي

عرض موسّع العرض ≥ 840 بكسل مستقل الكثافة 97.22% من الأجهزة اللوحية في الوضع الأفقي،

معظم الشاشات الداخلية الكبيرة غير المطوية في المناظر الطبيعية

ارتفاع مكثف الارتفاع < 480 بكسل مستقل الكثافة 99.78% من الهواتف في أفقي
ارتفاع متوسط 480 بكسل مستقل الكثافة ≤ الارتفاع < 900 بكسل مستقل الكثافة 96.56% من الأجهزة اللوحية في الوضع الأفقي،

97.59% من الهواتف بالوضع العمودي

ارتفاع موسَّع الارتفاع ≥ 900 بكسل مستقل الكثافة 94.25% من الأجهزة اللوحية بالوضع العمودي

على الرغم من أن عرض فئات الحجم كأجهزة مادية قد يكون مفيدًا، إلا أن فئات حجم النافذة لا يتم تحديدها صراحةً من خلال حجم شاشة الجهاز. فئات حجم النوافذ غير مخصَّصة لمنطق من النوع isTablet. بدلاً من ذلك، يتم تحديد فئات حجم النوافذ حسب حجم النافذة المتاح لتطبيقك بغض النظر عن نوع الجهاز الذي يعمل عليه التطبيق، وهو ما يترتب عليه تداعيات مهمة:

  • لا تضمن الأجهزة المادية فئة حجم نافذة محدّدة. قد تختلف مساحة الشاشة المتاحة لتطبيقك عن حجم شاشة الجهاز لعدة أسباب. على الأجهزة الجوّالة، يمكن لوضع تقسيم الشاشة تقسيم الشاشة بين تطبيقين. في نظام التشغيل ChromeOS، يمكن عرض تطبيقات Android في نوافذ حرة يمكن تغيير حجمها بشكل عشوائي. يمكن أن تتضمن الهواتف القابلة للطيّ شاشتَين مختلفتَين بأحجام مختلفة يمكن الوصول إليهما بشكل فردي عن طريق طي الجهاز أو فتحه.

  • يمكن أن تتغيّر فئة حجم النوافذ على مدار فترة استخدام التطبيق. أثناء تشغيل تطبيقك، يمكن أن تؤدي التغييرات في اتجاه الجهاز وإجراء مهام متعددة والطي/فتح الشاشة إلى تغيير حجم مساحة الشاشة المتاحة. ونتيجةً لذلك، تكون فئة حجم النافذة ديناميكية، ومن المفترض أن تتكيّف واجهة المستخدم لتطبيقك وفقًا لذلك.

يتم تعيين فئات حجم النافذة على نقاط التوقف للتخطيط في شبكة التخطيط سريعة الاستجابة ذات التصميم المتعدد الأبعاد. يمكنك استخدام فئات حجم النوافذ لاتخاذ قرارات عالية المستوى بشأن تخطيط التطبيق، مثل تحديد ما إذا كنت تريد استخدام تنسيق أساسي معيّن للاستفادة من مساحة الشاشة الإضافية.

يمكنك حساب WindowSizeClass الحالية باستخدام الدالة WindowSizeClass#compute() التي توفّرها مكتبة Jetpack WindowManager. في ما يلي مثال على كيفية حساب فئة حجم النافذة وتلقّي تعديلات كلّما تغيّرت فئة حجم النافذة:

Kotlin

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.
    }
}

Java

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.
    }
}

بعد ملاحظة فئات حجم النافذة في تطبيقك، ستكون مستعدًا لبدء تغيير التنسيق استنادًا إلى فئة حجم النافذة الحالية.

التنسيقات وفئات حجم النوافذ

أثناء إجراء تغييرات على التخطيط، اختبر سلوك التخطيط عبر جميع أحجام النوافذ، خاصةً عند عرض نقاط التوقف المكثّفة والمتوسطة والموسَّعة.

إذا كان لديك تخطيط حالي للشاشات المكثفة، فقم أولاً بتحسين التخطيط لفئة حجم العرض الموسع، نظرًا لأن فئة الحجم هذه توفر أكبر مساحة لتغييرات المحتوى وواجهة المستخدم الإضافية. ثم حدد التخطيط المناسب لفئة الحجم المتوسط الحجم؛ ضع في اعتبارك إضافة تخطيط متخصص.

الخطوات التالية

لمعرفة المزيد من المعلومات حول كيفية استخدام فئات حجم النافذة لإنشاء تخطيطات سريعة الاستجابة/التكيُّفية، راجع ما يلي:

لمعرفة المزيد حول ما يجعل أحد التطبيقات رائعًا على جميع الأجهزة وأحجام الشاشات، راجع: