Android में SlideStackView या ViewGroup का विस्तार

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

हमारे अनुप्रयोगों में, हमने एंड्रॉइड के लिए आधिकारिक ui पैटर्न में शामिल होने से पहले ही "स्लाइडिंग मेनू" का उपयोग किया था। प्रयोज्य प्रयोगशाला में कुछ शोध के बाद, हमने तय किया कि हमें उपयोगकर्ता को बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए साइड मेनू को आगे बढ़ाने और सुधारने की आवश्यकता है।

तो, बिंदु के करीब। केवल ऐसे मेनू के बजाय, जहां फ़ोल्डरों और खातों के साथ एक टुकड़ा अक्षरों की सूची के स्वाइप के साथ एक साथ चलता है, हम टुकड़ों को बारी-बारी से स्थानांतरित करना चाहते थे, जैसे कि चादरों का ढेर जिसे हम अगले पृष्ठ को देखने के लिए स्थानांतरित करते हैं।






स्लाइडस्टैक व्यू नामक नियंत्रण को कैसे व्यवहार करना चाहिए इसके अलावा, विकास पक्ष और उत्पाद दोनों से कुछ और आवश्यकताएं थीं:

1. प्रत्येक स्लाइड को एक टुकड़े द्वारा दर्शाया जाना चाहिए
2. एक "स्क्रॉल प्रभाव पर उछल" को लागू किया जाना चाहिए - जब स्लाइड किनारे से बहार हो
3. स्लाइड्स के अंदर की वर्टिकल लिस्ट को बिना किसी व्यवहार के ग्लिट्स के स्क्रॉल करना चाहिए।
4. सेविंग \ रीस्टोरिंग स्टेट (खुली स्लाइड की स्थिति, आदि)

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

हम सरल से जटिल तक जाएंगे - पहले आपको यह तय करने की आवश्यकता है कि एंड्रॉइडफ़्रेमवर्क में कैसे लाया जाए ताकि, सबसे पहले, हम एक साइकिल नहीं लिखते हैं, और दूसरी बात, सबसे समान उपयोगकर्ता अनुभव प्रदान करते हैं। ऊपर उल्लिखित ViewPager काम नहीं करेगा, क्योंकि स्लाइड पोजिशनिंग मॉडल पूरी तरह से अलग है। इसलिए, हम पदानुक्रम को देखते हैं और ViewGroup पर रोकते हैं।

public class SlideStackView extends ViewGroup{ public SlideStackView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); ... initAttributes(context, attrs); // we need to draw childs in reverse order setChildrenDrawingOrderEnabled(true); } public SlideStackView(Context context, AttributeSet attrs) { this(context, attrs, android.R.style.Theme_Black); } public SlideStackView(Context context) { this(context, null); } 

यहां की विशेष चीजों में से, आप केवल यह देख सकते हैं कि हम आपको अपनी स्लाइड बनाते समय एक गैर-मानक आदेश का उपयोग करने के लिए कहें। शुरू में भ्रम हो सकता है। बात यह है कि हमारी स्लाइड्स को दाएं से बाएं, क्योंकि से होना चाहिए पहले अक्षरों की सूची (# 0) के साथ स्लाइड होनी चाहिए, जब हम इसे बंद करते हैं, तो हम स्लाइड को फ़ोल्डर्स की सूची (# 1) के साथ देखेंगे, और अंतिम हम खातों की सूची (# 2) के साथ स्लाइड देखेंगे। व्यूग्रुप के नंबरिंग में, सामान्य क्रम का उपयोग करना अधिक सुविधाजनक होता है - अर्थात, बाएं से दाएं, दोनों स्लाइड जोड़ते समय, और जब वे आगे खींचे जाते हैं, तैनात किए जाते हैं, आदि। यहाँ बात यह भी नहीं है कि यह प्रथागत है, या इसे कोड की एक पंक्ति से कम लिखा जाना होगा। वास्तव में, सब कुछ MotionEvents के प्रसंस्करण पर निर्भर करता है। जब उन्हें स्थानांतरित किया जाता है, तो चिल्ड का सरणी 0 से चाइल्डकाउंट तक, और उसके बाद से पारित किया जाता है यदि शीर्ष स्लाइड को नीचे की तरफ से ऊपर किया जा सकता है, तो हमें अपने बच्चों को उस स्लाइड की तलाश में नीचे से ऊपर तक क्रॉल करना शुरू करना चाहिए जो संचारित मोशन को संभाल सकता है। जब हम MotionEvents को संसाधित करना शुरू करते हैं, तो मैं इस बारे में अधिक विस्तार से बात करूंगा
इस प्रकार, हमें अक्सर इस विधि की आवश्यकता होती है:

  /** * Same as {@link #getChildAt(int)} but uses adapter's * slide order in depending on the actual child order * in the view group * @param position position of the child to be retrieved * @return view in specified */ private View getChild(int position){ return getChildAt(getChildCount() - 1 - position); } 

फिर, ड्राइंग क्रम में, हमें कुछ भी बदलने की आवश्यकता नहीं है:

  /** * Use this to manage child drawing order. We should draw * the slide #{lastSlide} (in adapter's data set indexes) first. Then draw * the slide with #{lastSlide - 1} and so on until the slide #0 inclusive * <p> * {@inheritDoc} */ @Override protected int getChildDrawingOrder(int childCount, int i) { //draw the last slide first. /** * __________ * __|0 | * |1 | | * | | | * | |__________| * |__________| */ return /*childCount - */i /*- 1*/; } 

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

  /** * Used in case we have no valid position or actual position * can not be found. */ static final int INVALID_POSITION = -1; /** * Index of the first element from adapter's data set * added to the layout of the slide stack */ private int mFirst; /** * Current selected slide position in adapter's data set */ private int mSelected; /** * A data set adapter that prepares view for the slide stack view * and is responsible for base information about the containing * data set. */ private SlideStateAdapter mAdapter; /** * {@link DataSetObserver} that indicates about changes in slides * data set */ private final DataSetObserver mObserver = new Observer(); /** * Sets the adapter for providing the SlideStackView with * slides. * @param adapter */ public void setAdapter(SlideStateAdapter adapter){ if (mAdapter != null){ mAdapter.unregDataSetObserver(mObserver); mFirst = INVALID_POSITION; mScroller.stopScrolling(); removeAllViews(); } if(adapter != null){ mAdapter = adapter; mAdapter.regDataSetObserver(mObserver); } } 

जहां क्लास ऑब्जर्वर शुरुआत के लिए कुछ इस तरह दिखता है:

  private final class Observer extends DataSetObserver{ @Override public void onChanged() { //empty } @Override public void onInvalidated() { //empty } } 

अब हमारे पास एक एडेप्टर है जो हम दिखाने जा रहे हैं और हम इसे कैसे करेंगे के बीच एक कड़ी के रूप में कार्य करता है।

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

  public static class SlideScroller extends Scroller implements OnTouchListener{ private final ScrollingListener mListener; private final GestureDetector mGestureDetector; public SlideScroller(Context context, ScrollingListener listener, OnGestureListener gestureListener) { super(context); this.mListener = listener; this.mGestureDetector = new GestureDetector(context, gestureListener); mGestureDetector.setIsLongpressEnabled(false); } public void scroll(int distance, int time) { // ... } public void fling(int velocity){ ... } public void stopScrolling() { ... } @Override public boolean onTouch(View v, MotionEvent event) { ... } void finishScrolling() { ... } boolean isScrolling(){ ... } boolean isJustifying(){ ... } boolean isTouchScrolling(){ ... } } 

अब हम इस मॉड्यूल में संपूर्ण स्क्रॉलिंग किचन को सुरक्षित रूप से निकाल सकते हैं, और केवल SlideStackView को स्क्रॉलिंगस्टारिस्ट के माध्यम से आवश्यक घटनाओं के बारे में सूचित कर सकते हैं:

  public interface ScrollingListener { void onScroll(int distance); void onStarted(); void onFinished(); void onJustify(); } 

किसी भी ViewGroup का कार्यान्वयन कहाँ से शुरू होता है? व्यूग्रुप एक लिंकर है जो कि व्यू क्या कर सकता है इसके अलावा, इसके अंदर अन्य व्यूज भी हो सकते हैं। इसलिए, हमारे प्रश्न का उत्तर ViewGroup का कार्यान्वयन है, जो ओवरराइड विधियों से शुरू होता है:

  @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { } 

जहाँ हम अपनी स्लाइड्स लगाते हैं:

  @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { } 

और जहां हम अपनी स्लाइड्स को मापते हैं।
चलो माप के साथ शुरू करते हैं:

  @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec)); int childHeightSize = getMeasuredHeight(); int mChildHeightMeasureSpec = MeasureSpec.makeMeasureSpec( childHeightSize, MeasureSpec.EXACTLY); // Make sure we have created all fragments that we need to have shown. mInLayout = true; fillViewsIn(); mInLayout = false; // measure slides int size = getChildCount(); for (int i = 0; i < size; ++i) { final View child = getChild(i); if (child.getVisibility() != GONE) { int childWidthSize = getMeasuredWidth() - ( getRightEdgeDelta(mFirst + i - 1) + getLeftEdge(mFirst + i)); final int widthSpec = MeasureSpec.makeMeasureSpec( childWidthSize, MeasureSpec.EXACTLY); // LOG.v("Measuring #" + i + " " + child // + ": " + widthSpec); child.measure(widthSpec, mChildHeightMeasureSpec); } } } 

यहां सब कुछ सरल है - पहले हमने विनिर्देशों के आधार पर स्लाइड स्टैक के लिए आकार निर्धारित किया जो कंटेनर ने हमें दिया था। मोबाइल मेल में, स्लाइड स्टैक मार्कअप का मूल तत्व है, इसलिए इस तरह हम पूरे उपलब्ध क्षेत्र में भरते हैं।

क्योंकि अगर हम नहीं चाहते कि हमारी स्लाइड ऊँचाई में भिन्न हो, तो हम मापने की ऊँचाई विनिर्देश के साथ बनाते हैं, जो मापक ध्वज और स्लाइड स्टैक की मापित ऊँचाई के बराबर मान होता है।

अपनी स्लाइड्स को मापने के लिए, हमें स्वाभाविक रूप से स्लाइड्स की आवश्यकता होती है, इसलिए हमें यह सुनिश्चित करने की आवश्यकता है कि वे पहले से ही मार्कअप में शामिल हैं। ऐसा करने के लिए, ऊपर से नीचे की ओर स्लाइड्स को भरने का कारण बनें। उसके बाद, हम स्लाइड्स के माध्यम से जाते हैं, उनकी वांछित चौड़ाई निर्धारित करते हैं और चाइल्ड.मेयर (चौड़ाईस्पेक, mChildHeightMeasureSpec) को कॉल करके मापते हैं।

स्लाइड की चौड़ाई को स्लाइड स्टैक की चौड़ाई के रूप में परिभाषित किया गया है, किसी विशेष स्लाइड के लिए बाईं और दाईं ओर इंडेंटेशन, उदाहरण के लिए, फ़ोल्डरों की सूची के साथ स्लाइड के लिए।



हमने अपनी स्लाइड्स को मापने के बाद, उन्हें केवल सही ढंग से रखने के लिए ही रहता है

  @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { mInLayout = true; fillViewsIn(); mInLayout = false; for (int i = 0; i < getChildCount(); i++) { View child = getChild(i); int position = i + mFirst; onLayoutChild(child, position, changed); } mDirty.setEmpty(); } /** * Layouts child at the specified position (in adapter's data set). * Measures the child if needed. * @param child a child we are going to layout * @param position position of the child in adapter's data set */ protected void onLayoutChild(View child, int position, boolean changed) { if (child.getVisibility() != GONE) { LOG.d("onLayoutChild " + position); if (position < mSelected && changed){ closeView(position); LOG.v("close slide at " + position); } final LayoutParams lp = (LayoutParams) child.getLayoutParams(); SlideInfo info = getSlideInfo(child); int childLeft = getLeftEdge(position) + info.mOffset; int childRight = getRightEdge(position - 1) + info.mOffset; int childTop = getTop(); if (lp.needsMeasure) { lp.needsMeasure = false; final int widthSpec = MeasureSpec.makeMeasureSpec( childRight - childLeft, MeasureSpec.EXACTLY); final int heightSpec = MeasureSpec.makeMeasureSpec( getMeasuredHeight(), MeasureSpec.EXACTLY); child.measure(widthSpec, heightSpec); } // LOG.v("Positioning #" + position + " " + child + ":" + childLeft // + "," + childTop + " " + child.getMeasuredWidth() + "x" // + child.getMeasuredHeight()); child.layout(childLeft, getTop(), childRight, getBottom()); } } 

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

इसके अलावा, यदि स्लाइड स्टैक को मापने के बाद एक स्लाइड जोड़ा गया था, तो इस स्लाइड को भी मापना होगा।

यहां SlideInfo एक नियमित धारक है जिसमें स्लाइड की स्थिति और स्थिति के बारे में जानकारी शामिल है।

  /** * Simple info holder for the slide item * @author k.kharkov */ public static final class SlideInfo implements Parcelable{ /** * Describes slide offset relative to the slide stack. * Note that offset value do not describe actual slide * position inside the slide stack but only shows the * offset relative to the left position of the slide. * <p> * This means * <code>getLeftEdge(position) + info.mOffset</code> * equals to actual offset of the slide relative to * the slide stack view. */ private int mOffset = 0; /** * Indicates whether the slide is visible to the user * or hidden at near the slide stack side */ private boolean mOpened = true; /** * Position of the slide inside the slide stack */ private int mPosition = INVALID_POSITION; /** * The drawable to fill space between this slide and the * previous one. * @see SlideStackView#fillAreaToPrevSlide(Canvas, View) */ private Drawable mSpace; public SlideInfo() { super(); } } 

वास्तव में, SlideInfo को अलग से उपयोग करने के बजाय, आप लेआउटप्रेमम्स वर्ग के वारिस के साथ मिल सकते हैं, जो अंत में मैंने अभी भी भविष्य में उपयोग किया था। लेखन के समय, मुझे यह नहीं पता था और अब मैंने इस जानकारी को लेआउटपार्म्स में स्थानांतरित नहीं किया है, लेकिन मैं बहुत जल्द ऐसा करना चाहता हूं। कुछ भी नहीं आपराधिक कोई अतिरिक्त धारकों, लेकिन मैं दृष्टिकोण KISS का समर्थन (यह सरल रखें बेवकूफ), और दो के बजाय बहुत आसान एक वस्तु का उपयोग :)

इसलिए हमने यह पता लगाया कि स्लाइड्स से कैसे निपटें जो हमने पहले ही व्यूग्रुप में जोड़ दिया है। जिस प्रश्न पर अभी तक विचार नहीं किया गया है, उन्हें वहां कैसे जोड़ा जाए। इसके लिए, हमने इस विधि को छोड़ दिया:

  /** * Adds all required views in layout first. * Then adjusts visibility for each child. * @see #addViewsInside(int, int) * @see #adjustViewsVisibility() */ private void fillViewsIn() { int position = 0; int left = 0; if (getChildCount() > 0){ position = getLastVisiblePosition() + 1; View lastView = getChild(position - mFirst - 1); left = lastView.getLeft() - lastView.getScrollX(); } addViewsInside(position, left); adjustViewsVisibility(); } 

यह विधि अंतिम स्लाइड ढूंढती है और निम्नलिखित स्लाइड्स को स्लाइडस्टैक व्यू में, यदि कोई हो, और उपयोगकर्ता को दिखाई देगी। यह सब इस तरह होता है:

  /** * Uses the adapter to add views to the slide stack view. * @param position last visible position of the view * @param left left coordinate of the last visible slide */ private void addViewsInside(int position, int left) { if (mAdapter == null || mAdapter.getCount() == 0){ return; } mAdapter.startUpdate(this); while ((position <= mSelected + 1 || left > getLeft()) && position < mAdapter.getCount()){ if (mFirst == INVALID_POSITION){ mFirst = 0; } LOG.d("addView inside " + position + " mSelected " + mSelected); mAdapter.instantiateItem(this, position); left = mSelected > position ? getLeftEdge(position) : getRightEdge(position - 1); position ++; } mAdapter.finishUpdate(this); } 

चूंकि हमने टुकड़ों को अपनी स्लाइड के रूप में उपयोग करने का फैसला किया है, इसलिए बेहतर होगा कि एक टुकड़े के लेन-देन के अंदर स्लाइड जोड़ें।

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

"लेकिन स्लाइड के अलावा कहाँ है?" आप पूछते हैं हम mAdapter.finishUpdate (इस) को कॉल करने के बाद; एडेप्टर लेन-देन शुरू करता है और FragmentManager स्थानांतरित कंटेनर में टुकड़े जोड़ना शुरू कर देता है (यह - यही है, SlideStackView)। एक टुकड़े को जोड़ने की प्रक्रिया संक्षेप में वर्णन करना मुश्किल है, इसलिए हमें इस विषय को समीक्षा के लिए पाठक के लिए छोड़ दें :) एक टुकड़े के जीवनचक्र के दौरान, यह ViewGroup.addView (देखें, int, LayoutParams) विधि के माध्यम से हमारे स्लाइड स्टैक में जोड़ा जाएगा; स्लाइड को सही ढंग से रखने के लिए हमें कुछ समायोजन करने की आवश्यकता होगी, इसलिए हम इस विधि को फिर से परिभाषित करते हैं:

  /** * Specifies correct layout parameters for the child and * adds it according the the current {@link #mInLayout} * status. * <p> * {@inheritDoc} */ @Override public void addView(View child, int index, ViewGroup.LayoutParams params) { LOG.d("Add view from outside " + child); if (!checkLayoutParams(params)) { params = generateLayoutParams(params); } final LayoutParams lp = (LayoutParams) params; SlideInfo info = getSlideInfo(child); info.mPosition = getChildCount(); if (mAdapter != null){ info.mSpace = mAdapter.getSpaceDrawable(info.mPosition); } if (mInLayout) { lp.needsMeasure = true; addViewInLayout(child, 0, params); } else { super.addView(child, 0, params); } if (info.mPosition < mSelected){ closeView(info.mPosition); } } 

हम आवश्यक डेटा भरते हैं। फिर हम स्लाइड में स्टैक को जोड़ते हैं, इस पर निर्भर करता है कि लेआउट के दौरान स्लाइड को जोड़ा गया है या नहीं, और स्लाइड को बंद करें यदि इसकी स्थिति उस स्लाइड की स्थिति से कम है जो वर्तमान में सक्रिय है।

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

विधि fillViewsIn () में; अंतिम लंबित रेखा बनी हुई है, जिसमें हम एडजस्टेबल व्यूजिबिलिटी विधि कहते हैं;

यह विधि, जैसा कि नाम से पता चलता है, स्लाइड की दृश्यता को सही करता है। यह उन स्लाइड्स को खींचने में समय बर्बाद न करने के लिए आवश्यक है, जिन्हें मार्कअप से हटाया नहीं जा सकता है, लेकिन जो अब उपयोगकर्ता को दिखाई नहीं देते हैं। दृश्यता को समायोजित करना बहुत सरल है - हम केवल View.setVisibility (int) के माध्यम से स्लाइड के लिए दृश्यता सेट करते हैं, जहां हम या तो View.VISIBLE या View.INVISIBLE पास करते हैं। विधि स्वयं थोड़ी अधिक जटिल दिखती है, लेकिन इसके संचालन के सिद्धांत को समझने के बाद, सब कुछ स्पष्ट हो जाता है।

  /** * Sets visibility parameter for each child according * to the actual visibility on the screen. Takes into * account that child shouldn't be invisible if it's * shadow is visible on the screen because it would * prevent from triggering {@link #drawChild(Canvas, View, long)} * method over that child. */ private void adjustViewsVisibility() { /** * init the rect to align right edge if the slide stack view */ Rect drawingRect = new Rect(); drawingRect.left = getRight(); drawingRect.top = getTop(); drawingRect.right = getRight(); drawingRect.bottom = getTop() + getHeight(); Rect parent = getChildDrawingRectPositive(this); /** * Then union each child drawing rect * with drawingRect of the slide stack * in order to determine when the views * behind the last actually visible view * in the slideStack view and hide all * the following views in order to prevent * re-drawing non-visible views * ________________________________ * | slideStackView __________| * | ____________________| | * || _ _ _ _ | | * ||| | |visible | * || |slide #0 | * ||| hidden slide| | | * || #2 | | * |||_ _ _ _| | | * ||last actual visible | | * ||slide #1 |__________| * ||__________________________| | * |________________________________| */ for (int i = 0; i < getChildCount(); i ++){ boolean hideNext = false; // LOG.v("adjustVisibility " + i); View child = getChild(i); Rect childRect = getChildDrawingRectPositive(child); // LOG.v("child.left " + childRect.left + // " drawing.left" + drawingRect.left + // " parent " + parent.toShortString() + // " child" + childRect.toShortString()); if (childRect.left < drawingRect.left && Rect.intersects(parent, childRect)){ drawingRect.union(childRect); // LOG.d("drawingRect after union with child " + i + " = " + // drawingRect.toShortString()); hideNext = false; } else { // LOG.d("hide view " + i); // LOG.v("child " + childRect.toShortString() + // " drawing " + drawingRect.toShortString() + // " parent " + parent.toShortString()); Rect childShadow = getShadowRect(childRect); if (childShadow.isEmpty()){ hideNext = true; } // if shadow visible - do not hide the slide // and let the shadow to be drawn if (childShadow.left < drawingRect.left && Rect.intersects(parent, childShadow)){ hideNext = false; } else { hideNext = true; } } // LOG.d("set visibility for child " + i + " = " + // (hideNext ? "Invisible" : "Visible")); child.setVisibility(hideNext ? View.INVISIBLE : View.VISIBLE); } } 

मैं इस पद्धति के काम को चित्रित करने के लिए यथासंभव सरल कदम से कदम बढ़ाने की कोशिश करूंगा।

सामान्य एल्गोरिदम कुछ इस तरह दिखता है:

1. स्टैक स्लाइड के दाहिने किनारे को लें (क्योंकि सबसे दाहिनी स्लाइड हमेशा पूरी तरह से दिखाई देती है और जो बाईं ओर होती हैं, वे उसके द्वारा टैप की जाती हैं। इसके विपरीत, यह नहीं हो सकता है।)
2. हम सभी स्लाइड्स के माध्यम से जाते हैं और, जैसा कि यह था, कब्जे वाले क्षेत्र को स्लाइड स्टैक के अंदर जगह में जोड़ें जो प्रत्येक स्लाइड पर रहता है।
3. एक ही समय में, हम देखते हैं कि अगली स्लाइड या तो स्टैक स्लाइड की सीमाओं के बाहर है या इसके ऊपर पड़ी स्लाइडों से पूरी तरह से बंद है, तो इसे "अदृश्य" के रूप में चिह्नित करें। अन्यथा, स्लाइड को "दृश्यमान" माना जाता है।

उपरोक्त आरेखण विधि में, यह ठीक वह क्षेत्र है जो पहले से ही स्लाइड द्वारा कब्जा कर लिया गया है, और चाइल्डरेक्ट वह क्षेत्र है जिसमें स्लाइड एक निश्चित स्थिति पर स्थित है।

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

  Rect childShadow = getShadowRect(childRect); if (childShadow.isEmpty()){ hideNext = true; } // if shadow visible - do not hide the slide // and let the shadow to be drawn if (childShadow.left < drawingRect.left && Rect.intersects(parent, childShadow)){ hideNext = false; } else { hideNext = true; } 

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

लेकिन केवल उन स्लाइड्स को खींचने से रोकना जो उपयोगकर्ता को दिखाई नहीं देती हैं, समस्या को पूरी तरह से हल नहीं करती हैं। हम अभी भी स्लाइड के "ओवरले" हैं। यह उस समय होता है जब हम एक स्लाइड को किनारे पर ले जाते हैं और उसके नीचे से अगली स्लाइड का हिस्सा देखते हैं। यही है, यह पता चला है कि उपयोगकर्ता स्लाइड का केवल एक हिस्सा (या यहां तक ​​कि छाया का केवल एक हिस्सा) देखता है, और हम पूरी स्लाइड को एक पूरे के रूप में आकर्षित करते हैं। फिर, निश्चित रूप से, इसके ऊपर एक और स्लाइड खींचें।

व्यक्तिगत रूप से, मैं Canvas.clipRect (Rect) पद्धति का उपयोग करके इस तरह की समस्या को हल करने का कोई अन्य तरीका नहीं जानता। इस प्रकार, हमें यह निर्धारित करने की आवश्यकता है कि प्रत्येक व्यक्तिगत फ्रेम में उपयोगकर्ता किस स्लाइड को देखेगा, कैनवास पर ड्राइंग के लिए क्षेत्र को उस स्थान तक सीमित करें जहां उपयोगकर्ता इस स्लाइड से देखेंगे, और उसके बाद ही स्लाइड खींचें।

उपरोक्त स्लाइड ड्राइंग विधि मेरे लिए कुछ इस तरह दिखती है:

  /** * Clips the canvas to the child current bounds plus shadow. * <p> * Draws the shadow as well for each child. * <p> * {@inheritDoc} * @see #applyShadowToChild(Canvas, View) */ @Override protected boolean drawChild(Canvas canvas, View child, long drawingTime) { Rect childClip = getChildClipRect(child); // LOG.d("canvas " + canvas.getClipBounds().toShortString()); // LOG.d("draw Child " + child + " clip = " + childClip.toShortString()); // first // draw spaces between slides fillAreaToPrevSlide(canvas, child); // second // draw shadow for the slide applyShadowToChild(canvas, child); // third // actually draw child try{ canvas.save(); canvas.clipRect(childClip); boolean r = super.drawChild(canvas, child, drawingTime); return r; } finally { canvas.restore(); } } 

यह सब इस तथ्य से शुरू होता है कि हम स्लाइड के लिए आयत की गणना करते हैं, जो स्क्रीन पर उपयोगकर्ता को दिखाई देगा, उसके बाद हम स्लाइड (यदि एक है) के बीच की जगह को भरते हैं, तो स्लाइड के लिए एक छाया बनाएं, और उसके बाद हम गणना किए गए चाइल्डक्लिप में कैनवास को सीमित करते हैं, और ड्राइंग खुद करते हैं। ठीक उसी तरह स्लाइड करें जैसे कि व्यूग्रुप में परिभाषित किया गया है।

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

  /** * Retrieves children's visible position on the screen * without it's shadow. * @param child we should retrieve visible bounds for * @return a child's visible bounds */ private Rect getChildClipRect(View child) { Rect childClip = getChildDrawingRectPositive(child); int position = getPositionForView(child); subtractRectWithChilds(childClip, position); // LOG.v("child clip " + position + " " + childClip.toShortString()); return childClip; } /** * Changes the specified clip rectangle, to subtract all the * following children from it. * @param childClip initial child rectangle in the screen * @param position child position within adapter's data set * @see #subtractToLeft(Rect, Rect) */ private void subtractRectWithChilds(Rect childClip, int position) { if (position >= 0){ position -= mFirst; for (int i = position - 1; i >= 0; i --){ View c = getChild(i); Rect r = getChildDrawingRectPositive(c); boolean changed = subtractToLeft(childClip, r); if (changed){ // LOG.v("child clipped " + childClip.toShortString()); } } } } 

पहली विधि में, हम स्लाइड स्टैक के अंदर स्लाइड की स्थिति का पता लगाते हैं, फिर हम स्लाइड एडाप्टर के अनुक्रमित में इसकी स्थिति का पता लगाते हैं। उसके बाद, हम सभी अनावश्यक "घटाना" करते हैं और परिणाम वापस करते हैं।

, «» . , , ( ).

, .

, , , .

  /** * Same as {@link #subtract(Rect, Rect)} method, but processes * the case where source rectangle wasn't changed because it * contains <code>r</code>. In this case it adjusts <code>r</code> * from this: * <pre> * _______________________ * | source _________ | * | | r | | * | | | | * | | | | * | | | | * | |_________| | * |_______________________| * </pre> * * to this: in order to leave only left side of the source rectangle. * <pre> * ___________________________ * | source | r |1px| * | | |<->| * | | | | * | | | | * | | | | * | | | | * | | | | * |_________|_____________|___| * </pre> * @param source the rectangle we are going to subtract from * @param r the rectangle we are going to subtract from * source * @return <code>true</code> in case the source rectangle * has been changed. <code>false</code> otherwise */ private static boolean subtractToLeft(Rect source, Rect r){ boolean changed = subtract(source, r); if (!changed && source.contains(r)){ // adjust intersected rect manually r.right = source.right + 1; r.top = source.top; r.bottom = source.bottom; changed = subtract(source, r); } return changed; } /** * Subtracts <code>r</code> from the <code>source</code>. * Sets <code>r</code> rectangle to the intersection as well. * @param source * @param r * @return <code>true</code> if rectangle has been subtracted, * <code>false</code> otherwise. */ private static boolean subtract(Rect source, Rect r) { if (source.isEmpty() || r.isEmpty()){ return false; } if (r.contains(source)){ // LOG.w("return empty rect"); source.setEmpty(); return true; } if (source.contains(r)){ return false; } if (!r.intersect(source)){ return false; } boolean changed = false; if (source.left == r.left){ source.left = r.right; changed = true; } if (source.right == r.right){ source.right = r.left; changed = true; } if (source.top == r.top){ source.top = r.bottom; changed = true; } if (source.bottom == r.bottom){ source.bottom = r.top; changed = true; } source.sort(); return changed; } 

, , , «» - :)

, , – Rect. , . . , . «» , - , . , . . , , , . , , .

, , , , .

, – . , . , . , , MotionEvent' , , -, .

, , , ViewGroup.

– - Mail.Ru. . , .