একটি স্ক্রোল অঙ্গভঙ্গি অ্যানিমেট

রচনা পদ্ধতিটি চেষ্টা করে দেখুন
জেটপ্যাক কম্পোজ হল অ্যান্ড্রয়েডের জন্য প্রস্তাবিত UI টুলকিট। কম্পোজে টাচ এবং ইনপুট কীভাবে ব্যবহার করবেন তা শিখুন।

অ্যান্ড্রয়েডে, সাধারণত ScrollView ক্লাস ব্যবহার করে স্ক্রলিং করা সম্ভব হয়। ফ্রেমওয়ার্ক দ্বারা পরিচালিত স্ক্রোলযোগ্য ভিউ প্রদানের জন্য ScrollView এ তার কন্টেইনারের সীমানার বাইরে প্রসারিত যেকোনো স্ট্যান্ডার্ড লেআউট স্থাপন করুন। একটি কাস্টম স্ক্রোলার বাস্তবায়ন শুধুমাত্র বিশেষ পরিস্থিতিতে প্রয়োজনীয়। এই ডকুমেন্টটি বর্ণনা করে যে স্ক্রোলার ব্যবহার করে স্পর্শ অঙ্গভঙ্গির প্রতিক্রিয়ায় কীভাবে একটি স্ক্রোলিং প্রভাব প্রদর্শন করা যায়।

আপনার অ্যাপটি স্ক্রোলার— Scroller অথবা OverScroller —ব্যবহার করে একটি টাচ ইভেন্টের প্রতিক্রিয়ায় একটি স্ক্রোলিং অ্যানিমেশন তৈরি করার জন্য প্রয়োজনীয় ডেটা সংগ্রহ করতে পারে। এগুলি একই রকম, তবে OverScroller ব্যবহারকারীরা প্যান বা ফ্লিং অঙ্গভঙ্গির পরে কন্টেন্টের প্রান্তে পৌঁছালে তাদের নির্দেশ করার পদ্ধতিও অন্তর্ভুক্ত রয়েছে।

  • অ্যান্ড্রয়েড ১২ (এপিআই লেভেল ৩১) থেকে শুরু করে, ভিজ্যুয়াল এলিমেন্টগুলি একটি ড্র্যাগ ইভেন্টে প্রসারিত হয় এবং ফিরে আসে এবং একটি ফ্লিং ইভেন্টে ফ্লিং এবং ফিরে আসে।
  • অ্যান্ড্রয়েড ১১ (এপিআই লেভেল ৩০) এবং তার আগের ভার্সনগুলিতে, প্রান্তে টেনে আনা বা ফ্লিং জেসচারের পরে সীমানাগুলি একটি "গ্লো" প্রভাব প্রদর্শন করে।

এই ডকুমেন্টের InteractiveChart নমুনা এই ওভারস্ক্রোল প্রভাবগুলি প্রদর্শনের জন্য EdgeEffect ক্লাস ব্যবহার করে।

আপনি স্ক্রোলার ব্যবহার করে সময়ের সাথে সাথে স্ক্রোলিং অ্যানিমেট করতে পারেন, ঘর্ষণ, বেগ এবং অন্যান্য গুণাবলীর মতো প্ল্যাটফর্ম-স্ট্যান্ডার্ড স্ক্রোলিং পদার্থবিদ্যা ব্যবহার করে। স্ক্রোলার নিজেই কিছু আঁকে না। স্ক্রোলারগুলি সময়ের সাথে সাথে আপনার জন্য স্ক্রোল অফসেটগুলি ট্র্যাক করে, কিন্তু তারা স্বয়ংক্রিয়ভাবে আপনার ভিউতে সেই অবস্থানগুলি প্রয়োগ করে না। আপনাকে এমন হারে নতুন স্থানাঙ্ক পেতে এবং প্রয়োগ করতে হবে যা স্ক্রোলিং অ্যানিমেশনটিকে মসৃণ দেখাবে।

স্ক্রলিং পরিভাষা বুঝুন

