توفير تنسيقات مرنة للتطبيقات المصغّرة

تجربة طريقة "إنشاء"

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي يُنصح باستخدامها على Android. تعرَّف على كيفية إنشاء أدوات باستخدام واجهات برمجة التطبيقات المتوافقة مع Compose.

‫Jetpack Glance →

توضّح هذه الصفحة التحسينات التي تم إدخالها على حجم التطبيقات المصغّرة والمرونة الأكبر التي تم توفيرها في نظام التشغيل Android 12 (المستوى 31 من واجهة برمجة التطبيقات). وتوضّح أيضًا كيفية تحديد حجم التطبيق المصغّر.

استخدام واجهات برمجة تطبيقات محسّنة لأحجام وتنسيقات التطبيقات المصغّرة

بدءًا من نظام التشغيل Android 12 (المستوى 31 من واجهة برمجة التطبيقات)، يمكنك تقديم سمات مقاس أكثر دقة وتصميمات مرنة من خلال تنفيذ ما يلي، كما هو موضّح في الأقسام التالية:

1. تحديد قيود إضافية على حجم التطبيق المصغّر

2. توفير تنسيقات سريعة الاستجابة أو تنسيقات دقيقة

في الإصدارات السابقة من Android، كان من الممكن الحصول على نطاقات حجم الأداة باستخدام الإضافات OPTION_APPWIDGET_MIN_WIDTH وOPTION_APPWIDGET_MIN_HEIGHT وOPTION_APPWIDGET_MAX_WIDTH وOPTION_APPWIDGET_MAX_HEIGHT، ثم تقدير حجم الأداة، ولكن هذه الطريقة لا تعمل في جميع الحالات. بالنسبة إلى التطبيقات المصغّرة التي تستهدف الإصدار 12 من نظام التشغيل Android أو الإصدارات الأحدث، ننصحك بتوفير تنسيقات متجاوبة أو تنسيقات دقيقة.

تحديد قيود إضافية على حجم التطبيق المصغّر

يضيف نظام التشغيل Android 12 واجهات برمجة تطبيقات تتيح لك ضمان تحديد حجم التطبيق المصغّر بشكل أكثر موثوقية على الأجهزة المختلفة التي تختلف أحجام شاشاتها.

بالإضافة إلى السمات الحالية minWidth وminHeight وminResizeWidth وminResizeHeight، استخدِم سمات appwidget-provider الجديدة التالية:

• تحدّد السمتان targetCellWidth وtargetCellHeight: حجم الأداة المستهدَف من حيث خلايا شبكة مشغّل التطبيقات. في حال تحديدها، يتم استخدام هذه السمات بدلاً من minWidth أو minHeight.

• تحدِّد السمتان maxResizeWidth وmaxResizeHeight الحدّ الأقصى للحجم الذي يسمح المشغّل للمستخدم بتغيير حجم الأداة إليه.

يوضّح ملف XML التالي كيفية استخدام سمات تحديد الحجم.

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
  android:targetCellWidth="3"
  android:targetCellHeight="2"
  android:maxResizeWidth="250dp"
  android:maxResizeHeight="110dp">
</appwidget-provider>
sizing_attributes.xml

توفير تنسيقات سريعة الاستجابة

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

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

يوضّح مثال الرمز البرمجي التالي كيفية تقديم قائمة بالتنسيقات.

override fun onUpdate(
    /* ... */
) {
    val smallView = RemoteViews(
        /* ... */
    )
    val tallView = RemoteViews(
        /* ... */
    )
    val wideView = RemoteViews(
        /* ... */
    )

    val viewMapping: Map<SizeF, RemoteViews> = mapOf(
        SizeF(150f, 100f) to smallView,
        SizeF(150f, 200f) to tallView,
        SizeF(215f, 100f) to wideView
    )
    val remoteViews = RemoteViews(viewMapping)

    appWidgetManager.updateAppWidget(id, remoteViews)
}
Layouts.kt

