安卓RecyclerView：多个视图类型之间的拖放

Question

我为RecyclerView实现了拖放功能，在只有一个View类型时，它可以正常工作，但是在有多个视图类型时会重置RecyclerView。我在这个gif中展示了结果：

这是我的代码：

public class RecyclerListAdapter extends RecyclerView.Adapter<ItemViewHolder> {

    private final Integer[] INVOICE_ITEMS_LIST = new Integer[]{
            INVOICE_DESIGN_TITLE,
            INVOICE_DESIGN_TITLE,
            INVOICE_DESIGN_LOGO,
            INVOICE_DESIGN_TITLE
    };

    public RecyclerListAdapter() {
        mItems.addAll(Arrays.asList(INVOICE_ITEMS_LIST));
    }

    @Override
    public int getItemViewType(int position) {
        return INVOICE_ITEMS_LIST[position];
    }

    @Override
    public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        switch (viewType){
            case INVOICE_DESIGN_TITLE:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.invoice_design_item_title, parent, false);
                break;
            case INVOICE_DESIGN_LOGO:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.invoice_design_item_logo, parent, false);
                break;
            default:
                view = LayoutInflater.from(parent.getContext()).inflate(R.layout.invoice_design_item_title, parent, false);
        }


        return new ItemViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final ItemViewHolder holder, int position) {

        switch (holder.getItemViewType()) {
            case INVOICE_DESIGN_TITLE:
                break;
            case INVOICE_DESIGN_LOGO:
                // ... some code for setting the image source
                break;

        }

        holder.dragIcon.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (MotionEventCompat.getActionMasked(event) ==
                        MotionEvent.ACTION_DOWN) {
                    itemTouchHelper.startDrag(holder);
                }
                return false;
            }
        });
    }

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



}

public class ItemViewHolder extends RecyclerView.ViewHolder {

    final ImageView dragIcon;
    final ImageView logo;
    ItemViewHolder(View itemView) {
        super(itemView);
        dragIcon = (ImageView) itemView.findViewById(R.id.drag_ic);
        logo = (ImageView) itemView.findViewById(R.id.logo);
    }

}

public void initRecyclerSwipe(final RecyclerView recyclerView){
    ItemTouchHelper.SimpleCallback simpleItemTouchCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT ) {

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

        @Override
        public boolean isItemViewSwipeEnabled() {
            return true;
        }

        @Override
        public boolean isLongPressDragEnabled() {
            return false;
        }

        @Override
        public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
            int fromPosition = viewHolder.getAdapterPosition();
            int toPosition = target.getAdapterPosition();

            Collections.swap(mItems, fromPosition, toPosition);

            recyclerView.getAdapter().notifyItemMoved(fromPosition, toPosition);
            return true;
        }

        @Override
        public void onChildDraw(Canvas c, RecyclerView 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);
            }
        }

        @Override
        public void onChildDrawOver(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
            super.onChildDrawOver(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);

            if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
                View itemView = viewHolder.itemView;
                c.save();
                c.clipRect(itemView.getLeft() + dX, itemView.getTop() + dY, itemView.getRight() + dX, itemView.getBottom() + dY);
                c.translate(itemView.getLeft() + dX, itemView.getTop() + dY);

                // draw the frame
                c.drawColor(0x33000000);

                c.restore();
            }
        }

        @Override
        public void onSwiped(RecyclerView.ViewHolder viewHolder, int swipeDir) {
            mItems.remove(viewHolder.getAdapterPosition());
            recyclerView.getAdapter().notifyItemRemoved(viewHolder.getAdapterPosition());

        }

    };

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

}

我该如何交换不同视图类型的子项？

- Mneckoee

Answer 1

我也遇到了拖动视图在移动到某些物品（但不是全部）时立即掉落的问题。

解决方法是确保在拖动过程中物品的类型不会改变。

- Eerko

Answer 2

我犯了一个错误！ 拖放机制运行良好。 我交换了mItems

Collections.swap(mItems, fromPosition, toPosition);

但是在getViewType中：

@Override
    public int getItemViewType(int position) {
        return INVOICE_ITEMS_LIST[position];
    }

这就是错误所在。我应该使用这个：

@Override
        public int getItemViewType(int position) {
            return mItems.get(position);
        }

- Mneckoee

---

你好，当我试图拖动到不同的视图类型时，物品会立即停下，尽管我仍在拖动它。你是否遇到过这个问题？ - drod

这绝对应该被接受的答案。虽然有些人认为这是框架中的一个错误，但实际上不是。如果正确实现，使用不同视图类型交换项目可以很好地工作，而且不需要在适配器或RecyclerView中使用任何额外的技巧。 - nsko

Answer 3

这不是一个实际的修复，而是问题的“源头”和一种解决方法。

