RecyclerView में खींचें और स्वाइप करें। भाग 2: नियंत्रक, ग्रिड और कस्टम एनिमेशन खींचें और छोड़ें

पहले भाग में, हमने ItemTouchHelper और ItemTouchHelper.Callback के कार्यान्वयन पर ध्यान दिया , जो RecyclerView में मूल ड्रैग एंड ड्रॉप और स्वाइप-टू- आउट फंक्शन को जोड़ता है। इस लेख में, हम जारी रखेंगे कि पिछले एक में ग्रिड, ड्रैग एंड ड्रॉप कंट्रोलर, सूची आइटम का चयन और कस्टम स्वाइप एनिमेशन के रूप में तत्वों की व्यवस्था के लिए समर्थन जोड़कर क्या किया गया था।

नियंत्रक खींचें और छोड़ें

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

सबसे पहले, तत्व के layout अपडेट करें ( item_main.xml )।

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/item" android:layout_width="match_parent" android:layout_height="?listPreferredItemHeight" android:clickable="true" android:focusable="true" android:foreground="?selectableItemBackground"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginLeft="16dp" android:textAppearance="?android:attr/textAppearanceMedium" /> <ImageView android:id="@+id/handle" android:layout_width="?listPreferredItemHeight" android:layout_height="match_parent" android:layout_gravity="center_vertical|right" android:scaleType="center" android:src="@drawable/ic_reorder_grey_500_24dp" /> </FrameLayout> 

ड्रैग कंट्रोलर के लिए उपयोग की जाने वाली छवि को सामग्री डिजाइन आइकन में पाया जा सकता है और एंड्रॉइड स्टूडियो में सुविधाजनक आइकन जनरेटर प्लगइन का उपयोग करके परियोजना में जोड़ा जा सकता है।

जैसा कि पिछले लेख में संक्षेप में बताया गया है, आप एक प्रोग्राम को ड्रैग एंड ड्रॉप शुरू करने के लिए ItemTouchHelper.startDrag(ViewHolder) का उपयोग कर सकते हैं। तो, हमें बस इतना करना है कि ड्रैग कंट्रोलर को जोड़कर ViewHolder को अपडेट करें, और एक साधारण टच हैंडलर सेट करें जो startDrag() को कॉल करेगा।

हमें श्रृंखला के साथ घटनाओं को प्रसारित करने के लिए एक इंटरफ़ेस की आवश्यकता होगी:

 public interface OnStartDragListener { /** * Called when a view is requesting a start of a drag. * * @param viewHolder The holder of the view to drag. */ void onStartDrag(RecyclerView.ViewHolder viewHolder); } 

फिर ItemViewHolder में ड्रैग कंट्रोलर के लिए एक ImageView परिभाषित करें:

 public final ImageView handleView; public ItemViewHolder(View itemView) { super(itemView); // ... handleView = (ImageView) itemView.findViewById(R.id.handle); } 

और RecyclerListAdapter अपडेट करें:

 private final OnStartDragListener mDragStartListener; public RecyclerListAdapter(OnStartDragListener dragStartListener) { mDragStartListener = dragStartListener; // ... } @Override public void onBindViewHolder(final ItemViewHolder holder, int position) { // ... holder.handleView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (MotionEventCompat.getActionMasked(event) == MotionEvent.ACTION_DOWN) { mDragStartListener.onStartDrag(holder); } return false; } }); } 

RecyclerListAdapter को अब कुछ इस तरह देखना चाहिए।

जो कुछ भी करना बाकी है, वह है OnStartDragListener को टुकड़े में जोड़ना:

 public class RecyclerListFragment extends Fragment implements OnStartDragListener { // ... @Override public void onViewCreated(View view, Bundle icicle) { super.onViewCreated(view, icicle); RecyclerListAdapter a = new RecyclerListAdapter(this); // ... } @Override public void onStartDrag(RecyclerView.ViewHolder viewHolder) { mItemTouchHelper.startDrag(viewHolder); } } 

RecyclerListFragment को अब इस तरह दिखना चाहिए। अब, जब आप एप्लिकेशन लॉन्च करते हैं, तो आप नियंत्रक को छूकर खींचना और छोड़ना शुरू कर सकते हैं।

किसी सूची आइटम को हाइलाइट करना

अब हमारे उदाहरण में आइटम को खींचे जाने का कोई दृश्य संकेत नहीं है। जाहिर है, यह नहीं होना चाहिए, लेकिन इसे ठीक करना आसान है। ItemTouchHelper का उपयोग ItemTouchHelper आप मानक आइटम हाइलाइटिंग प्रभाव का उपयोग कर सकते हैं। एंड्रॉइड के लॉलीपॉप और बाद के संस्करणों पर, इसके साथ बातचीत करने की प्रक्रिया में तत्व पर बैकलाइट "फैलता है"; पहले के संस्करणों पर, तत्व बस अपना रंग बदलकर काला कर लेता है।

हमारे उदाहरण में इसे लागू करने के लिए, बस एक पृष्ठभूमि ( background संपत्ति) को FrameLayout तत्व में जोड़ें या इसे RecyclerListAdapter.ItemViewHolder के निर्माता में सेट करें। यह कुछ इस तरह दिखेगा:

यह अच्छा लग रहा है, लेकिन आप और भी अधिक नियंत्रित करना चाहते हैं। इसका एक तरीका यह है कि ViewHolder किसी तत्व के राज्य परिवर्तनों ViewHolder संभालने की अनुमति दी जाए। इसके लिए, ItemTouchHelper.Callback दो और तरीके प्रदान करता है:

• onSelectedChanged(ViewHolder, int) हर बार किसी तत्व की स्थिति को ड्रैग ( ACTION_STATE_DRAG ) या स्वाइप ( ACTION_STATE_SWIPE ) कहा जाता है। view घटक की स्थिति को सक्रिय में बदलने के लिए यह एक आदर्श स्थान है ।
• clearView(RecyclerView, ViewHolder) को ड्रैग-एंड-ड्रॉप view कंपोनेंट पूरा होने पर और स्वाइप पूरा होने पर ( ACTION_STATE_IDLE ) कहा जाता है। यहां, आपके view घटक की प्रारंभिक स्थिति आमतौर पर बहाल की जाती है।

अब, चलो यह सब एक साथ डाल दिया।

सबसे पहले, एक इंटरफ़ेस बनाएं जिसे ViewHolders कार्यान्वित करेंगे:

 /** * Notifies a View Holder of relevant callbacks from * {@link ItemTouchHelper.Callback}. */ public interface ItemTouchHelperViewHolder { /** * Called when the {@link ItemTouchHelper} first registers an * item as being moved or swiped. * Implementations should update the item view to indicate * it's active state. */ void onItemSelected(); /** * Called when the {@link ItemTouchHelper} has completed the * move or swipe, and the active item state should be cleared. */ void onItemClear(); } 

फिर, SimpleItemTouchHelperCallback उपयुक्त विधियों को लागू करें:

 @Override public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { // We only want the active item if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) { if (viewHolder instanceof ItemTouchHelperViewHolder) { ItemTouchHelperViewHolder itemViewHolder = (ItemTouchHelperViewHolder) viewHolder; itemViewHolder.onItemSelected(); } } super.onSelectedChanged(viewHolder, actionState); } @Override public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { super.clearView(recyclerView, viewHolder); if (viewHolder instanceof ItemTouchHelperViewHolder) { ItemTouchHelperViewHolder itemViewHolder = (ItemTouchHelperViewHolder) viewHolder; itemViewHolder.onItemClear(); } } 

अब वह सब कुछ है जो RecyclerListAdapter.ItemViewHolder

 public class ItemViewHolder extends RecyclerView.ViewHolder implements ItemTouchHelperViewHolder { // ... @Override public void onItemSelected() { itemView.setBackgroundColor(Color.LTGRAY); } @Override public void onItemClear() { itemView.setBackgroundColor(0); } } 

इस उदाहरण में, हम बस एक ग्रे बैकग्राउंड जोड़ते हैं जबकि तत्व सक्रिय है, और फिर इसे हटा दें। यदि आपका ItemTouchHelper और एडॉप्टर निकटता से जुड़े हुए हैं, तो आप इस सेटिंग को आसानी से छोड़ सकते हैं और ItemTouchHelper.Callback घटक की स्थिति को सीधे ItemTouchHelper.Callback में ItemTouchHelper.Callback । ItemTouchHelper.Callback ।

ग्रिड

यदि अब आप GridLayoutManager का उपयोग करने का प्रयास करते हैं, तो आप देखेंगे कि यह सही ढंग से काम नहीं करता है। कारण और समाधान सरल है: हमें अपने ItemTouchHelper को बताना चाहिए कि हम बाईं और दाईं ओर खींचने वाली वस्तुओं का समर्थन करना चाहते हैं। इससे पहले SimpleItemTouchHelperCallback हम पहले से ही निर्दिष्ट हैं:

 @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END; return makeMovementFlags(dragFlags, swipeFlags); } 

ग्रिड का समर्थन करने के लिए आवश्यक एकमात्र बदलाव उचित झंडे जोड़ने के लिए है:

 int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT; 

हालाँकि, स्वाइप-टू-बर्खास्त करना ग्रिड तत्वों के लिए एक बहुत ही स्वाभाविक व्यवहार नहीं है, इसलिए swipeFlags संभावना सबसे अधिक है:

 @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT; int swipeFlags = 0; return makeMovementFlags(dragFlags, swipeFlags); } 

एक काम करने वाले GridLayoutManager उदाहरण को देखने के लिए, RecyclerGridFragment देखें। स्टार्टअप पर यह कैसा दिखता है:

कस्टम कड़ी चोट एनिमेशन

ItemTouchHelper.Callback ड्रैगिंग या ItemTouchHelper.Callback करते समय एनीमेशन को पूरी तरह से नियंत्रित करने के लिए एक बहुत ही सुविधाजनक तरीका प्रदान करता है। चूंकि ItemTouchHelper एक RecyclerView.ItemDecoration है , इसलिए हम एक view घटक को एक समान तरीके से प्रस्तुत करने की प्रक्रिया में हस्तक्षेप कर सकते हैं। अगले भाग में, हम इस प्रश्न की अधिक विस्तार से जाँच करेंगे, लेकिन अब, आइए रेखीय गायब होने को दिखाने के लिए डिफ़ॉल्ट स्वाइप एनीमेशन को ओवरराइड करने के एक सरल उदाहरण को देखें।

 @Override public void onChildDraw(Canvas c, RecyclerView recyclerView, ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) { float width = (float) viewHolder.itemView.getWidth(); float alpha = 1.0f - Math.abs(dX) / width; viewHolder.itemView.setAlpha(alpha); viewHolder.itemView.setTranslationX(dX); } else { super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive); } } 

dX और dY चयनित view घटक के सापेक्ष वर्तमान पारी हैं, जहां:

• -1.0f दाईं से बाईं ओर एक पूर्ण स्वाइप है ( ItemTouchHelper.END से ItemTouchHelper.START )
• 1.0f बाईं ओर से दाईं ओर पूर्ण स्वाइप है ( ItemTouchHelper.START से ItemTouchHelper.END )

किसी भी actionState लिए super को कॉल करना महत्वपूर्ण है जिसे आप डिफ़ॉल्ट एनीमेशन को ट्रिगर करने के लिए प्रसंस्करण नहीं कर रहे हैं।

अगले भाग में, हम एक उदाहरण पर विचार करेंगे, जिसमें हम किसी तत्व की ड्राइंग को ड्रैग एंड ड्रॉप के समय नियंत्रित करेंगे।

निष्कर्ष

वास्तव में, ItemTouchHelper की स्थापना बहुत मजेदार है। इस लेख का आयतन न बढ़ाने के लिए, मैंने इसे कई भागों में विभाजित किया है।

स्रोत कोड

Android- ItemTouchHelper- डेमो GitHub रिपॉजिटरी पर इस लेख श्रृंखला के लिए पूरा कोड देखें। यह लेख ef8f149 से d164fba पर आता है ।

Ler RecyclerView में खींचें और स्वाइप करें। भाग 1: आइटमटच हेल्पर