🤹🏻 🦐 🤚 खरोंच से एक कस्टम घटक बनाना। भाग २ 🔸 👰🏾 👩‍🏫

प्रविष्टि

साथियों, फिर से नमस्कार।

अपने पिछले लेख में, मैंने एक उदाहरण के रूप में सरल, लेकिन सुंदर पियानो कीबोर्ड का उपयोग करके एक कस्टम घटक बनाने की मूल बातें कीं।

कट के तहत इस लेख में, हम ~~सीटी और ...~~ हमारे कीबोर्ड की अतिरिक्त विशेषताओं को जारी रखेंगे। एजेंडे में:

स्क्रीन को घुमाते समय घटक स्थिति को सहेजना
ओवरक्रोल के लिए बैकलाइट जोड़ना
XML में पासिंग पैरामीटर
मल्टी-टच जूम

स्क्रीन को घुमाते समय घटक स्थिति को सहेजना

अब हम अपने घटक में इस व्यवहार का पता लगा सकते हैं। यदि हम किसी भी स्थिति में स्क्रॉल करते हैं, तो स्क्रीन को घुमाएं, स्क्रॉल शून्य पर होगा। जाहिर है, इसका कारण यह है कि जब आप स्क्रीन को घुमाते हैं, तो गतिविधि को फिर से बनाया जाता है, और व्यू को फिर से बनाया जाता है।
पहली बात जो यहां ध्यान में आती है, वह है हमारी गतिविधि का onSaveInstanceState() विधि का उपयोग करना, घटक से स्क्रॉल मान को खींचना और सहेजना, और बाद में, इसे फिर से बनाते समय स्क्रॉल को हमारे घटक पर सेट करें। और यह काम करेगा, लेकिन इसे शायद ही सही दृष्टिकोण कहा जा सकता है। कल्पना करें कि हमारे पास एक पैरामीटर नहीं है जिसे सहेजने की आवश्यकता है, लेकिन दस, या एक घटक नहीं, बल्कि दस ... दस मापदंडों के साथ।
सौभाग्य से, एंड्रॉइड के आंतरिक तंत्र पहले से ही एक पहचानकर्ता के साथ सभी घटकों की स्थिति के स्वचालित संरक्षण के लिए प्रदान करते हैं। आखिरकार, आपको रोटेशन के दौरान ListView का स्क्रॉल रखने के लिए कुछ भी नहीं करना है, है ना? इसलिए हम उस चीज़ का लाभ उठाएंगे जो पहले से ही दृश्य में है और अंदर से घटक की स्थिति का प्रबंधन करेगी, न कि बाहर से।
और यह आश्चर्यजनक रूप से सरल है। हमें व्यू क्लास onSaveInstanceState() और onRestoreInstanceState(Parcelable state) के तरीकों को ओवरराइड करने की आवश्यकता है। हालांकि, गतिविधि में एनालॉग्स से थोड़ा अंतर है। वहां हम Bundle के साथ सौदा करते हैं, यहां हमारे पास पार्सलबल है। हमें अपना खुद का Parcelable class बनाना होगा, जो android.view.View.BaseSavedState का वंशज होना चाहिए।

 public static class SavedState extends BaseSavedState { int xOffset; int instrumentWidth; //          :) SavedState(Parcelable superState) { super(superState); } @Override public void writeToParcel(Parcel out, int flags) { super.writeToParcel(out, flags); out.writeInt(xOffset); out.writeInt(instrumentWidth); } public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() { public SavedState createFromParcel(Parcel in) { return new SavedState(in); } public SavedState[] newArray(int size) { return new SavedState[size]; } }; private SavedState(Parcel in) { super(in); xOffset = in.readInt(); instrumentWidth = in.readInt(); } }

यह हमारे मामले में कैसा दिखता है। अब यह केवल इसका उपयोग करने के लिए बनी हुई है:

 @Override protected Parcelable onSaveInstanceState() { SavedState st = new SavedState(super.onSaveInstanceState()); st.xOffset = xOffset; st.instrumentWidth = xOffset; return st; } protected void onRestoreInstanceState(Parcelable state) { if (!(state instanceof SavedState)) { super.onRestoreInstanceState(state); return; } SavedState ss = (SavedState) state; super.onRestoreInstanceState(ss.getSuperState()); xOffset = ss.xOffset; xOffset = ss.instrumentWidth; };

हो गया। यदि आप अब स्क्रीन को घुमाते हैं, तो स्क्रॉल खो नहीं जाएगा। लेकिन एक और छोटा कॉस्मेटिक विवरण है जिसे मैं जोड़ूंगा। हमारे घटक में एक घटक को मोड़ते समय, एक उच्च संभावना है कि कीबोर्ड की चौड़ाई बदल जाएगी, चूंकि हमारी ऊंचाई बदल जाएगी (परिदृश्य मोड में कम), कुंजी संकीर्ण या व्यापक हो जाएगी। इसलिए, हमारे स्थिर मूल्य xOffset, पुनर्गठन के बाद लोड किया गया है, को समायोजित करने की आवश्यकता है। यह बहुत सरलता से किया जाता है। सबसे पहले, हम अपने कीबोर्ड की पुरानी चौड़ाई को बनाए रखेंगे जब हम इसे दोबारा बनाएंगे। यही कारण है कि ऊपर दिए गए कोड में मैं हमारे सेवडस्टेट में इंस्ट्रूमेंट फील्ड को भी सेव करता हूं।
हमारे onDraw () में, जहां हम इसके आकार को बदलने के बाद घटक को इनिशियलाइज़ करते हैं, हम निम्नलिखित संशोधनों को जोड़ते हैं:

 if (measurementChanged) { measurementChanged = false; keyboard.initializeInstrument(getMeasuredHeight(), getContext()); float oldInstrumentWidth = instrumentWidth; instrumentWidth = keyboard.getWidth(); float ratio = (float) instrumentWidth / oldInstrumentWidth; //          xOffset = (int) (xOffset * ratio); }

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

ओवरस्क्रॉल के लिए चमक प्रभाव

जैसा कि एक उम्मीद करता है, हमारे लिए एक तैयार-निर्मित घटक पहले से ही बनाया गया है, जो जानता है कि इन किनारों को सही तरीके से कैसे आकर्षित किया जाए, लेकिन हमें इसे सही तरीके से और वॉइला में छड़ी करने की आवश्यकता है। इस घटक को एजफेक्ट कहा जाता है। लेकिन हम इसका उपयोग नहीं करेंगे, क्योंकि यह केवल आईसीएस में दिखाई दिया। हम EdgeEffectCompat वर्ग का उपयोग करेंगे, जो संगतता पुस्तकालय में उपलब्ध है और EdgeEffect पर एक आवरण है। दुर्भाग्य से, इसका मतलब है कि उन संस्करणों में जहां प्रभाव का समर्थन नहीं किया गया है, यह वर्ग एक साधारण ठूंठ के रूप में कार्य करेगा और कुछ भी नहीं होगा।
तो, हमें दो प्रतियों की आवश्यकता है - बाएं और दाएं किनारों के लिए।

 private EdgeEffectCompat leftEdgeEffect; private EdgeEffectCompat rightEdgeEffect;

उन्हें गतिविधि में एक सरल तरीके से आरंभ किया जाता है।

अब, ड्राइंग। स्क्रॉलबार की तरह, प्रभाव सभी सामग्री के ऊपर खींचा जाता है, इसलिए, इसे ड्रा () विधि में रखना उचित है। यहां मैं ईमानदारी से स्वीकार करता हूं कि जो चल रहा है वह सादृश्य द्वारा किया जाता है कि यह व्यूपेज क्लास में कैसे लागू किया जाता है। सामान्य तौर पर, हम onDraw में प्रभाव को बिल्कुल उसी परिणाम के साथ आकर्षित कर सकते हैं, लेकिन, सामान्य तौर पर, यह मेरी राय में और भी अधिक सुंदर है, क्योंकि onDraw में हम अपना खुद का ड्रॉ - सिस्टम इफेक्ट डालते हैं।

 public void draw(Canvas canvas) { super.draw(canvas); boolean needsInvalidate = false; final int overScrollMode = ViewCompat.getOverScrollMode(this); if (overScrollMode == ViewCompat.OVER_SCROLL_ALWAYS || (overScrollMode == ViewCompat.OVER_SCROLL_IF_CONTENT_SCROLLS)) { if (!leftEdgeEffect.isFinished()) { final int restoreCount = canvas.save(); final int height = getHeight() - getPaddingTop() - getPaddingBottom(); final int width = getWidth(); canvas.rotate(270); canvas.translate(-height + getPaddingTop(), 0); leftEdgeEffect.setSize(height, width); needsInvalidate |= leftEdgeEffect.draw(canvas); canvas.restoreToCount(restoreCount); } if (!rightEdgeEffect.isFinished()) { final int restoreCount = canvas.save(); final int width = getWidth(); final int height = getHeight() - getPaddingTop() - getPaddingBottom(); canvas.rotate(90); canvas.translate(-getPaddingTop(), -width); rightEdgeEffect.setSize(height, width); needsInvalidate |= rightEdgeEffect.draw(canvas); canvas.restoreToCount(restoreCount); } } else { leftEdgeEffect.finish(); rightEdgeEffect.finish(); } if (needsInvalidate) { ViewCompat.postInvalidateOnAnimation(this); } }

तो यहां क्या हो रहा है। सबसे पहले, हम यह देखने के लिए जांचते हैं कि क्या हमारा घटक ओवरक्रोल का समर्थन करता है, और यदि हां, तो दोनों प्रभावों को अनुक्रम में खींच लें। तथ्य यह है कि एजएफ़ेक्ट उस दिशा का समर्थन नहीं करता है जिसमें इसे खींचा गया है, इसलिए, बाईं ओर या दाईं ओर प्रभाव को सही ढंग से प्रदर्शित करने के लिए, हमें अपने कैनवास को सही ढंग से घुमाने की आवश्यकता है।

 if (!leftEdgeEffect.isFinished()) { final int restoreCount = canvas.save(); final int height = getHeight() - getPaddingTop() - getPaddingBottom(); final int width = getWidth(); canvas.rotate(270); canvas.translate(-height + getPaddingTop(), 0); leftEdgeEffect.setSize(height, width); needsInvalidate |= leftEdgeEffect.draw(canvas); canvas.restoreToCount(restoreCount); }

यहाँ हम क्रम में हैं:

कैनवास का उपयोग करके कैनवास को सहेजें। सेव ()
इसकी ऊंचाई माइनस पैडिंग की गणना करें और प्रभाव आकार को लेफ्ट एजफैक्ट.सेटसेट (ऊंचाई, चौड़ाई) विधि का उपयोग करके सेट करें;
हम कैनवास को 270 डिग्री तक घुमाते हैं और इसे सही ढंग से स्थिति देते हैं।

मैं इसे और अधिक स्पष्ट रूप से प्रस्तुत करना चाहता हूं। आइए कैनवास परिवर्तनों को हटा दें:

यह वही है जो डिफ़ॉल्ट प्रभाव दिखता है। हमेशा नीचे। यदि हम केवल 270 के रोटेशन को जोड़ते हैं, तो हम देखेंगे कि प्रभाव सही दिशा में खींचा गया है, लेकिन कैनवास के शीर्ष कोने में।

और केवल कैनवास के ऑफसेट को जोड़ने के बाद, हम देखते हैं कि प्रभाव जगह में है।

लेकिन मैं आगे भागा, क्योंकि जब हम पर प्रभाव पड़ता है, हालांकि इसे खींचा जाता है, स्क्रॉल करते समय यह सक्रिय नहीं होता है।
यहां हमें अपने जेस्चर डिटेक्टर पर लौटने और ऑनस्क्राॅल को संशोधित करने की आवश्यकता है।

 public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) { resetTouchFeedback(); xOffset += distanceX; if (xOffset < 0) { leftEdgeEffect.onPull(distanceX / (float) getMeasuredWidth()); } if (xOffset > instrumentWidth - getMeasuredWidth()) { rightEdgeEffect.onPull(distanceX / (float) getMeasuredWidth()); } if (!awakenScrollBars()) { invalidate(); } return true; }

सबसे पहले, हमने सीमाओं के लिए xOffset को रोकना बंद कर दिया, जैसा कि हमने पहले किया था, साथ ही, हम इसी प्रभाव के ऑनपॉल तरीके को कहते हैं।
यहां यह ध्यान रखना महत्वपूर्ण है कि चूंकि हमने xOffset वैरिएबल को यहां रोकना बंद कर दिया है, इसलिए हमें इसे अन्य जगहों पर करने की आवश्यकता है, जहां यह त्रुटि का कारण बन सकता है, उदाहरण के लिए, ऑनड्राइव और कंप्यूटरीयर क्षैतिज क्रॉनिकलऑफसेट () विधियों में। ऐसा करने के लिए एक अच्छा तरीका हो सकता है, लेकिन यह अभी तक मेरे दिमाग से पार नहीं हुआ है।
अंतिम स्पर्श जिसे हम जोड़ना चाहते हैं, वह स्क्रॉल गति का अवशोषण है जब किनारे हमारी चमक तक पहुंचते हैं। ऐसा करने के लिए, हमारे onDraw में निम्न कोड जोड़ें:

 if (scroller.isOverScrolled()) { if (xOffset < 0) { leftEdgeEffect.onAbsorb(getCurrentVelocity()); } else { rightEdgeEffect.onAbsorb(getCurrentVelocity()); } } // ... @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH) private int getCurrentVelocity() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { return (int) scroller.getCurrVelocity(); } return 0; }

दुर्भाग्य से, Scroller.getCurrVelocity() विधि केवल आईसीएस के साथ शुरू करने के लिए हमारे पास उपलब्ध है, इसलिए मैंने एपीआई 14+ को लक्षित करने के रूप में विधि को चिह्नित किया। हां, यह आदर्श से बहुत दूर है, लेकिन, फिर से, यह वही है जो हमारे पास है।
अब, जब हम दृश्य के बाहर स्क्रॉल करने का प्रयास करते हैं, तो हमें होलो की शैली में एक सुंदर चमक मिलती है।

XML में घटक पैरामीटर जोड़ना

मापदंडों को जोड़ने के साथ सीधे आगे बढ़ने से पहले, मैं हमारे घटक में एक छोटी सी सुविधा जोड़ूंगा। जब आप बटन पर क्लिक करते हैं, तो हम इस नोट के नाम के साथ एक वृत्त देखेंगे।
यह तुच्छ तरीके से किया जाता है। मैंने नोट ऑब्जेक्ट की एक सरणी शुरू की

 private ArrayList<Note> notesToDraw = new ArrayList<Note>();

और जब भी मैं किसी कुंजी पर क्लिक करता हूं, मैं कुंजी के मिडी कोड द्वारा नोट को निर्धारित करता हूं और इसे सरणी में जोड़ता हूं। यह कैसे होता है इसका विवरण गीथूब पर कोड में देखा जा सकता है।

अब कीबोर्ड वर्ग में मैं drawOverlays (ArrayList) विधि जोड़ता हूं

 public void drawOverlays(ArrayList<Note> notes, Canvas canvas) { int firstVisibleKey = getFirstVisibleKey(); int lastVisibleKey = getLastVisibleKey(); for (Note note : notes) { int midiCode = note.getMidiCode(); if (midiCode >= firstVisibleKey && midiCode <= lastVisibleKey) { drawNoteFromMidi(canvas, note, midiCode, false); } } } private void drawNoteFromMidi(Canvas canvas, Note note, int midiCode, boolean replica) { Key key = keysArray[midiCode - Keyboard.START_MIDI_CODE]; overlayTextPaint.setColor(circleColor); canvas.drawCircle(key.getOverlayPivotX(), key.getOverlayPivotY(), overlayCircleRadius, overlayTextPaint); String name = note.toString(); overlayTextPaint.getTextBounds(name, 0, name.length(), bounds); int width = bounds.right - bounds.left; int height = bounds.bottom - bounds.top; overlayTextPaint.setColor(Color.BLACK); canvas.drawText(name, key.getOverlayPivotX() - width / 2, key.getOverlayPivotY() + height / 2, overlayTextPaint); }

... और एक वृत्त और पाठ के रूप में एक नोट बनाएं। जैसा कि आप शायद पहले से ही अनुमान लगा चुके हैं, मैंने ऐसा किया है ताकि हम XML के माध्यम से इस सर्कल और पाठ के मापदंडों को कॉन्फ़िगर कर सकें।

आइए हमारे व्यू की XML विशेषताओं में रंग, सर्कल त्रिज्या और पाठ आकार सेटिंग्स डालें। पहले आपको उन्हें घोषित करने की आवश्यकता है। ऐसा करने के लिए, <घोषणा-योग्य> टैग का उपयोग करें।

 <declare-styleable name="PianoView"> <attr name="overlay_color" format="color"></attr> <attr name="overlay_circle_radius" format="dimension"></attr> <attr name="overlay_circle_text_size" format="dimension"></attr> </declare-styleable>

इस परिभाषा को attrs.xml में जोड़ें। अब, हमें उन्हें अपने घटक में लोड करना होगा। कंस्ट्रक्टर में, निम्न कोड जोड़ें

 TypedArray pianoAttrs = context.obtainStyledAttributes(attrs, R.styleable.PianoView); int circleColor; float circleRadius; float circleTextSize; try { circleColor = pianoAttrs.getColor(R.styleable.PianoView_overlay_color, Color.GREEN); circleRadius = pianoAttrs.getDimension(R.styleable.PianoView_overlay_circle_radius, TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_DIP, 24, context.getResources().getDisplayMetrics())); circleTextSize = pianoAttrs.getDimension(R.styleable.PianoView_overlay_circle_text_size, TypedValue .applyDimension(TypedValue.COMPLEX_UNIT_SP, 12, context.getResources().getDisplayMetrics())); } finally { pianoAttrs.recycle(); }

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

