تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

التنقّل بين الأجزاء باستخدام ViewPager2

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

الشكل 1. صورة متحركة لشريحة الشاشة

إذا أردت الانتقال إلى مثال عملي كامل، يمكنك الاطّلاع على هذا التطبيق النموذجي على GitHub.

ملاحظة: إذا كان تطبيقك يستخدم ViewPager، اطّلِع على نقل البيانات من ViewPager إلى ViewPager2.

لاستخدام ViewPager2، عليك إضافة بعض التبعيات في AndroidX إلى مشروعك. بعد ذلك، اتّبِع الخطوات الموضّحة في الأقسام التالية.

إنشاء طرق العرض

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

<!-- fragment_screen_slide_page.xml -->
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView style="?android:textAppearanceMedium"
        android:padding="16dp"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/lorem_ipsum" />
</ScrollView>

إنشاء الجزء

أنشئ فئة Fragment تعرض التصميم الذي أنشأته في الطريقة onCreateView(). يمكنك بعد ذلك إنشاء مثيلات من هذا الجزء في النشاط الرئيسي كلما احتجت إلى عرض صفحة جديدة للمستخدم:

Kotlin

import androidx.fragment.app.Fragment

class ScreenSlidePageFragment : Fragment() {

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_screen_slide_page, container, false)
}

Java

import androidx.fragment.app.Fragment;
...
public class ScreenSlidePageFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        return (ViewGroup) inflater.inflate(
                R.layout.fragment_screen_slide_page, container, false);
    }
}

إضافة ViewPager2

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

للبدء، أنشِئ تخطيطًا يحتوي على عنصر ViewPager2:

<!-- activity_screen_slide.xml -->
<androidx.viewpager2.widget.ViewPager2
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

أنشئ نشاطًا ينفّذ ما يلي:

يضبط طريقة عرض المحتوى على التنسيق الذي يتضمّن ViewPager2.
تنشئ هذه السمة فئة توسّع الفئة المجردة FragmentStateAdapter وتنفّذ الطريقة createFragment() لتوفير مثيلات ScreenSlidePageFragment كصفحات جديدة. يجب تنفيذ طريقة getItemCount() لمحوّل الصفحات، والتي تعرض عدد الصفحات التي ينشئها المحوّل. يوجد خمسة في المثال.
يربط هذا الإجراء FragmentStateAdapter بالعناصر ViewPager2.

Kotlin

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
...
/**
 * The number of pages (wizard steps) to show in this demo.
 */
private const val NUM_PAGES = 5

class ScreenSlidePagerActivity : FragmentActivity() {

    /**
     * The pager widget, which handles animation and allows swiping horizontally
     * to access previous and next wizard steps.
     */
    private lateinit var viewPager: ViewPager2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_screen_slide)

        // Instantiate a ViewPager2 and a PagerAdapter.
        viewPager = findViewById(R.id.pager)

        // The pager adapter, which provides the pages to the view pager widget.
        val pagerAdapter = ScreenSlidePagerAdapter(this)
        viewPager.adapter = pagerAdapter
    }

    override fun onBackPressed() {
        if (viewPager.currentItem == 0) {
            // If the user is currently looking at the first step, allow the system to handle
            // the Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed()
        } else {
            // Otherwise, select the previous step.
            viewPager.currentItem = viewPager.currentItem - 1
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private inner class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        override fun getItemCount(): Int = NUM_PAGES

        override fun createFragment(position: Int): Fragment = ScreenSlidePageFragment()
    }
}

Java

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
...
public class ScreenSlidePagerActivity extends FragmentActivity {
    /**
     * The number of pages (wizard steps) to show in this demo.
     */
    private static final int NUM_PAGES = 5;

    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private ViewPager2 viewPager;