অ্যান্ড্রয়েডে স্ক্রলিং শব্দটির অর্থ বিভিন্ন হতে পারে, যা প্রেক্ষাপটের উপর নির্ভর করে।

স্ক্রোলিং হল ভিউপোর্ট সরানোর সাধারণ প্রক্রিয়া—অর্থাৎ, আপনার দেখা কন্টেন্টের "উইন্ডো"। যখন স্ক্রোলিং x - এবং y - উভয় অক্ষেই থাকে, তখন একে প্যানিং বলা হয়। এই ডকুমেন্টে InteractiveChart নমুনা অ্যাপটি দুটি ভিন্ন ধরণের স্ক্রোলিং, টেনে আনা এবং ফ্লিং করা চিত্রিত করে:

  • টেনে আনা: এটি এমন এক ধরণের স্ক্রলিং যা ঘটে যখন একজন ব্যবহারকারী টাচস্ক্রিনের উপর দিয়ে তাদের আঙুল টেনে আনেন। আপনি GestureDetector.OnGestureListeneronScroll() ওভাররাইড করে টেনে আনা বাস্তবায়ন করতে পারেন। টেনে আনা সম্পর্কে আরও তথ্যের জন্য, টেনে আনা এবং স্কেল দেখুন।
  • ফ্লিং: এটি এমন এক ধরণের স্ক্রলিং যা ঘটে যখন একজন ব্যবহারকারী দ্রুত তার আঙুল টেনে টেনে তোলেন। ব্যবহারকারী আঙুল তোলার পর, আপনি সাধারণত ভিউপোর্টটি নাড়াচাড়া করতে চান, কিন্তু ভিউপোর্টটি নাড়াচাড়া বন্ধ না হওয়া পর্যন্ত গতি কমাতে চান। আপনি GestureDetector.OnGestureListeneronFling() ওভাররাইড করে এবং একটি স্ক্রোলার অবজেক্ট ব্যবহার করে ফ্লিং বাস্তবায়ন করতে পারেন।
  • প্যানিং: x- এবং y- উভয় অক্ষ বরাবর একই সাথে স্ক্রোল করাকে প্যানিং বলে।

ফ্লিং জেসচারের সাথে স্ক্রোলার অবজেক্ট ব্যবহার করা সাধারণ, তবে আপনি যেকোনো প্রসঙ্গে এগুলি ব্যবহার করতে পারেন যেখানে আপনি চান যে কোনও টাচ ইভেন্টের প্রতিক্রিয়ায় UI স্ক্রোলিং প্রদর্শন করুক। উদাহরণস্বরূপ, আপনি সরাসরি টাচ ইভেন্টগুলি প্রক্রিয়া করতে এবং স্ক্রোলিং এফেক্ট তৈরি করতে onTouchEvent() ওভাররাইড করতে পারেন অথবা সেই টাচ ইভেন্টগুলির প্রতিক্রিয়ায় একটি "স্ন্যাপ-টু-পেজ" অ্যানিমেশন তৈরি করতে পারেন।

অন্তর্নির্মিত স্ক্রোলিং বাস্তবায়ন ধারণকারী উপাদানগুলি

নিম্নলিখিত অ্যান্ড্রয়েড উপাদানগুলিতে স্ক্রোলিং এবং ওভারস্ক্রোলিং আচরণের জন্য অন্তর্নির্মিত সমর্থন রয়েছে:

যদি আপনার অ্যাপের অন্য কোনও কম্পোনেন্টের ভিতরে স্ক্রলিং এবং ওভারস্ক্রোলিং সমর্থন করার প্রয়োজন হয়, তাহলে নিম্নলিখিত ধাপগুলি সম্পূর্ণ করুন:

  1. একটি কাস্টম স্পর্শ-ভিত্তিক স্ক্রোলিং বাস্তবায়ন তৈরি করুন
  2. Android 12 এবং তার পরবর্তী ভার্সন চালিত ডিভাইসগুলিকে সমর্থন করতে, স্ট্রেচ ওভারস্ক্রল প্রভাবটি প্রয়োগ করুন

