تحريك تغييرات التنسيق باستخدام عملية نقل

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

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

AnimatedContent →

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

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

يتضمّن إطار العمل الانتقالي الميزات التالية:

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

في ما يلي العملية الأساسية لإنشاء رسوم متحركة بين تخطيطَين:

1. أنشئ عنصر Scene للتنسيقات الأولية والنهائية. ومع ذلك، يتم غالبًا تحديد مشهد التنسيق الأوّلي تلقائيًا من التنسيق الحالي.
2. أنشئ عنصر Transition لتحديد نوع الحركة التي تريدها.
3. اتّصِل TransitionManager.go()، وسينفّذ النظام الحركة لتبديل التنسيقات.

يوضّح المخطّط البياني في الشكل 1 العلاقة بين التصاميم والمشاهد والانتقال والرسوم المتحركة النهائية.

الشكل 1: صورة توضيحية أساسية لكيفية إنشاء إطار عمل الانتقال لصورة متحرّكة

إنشاء مشهد

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

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

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

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

إنشاء مشهد من مورد التصميم

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

لإنشاء مثيل Scene من ملف مورد التصميم، عليك استرداد جذر المشهد من التخطيط كـ ViewGroup. بعد ذلك، استدعِ الدالة Scene.getSceneForLayout() باستخدام جذر المشهد ومعرّف المورد لملف التصميم الذي يحتوي على هيكلية طرق العرض الخاصة بالمشهد.

تحديد تخطيطات المشاهد

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

يتألف المثال من تعريفات التنسيق التالية:

• التصميم الرئيسي لنشاط يتضمّن تصنيفًا نصيًا وعنصرًا فرعيًا FrameLayout
• تمثّل ConstraintLayout المشهد الأول الذي يتضمّن حقلَين نصيَّين.
• ConstraintLayout للمشهد الثاني مع حقلَي النص نفسيهما بترتيب مختلف

تم تصميم المثال بحيث تحدث جميع الصور المتحركة ضمن تخطيط العنصر التابع لتخطيط العنصر الرئيسي للنشاط. يظل تصنيف النص في التصميم الرئيسي ثابتًا.

يتم تحديد التصميم الرئيسي للنشاط على النحو التالي:

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/master_layout">
    <TextView
        android:id="@+id/title"
        ...
        android:text="Title"/>
    <FrameLayout
        android:id="@+id/scene_root">
        <include layout="@layout/a_scene" />
    </FrameLayout>
</LinearLayout>

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

يتم تحديد تخطيط المشهد الأول على النحو التالي:

res/layout/a_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toBottomOf="@id/text_view1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

يحتوي تصميم المشهد الثاني على حقلَي النص نفسيهما، مع المعرّفات نفسها، ولكن بترتيب مختلف. ويتم تعريفها على النحو التالي:

res/layout/another_scene.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/text_view2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <TextView
        android:id="@+id/text_view1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="Text Line 1"
        app:layout_constraintTop_toBottomOf="@id/text_view2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

إنشاء مَشاهد من التنسيقات

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

يوضّح مقتطف الرمز التالي كيفية الحصول على مرجع لجذر المشهد وإنشاء عنصرَي Scene من ملفات التصميم:

Kotlin

val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

Java

Scene aScene;
Scene anotherScene;

// Create the scene root for the scenes in this app.
sceneRoot = (ViewGroup) findViewById(R.id.scene_root);

// Create the scenes.
aScene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this);
anotherScene =
    Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this);

في التطبيق، هناك الآن كائنان Scene استنادًا إلى التسلسلات الهرمية للعرض. يستخدم كلا المشهدَين جذر المشهد المحدّد بواسطة العنصر FrameLayout في res/layout/activity_main.xml.

إنشاء مشهد في الرمز البرمجي

يمكنك أيضًا إنشاء مثيل Scene في الرمز البرمجي من كائن ViewGroup. استخدِم هذه الطريقة عند تعديل تسلسلات عرض العناصر مباشرةً في الرمز أو عند إنشائها بشكل ديناميكي.

لإنشاء مشهد من هيكلية طرق العرض في الرمز البرمجي، استخدِم المنشئ Scene(sceneRoot, viewHierarchy). ويكون استدعاء الدالة الإنشائية هذه مكافئًا لاستدعاء الدالة Scene.getSceneForLayout() عندما تكون قد وسّعت ملف تنسيق.

يوضّح مقتطف الرمز التالي كيفية إنشاء مثيل Scene من عنصر الجذر للمشهد وهيكلية طرق العرض للمشهد في الرمز البرمجي:

Kotlin

val sceneRoot = someLayoutElement as ViewGroup
val viewHierarchy = someOtherLayoutElement as ViewGroup
val scene: Scene = Scene(sceneRoot, viewHierarchy)

Java

Scene mScene;

// Obtain the scene root element.
sceneRoot = (ViewGroup) someLayoutElement;

// Obtain the view hierarchy to add as a child of
// the scene root when this scene is entered.
viewHierarchy = (ViewGroup) someOtherLayoutElement;

// Create a scene.
mScene = new Scene(sceneRoot, mViewHierarchy);

إنشاء إجراءات المشهد

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

تكون إجراءات المشهد مفيدة في الحالات التالية:

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

لتوفير إجراءات مخصّصة للمشهد، حدِّد إجراءاتك كعناصر Runnable ومرِّرها إلى الدالتَين Scene.setExitAction() أو Scene.setEnterAction(). يستدعي إطار العمل الدالة setExitAction() في المشهد البادئ قبل تشغيل حركة الانتقال، والدالة setEnterAction() في المشهد النهائي بعد تشغيل حركة الانتقال.

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

تطبيق تأثير انتقال

يمثّل إطار عمل الانتقال نمط الصورة المتحركة بين المشاهد باستخدام عنصر Transition. يمكنك إنشاء مثيل Transition باستخدام فئات فرعية مضمّنة، مثل AutoTransition وFade، أو يمكنك تحديد انتقالك الخاص. بعد ذلك، يمكنك تشغيل الرسم المتحرك بين المشاهد من خلال تمرير Scene وTransition إلى TransitionManager.go().

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

إنشاء انتقال

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

الجدول 1. أنواع الانتقالات المضمَّنة

الفئة	علامة	التأثير
AutoTransition	<autoTransition/>	الانتقال التلقائي تتلاشى طرق العرض وتتحرّك ويتم تغيير حجمها ثم تظهر، بهذا الترتيب.
ChangeBounds	<changeBounds/>	نقل طرق العرض وتغيير حجمها
ChangeClipBounds	<changeClipBounds/>	تسجّل هذه السمة View.getClipBounds() قبل وبعد تغيير المشهد وتحرّك هذه التغييرات أثناء الانتقال.
ChangeImageTransform	<changeImageTransform/>	تعرض هذه السمة مصفوفة ImageView قبل تغيير المشهد وبعده، وتنشّطها أثناء الانتقال.
ChangeScroll	<changeScroll/>	تسجّل هذه السمة خصائص التمرير للأهداف قبل تغيير المشهد وبعده، وتنشّط أي تغييرات.
ChangeTransform	<changeTransform/>	تسجيل حجم وطريقة عرض المشاهد قبل وبعد تغيير المشهد وتحريك هذه التغييرات أثناء الانتقال
Explode	<explode/>	يتتبّع هذا النوع التغييرات في مستوى ظهور طرق العرض المستهدَفة في مشاهد البداية والنهاية، وينقل طرق العرض إلى داخل المشهد أو خارجه من حوافه.
Fade	<fade/>	تتلاشى fade_in في طرق العرض. يؤدي fade_out إلى تلاشي المشاهدات.‫ fade_in_out (تلقائي) ينفّذ fade_out متبوعًا بـ fade_in.
Slide	<slide/>	تتتبّع هذه السمة التغييرات في مستوى عرض العناصر المستهدَفة في مشاهد البداية والنهاية، وتنقل العناصر إلى داخل المشهد أو خارجه من إحدى حوافّه.

إنشاء مثيل انتقال من ملف موارد

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

لتحديد انتقال مدمج في ملف مورد، اتّبِع الخطوات التالية:

• أضِف الدليل res/transition/ إلى مشروعك.
• أنشئ ملف موارد XML جديدًا داخل هذا الدليل.
• أضِف عقدة XML لأحد الانتقالات المضمّنة.

على سبيل المثال، يحدّد ملف الموارد التالي الانتقال Fade:

res/transition/fade_transition.xml

<fade xmlns:android="http://schemas.android.com/apk/res/android" />

يوضّح مقتطف الرمز التالي كيفية إنشاء مثيل Transition داخل نشاطك من ملف مصدر:

Kotlin

var fadeTransition: Transition =
    TransitionInflater.from(this)
                      .inflateTransition(R.transition.fade_transition)

Java

Transition fadeTransition =
        TransitionInflater.from(this).
        inflateTransition(R.transition.fade_transition);

إنشاء مثيل انتقال في الرمز البرمجي

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

لإنشاء مثيل من عملية انتقال مدمجة، استدعِ أحد المنشئات العامة في الفئات الفرعية للفئة Transition. على سبيل المثال، ينشئ مقتطف الرمز البرمجي التالي مثيلاً من عملية الانتقال Fade:

Kotlin

var fadeTransition: Transition = Fade()

Java

Transition fadeTransition = new Fade();

تطبيق تأثير انتقال

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

لتغيير مشهد أثناء تطبيق انتقال استجابةً لحدث في نشاطك، استدعِ دالة الفئة TransitionManager.go() مع المشهد النهائي ومثيل الانتقال الذي سيتم استخدامه في الحركة، كما هو موضّح في المقتطف التالي:

Kotlin

TransitionManager.go(endingScene, fadeTransition)

Java

TransitionManager.go(endingScene, fadeTransition);

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

إذا لم تحدّد مثيلاً للانتقال، يمكن لمدير الانتقال تطبيق انتقال تلقائي ينفّذ إجراءً مناسبًا لمعظم الحالات. للحصول على مزيد من المعلومات، راجِع مرجع واجهة برمجة التطبيقات لفئة TransitionManager.

اختيار عدد مشاهدات مستهدَف محدّد

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

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

لإزالة طريقة عرض واحدة أو أكثر من قائمة العناصر المستهدَفة، استدعِ طريقة removeTarget() قبل بدء عملية الانتقال. لإضافة طرق العرض التي تحدّدها فقط إلى قائمة الاستهدافات، استدعِ الدالة addTarget(). لمزيد من المعلومات، اطّلِع على مرجع واجهة برمجة التطبيقات لفئة Transition.

تحديد عدة انتقالات

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

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

لتحديد مجموعة انتقالات من مجموعة من الانتقالات في XML، أنشئ ملف موارد في الدليل res/transitions/ وأدرِج الانتقالات ضمن العنصر TransitionSet. على سبيل المثال، يوضّح المقتطف التالي كيفية تحديد مجموعة انتقالات لها السلوك نفسه الذي تتّبعه الفئة AutoTransition:

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential">
    <fade android:fadingMode="fade_out" />
    <changeBounds />
    <fade android:fadingMode="fade_in" />
</transitionSet>

لتضخيم مجموعة الانتقالات إلى عنصر TransitionSet في الرمز البرمجي، استدعِ الدالة TransitionInflater.from() في نشاطك. تتوسّع الفئة TransitionSet من الفئة Transition، لذا يمكنك استخدامها مع أداة إدارة الانتقالات تمامًا مثل أي مثيل آخر من Transition.

تطبيق انتقال بدون مشاهد

تغيير تسلسلات العرض ليس الطريقة الوحيدة لتعديل واجهة المستخدم. يمكنك أيضًا إجراء تغييرات من خلال إضافة طرق عرض فرعية وتعديلها وإزالتها ضمن التسلسل الهرمي الحالي.

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

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

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

لإنشاء انتقال مؤجّل ضمن تسلسل هرمي لعرض واحد، اتّبِع الخطوات التالية:

1. عند وقوع الحدث الذي يؤدي إلى بدء عملية الانتقال، استدعِ الدالة TransitionManager.beginDelayedTransition()، مع توفير العرض الرئيسي لجميع العروض التي تريد تغييرها وعملية الانتقال التي تريد استخدامها. يخزّن إطار العمل الحالة الحالية لطرق العرض الفرعية وقيم خصائصها.
2. أجرِ تغييرات على طرق العرض الفرعية حسب ما تتطلّبه حالة الاستخدام. يسجّل إطار العمل التغييرات التي تجريها على طرق العرض الفرعية وخصائصها.
3. عندما يعيد النظام رسم واجهة المستخدم وفقًا للتغييرات التي أجريتها، يحرّك إطار العمل التغييرات بين الحالة الأصلية والحالة الجديدة.

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

res/layout/activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <EditText
        android:id="@+id/inputText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    ...
</androidx.constraintlayout.widget.ConstraintLayout>

يعرض المقتطف التالي الرمز الذي يحرّك إضافة طريقة عرض النص:

MainActivity

Kotlin

setContentView(R.layout.activity_main)
val labelText = TextView(this).apply {
    text = "Label"
    id = R.id.text
}
val rootView: ViewGroup = findViewById(R.id.mainLayout)
val mFade: Fade = Fade(Fade.IN)
TransitionManager.beginDelayedTransition(rootView, mFade)
rootView.addView(labelText)

Java

private TextView labelText;
private Fade mFade;
private ViewGroup rootView;
...
// Load the layout.
setContentView(R.layout.activity_main);
...
// Create a new TextView and set some View properties.
labelText = new TextView(this);
labelText.setText("Label");
labelText.setId(R.id.text);

// Get the root view and create a transition.
rootView = (ViewGroup) findViewById(R.id.mainLayout);
mFade = new Fade(Fade.IN);

// Start recording changes to the view hierarchy.
TransitionManager.beginDelayedTransition(rootView, mFade);

// Add the new TextView to the view hierarchy.
rootView.addView(labelText);

// When the system redraws the screen to show this update,
// the framework animates the addition as a fade in.

تحديد عمليات ردّ الاتصال لدورة حياة الانتقال

تشبه مراحل الانتقال مراحل النشاط. وهي تمثّل حالات الانتقال التي يراقبها إطار العمل خلال الفترة بين طلب الدالة TransitionManager.go() واكتمال الصورة المتحركة. في حالات دورة الحياة المهمة، يستدعي إطار العمل عمليات رد الاتصال المحدّدة بواسطة واجهة TransitionListener.

تكون عمليات معاودة الاتصال بدورة حياة الانتقال مفيدة، مثلاً، لنسخ قيمة خاصية عرض من هيكلية طرق العرض المبدئية إلى هيكلية طرق العرض النهائية أثناء تغيير مشهد. لا يمكنك ببساطة نسخ القيمة من طريقة العرض الأولية إلى طريقة العرض في هيكلية طرق العرض النهائية، لأنّه لا يتم تضخيم هيكلية طرق العرض النهائية إلا بعد اكتمال عملية الانتقال. بدلاً من ذلك، عليك تخزين القيمة في مُتغيِّر ثم نسخها إلى هيكلية طرق العرض النهائية عند انتهاء إطار العمل من عملية الانتقال. لتلقّي إشعار عند اكتمال عملية النقل، عليك تنفيذ الدالة TransitionListener.onTransitionEnd() في نشاطك.

لمزيد من المعلومات، اطّلِع على مرجع واجهة برمجة التطبيقات الخاص بفئة TransitionListener.

القيود

يسرد هذا القسم بعض القيود المعروفة لإطار عمل عمليات الانتقال:

• قد لا تظهر الرسوم المتحركة المطبَّقة على SurfaceView بشكل صحيح. يتم تعديل مثيلات SurfaceView من سلسلة محادثات غير تابعة لواجهة المستخدم، لذا قد لا تتزامن التعديلات مع حركات طرق العرض الأخرى.
• قد لا تؤدي بعض أنواع الانتقالات المحدّدة إلى تأثير الحركة المطلوب عند تطبيقها على TextureView.
• تتعامل الفئات التي تتضمّن AdapterView، مثل ListView، مع طرق عرض الأطفال بطرق غير متوافقة مع إطار عمل عمليات الانتقال. إذا حاولت تحريك طريقة عرض استنادًا إلى AdapterView، قد تتوقّف شاشة الجهاز عن الاستجابة.
• إذا حاولت تغيير حجم TextView باستخدام حركة، سيظهر النص في موقع جديد قبل أن يتم تغيير حجم العنصر بالكامل. لتجنُّب هذه المشكلة، لا تحرِّك عملية تغيير حجم طرق العرض التي تحتوي على نص.