    /**
     * The pager adapter, which provides the pages to the view pager widget.
     */
    private FragmentStateAdapter pagerAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);

        // Instantiate a ViewPager2 and a PagerAdapter.
        viewPager = findViewById(R.id.pager);
        pagerAdapter = new ScreenSlidePagerAdapter(this);
        viewPager.setAdapter(pagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (viewPager.getCurrentItem() == 0) {
            // If the user is currently looking at the first step, allow the system to handle the
            // Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed();
        } else {
            // Otherwise, select the previous step.
            viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private class ScreenSlidePagerAdapter extends FragmentStateAdapter {
        public ScreenSlidePagerAdapter(FragmentActivity fa) {
            super(fa);
        }

        @Override
        public Fragment createFragment(int position) {
            return new ScreenSlidePageFragment();
        }

        @Override
        public int getItemCount() {
            return NUM_PAGES;
        }
    }
}

تخصيص الرسوم المتحركة باستخدام PageTransformer

لعرض صورة متحركة مختلفة عن الصورة المتحركة التلقائية لشريحة الشاشة، نفِّذ واجهة ViewPager2.PageTransformer وقدِّمها إلى العنصر ViewPager2. تعرض الواجهة طريقة واحدة، وهي transformPage(). في كل نقطة من عملية انتقال الشاشة، يتم استدعاء هذه الطريقة مرة واحدة لكل صفحة مرئية، وعادةً ما تكون هناك صفحة مرئية واحدة فقط، وللصفحات المجاورة خارج الشاشة. على سبيل المثال، إذا كانت الصفحة الثالثة مرئية وسحب المستخدم إلى الصفحة الرابعة، يتم استدعاء transformPage() للصفحات الثانية والثالثة والرابعة في كل خطوة من الإيماءة.

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

تشير المَعلمة position إلى موضع الصفحة المعيّنة بالنسبة إلى وسط الشاشة. هذه المَعلمة هي سمة ديناميكية تتغيّر عندما يتنقّل المستخدم بين سلسلة من الصفحات. عندما تملأ الصفحة الشاشة، تكون قيمة موضعها 0. عندما يتم رسم صفحة خارج الجانب الأيسر من الشاشة، تكون قيمة موضعها 1. إذا انتقل المستخدم إلى منتصف المسافة بين الصفحة الأولى والثانية، يكون موضع الصفحة الأولى هو -0.5، وموضع الصفحة الثانية هو 0.5. استنادًا إلى موضع الصفحات على الشاشة، يمكنك إنشاء رسوم متحركة مخصّصة للشرائح من خلال ضبط خصائص الصفحة باستخدام طرق مثل setAlpha() أو setTranslationX() أو setScaleY().

عندما يكون لديك عملية تنفيذ PageTransformer, اتصال setPageTransformer() مع عملية التنفيذ لتطبيق الصور المتحركة المخصّصة. على سبيل المثال، إذا كان لديك PageTransformer باسم ZoomOutPageTransformer، يمكنك ضبط الرسوم المتحركة المخصّصة كما يلي:

Kotlin

val viewPager: ViewPager2 = findViewById(R.id.pager)
...
viewPager.setPageTransformer(ZoomOutPageTransformer())

Java

ViewPager2 viewPager = findViewById(R.id.pager);
...
viewPager.setPageTransformer(new ZoomOutPageTransformer());

راجِع قسمَي أداة تحويل الصفحات عند التصغير وأداة تحويل الصفحات عند التكبير للاطّلاع على أمثلة على PageTransformer.

محوّل تصغير الصفحة

يؤدي محوّل الصفحات هذا إلى تصغير الصفحات وتلاشيها عند التنقّل بين الصفحات المتجاورة. وكلما اقتربت الصفحة من المنتصف، يعود حجمها إلى الحجم العادي وتظهر تدريجيًا.

الشكل 2. ZoomOutPageTransformer مثال

Kotlin

private const val MIN_SCALE = 0.85f
private const val MIN_ALPHA = 0.5f

class ZoomOutPageTransformer : ViewPager2.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            val pageHeight = height
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 1 -> { // [-1,1]
                    // Modify the default slide transition to shrink the page as well.
                    val scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position))
                    val vertMargin = pageHeight * (1 - scaleFactor) / 2
                    val horzMargin = pageWidth * (1 - scaleFactor) / 2
                    translationX = if (position < 0) {
                        horzMargin - vertMargin / 2
                    } else {
                        horzMargin + vertMargin / 2
                    }

                    // Scale the page down (between MIN_SCALE and 1).
                    scaleX = scaleFactor
                    scaleY = scaleFactor

                    // Fade the page relative to its size.
                    alpha = (MIN_ALPHA +
                            (((scaleFactor - MIN_SCALE) / (1 - MIN_SCALE)) * (1 - MIN_ALPHA)))
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

public class ZoomOutPageTransformer implements ViewPager2.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well.
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1).
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

أداة تحويل الصفحات في العمق

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

الشكل 3. DepthPageTransformer مثال

أثناء عرض الصورة المتحركة للعمق، سيستمر عرض الصورة المتحركة التلقائية (انزلاق الشاشة)، لذا عليك إيقاف انزلاق الشاشة باستخدام ترجمة X سالبة. مثلاً:

Kotlin

view.translationX = -1 * view.width * position

Java

view.setTranslationX(-1 * view.getWidth() * position);

يوضّح المثال التالي كيفية إبطال تأثير الحركة التلقائية لانزلاق الشاشة في محوّل صفحات عامل:

Kotlin

private const val MIN_SCALE = 0.75f

@RequiresApi(21)
class DepthPageTransformer : ViewPager2.PageTransformer {

    override fun transformPage(view: View, position: Float) {
        view.apply {
            val pageWidth = width
            when {
                position < -1 -> { // [-Infinity,-1)
                    // This page is way off-screen to the left.
                    alpha = 0f
                }
                position <= 0 -> { // [-1,0]
                    // Use the default slide transition when moving to the left page.
                    alpha = 1f
                    translationX = 0f
                    translationZ = 0f
                    scaleX = 1f
                    scaleY = 1f
                }
                position <= 1 -> { // (0,1]
                    // Fade the page out.
                    alpha = 1 - position

                    // Counteract the default slide transition.
                    translationX = pageWidth * -position
                    // Move it behind the left page.
                    translationZ = -1f

                    // Scale the page down (between MIN_SCALE and 1).
                    val scaleFactor = (MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)))
                    scaleX = scaleFactor
                    scaleY = scaleFactor
                }
                else -> { // (1,+Infinity]
                    // This page is way off-screen to the right.
                    alpha = 0f
                }
            }
        }
    }
}

Java

@RequiresApi(21)
public class DepthPageTransformer implements ViewPager2.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page.
            view.setAlpha(1f);
            view.setTranslationX(0f);
            view.setTranslationZ(0f);
            view.setScaleX(1f);
            view.setScaleY(1f);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition.
            view.setTranslationX(pageWidth * -position);
            // Move it behind the left page
            view.setTranslationZ(-1f);

            // Scale the page down (between MIN_SCALE and 1).
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

مراجع إضافية

لمزيد من المعلومات حول ViewPager2، يُرجى الاطّلاع على المراجع الإضافية التالية.

نماذج

أمثلة على ViewPager2 على GitHub

الفيديوهات

صفحة جديدة: الانتقال إلى ViewPager2 (مؤتمر Android Dev Summit‏ 2019)

التنقّل بين الأجزاء باستخدام ViewPager2 تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

إنشاء طرق العرض

إنشاء الجزء

Kotlin

Java

إضافة ViewPager2

Kotlin

Java

تخصيص الرسوم المتحركة باستخدام PageTransformer

Kotlin

Java

محوّل تصغير الصفحة

Kotlin

Java

أداة تحويل الصفحات في العمق

Kotlin

Java

Kotlin

Java

مراجع إضافية

نماذج

الفيديوهات

التنقّل بين الأجزاء باستخدام ViewPager2