لنفترض أنّ الأداة تحتوي على السمات التالية:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minResizeWidth="160dp"
    android:minResizeHeight="110dp"
    android:maxResizeWidth="250dp"
    android:maxResizeHeight="200dp">
</appwidget-provider>
sizing_constraints.xml

يعني مقتطف الرمز البرمجي السابق ما يلي:

• تتيح smallView نطاقًا من 160dp (minResizeWidth) × 110dp (minResizeHeight) إلى 160dp × 199dp (نقطة الحد التالية - 1dp).
• tallView تتراوح بين 160dp × 200dp و214dp (نقطة القطع التالية - 1) × 200dp.

• wideView تتراوح بين 215 وحدة بكسل مستقلة عن الكثافة × 110 وحدات بكسل مستقلة عن الكثافة (minResizeHeight) و250 وحدة بكسل مستقلة عن الكثافة (maxResizeWidth) × 200 وحدة بكسل مستقلة عن الكثافة (maxResizeHeight).

  ملاحظة: من المحتمل أن يكون حجم التطبيق المصغّر أكبر من maxResizeWidth × maxResizeHeight. يمكنك الاطّلاع على سمات تحديد حجم التطبيق المصغّر لمزيد من التفاصيل.

يجب أن يتوافق تطبيقك المصغّر مع نطاق الأحجام من minResizeWidth × minResizeHeight إلى maxResizeWidth × maxResizeHeight. ضمن هذا النطاق، يمكنك تحديد نقطة القطع للتبديل بين التنسيقات.

الشكل 1. مثال على تنسيق متجاوب

توفير التنسيقات الدقيقة

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

لتنفيذ هذا الحلّ، يجب أن ينفّذ تطبيقك الخطوات التالية:

1. Overload AppWidgetProvider.onAppWidgetOptionsChanged()، الذي يتم استدعاؤه عند تغيير مجموعة الأحجام.

2. استدعِ الدالة AppWidgetManager.getAppWidgetOptions()، التي تعرض Bundle يحتوي على الأحجام.

3. يمكنك الوصول إلى مفتاح AppWidgetManager.OPTION_APPWIDGET_SIZES من Bundle.

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

يوضّح مثال الرمز البرمجي التالي كيفية توفير تخطيطات دقيقة.

override fun onAppWidgetOptionsChanged(
    context: Context,
    appWidgetManager: AppWidgetManager,
    id: Int,
    newOptions: Bundle?
) {
    super.onAppWidgetOptionsChanged(context, appWidgetManager, id, newOptions)
    // Get the new sizes.
    val sizes = newOptions?.let {
        BundleCompat.getParcelableArrayList(
            it,
            AppWidgetManager.OPTION_APPWIDGET_SIZES,
            SizeF::class.java
        )
    }
    // Check that the list of sizes is provided by the launcher.
    if (sizes.isNullOrEmpty()) {
        return
    }
    // Map the sizes to the RemoteViews that you want.
    val remoteViews = RemoteViews(sizes.associateWith(::createRemoteViews))
    appWidgetManager.updateAppWidget(id, remoteViews)
}

// Create the RemoteViews for the given size.
private fun createRemoteViews(size: SizeF): RemoteViews {
}
Layouts.kt

تحديد حجم الأداة

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

توفّر شاشات Android الرئيسية للمستخدمين شبكة من المساحات المتاحة التي يمكنهم وضع الأدوات والأيقونات عليها. ويمكن أن تختلف هذه الشبكة حسب الجهاز، مثلاً، توفّر العديد من الهواتف المحمولة شبكة 5x4، ويمكن أن توفّر الأجهزة اللوحية شبكة أكبر. عند إضافة تطبيقك المصغّر، يتم توسيعه ليشغل الحد الأدنى من عدد الخلايا، أفقيًا وعموديًا، اللازم لاستيفاء قيود targetCellWidth وtargetCellHeight على الأجهزة التي تعمل بالإصدار 12 من نظام التشغيل Android أو الإصدارات الأحدث، أو قيود minWidth وminHeight على الأجهزة التي تعمل بالإصدار 11 من نظام التشغيل Android (مستوى واجهة برمجة التطبيقات 30) أو الإصدارات الأقدم.