একটি কাস্টম স্পর্শ-ভিত্তিক স্ক্রোলিং বাস্তবায়ন তৈরি করুন

এই বিভাগটি বর্ণনা করে যে কীভাবে আপনার নিজস্ব স্ক্রোলার তৈরি করবেন যদি আপনার অ্যাপ এমন একটি উপাদান ব্যবহার করে যা স্ক্রোলিং এবং ওভারস্ক্রোলিংয়ের জন্য অন্তর্নির্মিত সমর্থন ধারণ করে না।

নিচের স্নিপেটটি InteractiveChart নমুনা থেকে নেওয়া হয়েছে। এটি একটি GestureDetector ব্যবহার করে এবং GestureDetector.SimpleOnGestureListener পদ্ধতি onFling() কে ওভাররাইড করে। এটি fling অঙ্গভঙ্গি ট্র্যাক করার জন্য OverScroller ব্যবহার করে। fling অঙ্গভঙ্গি সম্পাদনের পরে যদি ব্যবহারকারী কন্টেন্টের প্রান্তে পৌঁছায়, তাহলে কন্টেইনারটি নির্দেশ করে যে ব্যবহারকারী কখন কন্টেন্টের শেষে পৌঁছায়। ইঙ্গিতটি Android এর কোন সংস্করণটি একটি ডিভাইস চালায় তার উপর নির্ভর করে:

  • অ্যান্ড্রয়েড ১২ এবং তার পরবর্তী সংস্করণগুলিতে, ভিজ্যুয়াল এলিমেন্টগুলি প্রসারিত হয় এবং ফিরে আসে।
  • অ্যান্ড্রয়েড ১১ এবং তার আগের ভার্সনে, ভিজ্যুয়াল এলিমেন্টগুলি একটি গ্লো ইফেক্ট প্রদর্শন করে।

নিম্নলিখিত স্নিপেটের প্রথম অংশটি onFling() এর বাস্তবায়ন দেখায়:

কোটলিন

// Viewport extremes. See currentViewport for a discussion of the viewport.
private val AXIS_X_MIN = -1f
private val AXIS_X_MAX = 1f
private val AXIS_Y_MIN = -1f
private val AXIS_Y_MAX = 1f

// The current viewport. This rectangle represents the visible chart
// domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private val currentViewport = RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX)

// The current destination rectangle—in pixel coordinates—into which
// the chart data must be drawn.
private lateinit var contentRect: Rect

private lateinit var scroller: OverScroller
private lateinit var scrollerStartViewport: RectF
...
private val gestureListener = object : GestureDetector.SimpleOnGestureListener() {

    override fun onDown(e: MotionEvent): Boolean {
        // Initiates the decay phase of any active edge effects.
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects()
        }
        scrollerStartViewport.set(currentViewport)
        // Aborts any active scroll animations and invalidates.
        scroller.forceFinished(true)
        ViewCompat.postInvalidateOnAnimation(this@InteractiveLineGraphView)
        return true
    }
    ...
    override fun onFling(
            e1: MotionEvent,
            e2: MotionEvent,
            velocityX: Float,
            velocityY: Float
    ): Boolean {
        fling((-velocityX).toInt(), (-velocityY).toInt())
        return true
    }
}

private fun fling(velocityX: Int, velocityY: Int) {
    // Initiates the decay phase of any active edge effects.
    // On Android 12 and later, the edge effect (stretch) must
    // continue.
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects()
    }
    // Flings use math in pixels, as opposed to math based on the viewport.
    val surfaceSize: Point = computeScrollSurfaceSize()
    val (startX: Int, startY: Int) = scrollerStartViewport.run {
        set(currentViewport)
        (surfaceSize.x * (left - AXIS_X_MIN) / (AXIS_X_MAX - AXIS_X_MIN)).toInt() to
                (surfaceSize.y * (AXIS_Y_MAX - bottom) / (AXIS_Y_MAX - AXIS_Y_MIN)).toInt()
    }
    // Before flinging, stops the current animation.
    scroller.forceFinished(true)
    // Begins the animation.
    scroller.fling(
            // Current scroll position.
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally 0 and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset is 800 pixels.
             */
            0, surfaceSize.x - contentRect.width(),
            0, surfaceSize.y - contentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            contentRect.width() / 2,
            contentRect.height() / 2
    )
    // Invalidates to trigger computeScroll().
    ViewCompat.postInvalidateOnAnimation(this)
}

