Comment faire glisser et déposer une image à partir d'une vue Recycleur et placez-la à l'extérieur de celle-ci dans une autre disposition

Question

J'ai une vue Recylcer horizontale qui contient une liste d'éléments. Chaque article a une vue de texte et une vue d'image pour représenter l'article (par exemple une image d'un carré et le texte "Carré" au-dessus de l'image). La vue du recycleur se trouve à l'intérieur de la disposition relative située en haut de l'écran. Ce que je dois faire est de faire glisser une image à partir de la vue recycleur et la déposer à l'extérieur dans une autre disposition qui est en dessous de celle-ci. Cependant, l'image qui est tirée de la vue recycleur ne doit pas être supprimée, mais une copie de l'image doit être placée dans la disposition extérieure. L'image doit également être supprimée à la position exacte dans la mise en page où l'utilisateur relâche son doigt. Y'a-t-il une quelconque façon de réussir cela? Un exemple de ceci pourrait être comme dans un jeu, où l'utilisateur a une liste d'objets à glisser et déposer dans le monde du jeu.

Voici un exemple pour illustrer ce que je veux dire:

classe Adaptateur pour recycleur Vue:

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> { 

private List<ListItems> listItems; 
private Context context; 

public RecyclerAdapter(List<ListItems> listItems, Context context) { 
    this.listItems = listItems; 
    this.context = context; 
} 

@Override 
public RecyclerAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
    View v = LayoutInflater.from(parent.getContext()) 
      .inflate(R.layout.layout_recycler_view_row_one, parent, false); 

    ViewHolder vh = new ViewHolder(v); 
    return vh; 
} 

@Override 
public void onBindViewHolder(RecyclerAdapter.ViewHolder holder, int position) { 

    ListItems listItems = listItems.get(position); 

    holder.textView.setText(listItems.getItemName()); 
    holder.imageView.setImageResource(listItems.getImageDrawable()); 
} 


@Override 
public int getItemCount() { 
    return listItems.size(); 
} 

public class ViewHolder extends RecyclerView.ViewHolder { 

    public ImageView imageView; 
    public TextView textView; 

    public ViewHolder(View itemView) { 
     super(itemView); 
     imageView = (ImageView) itemView.findViewById(R.id.item_image_view); 
     textView = (TextView) itemView.findViewById(R.id.item_name_text_view); 

    } 
} 

MainActivity.class:

public class MainActivity extends AppCompatActivity { 

RelativeLayout relativeLayoutMiddle; 

private RecyclerView recyclerView; 
private RecyclerView.LayoutManager layoutManager; 
private RecyclerView.Adapter adapter; 
private List<ListItems> listItems; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    listItems = new ArrayList<>(); 

    for (int i = 0; i < 4; i++) { 
     if(i==0) 
     { 
      ListItems listItems = new ListItems("Square", R.drawable.square); 
      listItems.add(listItems); 
     } 
     else if(i==1) 
     { 
      ListItems listItems = new ListItems("Circle", R.drawable.circle); 
      listItems.add(listItems); 
     } 
     else if(i==2) 
     { 
      ListItems listItems = new ListItems("Rectangle", R.drawable.rectangle); 
      listItems.add(listItems); 
     } 
     else if(i==3) 
     { 
      ListItems listItems = new ListItems("Triangle", R.drawable.triangle); 
      listItems.add(listItems); 
     } 
    } 

    recyclerView = (RecyclerView) findViewById(R.id.recycler_view); 
    recyclerView.setHasFixedSize(true); 
    layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); 
    recyclerView.setLayoutManager(layoutManager); 
    adapter = new RecyclerAdapter(listItems, this); 
    recyclerView.setAdapter(adapter); 

    relativeLayoutMiddle = (RelativeLayout) findViewById(R.id.relativeLayoutMiddle); 

Answer 1

Cela peut essentiellement être accompli en quelques lignes de code en utilisant le Android drag and drop api.

1. Appel View.startDragAndDrop
2. Joindre un View.OnDragListener à votre conteneur drop
3. Attendez DragEvent.ACTION_DROP puis se gonflent et se positionner votre forme

Dans votre RecyclerView.Adapter, joindre une View.OnLongClickListener puis appelez View.startDragAndDrop. Quelque chose comme:

@Override 
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
    final View v = LayoutInflater.from(parent.getContext()) 
      .inflate(R.layout.layout_recycler_view_row_one, parent, false); 
    final ViewHolder holder = new ViewHolder(v); 
    final View shape = holder.imageView; 
    holder.itemView.setOnLongClickListener(v -> { 
     final ListItems item = listItems.get(holder.getAdapterPosition()); 
     final DragData state = new DragData(item, shape.getWidth(), shape.getHeight()); 
     final DragShadowBuilder shadow = new DragShadowBuilder(shape); 
     ViewCompat.startDragAndDrop(shape, null, shadow, state, 0); 
     return true; 
    }); 
    return holder; 
} 

public class DragData { 

    public final ListItems item; 
    public final int width; 
    public final int height; 

    public DragData(ListItems item, int width, int height) { 
     this.item= item; 
     this.width = width; 
     this.height = height; 
    } 

} 

Dans votre Activity ou partout où vous gonflez votre mise en page de conteneur inférieur, appelez View.setOnDragListener et quand DragEvent.ACTION_DROP est appelé nous pouvons gonfler une copie de la View que vous avez appelé startDragAndDrop sur. Quelque chose comme:

@Override 
public boolean onDrag(View v, DragEvent event) { 
    switch (event.getAction()) { 
     case DragEvent.ACTION_DRAG_ENTERED: 
      dropContainer.setBackgroundColor(GREEN); 
      break; 
     case DragEvent.ACTION_DRAG_EXITED: 
      dropContainer.setBackgroundColor(RED); 
      break; 
     case DragEvent.ACTION_DRAG_ENDED: 
      dropContainer.setBackgroundColor(WHITE); 
      break; 
     case DragEvent.ACTION_DROP: 
      final float dropX = event.getX(); 
      final float dropY = event.getY(); 
      final DragData state = (DragData) event.getLocalState(); 

      final ImageView shape = (ImageView) LayoutInflater.from(this).inflate(
        R.layout.view_shape, dropContainer, false); 
      shape.setImageResource(state.item.getImageDrawable()); 
      shape.setX(dropX - (float) state.width/2); 
      shape.setY(dropY - (float) state.height/2); 
      shape.getLayoutParams().width = state.width; 
      shape.getLayoutParams().height = state.height; 
      dropContainer.addView(shape); 
      break; 
     default: 
      break; 
    } 
    return true; 
} 

Résultats