تختلف أبعاد الخلايا والهوامش التلقائية على الأجهزة المختلفة. استخدِم الجدول التالي لتقدير الحد الأدنى لأبعاد التطبيق المصغّر على هاتف نموذجي بشبكة 5x4، مع الأخذ في الاعتبار عدد خلايا الشبكة التي تريد استخدامها:

عدد الخلايا (العرض × الارتفاع)	الحجم المتوفّر في الوضع العمودي (وحدات بكسل مستقلة الكثافة)	الحجم المتوفّر في الوضع الأفقي (وحدة بكسل مستقلة عن الكثافة)
1x1	57x102dp	‫127x51dp
2x1	‫130x102dp	269x51dp
3x1	‫203x102dp	‫412x51dp
4x1	‫276x102dp	‫554x51dp
5x1	‫349x102dp	‫697×51dp
5x2	‫349x220dp	‫697×117dp
5x3	349x337dp	‎697x184dp
5x4	349x455dp	‫697×250dp
...	...	...
n x m	(73n - 16) x (118m - 16)	(142n - 15) x (66m - 15)

ملاحظة: يعرض الجدول السابق الأحجام المتاحة على هاتف Google Pixel 4 لتوضيح التقدير التقريبي للأحجام المتوفّرة للجمهور العام في الوضعَين العمودي والأفقي.

استخدِم أحجام خلايا وضع "بورتريه" لتحديد القيم التي تقدّمها للسمات minWidth وminResizeWidth وmaxResizeWidth. وبالمثل، استخدِم أحجام الخلايا في الوضع الأفقي لتحديد القيم التي تقدّمها لسمات minHeight وminResizeHeight وmaxResizeHeight.

والسبب في ذلك هو أنّ عرض الخلية يكون عادةً أصغر في الوضع العمودي مقارنةً بالوضع الأفقي، وبالمثل، يكون ارتفاع الخلية عادةً أصغر في الوضع الأفقي مقارنةً بالوضع العمودي.

على سبيل المثال، إذا أردت أن يكون عرض التطبيق المصغّر قابلاً لتغيير الحجم إلى خلية واحدة على هاتف Google Pixel 4، عليك ضبط minResizeWidth على 56 وحدة بكسل مستقلة عن الكثافة على الأكثر للتأكّد من أنّ قيمة السمة minResizeWidth أصغر من 57 وحدة بكسل مستقلة عن الكثافة، لأنّ عرض الخلية يبلغ 57 وحدة بكسل مستقلة عن الكثافة على الأقل في الوضع العمودي. وبالمثل، إذا أردت أن يكون ارتفاع التطبيق المصغّر قابلاً لتغيير الحجم في خلية واحدة على الجهاز نفسه، عليك ضبط minResizeHeight على 50 وحدة بكسل مستقلة عن الكثافة على الأكثر للتأكّد من أنّ قيمة السمة minResizeHeight أصغر من 51 وحدة بكسل مستقلة عن الكثافة، لأنّ ارتفاع الخلية الواحدة يبلغ 51 وحدة بكسل مستقلة عن الكثافة على الأقل في الوضع الأفقي.

يمكن تغيير حجم كل أداة ضمن نطاقات الأحجام بين السمتَين minResizeWidth/minResizeHeight وmaxResizeWidth/maxResizeHeight، ما يعني أنّها يجب أن تتكيّف مع أي نطاقات أحجام بينهما.

ملاحظة: كما ذكرنا سابقًا، من المحتمل أن يكون حجم التطبيق المصغّر أكبر من maxResizeWidth x maxResizeHeight. يمكنك الاطّلاع على سمات تحديد حجم التطبيق المصغّر لمزيد من التفاصيل.

على سبيل المثال، لضبط الحجم التلقائي للأداة على موضع الإعلان، يمكنك ضبط السمات التالية:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:targetCellWidth="3"
    android:targetCellHeight="2"
    android:minWidth="180dp"
    android:minHeight="110dp">
</appwidget-provider>
default_size_attributes.xml

وهذا يعني أنّ الحجم التلقائي للتطبيق المصغّر هو 3×2 خلايا، كما هو محدّد بواسطة السمتَين targetCellWidth وtargetCellHeight، أو 180×110 بكسل مستقل الكثافة، كما هو محدّد بواسطة السمتَين minWidth وminHeight للأجهزة التي تعمل بالإصدار 11 من نظام التشغيل Android أو الإصدارات الأقدم. في الحالة الأخيرة، يمكن أن يختلف الحجم في الخلايا حسب الجهاز.

لتحديد نطاقات الأحجام المتوافقة مع التطبيق المصغّر، يمكنك ضبط السمات التالية:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minResizeWidth="180dp"
    android:minResizeHeight="110dp"
    android:maxResizeWidth="530dp"
    android:maxResizeHeight="450dp">
</appwidget-provider>
supported_size_ranges.xml

وكما هو محدّد في السمات السابقة، يمكن تغيير حجم عرض التطبيق المصغّر من 180 وحدة بكسل مستقلة عن الكثافة إلى 530 وحدة بكسل مستقلة عن الكثافة، ويمكن تغيير حجم ارتفاعه من 110 وحدات بكسل مستقلة عن الكثافة إلى 450 وحدة بكسل مستقلة عن الكثافة. يمكن بعد ذلك تغيير حجم التطبيق المصغّر من 3x2 إلى 5x2 خلية، طالما توفّرت الشروط التالية:

• يحتوي الجهاز على شبكة 5x4.
• تتّبع عملية الربط بين عدد الخلايا والحجم المتاح بوحدات dps الجدول الذي يعرض تقديرًا للحد الأدنى من الأبعاد في هذه الصفحة.
• يتكيّف التطبيق المصغّر مع نطاق الحجم هذا.

val smallView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_small)
val mediumView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_medium)
val largeView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_large)

val viewMapping: Map<SizeF, RemoteViews> = mapOf(
    SizeF(180f, 110f) to smallView,
    SizeF(270f, 110f) to mediumView,
    SizeF(270f, 280f) to largeView
)

appWidgetManager.updateAppWidget(appWidgetId, RemoteViews(viewMapping))
Layouts.kt

افترِض أنّ الأداة تستخدم التصاميم المتجاوبة المحدّدة في مقتطفات الرموز البرمجية السابقة. وهذا يعني أنّه يتم استخدام التصميم المحدّد على النحو التالي: R.layout.widget_weather_forecast_small من 180 بكسل مستقل الكثافة (minResizeWidth) × 110 بكسل مستقل الكثافة (minResizeHeight) إلى 269 × 279 بكسل مستقل الكثافة (نقاط القطع التالية - 1). وبالمثل، يتم استخدام R.layout.widget_weather_forecast_medium من 270x110 بكسل مستقل الكثافة إلى 270x279 بكسل مستقل الكثافة، ويتم استخدام R.layout.widget_weather_forecast_large من 270x280 بكسل مستقل الكثافة إلى 530 بكسل مستقل الكثافة (maxResizeWidth) × 450 بكسل مستقل الكثافة (maxResizeHeight).

عندما يغيّر المستخدم حجم التطبيق المصغّر، يتغيّر مظهره ليتناسب مع كل حجم بالخلايا، كما هو موضّح في الأمثلة التالية.

الشكل 2. 3x2 R.layout.widget_weather_forecast_small.

الشكل 3. 4x2 R.layout.widget_weather_forecast_medium.

الشكل 4. 5x2 R.layout.widget_weather_forecast_medium.

الشكل 5. 5x3 R.layout.widget_weather_forecast_large.

الشكل 6. 5x4 R.layout.widget_weather_forecast_large.