জাভা

// Viewport extremes. See currentViewport for a discussion of the viewport.
private static final float AXIS_X_MIN = -1f;
private static final float AXIS_X_MAX = 1f;
private static final float AXIS_Y_MIN = -1f;
private static final float AXIS_Y_MAX = 1f;

// The current viewport. This rectangle represents the visible chart
// domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private RectF currentViewport =
  new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX);

// The current destination rectangle—in pixel coordinates—into which
// the chart data must be drawn.
private final Rect contentRect = new Rect();

private final OverScroller scroller;
private final RectF scrollerStartViewport =
  new RectF(); // Used only for zooms and flings.
...
private final GestureDetector.SimpleOnGestureListener gestureListener
        = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onDown(MotionEvent e) {
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects();
        }
        scrollerStartViewport.set(currentViewport);
        scroller.forceFinished(true);
        ViewCompat.postInvalidateOnAnimation(InteractiveLineGraphView.this);
        return true;
    }
...
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        fling((int) -velocityX, (int) -velocityY);
        return true;
    }
};

private void fling(int velocityX, int velocityY) {
    // Initiates the decay phase of any active edge effects.
    // On Android 12 and later, the edge effect (stretch) must
    // continue.
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
            releaseEdgeEffects();
    }
    // Flings use math in pixels, as opposed to math based on the viewport.
    Point surfaceSize = computeScrollSurfaceSize();
    scrollerStartViewport.set(currentViewport);
    int startX = (int) (surfaceSize.x * (scrollerStartViewport.left -
            AXIS_X_MIN) / (
            AXIS_X_MAX - AXIS_X_MIN));
    int startY = (int) (surfaceSize.y * (AXIS_Y_MAX -
            scrollerStartViewport.bottom) / (
            AXIS_Y_MAX - AXIS_Y_MIN));
    // Before flinging, stops the current animation.
    scroller.forceFinished(true);
    // Begins the animation.
    scroller.fling(
            // Current scroll position.
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally 0 and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset is 800 pixels.
             */
            0, surfaceSize.x - contentRect.width(),
            0, surfaceSize.y - contentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            contentRect.width() / 2,
            contentRect.height() / 2);
    // Invalidates to trigger computeScroll().
    ViewCompat.postInvalidateOnAnimation(this);
}

যখন onFling() postInvalidateOnAnimation() কল করে, তখন এটি x এবং y এর মান আপডেট করার জন্য computeScroll() ট্রিগার করে। এটি সাধারণত তখন করা হয় যখন একটি ভিউ চাইল্ড একটি স্ক্রোলার অবজেক্ট ব্যবহার করে একটি স্ক্রোল অ্যানিমেট করে, যেমনটি পূর্ববর্তী উদাহরণে দেখানো হয়েছে।

বেশিরভাগ ভিউ স্ক্রোলার অবজেক্টের x এবং y অবস্থান সরাসরি scrollTo() তে পাস করে। computeScroll() এর নিম্নলিখিত বাস্তবায়নটি একটি ভিন্ন পদ্ধতি গ্রহণ করে: এটি x এবং y এর বর্তমান অবস্থান পেতে computeScrollOffset() কল করে। যখন একটি overscroll "glow" edge প্রভাব প্রদর্শনের মানদণ্ড পূরণ করা হয়— অর্থাৎ, ডিসপ্লেটি জুম করা হয়, x অথবা y সীমার বাইরে থাকে, এবং অ্যাপটি ইতিমধ্যেই একটি overscroll দেখাচ্ছে না—কোডটি overscroll গ্লো প্রভাব সেট আপ করে এবং ভিউতে একটি invalidate ট্রিগার করার জন্য postInvalidateOnAnimation() কে কল করে।