我创建了一个带有抽象ViewHolder类和3个不同的扩展它的ViewHolder类型的RecyclerView。我注意到每当我从一个类型拖动一个项目到另一个项目上时，它会自动放下。经过一些调试、日志记录、一些谷歌搜索（结果很少）和一些实验，我终于发现了导致这个问题的原因：重写getItemViewType方法以支持多个视图。一旦我删除了它，拖放就恢复正常了。

我没有调试RecyclerView和ItemTouchHelper实现来确定错误的确切原因，因为我已经在这个问题上浪费了足够的时间。所以我做的是创建一个通用布局，其中包含其他3个导入的布局，这些布局包含不同类型数据的特定Views。然后我在ViewHolder中创建了4个绑定方法（现在只剩下一个）。然后我制作了一个when语句，确定要绑定的数据类型并调用适当的bind函数。

internal class AnimalsAdapter() : RecyclerView.Adapter<AnimalViewHolder>() {
   
    var animals by Delegates.observable<List<Animal>>(emptyList()) { _, _, _ ->
        notifyDataSetChanged()
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): AnimalViewHolder 
        = AnimalViewHolder(parent.inflate(R.layout.item_animal))

    override fun onBindViewHolder(holder: AnimalViewHolder, position: Int) {
        when (animals[position]) {
            is Cat -> holder.bindCat(animal as Cat)
            is Dog -> holder.bindDog(animal as Dog)
            is Cuttlefish -> holder.bindCuttlefish(animal as Cuttlefish)
            else -> throw IllegalArgumentException("Dafaq is this?")
        }

    ............
}

internal class AnimalViewHolder(view: View) : RecyclerView.ViewHolder(view) {

    // Common properties
    private val animalType by lazy { view.findViewById<TextView>(R.id.animalTypeText) }
    private val animalDesc by lazy { view.findViewById<TextView>(R.id.animalDescText) }

    // Cat properties
    private val catBreed by lazy { view.findViewById<TextView>(R.id.catBreedText) }
    private val catYears by lazy { view.findViewById<TextView>(R.id.catYearsText) }

    // Dog properties
    private val dogBreed by lazy { view.findViewById<TextView>(R.id.dogBreedText) }
    private val dogYears by lazy { view.findViewById<TextView>(R.id.dogYearsText) }
    private val dogGender by lazy { view.findViewById<TextView>(R.id.dogGenderText) }

    // Cuttlefish properties
    private val cuttleCuddles by lazy { view.findViewById<TextView>(R.id.cuttleCuddlesText) }

    fun bindCat(cat: Cat) {
        // call the common bind
        bindAnimal(cat)

        catYears.text = cat.years
        catBreed.text = cat.breed

        catDetails.isVisible = true
    }

    fun bindDog(dog: Dog) {
        // call the common bind
        bindAnimal(dog)

        dogYears.text = dog.years
        dogBreed.text = dog.breed
        dogGender.text = dog.gender

        dogDetails.isVisible = true
    }

    fun bindCuttlefish(cuttle: Cuttlefish) {
        // call the common bind
        bindAnimal(cuttle)

        cuttleCuddles.text = cuttle.cuddles

        cuttleDetails.isVisible = true
    }

    private fun bindAnimal(animal: Animal) {
        animalType.text = animal.type
        animalDesc.text = animal.description
    }
}
     

下面是基础布局和一个导入布局的示例。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/animalItem"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/animalTypeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@sample/lorem" />

    <TextView
        android:id="@+id/animalDescText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="4dp"
        app:layout_constraintBaseline_toBaselineOf="@id/animalTypeText"
        app:layout_constraintEnd_toEndOf="parent"
        tools:text="@sample/lorem" />

    <include
        android:id="@+id/catDetails"
        layout="@layout/partial_cat_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/animalTypeText" />

    <include
        android:id="@+id/dogDetails"
        layout="@layout/partial_dog_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/animalTypeText" />

    <include
        android:id="@+id/cuttleDetails"
        layout="@layout/partial_cuttleDetails"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/animalTypeText" />
</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/actionItem"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    
    <TextView
        android:id="@+id/dogYearsText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        app:layout_constraintBottom_toTopOf="@id/dogBreedText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="3" />

    <TextView
        android:id="@+id/dogBreedText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toTopOf="@id/dogGenderText"
        app:layout_constraintStart_toStartOf="@id/dogYearsText"
        app:layout_constraintTop_toBottomOf="@id/dogYearsText"
        tools:text="Shiba Inu" />

    <TextView
        android:id="@+id/dogGenderText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@id/dogYearsText"
        app:layout_constraintTop_toBottomOf="@id/dogBreedText"
        tools:text="Male" />
</androidx.constraintlayout.widget.ConstraintLayout>

就像我说的一样 - 这只是一个解决办法，但我没有时间调试框架中的实际问题。希望这能为某个人节省一些时间。

- Schadenfreude

---

如果你正确地重写了“getItemViewType(position)”方法，那么你应该能够使用多个视图类型。请查看@Mneckoee的答案。这不是框架中的错误。 - nsko