🍾 🏇🏿 👸🏽 मीडिया सामग्री देखने के लिए हमने अपनी एंड्रॉइड गैलरी लाइब्रेरी कैसे बनाई 🔗 👢 👨🏿‍🤝‍👨🏼

नमस्कार, हेब्र! बहुत पहले नहीं, साहसिक, नई परियोजनाओं और प्रौद्योगिकियों की तलाश में, मैं ~~रोबोट बन गया~~ Redmadrobot में बसे। मुझे वार्मिंग के लिए एक कुर्सी, एक मॉनिटर और एक मैकबुक और एक छोटी आंतरिक परियोजना मिली। मीडिया सामग्री जो हम अपनी परियोजनाओं में उपयोग करते हैं, को देखने के लिए एक स्व-लिखित पुस्तकालय को समाप्त करना और प्रकाशित करना आवश्यक था। लेख में, मैं आपको बताऊंगा कि एक सप्ताह में स्पर्श की घटनाओं को कैसे समझें, एक खुला स्रोत बनें, एंड्रॉइड एसडीके में एक बग ढूंढें और एक पुस्तकालय प्रकाशित करें।

शुरुआत

हमारे स्टोर ऐप्स की एक महत्वपूर्ण विशेषता यह है कि सभी ओर और पास से माल और सेवाओं के वीडियो और तस्वीरें देखने की क्षमता है। हम पहिया को सुदृढ़ नहीं करना चाहते थे और एक ऐसे तैयार पुस्तकालय की तलाश में थे जो हमारे अनुकूल हो।

हमने ऐसा समाधान खोजने की योजना बनाई, ताकि उपयोगकर्ता यह कर सके:

तस्वीरें देखें;
ज़ूम और डबल टैप करने के लिए चुटकी का उपयोग करके स्केल तस्वीरें;
एक वीडियो देखें
मीडिया सामग्री flipping;
एक ऊर्ध्वाधर स्वाइप (खारिज करने के लिए स्वाइप) के साथ फोटो कार्ड बंद करें।

यहाँ हमने पाया:

FrescoImageViewer - फ़ोटो और मूल इशारों के माध्यम से देखने और स्क्रॉल करने का समर्थन करता है, लेकिन वीडियो देखने का समर्थन नहीं करता है और फ्रेस्को लाइब्रेरी के लिए अभिप्रेत है।
PhotoView - फ़ोटो देखने का समर्थन करता है, मुख्य नियंत्रण इशारों के अधिकांश, स्क्रॉल करने के अलावा, खारिज करने के लिए स्वाइप, वीडियो देखने का समर्थन नहीं करता है।
PhotoDraweeView - PhotoView के लिए कार्यक्षमता के समान है, लेकिन फ्रेस्को के लिए इरादा है।

चूंकि पुस्तकालयों में से कोई भी पूरी तरह से आवश्यकताओं को पूरा नहीं करता है, इसलिए हमें अपना स्वयं का लिखना होगा।

हमें लाइब्रेरी का एहसास है

आवश्यक कार्यक्षमता प्राप्त करने के लिए, हमने अन्य पुस्तकालयों से मौजूदा समाधानों को अंतिम रूप दिया। उन्होंने जो कुछ भी हुआ उसे मामूली नाम Android गैलरी देने का फैसला किया।

हम कार्यक्षमता को लागू करते हैं

तस्वीरें देखें और ज़ूम करें
फ़ोटो देखने के लिए हमने PhotoView लाइब्रेरी ली, जो बॉक्स से बाहर स्केलिंग का समर्थन करती है।

देखें वीडियो
वीडियो देखने के लिए, उन्होंने एक्सोप्लेयर लिया, जिसे MediaPagerAdapter में पुन: उपयोग किया जाता है। जब कोई उपयोगकर्ता पहली बार कोई वीडियो खोलता है, तो ExoPlayer बनाया जाता है। जब किसी अन्य तत्व पर स्विच किया जाता है, तो इसे कतारबद्ध किया जाता है, इसलिए अगली बार जब आप वीडियो शुरू करते हैं, तो पहले से बनाई गई एक्सोप्लेयर आवृत्ति का उपयोग किया जाएगा। यह तत्वों के बीच संक्रमण को आसान बनाता है।

स्क्रॉलिंग मीडिया सामग्री
यहाँ हमने FrescoImageViewer से MultiTouchViewPager का उपयोग किया, जो मल्टी टच इवेंट्स को इंटरसेप्ट नहीं करता है, इसलिए हम इमेज को स्केल करने के लिए इसमें जेस्चर जोड़ने में सक्षम थे।

खारिज करने के लिए स्वाइप करें
PhotoView ने खारिज करने और बहस करने के लिए स्वाइप का समर्थन नहीं किया (छवि के ऊपर या नीचे होने पर मूल छवि आकार को पुनर्स्थापित करना)।
यहां बताया गया है कि हम इसे कैसे संभालते हैं।

बर्खास्त करने के लिए कड़ी चोट को लागू करने के लिए स्पर्श घटनाओं को सीखना

खारिज करने के लिए स्वाइप का समर्थन करने के लिए आगे बढ़ने से पहले, आपको यह समझने की ज़रूरत है कि घटनाओं को कैसे स्पर्श किया जाए। जब उपयोगकर्ता स्क्रीन को छूता है, तो dispatchTouchEvent(motionEvent: MotionEvent) विधि को वर्तमान गतिविधि में कहा जाता है, जहां MotionEvent.ACTION_DOWN मिलता MotionEvent.ACTION_DOWN । यह विधि घटना के भाग्य का फैसला करती है। आप टच प्रोसेसिंग के लिए onTouchEvent(motionEvent: MotionEvent) पास कर सकते हैं, या दृश्य पदानुक्रम में इसे ऊपर से नीचे तक जाने दे सकते हैं। देखें, जो ACTION_UP से पहले किसी ईवेंट और / या बाद की घटनाओं में रुचि ACTION_UP , वह सही है।

उसके बाद, वर्तमान हावभाव की सभी घटनाएं इस दृश्य में आ जाएंगी जब तक कि इशारा ACTION_UP घटना के साथ समाप्त नहीं हो जाता है या अभिभावक ViewGroup नियंत्रण लेता है (तब ACTION_CANCELED घटना दृश्य में आ जाएगी)। यदि घटना पूरे दृश्य पदानुक्रम के आसपास चली गई और किसी को कोई दिलचस्पी नहीं थी, तो यह गतिविधि पर वापस लौटता है onTouchEvent(motionEvent: MotionEvent) ।

हमारे एंड्रॉइड गैलरी लाइब्रेरी में, motionEvent में पहले ACTION_DOWN इवेंट motionEvent dispatchTouchEvent() में आता है, जहां motionEvent onTouch() लागू करने के लिए पारित किया जाता है, जो सच लौटाता है। इसके अलावा, सभी घटनाएं एक ही श्रृंखला से गुजरती हैं:

ACTION_UP ;
ViewPager स्क्रॉल करने के लिए ईवेंट को इंटरसेप्ट करने की कोशिश करेगा;
वर्टिकलड्रैगलैट आउट को स्वाइप करने के लिए ईवेंट को इंटरसेप्ट करने की कोशिश करेगा।

केवल onInterceptTouchEvent(motionEvent: MotionEvent) विधि में केवल ViewGroup घटनाओं को रोक सकता है। यहां तक कि अगर व्यू किसी मोशनइवेंट में रुचि रखता है, तो इवेंट स्वयं ही पिछले संपूर्ण dispatchTouchEvent(motionEvent: MotionEvent) श्रृंखला के dispatchTouchEvent(motionEvent: MotionEvent) जाएगा। तदनुसार, माता-पिता हमेशा अपने बच्चों को "देखते" हैं। कोई भी पैरेंट onInterceptTouchEvent(motionEvent: MotionEvent) इवेंट को इंटरसेप्ट कर सकता है और onInterceptTouchEvent(motionEvent: MotionEvent) , फिर सभी बच्चे MotionEvent.ACTION_CANCEL को onTouchEvent(motionEvent: MotionEvent) में MotionEvent.ACTION_CANCEL प्राप्त करेंगे।

उदाहरण: उपयोगकर्ता RecyclerView में एक तत्व पर उंगली रखता है, फिर उसी तत्व में घटनाओं को संसाधित किया जाता है। लेकिन जैसे ही वह अपनी उंगली को ऊपर / नीचे हिलाना शुरू करता है, RecyclerView घटनाओं को रोक देगा, और स्क्रॉल शुरू हो जाएगा, और दृश्य ACTION_CANCEL घटना प्राप्त करेगा।

एंड्रॉइड गैलरी में, वर्टिकलड्रेग्लॉयआउट स्क्रॉल करने के लिए इवेंट को इंटरसेप्ट कर सकता है या स्क्रॉल करने के लिए ViewPager कर सकता है। लेकिन View माता-पिता को requestDisallowInterceptTouchEvent(true) विधि को कॉल करके घटनाओं को requestDisallowInterceptTouchEvent(true) से रोक सकता है। यह आवश्यक हो सकता है यदि दृश्य को उन कार्यों को करने की आवश्यकता होती है जिनके लिए माता-पिता द्वारा अवरोधन हमारे लिए वांछनीय नहीं है।

उदाहरण के लिए, जब एक खिलाड़ी का उपयोगकर्ता एक विशिष्ट समय के लिए एक ट्रैक को छोड़ देता है। यदि पेरेंट व्यूगर ने एक क्षैतिज स्क्रॉल को इंटरसेप्ट किया है, तो अगले ट्रैक पर एक संक्रमण होगा।

बर्खास्त करने के लिए स्वाइप को संभालने के लिए, हमने वर्टिकलड्रैग्लॉयआउट लिखा, लेकिन इसे फोटोव्यू से स्पर्श की घटनाएं नहीं मिलीं। यह समझने के लिए कि ऐसा क्यों होता है, मुझे यह पता लगाना था कि फोटोव्यू में टच इवेंट को कैसे संसाधित किया जाता है।

प्रसंस्करण आदेश:

जब VertEDragLayout में MotionEvent.ACTION_DOWN, interceptTouchEvent() ट्रिगर होता है, जो गलत रिटर्न देता है, क्योंकि यह ViewGroup केवल ऊर्ध्वाधर ACTION_MOVE में रुचि रखता है। ACTION_MOVE दिशा को डिस्पैचटच्यूवेंट dispatchTouchEvent() में परिभाषित किया गया है, जिसके बाद इवेंट को super.dispatchTouchEvent() में super.dispatchTouchEvent() विधि में पारित किया जाता है, जहां super.dispatchTouchEvent() में interceptTouchEvent() कार्यान्वयन के लिए घटना को पारित किया जाता है।
जब ACTION_DOWN ईवेंट PhotoView में onTouch() विधि तक पहुंचता है, तो दृश्य ईवेंट प्रबंधन को बाधित करने की क्षमता को दूर ले जाता है। बाद के सभी इशारे की घटनाएँ interceptTouchEvent() पद्धति में नहीं आती हैं। नियंत्रण को बाधित करने की क्षमता केवल अभिभावक को दी जाती है, अगर इशारा पूरा हो गया है या यदि क्षैतिज ACTION_MOVE छवि के दाईं / बाईं सीमा पर ACTION_MOVE ।
```
 if (mAllowParentInterceptOnEdge && !mScaleDragDetector.isScaling() && !mBlockParentIntercept) { if (mScrollEdge == EDGE_BOTH || (mScrollEdge == EDGE_LEFT && dx >= 1f) || (mScrollEdge == EDGE_RIGHT && dx <= -1f)) { if (parent != null) { parent.requestDisallowInterceptTouchEvent(false); } } } else { if (parent != null) { parent.requestDisallowInterceptTouchEvent(true); } } 
```
चूंकि PhotoView माता-पिता को क्षैतिज ACTION_MOVE मामले में केवल नियंत्रण को बाधित करने की अनुमति देता है, और खारिज करने के लिए स्वाइप ऊर्ध्वाधर ACTION_MOVE , तो ACTION_MOVE एक इशारे को लागू करने के लिए घटना नियंत्रण को बाधित नहीं कर सकता है। इसे ठीक करने के लिए, आपको ऊर्ध्वाधर ACTION_MOVE मामले में नियंत्रण को रोकना ACTION_MOVE ।
```
 if (mAllowParentInterceptOnEdge && !mScaleDragDetector.isScaling() && !mBlockParentIntercept) { if (mHorizontalScrollEdge == HORIZONTAL_EDGE_BOTH || (mHorizontalScrollEdge == HORIZONTAL_EDGE_LEFT && dx >= 1f) || (mHorizontalScrollEdge == HORIZONTAL_EDGE_RIGHT && dx <= -1f) || mVerticalScrollEdge == VERTICAL_EDGE_BOTH || (mVerticalScrollEdge == VERTICAL_EDGE_TOP && dy >= 1f) || (mVerticalScrollEdge == VERTICAL_EDGE_BOTTOM && dy <= -1f)) { if (parent != null) { parent.requestDisallowInterceptTouchEvent(false); } } } else { if (parent != null) { parent.requestDisallowInterceptTouchEvent(true); } } 
```
अब, पहले ऊर्ध्वाधर ACTION_MOVE PhotoView के मामले में अभिभावक को इंटरसेप्ट करने का अवसर मिलेगा:

निम्नलिखित ACTION_MOVE को ACTION_MOVE में इंटरसेप्ट किया जाएगा, और ACTION_CANCEL घटना बच्चे में उड़ जाएगी। देखें:

अन्य सभी ACTION_MOVE मानक श्रृंखला के साथ VerticalDragLayout के लिए उड़ान ACTION_MOVE । यह महत्वपूर्ण है कि व्यूग्रुप बच्चे व्यू से घटनाओं को नियंत्रित करने के बाद, चाइल्ड व्यू नियंत्रण प्राप्त नहीं कर सकता है।

इसलिए हमने PhotoView लाइब्रेरी के लिए समर्थन को खारिज करने के लिए स्वाइप लागू किया। हमारी लाइब्रेरी में, हमने एक अलग मॉड्यूल में निकाले गए PhotoView के संशोधित स्रोतों का उपयोग किया, और मूल PhotoView भंडार में एक मर्ज अनुरोध बनाया।

हम PhotoView में डिबाइंड लागू करते हैं

स्मरण करो कि एक स्वीकार्य स्वीकार्य पैमाने का एक एनीमेशन-बहाली है जब छवि को अपनी सीमाओं से परे बढ़ाया जाता है।

PhotoView में ऐसी कोई संभावना नहीं थी। लेकिन जब से हमने किसी और के खुले स्रोत को खोदना शुरू किया है, तो वहां क्यों रुकना है? PhotoView में, आप एक ज़ूम लिमिट सेट कर सकते हैं। प्रारंभ में, यह न्यूनतम - X1 और अधिकतम - x3 है। छवि इन सीमाओं से परे नहीं जा सकती।
```
 @Override public void onScale(float scaleFactor, float focusX, float focusY) { if ((getScale() < mMaxScale || scaleFactor < 1f) && (getScale() > mMinScale || scaleFactor > 1f)) { if (mScaleChangeListener != null) { mScaleChangeListener.onScaleChange(scaleFactor, focusX, focusY); } mSuppMatrix.postScale(scaleFactor, scaleFactor, focusX, focusY); //      checkAndDisplayMatrix(); } } 
```
शुरू करने के लिए, हमने "न्यूनतम पर पहुंचने पर स्केलिंग के निषेध" को हटाने का फैसला किया: हमने बस हालत getScale() > mMinScale || scaleFactor > 1f फेंक दिया। getScale() > mMinScale || scaleFactor > 1f । और फिर अचानक ...

डेब्यू कमाया! जाहिर है, यह इस तथ्य के कारण हुआ कि पुस्तकालय के रचनाकारों ने इसे दो बार सुरक्षित खेलने का फैसला किया, जिससे दोनों को बहस और स्केलिंग पर प्रतिबंध लगा दिया गया। ऑनटच इवेंट के कार्यान्वयन में, अर्थात् MotionEvent.ACTION_UP के मामले में, यदि उपयोगकर्ता ने अधिकतम / न्यूनतम से अधिक / कम स्केल किया है, तो AnimatedZoomRunnable लॉन्च किया गया है, जो छवि को उसके मूल आकार में लौटाता है।
```
 @Override public boolean onTouch(View v, MotionEvent ev) { boolean handled = false; switch (ev.getAction()) { case MotionEvent.ACTION_UP: // If the user has zoomed less than min scale, zoom back // to min scale if (getScale() < mMinScale) { RectF rect = getDisplayRect(); if (rect != null) { v.post(new AnimatedZoomRunnable(getScale(), mMinScale, rect.centerX(), rect.centerY())); handled = true; } } else if (getScale() > mMaxScale) { RectF rect = getDisplayRect(); if (rect != null) { v.post(new AnimatedZoomRunnable(getScale(), mMaxScale, rect.centerX(), rect.centerY())); handled = true; } } break; } } 
```
बर्खास्त करने के साथ-साथ स्वाइप करने के लिए, हमने अपनी लाइब्रेरी के स्रोतों में PhotoView को अंतिम रूप दिया और मूल PhotoView के लिए एक बहस के "जोड़" के साथ एक पुल अनुरोध बनाया।

PhotoView में अचानक बग को ठीक करें

PhotoView में एक बहुत बुरा बग है। जब उपयोगकर्ता छवि को डबल टैप के साथ बड़ा करना चाहता है और ~~उसे मिर्गी का दौरा पड़ता है~~ छवि पैमाने पर शुरू होती है, यह 180 डिग्री को लंबवत रूप से फ्लिप कर सकती है। यह बग Google Play से लोकप्रिय अनुप्रयोगों में भी पाया जा सकता है, उदाहरण के लिए, सियान में।

एक लंबी खोज के बाद, हमने अभी भी इस बग को स्थानीयकृत किया है: कभी-कभी स्केलिंग के लिए छवि स्केलिंग के लिए इनपुट मैट्रिक्स को एक नकारात्मक स्केलफैक्टोर खिलाया जाता है, जो छवि को फ्लिप करने का कारण बनता है।

CustomGestureDetector
```
 @Override public boolean onScale(ScaleGestureDetector detector) { //  -   scaleFactor < 0 //      float scaleFactor = detector.getScaleFactor(); if (Float.isNaN(scaleFactor) || Float.isInfinite(scaleFactor)) return false; //    scaleFactor   callback //      mListener.onScale(scaleFactor, detector.getFocusX(), detector.getFocusY()); return true; } 
```
Android ScaleGestureDetector से स्केल करने के लिए, हमें स्केलफ़ेक्टर मिलता है, जिसकी गणना निम्न प्रकार से की जाती है:
```
 public float getScaleFactor() { if (inAnchoredScaleMode()) { // Drag is moving up; the further away from the gesture // start, the smaller the span should be, the closer, // the larger the span, and therefore the larger the scale final boolean scaleUp = (mEventBeforeOrAboveStartingGestureEvent && (mCurrSpan < mPrevSpan)) || (!mEventBeforeOrAboveStartingGestureEvent && (mCurrSpan > mPrevSpan)); final float spanDiff = (Math.abs(1 - (mCurrSpan / mPrevSpan)) * SCALE_FACTOR); return mPrevSpan <= 0 ? 1 : scaleUp ? (1 + spanDiff) : (1 - spanDiff); } return mPrevSpan > 0 ? mCurrSpan / mPrevSpan : 1; } 
```
यदि आप डिबग लॉग्स के साथ इस विधि को ओवरराइड करते हैं, तो आप यह ट्रैक कर सकते हैं कि किस प्रकार के वैरिएबल के मान एक नकारात्मक पैमाना प्राप्त होता है:
```
 mEventBeforeOrAboveStartingGestureEvent is true; SCALE_FACTOR is 0.5; mCurrSpan: 1075.4398; mPrevSpan 38.867798; scaleUp: false; spanDiff: 13.334586; eval result is -12.334586 
```
इस बात पर संदेह है कि उन्होंने SCALE_FACTOR == 0.5 द्वारा स्प्रेड को गुणा करके इस समस्या को हल करने का प्रयास किया। लेकिन यह समाधान मदद नहीं करेगा यदि mCurrSpan और mPrevSpan के बीच का अंतर तीन गुना से अधिक हो। इस बग के लिए एक टिकट पहले ही शुरू कर दिया गया है, लेकिन यह अभी तक तय नहीं हुआ है।
~~कील~~ इस समस्या का सबसे आसान समाधान केवल नकारात्मक पैमानों को छोड़ना है। व्यवहार में, उपयोगकर्ता ध्यान नहीं देगा कि छवि कभी-कभी सामान्य से थोड़ी कम सुचारू रूप से ज़ूम की जाती है।

एक निष्कर्ष के बजाय

पुल अनुरोधों का भाग्य

हमने एक स्थानीय सुधार किया और फोटोव्यू में अंतिम पुल अनुरोध बनाया। इस तथ्य के बावजूद कि कुछ पीआर एक साल से वहां लटका हुआ है, हमारे पीआर को मास्टर शाखा में जोड़ दिया गया है और यहां तक कि फोटोव्यू की एक नई रिलीज भी जारी की गई है। जिसके बाद हमने एंड्रॉइड गैलरी से स्थानीय मॉड्यूल को काटने और आधिकारिक PhotoView स्रोतों को खींचने का फैसला किया। ऐसा करने के लिए, मुझे AndroidX के लिए समर्थन जोड़ना था, जिसे 2.1.3 संस्करण में PhotoView में जोड़ा गया था।

पुस्तकालय कहां से लाएं

यहां Android गैलरी लाइब्रेरी के स्रोत कोड की तलाश करें - https://github.com/redmadrobot-spb/android-gallery , साथ ही उपयोग के लिए निर्देश। और परियोजनाओं का समर्थन करने के लिए जो अभी भी समर्थन पुस्तकालय का उपयोग करते हैं, हमने एंड्रॉइड-गैलरी- अलग किए गए एक अलग संस्करण बनाया। लेकिन सावधान रहें, क्योंकि एक साल में सपोर्ट लाइब्रेरी एक कद्दू में बदल जाएगी!

आगे क्या है

अब पुस्तकालय पूरी तरह से हमारे अनुकूल है, लेकिन विकास की प्रक्रिया में नए विचार उत्पन्न हुए। यहाँ उनमें से कुछ हैं:
- किसी भी लेआउट में पुस्तकालय का उपयोग करने की क्षमता, और न ही एक अलग FragmentDialog;
- UI को अनुकूलित करने की क्षमता;
- गिल्ड और एक्सोप्लेयर को बदलने की क्षमता;
- ViewPager के बजाय कुछ का उपयोग करने की क्षमता।
संदर्भ
- एंड्रॉइड टच सिस्टम थोड़े अलग दृष्टिकोण से - इस विषय पर एक बहुत अच्छा लेख अन्य महान लेखों और वीडियो के लिंक के साथ है, जो बताता है कि एंड्रॉइड टच सिस्टम कैसे काम करता है।
- एंड्रॉइड में जेस्चर मास्टररी - रूसी में एंड्रॉइड टच सिस्टम के बारे में लेख।
युपीडी

एक लेख लिखते समय, FrescoImageViewer के डेवलपर्स से एक समान पुस्तकालय निकला । उन्होंने संक्रमण एनीमेशन के लिए समर्थन जोड़ा, लेकिन अभी तक हमारे पास केवल वीडियो समर्थन है। :)