কোটলিন

// Edge effect/overscroll tracking objects.
private lateinit var edgeEffectTop: EdgeEffect
private lateinit var edgeEffectBottom: EdgeEffect
private lateinit var edgeEffectLeft: EdgeEffect
private lateinit var edgeEffectRight: EdgeEffect

private var edgeEffectTopActive: Boolean = false
private var edgeEffectBottomActive: Boolean = false
private var edgeEffectLeftActive: Boolean = false
private var edgeEffectRightActive: Boolean = false

override fun computeScroll() {
    super.computeScroll()

    var needsInvalidate = false

    // The scroller isn't finished, meaning a fling or
    // programmatic pan operation is active.
    if (scroller.computeScrollOffset()) {
        val surfaceSize: Point = computeScrollSurfaceSize()
        val currX: Int = scroller.currX
        val currY: Int = scroller.currY

        val (canScrollX: Boolean, canScrollY: Boolean) = currentViewport.run {
            (left > AXIS_X_MIN || right < AXIS_X_MAX) to (top > AXIS_Y_MIN || bottom < AXIS_Y_MAX)
        }

        /*
         * If you are zoomed in, currX or currY is
         * outside of bounds, and you aren't already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && edgeEffectLeft.isFinished
                && !edgeEffectLeftActive) {
            edgeEffectLeft.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectLeftActive = true
            needsInvalidate = true
        } else if (canScrollX
                && currX > surfaceSize.x - contentRect.width()
                && edgeEffectRight.isFinished
                && !edgeEffectRightActive) {
            edgeEffectRight.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectRightActive = true
            needsInvalidate = true
        }

        if (canScrollY
                && currY < 0
                && edgeEffectTop.isFinished
                && !edgeEffectTopActive) {
            edgeEffectTop.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectTopActive = true
            needsInvalidate = true
        } else if (canScrollY
                && currY > surfaceSize.y - contentRect.height()
                && edgeEffectBottom.isFinished
                && !edgeEffectBottomActive) {
            edgeEffectBottom.onAbsorb(scroller.currVelocity.toInt())
            edgeEffectBottomActive = true
            needsInvalidate = true
        }
        ...
    }
}

জাভা

// Edge effect/overscroll tracking objects.
private EdgeEffectCompat edgeEffectTop;
private EdgeEffectCompat edgeEffectBottom;
private EdgeEffectCompat edgeEffectLeft;
private EdgeEffectCompat edgeEffectRight;

private boolean edgeEffectTopActive;
private boolean edgeEffectBottomActive;
private boolean edgeEffectLeftActive;
private boolean edgeEffectRightActive;

@Override
public void computeScroll() {
    super.computeScroll();

    boolean needsInvalidate = false;

    // The scroller isn't finished, meaning a fling or
    // programmatic pan operation is active.
    if (scroller.computeScrollOffset()) {
        Point surfaceSize = computeScrollSurfaceSize();
        int currX = scroller.getCurrX();
        int currY = scroller.getCurrY();

        boolean canScrollX = (currentViewport.left > AXIS_X_MIN
                || currentViewport.right < AXIS_X_MAX);
        boolean canScrollY = (currentViewport.top > AXIS_Y_MIN
                || currentViewport.bottom < AXIS_Y_MAX);

        /*
         * If you are zoomed in, currX or currY is
         * outside of bounds, and you aren't already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && edgeEffectLeft.isFinished()
                && !edgeEffectLeftActive) {
            edgeEffectLeft.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectLeftActive = true;
            needsInvalidate = true;
        } else if (canScrollX
                && currX > (surfaceSize.x - contentRect.width())
                && edgeEffectRight.isFinished()
                && !edgeEffectRightActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectRightActive = true;
            needsInvalidate = true;
        }

        if (canScrollY
                && currY < 0
                && edgeEffectTop.isFinished()
                && !edgeEffectTopActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectTopActive = true;
            needsInvalidate = true;
        } else if (canScrollY
                && currY > (surfaceSize.y - contentRect.height())
                && edgeEffectBottom.isFinished()
                && !edgeEffectBottomActive) {
            edgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            edgeEffectBottomActive = true;
            needsInvalidate = true;
        }
        ...
    }

এখানে কোডের সেই অংশটি রয়েছে যা প্রকৃত জুম সম্পাদন করে:

কোটলিন

lateinit var zoomer: Zoomer
val zoomFocalPoint = PointF()
...
// If a zoom is in progress—either programmatically
// or through double touch—this performs the zoom.
if (zoomer.computeZoom()) {
    val newWidth: Float = (1f - zoomer.currZoom) * scrollerStartViewport.width()
    val newHeight: Float = (1f - zoomer.currZoom) * scrollerStartViewport.height()
    val pointWithinViewportX: Float =
            (zoomFocalPoint.x - scrollerStartViewport.left) / scrollerStartViewport.width()
    val pointWithinViewportY: Float =
            (zoomFocalPoint.y - scrollerStartViewport.top) / scrollerStartViewport.height()
    currentViewport.set(
            zoomFocalPoint.x - newWidth * pointWithinViewportX,
            zoomFocalPoint.y - newHeight * pointWithinViewportY,
            zoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            zoomFocalPoint.y + newHeight * (1 - pointWithinViewportY)
    )
    constrainViewport()
    needsInvalidate = true
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this)
}

জাভা

// Custom object that is functionally similar to Scroller.
Zoomer zoomer;
private PointF zoomFocalPoint = new PointF();
...
// If a zoom is in progress—either programmatically
// or through double touch—this performs the zoom.
if (zoomer.computeZoom()) {
    float newWidth = (1f - zoomer.getCurrZoom()) *
            scrollerStartViewport.width();
    float newHeight = (1f - zoomer.getCurrZoom()) *
            scrollerStartViewport.height();
    float pointWithinViewportX = (zoomFocalPoint.x -
            scrollerStartViewport.left)
            / scrollerStartViewport.width();
    float pointWithinViewportY = (zoomFocalPoint.y -
            scrollerStartViewport.top)
            / scrollerStartViewport.height();
    currentViewport.set(
            zoomFocalPoint.x - newWidth * pointWithinViewportX,
            zoomFocalPoint.y - newHeight * pointWithinViewportY,
            zoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            zoomFocalPoint.y + newHeight * (1 - pointWithinViewportY));
    constrainViewport();
    needsInvalidate = true;
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this);
}

এটি হল computeScrollSurfaceSize() পদ্ধতি যা পূর্ববর্তী স্নিপেটে বলা হয়েছে। এটি বর্তমান স্ক্রোলযোগ্য পৃষ্ঠের আকার পিক্সেলে গণনা করে। উদাহরণস্বরূপ, যদি সমগ্র চার্ট এলাকা দৃশ্যমান হয়, তাহলে এটি mContentRect এর বর্তমান আকার। যদি চার্টটি উভয় দিকে 200% জুম করা হয়, তাহলে ফিরে আসা আকার অনুভূমিকভাবে এবং উল্লম্বভাবে দ্বিগুণ বড় হয়।

কোটলিন

private fun computeScrollSurfaceSize(): Point {
    return Point(
            (contentRect.width() * (AXIS_X_MAX - AXIS_X_MIN) / currentViewport.width()).toInt(),
            (contentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN) / currentViewport.height()).toInt()
    )
}

জাভা

private Point computeScrollSurfaceSize() {
    return new Point(
            (int) (contentRect.width() * (AXIS_X_MAX - AXIS_X_MIN)
                    / currentViewport.width()),
            (int) (contentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN)
                    / currentViewport.height()));
}

স্ক্রোলার ব্যবহারের আরেকটি উদাহরণের জন্য, ViewPager ক্লাসের সোর্স কোডটি দেখুন। এটি ফ্লিং-এর প্রতিক্রিয়ায় স্ক্রোল করে এবং "স্ন্যাপ-টু-পেজ" অ্যানিমেশন বাস্তবায়নের জন্য স্ক্রোলিং ব্যবহার করে।

স্ট্রেচ ওভারস্ক্রোল প্রভাব প্রয়োগ করুন

অ্যান্ড্রয়েড ১২ থেকে শুরু করে, EdgeEffect স্ট্রেচ ওভারস্ক্রল ইফেক্ট বাস্তবায়নের জন্য নিম্নলিখিত API গুলি যোগ করে:

  • getDistance()
  • onPullDistance()

স্ট্রেচ ওভারস্ক্রোলের মাধ্যমে সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে, নিম্নলিখিতগুলি করুন:

  1. যখন ব্যবহারকারী যখন বিষয়বস্তু স্পর্শ করে তখন স্ট্রেচ অ্যানিমেশন কার্যকর থাকে, তখন স্পর্শটিকে "ক্যাচ" হিসেবে নিবন্ধন করুন। ব্যবহারকারী অ্যানিমেশনটি বন্ধ করে আবার স্ট্রেচটি পরিচালনা শুরু করে।
  2. যখন ব্যবহারকারী তার আঙুলটি স্ট্রেচের বিপরীত দিকে নাড়ান, তখন স্ট্রেচটি সম্পূর্ণরূপে চলে না যাওয়া পর্যন্ত ছেড়ে দিন এবং তারপর স্ক্রোল করা শুরু করুন।
  3. যখন ব্যবহারকারী স্ট্রেচ করার সময় ফ্লিং করেন, তখন স্ট্রেচ এফেক্ট বাড়ানোর জন্য EdgeEffect ফ্লিং করুন।

অ্যানিমেশনটি দেখুন

যখন একজন ব্যবহারকারী একটি সক্রিয় স্ট্রেচ অ্যানিমেশন ধরেন, তখন EdgeEffect.getDistance() 0 প্রদান করে। এই শর্তটি নির্দেশ করে যে স্ট্রেচটি স্পর্শ গতি দ্বারা পরিচালিত হতে হবে। বেশিরভাগ কন্টেইনারে, ক্যাচটি onInterceptTouchEvent() তে সনাক্ত করা হয়, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে:

কোটলিন

override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
  ...
  when (action and MotionEvent.ACTION_MASK) {
    MotionEvent.ACTION_DOWN ->
      ...
      isBeingDragged = EdgeEffectCompat.getDistance(edgeEffectBottom) > 0f ||
          EdgeEffectCompat.getDistance(edgeEffectTop) > 0f
      ...
  }
  return isBeingDragged
}

জাভা

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
  ...
  switch (action & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN:
      ...
      isBeingDragged = EdgeEffectCompat.getDistance(edgeEffectBottom) > 0
          || EdgeEffectCompat.getDistance(edgeEffectTop) > 0;
      ...
  }
}

পূর্ববর্তী উদাহরণে, onInterceptTouchEvent() যখন mIsBeingDragged true হয় তখন true ফেরত দেয়, তাই শিশুটি এটি গ্রহণ করার সুযোগ পাওয়ার আগে ইভেন্টটি গ্রহণ করা যথেষ্ট।

ওভারস্ক্রোল প্রভাবটি ছেড়ে দিন

স্ক্রলিং কন্টেন্টে স্ট্রেচ প্রয়োগ না করার জন্য স্ক্রোল করার আগে স্ট্রেচ ইফেক্টটি ছেড়ে দেওয়া গুরুত্বপূর্ণ। নিম্নলিখিত কোড নমুনাটি এই সর্বোত্তম অনুশীলনটি প্রয়োগ করে:

কোটলিন

override fun onTouchEvent(ev: MotionEvent): Boolean {
  val activePointerIndex = ev.actionIndex

  when (ev.getActionMasked()) {
    MotionEvent.ACTION_MOVE ->
      val x = ev.getX(activePointerIndex)
      val y = ev.getY(activePointerIndex)
      var deltaY = y - lastMotionY
      val pullDistance = deltaY / height
      val displacement = x / width

      if (deltaY < 0f && EdgeEffectCompat.getDistance(edgeEffectTop) > 0f) {
        deltaY -= height * EdgeEffectCompat.onPullDistance(edgeEffectTop,
            pullDistance, displacement);
      }
      if (deltaY > 0f && EdgeEffectCompat.getDistance(edgeEffectBottom) > 0f) {
        deltaY += height * EdgeEffectCompat.onPullDistance(edgeEffectBottom,
            -pullDistance, 1 - displacement);
      }
      ...
  }

জাভা

@Override
public boolean onTouchEvent(MotionEvent ev) {

  final int actionMasked = ev.getActionMasked();

  switch (actionMasked) {
    case MotionEvent.ACTION_MOVE:
      final float x = ev.getX(activePointerIndex);
      final float y = ev.getY(activePointerIndex);
      float deltaY = y - lastMotionY;
      float pullDistance = deltaY / getHeight();
      float displacement = x / getWidth();

      if (deltaY < 0 && EdgeEffectCompat.getDistance(edgeEffectTop) > 0) {
        deltaY -= getHeight() * EdgeEffectCompat.onPullDistance(edgeEffectTop,
            pullDistance, displacement);
      }
      if (deltaY > 0 && EdgeEffectCompat.getDistance(edgeEffectBottom) > 0) {
        deltaY += getHeight() * EdgeEffectCompat.onPullDistance(edgeEffectBottom,
            -pullDistance, 1 - displacement);
      }
            ...

যখন ব্যবহারকারী টেনে আনছেন, তখন টাচ ইভেন্টটি নেস্টেড স্ক্রোলিং কন্টেইনারে পাস করার আগে অথবা স্ক্রোলটি টেনে আনার আগে EdgeEffect পুল দূরত্ব ব্যবহার করুন। পূর্ববর্তী কোড নমুনায়, যখন একটি এজ ইফেক্ট প্রদর্শিত হচ্ছে তখন getDistance() একটি ধনাত্মক মান প্রদান করে এবং গতির সাথে মুক্তি পেতে পারে। যখন টাচ ইভেন্টটি স্ট্রেচটি প্রকাশ করে, তখন এটি প্রথমে EdgeEffect দ্বারা ব্যবহৃত হয় যাতে নেস্টেড স্ক্রোলিং এর মতো অন্যান্য প্রভাবগুলি প্রদর্শিত হওয়ার আগে এটি সম্পূর্ণরূপে মুক্তি পায়। বর্তমান প্রভাবটি মুক্তি দেওয়ার জন্য কত পুল দূরত্ব প্রয়োজন তা জানতে আপনি getDistance() ব্যবহার করতে পারেন।

onPull() এর বিপরীতে, onPullDistance() পাস করা ডেল্টার খরচের পরিমাণ ফেরত দেয়। Android 12 থেকে শুরু করে, যদি onPull() বা onPullDistance() নেতিবাচক deltaDistance মান পাস করে যখন getDistance() 0 হয়, তাহলে stretch প্রভাব পরিবর্তন হয় না। Android 11 এবং তার আগের সংস্করণগুলিতে, onPull() মোট দূরত্বের জন্য নেতিবাচক মানগুলিকে গ্লো ইফেক্ট দেখাতে দেয়।

ওভারস্ক্রোল থেকে বেরিয়ে আসুন

আপনি আপনার লেআউট ফাইলে অথবা প্রোগ্রাম্যাটিকভাবে ওভারস্ক্রোল অপ্ট আউট করতে পারেন।

আপনার লেআউট ফাইলটি অপ্ট আউট করতে, নিম্নলিখিত উদাহরণে দেখানো হিসাবে android:overScrollMode সেট করুন:

<MyCustomView android:overScrollMode="never">
    ...
</MyCustomView>

প্রোগ্রাম্যাটিকভাবে অপ্ট আউট করতে, নিম্নলিখিত কোডটি ব্যবহার করুন:

কোটলিন

customView.overScrollMode = View.OVER_SCROLL_NEVER

জাভা

customView.setOverScrollMode(View.OVER_SCROLL_NEVER);

অতিরিক্ত সম্পদ

নিম্নলিখিত সম্পর্কিত সম্পদগুলি দেখুন: