Przesuń, aby wyświetlić inny ukryty układ w widoku recyklera. Android

Question

Mam widok recyklera, w którym chcę pokazać inny układ przy przesuwaniu widoku elementu, który jest ukryty za bieżącym układem. W skrócie chcę osiągnąć coś podobnego do poniższego obrazu.

Problem z mojego kodu jest to, że cały pogląd przeciągnął, ale chcę przesunąć tylko na szerokość ukrytego układu.

Kod aktywności

final ItemTouchHelper.Callback simpleItemTouchCallback = new ItemTouchHelper.Callback() { 
      @Override 
      public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { 
       if (viewHolder.getAdapterPosition() < target.getAdapterPosition()) { 
        for (int i = viewHolder.getAdapterPosition(); i < target.getAdapterPosition(); i++) { 
         Collections.swap(myDataset, i, i + 1); 
        } 
       } else { 
        for (int i = viewHolder.getAdapterPosition(); i > target.getAdapterPosition(); i--) { 
         Collections.swap(myDataset, i, i - 1); 
        } 
       } 
       mAdapter.notifyItemMoved(viewHolder.getAdapterPosition(), target.getAdapterPosition()); 
       return true; 
      } 

      @Override 
      public boolean isLongPressDragEnabled() { 
       return true; 
      } 
      @Override 
      public boolean isItemViewSwipeEnabled() { 
       return true; 
      } 
      @Override 
      public void onSwiped(final RecyclerView.ViewHolder viewHolder, final int swipeDir) { 

      } 

      @Override 
      public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { 
       View itemView = viewHolder.itemView; 
       ImageView delete_image=(ImageView) itemView.findViewById(R.id.delete_image); 
       delete_image.setY(itemView.getTop()); 
       if(isCurrentlyActive) { 
        delete_image.setVisibility(View.VISIBLE); 
       }else{ 
        delete_image.setVisibility(View.GONE); 
       } 
       super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive); 
      } 

      @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); 
      } 
     }; 


ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleItemTouchCallback); 
     itemTouchHelper.attachToRecyclerView(mRecyclerView); 

dostosowanych do recylerview pozycji

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:fresco="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 

    android:paddingBottom="@dimen/padding_xsmall"> 

    <LinearLayout 
     android:id="@+id/top_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_vertical" 
     android:background="@color/very_light_grey" 
     android:orientation="horizontal" 
     android:paddingBottom="@dimen/padding_xlarge" 
     android:paddingEnd="@dimen/padding_small" 
     android:paddingLeft="@dimen/padding_xlarge" 
     android:paddingRight="@dimen/padding_small" 
     android:paddingStart="@dimen/padding_xlarge" 
     android:paddingTop="@dimen/padding_xlarge"> 

     <com.facebook.drawee.view.SimpleDraweeView 
      android:id="@+id/friend_image" 
      android:layout_width="50dp" 
      android:layout_height="50dp" 
      android:layout_gravity="center_vertical" 
      fresco:placeholderImage="@drawable/user_placeholder" 
      fresco:roundAsCircle="true" 
      fresco:roundedCornerRadius="50dp" 
      fresco:roundingBorderColor="@android:color/white" 
      fresco:roundingBorderWidth="2dp" /> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical" 
      android:layout_marginEnd="@dimen/margin_small" 
      android:layout_marginLeft="@dimen/margin_small" 
      android:layout_marginRight="@dimen/margin_small" 
      android:layout_marginStart="@dimen/margin_small" 
      android:orientation="vertical"> 

      <RelativeLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"> 

       <bi.it.com.bio.textview.CustomTextView 
        android:id="@+id/friend_name" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentStart="true" 
        android:layout_toLeftOf="@+id/badge_text" 
        android:text="John" 
        android:textSize="@dimen/text_size_medium" /> 

       <bi.it.com.bio.textview.CustomTextView 
        android:id="@+id/badge_text" 
        android:layout_width="16dp" 
        android:layout_height="16dp" 
        android:layout_alignParentRight="true" 
        android:background="@drawable/badgeicon" 
        android:gravity="center" 
        android:text="24" 
        android:textColor="@android:color/white" 
        android:textSize="@dimen/text_size_xxsmall" /> 
      </RelativeLayout> 

      <bi.it.com.bio.textview.CustomTextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="this is message from john" 
       android:textSize="@dimen/text_size_xsmall" /> 

     </LinearLayout> 

    </LinearLayout> 

    <ImageView 
     android:id="@+id/delete_image" 
     android:paddingLeft="@dimen/padding_large" 
     android:paddingStart="@dimen/padding_large" 
     android:paddingEnd="@dimen/padding_large" 
     android:paddingRight="@dimen/padding_large" 
     android:paddingTop="@dimen/padding_small" 
     android:paddingBottom="@dimen/padding_small" 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:background="@color/red_color_list" 
     android:src="@drawable/ic_delete_frd" 
     android:layout_gravity="end|right" 
     android:visibility="gone"/> 

</FrameLayout> 

Nie chcę używać dowolnej biblioteki. Każda pomoc jest na prawdę doceniana. Z góry dzięki.

Answer 1

Możesz to zrobić z ViewPager i PagerAdapter. Twoja PagerAdapter będzie miała dwie strony: "główny" widok pełnej szerokości i drugi widok z przyciskami operacji.

Kluczem jest zastąpienie getPageWidth() w adapterze i zwrócenie 1.0 dla widoku głównego i części dla drugiego widoku. Frakcja obliczana jest przez podzielenie pożądanej szerokości widoku przez szerokość ViewPager.

Gdy użytkownik przeciąga, drugi widok nie może zająć całego ekranu, więc pierwszy widok jest nadal częściowo wyświetlany, tak jak w animowanym obrazie.

Z ViewHolder odwołującego się ViewPager i ViewPager odwoływania się PagerAdapter, można nawet recyklingu adaptery prawo wraz z ViewPager s.

Answer 2

Właściwie jest tam ukryty przydatna klasa w Android SDK nazywany ViewDragHelper

można wdrożyć przesuń palcem przycisku łatwo pokazać z trochę kodu. Jednak ViewDragHelper nie jest dobrze udokumentowany, ale okazało się, że ten link zawiera bardzo przydatny samouczek do jego implementacji: http://fedepaol.github.io/blog/2014/09/01/dragging-with-viewdraghelper/