यह अब हमारे मार्कअप में उन्हें इंगित करने के लिए बनी हुई है। ऐसा करने के लिए, आपको सबसे पहले हेडर में नाम स्थान की घोषणा करने की आवश्यकता है: xmlns:piano="http://schemas.android.com/apk/res-auto" , जिसके बाद हमें मार्कअप के साथ ऐसी फाइल मिलती है:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:piano="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".PianoDemoActivity" > <com.evilduck.piano.views.instrument.PianoView android:id="@+id/instrument_view" android:layout_width="match_parent" android:layout_height="300dip" piano:overlay_circle_radius="18dip" piano:overlay_circle_text_size="18sp" piano:overlay_color="#00FF00" /> </RelativeLayout>

इस तरह, हम अपने घटकों को मानक प्लेटफॉर्म घटकों की तरह लचीला बना सकते हैं।

मल्टी-टच जूम सपोर्ट

आखिरी बात जो मैं आज के बारे में बात करना चाहता था, वह मल्टी-टच जेस्चर के साथ बेसिक जूम सपोर्ट है।
ज़ूम इफ़ेक्ट बनाने के लिए, हम ScaleGestureDetector घटक का उपयोग करेंगे। यह कोड में उपयोग के संदर्भ में GestureDetector के समान है, यह अलग है, केवल श्रोता इसे पास करता है:

 private OnScaleGestureListener scaleGestureListener = new OnScaleGestureListener() { @Override public void onScaleEnd(ScaleGestureDetector detector) { } @Override public boolean onScaleBegin(ScaleGestureDetector detector) { return true; } @Override public boolean onScale(ScaleGestureDetector detector) { scaleX *= detector.getScaleFactor(); if (scaleX < 1) { scaleX = 1; } if (scaleX > 2) { scaleX = 2; } ViewCompat.postInvalidateOnAnimation(PianoView.this); return true; } };

हमें वैरिएबल स्केल मिला, जो हमारे ज़ूम के स्तर को व्यक्त करेगा और इसे 1 और 2 तक सीमित करेगा।
एक और सवाल यह है कि हम अपने कीबोर्ड पर ज़ूम कैसे करेंगे। इस लेख के लिए, मैंने सबसे सरल विकल्प चुना - बस कैनवास कन्वर्ट करें। हां, यह सही नहीं है, और इससे तस्वीर विकृत हो जाएगी। सही - स्केलएक्स के मूल्य के आधार पर, कुंजियों की चौड़ाई बढ़ाएं, हलकों और पाठ की त्रिज्या। यह मेरे कार्य के लिए विशिष्ट है और जूम से संबंधित नहीं है। इसलिए, हम बस कैनवास को स्केल करते हैं:

 canvas.save(); //    canvas.scale(scaleX, 1.0f); canvas.translate(-localXOffset, 0); keyboard.updateBounds(localXOffset, canvasWidth + localXOffset); keyboard.draw(canvas); if (!notesToDraw.isEmpty()) { keyboard.drawOverlays(notesToDraw, canvas); } canvas.restore();

हो गया, अगर आप अपनी उंगलियों से फैलने वाला इशारा करते हैं, तो हम देखेंगे कि कीबोर्ड चौड़ाई में कैसे बढ़ता है:

निष्कर्ष

इसलिए मेरी लेख श्रृंखला का दूसरा भाग समाप्त हो गया है। मुझे उम्मीद है कि यह किसी को जल्दी से कस्टम घटकों को बनाने की जटिलताओं का पता लगाने और उनकी परियोजनाओं की गुणवत्ता में सुधार करने में मदद करता है।
एक समाप्त उदाहरण अभी भी मेरे github पर उपलब्ध है: goo.gl/VDeuw ।
इसके अलावा, मैं दृढ़ता से अनुशंसा करता हूं कि आप इस लेख को आधिकारिक दस्तावेज से पढ़ें:
developer.android.com/training/gestures/index.html
तीसरे लेख में मैं अनुकूलन के मुद्दों को उजागर करने की कोशिश करूंगा, प्रोग्रामेटिक रूप से ड्राइंग पाठ के बजाय बिटमैप का उपयोग, मंडलियों पर विचार करें कि हमारे घटक में पिक्सल्स की क्या कमी होती है, और उनसे कैसे छुटकारा पाया जाए।