Android में, आम तौर पर स्क्रोल करने के लिए ScrollView क्लास का इस्तेमाल किया जाता है. किसी भी स्टैंडर्ड लेआउट को ScrollView में नेस्ट करें. ऐसा करने से, वह अपने कंटेनर की सीमाओं से बाहर जा सकता है. इससे, फ़्रेमवर्क की मदद से मैनेज किया जाने वाला स्क्रोल किया जा सकने वाला व्यू मिलता है. कस्टम स्क्रोलर को लागू करने की ज़रूरत सिर्फ़ खास स्थितियों में होती है. इस दस्तावेज़ में, स्क्रोलर का इस्तेमाल करके, टच जेस्चर के जवाब में स्क्रोलिंग इफ़ेक्ट दिखाने का तरीका बताया गया है.
आपका ऐप्लिकेशन,
स्क्रोलर—Scroller
या
OverScroller—का
इस्तेमाल करके, टच इवेंट के जवाब में स्क्रोलिंग ऐनिमेशन बनाने के लिए ज़रूरी डेटा इकट्ठा कर सकता है. ये दोनों एक जैसे होते हैं, लेकिन OverScroller में ऐसे तरीके भी शामिल होते हैं जिनसे उपयोगकर्ताओं को यह पता चलता है कि पैन या फ़्लिंग जेस्चर के बाद, वे कॉन्टेंट के किनारों पर कब पहुंचते हैं.
- Android 12 (एपीआई लेवल 31) और इसके बाद के वर्शन में, खींचने के इवेंट पर विज़ुअल एलिमेंट स्ट्रेच होते हैं और वापस अपनी जगह पर आ जाते हैं. वहीं, फ़्लिंग के इवेंट पर ये फ़्लिंग होते हैं और वापस अपनी जगह पर आ जाते हैं.
- Android 11 (एपीआई लेवल 30) और इससे पहले के वर्शन में, खींचने या फ़्लिंग जेस्चर के बाद, सीमाएं "ग्लो" इफ़ेक्ट दिखाती हैं.
इस दस्तावेज़ में दिया गया InteractiveChart सैंपल, इन ओवरस्क्रोल इफ़ेक्ट को दिखाने के लिए EdgeEffect क्लास का इस्तेमाल करता है.
समय के साथ स्क्रोलिंग को ऐनिमेट करने के लिए, स्क्रोलर का इस्तेमाल किया जा सकता है. इसके लिए, प्लैटफ़ॉर्म-स्टैंडर्ड स्क्रोलिंग फ़िज़िक्स का इस्तेमाल किया जा सकता है. जैसे, फ़्रिक्शन, वेलोसिटी, और अन्य क्वालिटी. स्क्रोलर खुद कुछ भी नहीं दिखाता है. स्क्रोलर, समय के साथ स्क्रोल ऑफ़सेट को ट्रैक करते हैं, लेकिन वे उन स्थितियों को आपके व्यू पर अपने-आप लागू नहीं करते. आपको नए कोऑर्डिनेट पाने और उन्हें लागू करने की दर ऐसी रखनी होगी जिससे स्क्रोलिंग ऐनिमेशन स्मूद दिखे.
स्क्रोलिंग से जुड़ी शब्दावली के बारे में जानकारी
स्क्रोलिंग एक ऐसा शब्द है जिसका Android में अलग-अलग संदर्भों में अलग-अलग मतलब हो सकता है.
स्क्रोलिंग का मतलब है, व्यूपोर्ट को मूव करने की सामान्य प्रोसेस. व्यूपोर्ट का मतलब है, वह "विंडो" जिसमें आपको कॉन्टेंट दिखता है. जब स्क्रोलिंग
x-ऐक्सिस और y-ऐक्सिस, दोनों में होती है, तो इसे पैनिंग कहा जाता है. इस दस्तावेज़ में दिया गया InteractiveChart सैंपल ऐप्लिकेशन, स्क्रोलिंग के दो अलग-अलग टाइप दिखाता है: ड्रैग करना और फ़्लिंग करना:
- ड्रैग करना: यह उस तरह की स्क्रोलिंग है जो तब होती है, जब कोई उपयोगकर्ता
टचस्क्रीन पर अपनी उंगली को ड्रैग करता है. ड्रैग करने की सुविधा लागू की जा सकती है
onScroll()GestureDetector.OnGestureListenerमें. ड्रैग करने के बारे में ज़्यादा जानने के लिए, ड्रैग करना और स्केल करना लेख पढ़ें. - फ़्लिंग करना: यह उस तरह की स्क्रोलिंग है जो तब होती है, जब कोई उपयोगकर्ता
अपनी उंगली को तेज़ी से ड्रैग करता है और उठा लेता है. आम तौर पर, उपयोगकर्ता के उंगली उठाने के बाद, आपको व्यूपोर्ट को मूव करते रहना होता है. हालांकि, व्यूपोर्ट के रुकने तक इसकी रफ़्तार कम होती जाती है. `GestureDetector.OnGestureListener` में `onFling()` को ओवरराइड करके और स्क्रोलर ऑब्जेक्ट का इस्तेमाल करके, फ़्लिंग करने की सुविधा लागू की जा सकती है.
onFling()GestureDetector.OnGestureListener - पैनिंग: x-ऐक्सिस और y-ऐक्सिस, दोनों पर एक साथ स्क्रोल करने को पैनिंग कहा जाता है.
आम तौर पर, फ़्लिंग जेस्चर के साथ स्क्रोलर ऑब्जेक्ट का इस्तेमाल किया जाता है. हालांकि, इनका इस्तेमाल किसी भी ऐसे संदर्भ में किया जा सकता है जहां आपको टच इवेंट के जवाब में यूज़र इंटरफ़ेस (यूआई) पर स्क्रोलिंग दिखानी हो. उदाहरण के लिए, टच इवेंट को सीधे तौर पर प्रोसेस करने और उन टच इवेंट के जवाब में स्क्रोलिंग इफ़ेक्ट या "स्नैप-टू-पेज" ऐनिमेशन बनाने के लिए, onTouchEvent() को ओवरराइड किया जा सकता है.
ऐसे कॉम्पोनेंट जिनमें स्क्रोलिंग की सुविधा पहले से मौजूद होती है
Android के इन कॉम्पोनेंट में, स्क्रोलिंग और ओवरस्क्रोलिंग के लिए पहले से मौजूद सहायता शामिल होती है:
GridViewHorizontalScrollViewListViewNestedScrollViewRecyclerViewScrollViewViewPagerViewPager2
अगर आपके ऐप्लिकेशन को किसी दूसरे कॉम्पोनेंट में स्क्रोलिंग और ओवरस्क्रोलिंग की सुविधा देनी है, तो यह तरीका अपनाएं:
- टच पर आधारित स्क्रोलिंग की सुविधा के लिए, कस्टम कोड लिखें.
- Android 12 और इसके बाद के वर्शन वाले डिवाइसों के लिए, स्ट्रेच ओवरस्क्रोल इफ़ेक्ट लागू करें.
टच पर आधारित स्क्रोलिंग की सुविधा के लिए, कस्टम कोड लिखना
इस सेक्शन में, अपना स्क्रोलर बनाने का तरीका बताया गया है. यह तब ज़रूरी होता है, जब आपका ऐप्लिकेशन ऐसे कॉम्पोनेंट का इस्तेमाल करता है जिसमें स्क्रोलिंग और ओवरस्क्रोलिंग की सुविधा पहले से मौजूद नहीं होती है.
यहां दिया गया स्निपेट,
InteractiveChart
सैंपलसे लिया गया है. इसमें एक
GestureDetector
का इस्तेमाल किया गया है और
GestureDetector.SimpleOnGestureListener
के onFling() तरीके को ओवरराइड किया गया है. इसमें फ़्लिंग जेस्चर को ट्रैक करने के लिए, OverScroller का इस्तेमाल किया गया है. अगर उपयोगकर्ता, फ़्लिंग जेस्चर करने के बाद कॉन्टेंट के किनारों पर पहुंच जाता है, तो कंटेनर यह दिखाता है कि उपयोगकर्ता कॉन्टेंट के आखिर में कब पहुंचा. यह जानकारी, डिवाइस के Android वर्शन के हिसाब से दिखती है:
- Android 12 और इसके बाद के वर्शन में, विज़ुअल एलिमेंट स्ट्रेच होते हैं और वापस अपनी जगह पर आ जाते हैं.
- Android 11 और इससे पहले के वर्शन में, विज़ुअल एलिमेंट ग्लो इफ़ेक्ट दिखाते हैं.
यहां दिए गए स्निपेट का पहला हिस्सा, onFling() को लागू करने का तरीका दिखाता है:
Kotlin
// 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) }
Java
// 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() को कॉल किया जाता है. जब ओवरस्क्रोल "ग्लो" एज इफ़ेक्ट दिखाने के लिए ज़रूरी शर्तें पूरी हो जाती हैं—यानी, डिसप्ले ज़ूम इन हो, x या y सीमाओं से बाहर हो, और ऐप्लिकेशन पहले से ओवरस्क्रोल नहीं दिखा रहा हो—तो कोड, ओवरस्क्रोल ग्लो इफ़ेक्ट सेट अप करता है और व्यू पर अमान्य करने की सुविधा को ट्रिगर करने के लिए, postInvalidateOnAnimation() को कॉल करता है.
Kotlin
// 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 } ... } }
Java
// 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; } ... }
यहां कोड का वह सेक्शन दिया गया है जो असल में ज़ूम करता है:
Kotlin
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) }
Java
// 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% ज़ूम किया जाता है, तो लौटाया गया साइज़, हॉरिज़ॉन्टली और वर्टिकल, दोनों तरह से दोगुना होता है.
Kotlin
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() ) }
Java
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 क्लास का. यह फ़्लिंग के जवाब में स्क्रोल करता है और "स्नैप-टू-पेज" ऐनिमेशन को लागू करने के लिए स्क्रोलिंग का इस्तेमाल करता है.
स्ट्रेच ओवरस्क्रोल इफ़ेक्ट लागू करना
Android 12 से, EdgeEffect में स्ट्रेच ओवरस्क्रोल इफ़ेक्ट लागू करने के लिए, ये एपीआई जोड़े गए हैं:
getDistance()onPullDistance()
स्ट्रेच ओवरस्क्रोल की सुविधा से उपयोगकर्ता को बेहतरीन अनुभव देने के लिए, यह तरीका अपनाएं:
- जब उपयोगकर्ता कॉन्टेंट को छूता है और स्ट्रेच ऐनिमेशन चालू होता है, तो टच को "कैच" के तौर पर रजिस्टर करें. उपयोगकर्ता ऐनिमेशन को रोकता है और स्ट्रेच को फिर से मैनेज करना शुरू करता है.
- जब उपयोगकर्ता अपनी उंगली को स्ट्रेच की विपरीत दिशा में ले जाता है, तो स्ट्रेच को तब तक रिलीज़ करें, जब तक वह पूरी तरह से खत्म न हो जाए. इसके बाद, स्क्रोल करना शुरू करें.
- जब उपयोगकर्ता स्ट्रेच के दौरान फ़्लिंग करता है, तो स्ट्रेच इफ़ेक्ट को बेहतर बनाने के लिए,
EdgeEffectको फ़्लिंग करें.
ऐनिमेशन को कैच करना
जब कोई उपयोगकर्ता, चालू स्ट्रेच ऐनिमेशन को कैच करता है, तो EdgeEffect.getDistance() की वैल्यू 0 होती है. इससे पता चलता है कि स्ट्रेच को टच मोशन से मैनेज करना होगा. ज़्यादातर कंटेनर में, कैच को onInterceptTouchEvent() में डिटेक्ट किया जाता है. जैसा कि यहां दिए गए कोड स्निपेट में दिखाया गया है:
Kotlin
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 }
Java
@Override public boolean onInterceptTouchEvent(MotionEvent ev) { ... switch (action & MotionEvent.ACTION_MASK) { case MotionEvent.ACTION_DOWN: ... isBeingDragged = EdgeEffectCompat.getDistance(edgeEffectBottom) > 0 || EdgeEffectCompat.getDistance(edgeEffectTop) > 0; ... } }
पिछले उदाहरण में, जब mIsBeingDragged की वैल्यू true होती है, तो onInterceptTouchEvent() की वैल्यू true होती है. इसलिए, चाइल्ड के पास इवेंट को इस्तेमाल करने का मौका मिलने से पहले ही, इवेंट को इस्तेमाल करना काफ़ी है.
ओवरस्क्रोल इफ़ेक्ट को रिलीज़ करना
स्क्रोलिंग से पहले, स्ट्रेच इफ़ेक्ट को रिलीज़ करना ज़रूरी है, ताकि स्क्रोल किए जा रहे कॉन्टेंट पर स्ट्रेच लागू न हो. यहां दिए गए कोड सैंपल में, इस सबसे सही तरीके को लागू किया गया है:
Kotlin
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); } ... }
Java
@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 से, अगर getDistance() की वैल्यू 0 होने पर, onPull() या onPullDistance() को नेगेटिव deltaDistance वैल्यू पास की जाती हैं, तो स्ट्रेच इफ़ेक्ट में कोई बदलाव नहीं होता. Android 11 और इससे पहले के वर्शन में, onPull() की मदद से, कुल डिस्टेंस के लिए नेगेटिव वैल्यू, ग्लो इफ़ेक्ट दिखाती हैं.
ओवरस्क्रोल से ऑप्ट आउट करना
लेआउट फ़ाइल या प्रोग्राम के ज़रिए, ओवरस्क्रोल से ऑप्ट आउट किया जा सकता है.
लेआउट फ़ाइल में ऑप्ट आउट करने के लिए, android:overScrollMode को सेट करें. जैसा कि यहां दिए गए उदाहरण में दिखाया गया है:
<MyCustomView android:overScrollMode="never"> ... </MyCustomView>
प्रोग्राम के ज़रिए ऑप्ट आउट करने के लिए, यहां दिए गए कोड का इस्तेमाल करें:
Kotlin
customView.overScrollMode = View.OVER_SCROLL_NEVER
Java
customView.setOverScrollMode(View.OVER_SCROLL_NEVER);
अन्य संसाधन
इससे जुड़े ये संसाधन देखें: