يحتوي هذا المستند على أمثلة حول كيفية استخدام
MotionLayout.
يتضمن كل مثال فيديو يوضح الحركة، إلى جانب التعليمات
البرمجية المقابلة لمشهد الحركة وتخطيطات.
الحركة الأساسية
يحتوي هذا المثال على طريقة عرض واحدة يمكنك لمسها وسحبها للتحريك أفقيًا.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
السمة المخصّصة: colorcolor (الخلفية)
يشبه هذا المثال مثال الحركة الأساسية. بالإضافة إلى الحركة الأساسية، يتغير لون خلفية العرض مع تحركه.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
ImageFilterView - نقل الصورة
يوضح هذا المثال كيفية تحويل قيمة تشبُّع اللون
ImageFilterView.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
موضع الإطار الأساسي
يستخدم هذا المثال <KeyFrameSet> لتغيير الموضع Y للعرض أثناء الحركة.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
استيفاء الإطار الأساسي
يعتمد هذا المثال على مثال موضع الإطار الرئيسي، مع إضافة الدوران والتحجيم إلى انتقال طريقة العرض.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
دورة الإطار الأساسي
يضيف هذا المثال عناصر <KeyCycle> لإضافة حركة تشبه الموجات إلى العرض.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
CoordinatorLayout (1/2)
يضيف هذا المثال MotionLayout إلى AppBarLayout حالي لإضافة حركة إلى شريط التطبيق. هذا المثال يفسّر بشكل أكبر في
مقدمة عن MotionLayout (الجزء الثالث).
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
CoordinatorLayout (2/2)
يضيف هذا المثال MotionLayout إلى AppBarLayout حالي لإضافة حركة إلى شريط التطبيق.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
تنسيق درج (1/2)
يوضّح هذا المثال كيفية إضافة حركة إلى DrawerLayout. ستجد شرحًا أكثر تفصيلاً لهذا المثال في
مقدمة عن MotionLayout (الجزء الثالث).
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
DrawerLayout (2/2)
يوضّح هذا المثال كيفية إضافة حركة إلى DrawerLayout.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML للمحتوى الرئيسي. - يمكنك عرض
MotionSceneXML للقائمة.
اللوحة الجانبية
يوضح هذا المثال كيفية عرض اللوحة الجانبية عند سحب منطقة المحتوى الرئيسية إلى اليمين.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
اختلاف المنظر
يوضح هذا المثال خلفية المنظر، حيث تتحرك طبقات الخلفية المختلفة بسرعات مختلفة.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
جهاز ViewPager
يوضّح هذا المثال كيفية إضافة حركة عند التمرير السريع بين ViewPager علامة تبويب.
هذا المثال يفسّر بشكل أكبر في
مقدمة عن MotionLayout (الجزء الثالث).
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
ViewPager - Lottie
يوضّح هذا المثال كيفية إضافة حركة عند التمرير السريع بين ViewPager علامة تبويب.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
حركة معقّدة (1/3)
يجمع هذا المثال بين عناصر من الأمثلة السابقة لإظهار الحركة المعقدة.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
حركة معقّدة (2/3)
يجمع هذا المثال بين عناصر من الأمثلة السابقة لإظهار الحركة المعقدة.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
حركة معقّدة (3/3)
يجمع هذا المثال بين عناصر من الأمثلة السابقة لإظهار الحركة المعقدة.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
نقل جزء (1/2)
يوضّح هذا المثال طريقة استخدام MotionLayout للتنقل بين الأجزاء.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
نقل جزء (2/2)
يوضّح هذا المثال طريقة استخدام MotionLayout للتنقل بين الأجزاء.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
حركة تشبه YouTube
يوضح هذا المثال الانتقال بين العرض المكثّف وتجربة ملء الشاشة مع محتوى إضافي.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
مشغّل المفاتيح
يوضح هذا المثال كيفية إظهار زر إجراء عائم وإخفائه عندما يتجاوز الانتقال الحد الأدنى للتقدم.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.
عدة ولايات
يوضّح هذا المثال كيفية استخدام الحالة لتحديد الحركة المطلوب تطبيقها.
- اعرض تنسيق XML.
- يمكنك الاطّلاع على
MotionSceneXML.