להחליק בין מקטעים באמצעות ViewPager2

איך עושים את זה ב-Compose

‫Jetpack Compose היא ערכת הכלים המומלצת ליצירת ממשק משתמש ב-Android. איך משתמשים בכלי לדפדוף ב-Compose.

כלי לדפדוף ←

מעברי מסך הם מעברים ממסך שלם אחד למסך אחר, והם נפוצים בממשקי משתמש כמו אשפי הגדרה ומצגות. במאמר הזה מוסבר איך להציג שקפים במסך באמצעות אובייקט ViewPager2. אובייקטים מסוג ViewPager2 יכולים להנפיש שקפים באופן אוטומטי. הנה דוגמה למעבר בין מסכים שבו התוכן עובר ממסך אחד למסך הבא:

איור 1. אנימציה של החלקת מסך.

 

הערה: אם האפליקציה שלכם כבר משתמשת ב-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 שמחזירה את הפריסה שיצרתם ב-method‏ 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 משתמש במחלקת ה-fragment שיצרתם.

כדי להתחיל, יוצרים פריסה שמכילה אובייקט 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 כדפים חדשים. צריך להטמיע את ה-method 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 של ה-method‏ 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, אפשר לעיין במקורות המידע הבאים.

סרטונים

• Turning the Page: Migrating to ViewPager2 (מפגש של מפתחי Android, ‏2019)