Android ItemTouchHelper實現RecyclerView交互動畫

在上一次博客 Android RecyclerView使用詳解,主要介紹了RecyclerView的基礎使用,本篇文章將主要介紹通過ItemToucheHelper輔助類完成RecyclerView的交互動畫效果。

效果如下:
這裏寫圖片描述

ItemTouchHelper簡單使用

要想通過ItemTouchHelper實現交互動畫,只需要以下步驟:

  1. 定義一個ItemTouchHelper.Callback回調類,用於實現具體交互效果
  2. 創建一個ItemTouchHelper對象,並傳入Callback對象
  3. 調用ItemTouchHelper對象的attachToRecyclerView方法,將ItemTouchHelper對象綁定到指定RecyclerView控件上。

代碼如下:

package com.example.itemtouchhelperdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;

import java.util.List;

public class MainActivity extends AppCompatActivity implements StartDragListener {

    private RecyclerView mRecyclerView;
    private ItemTouchHelper mItemTouchHelper;

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

        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        //1、設置適配器
        List<Message> list = DataUtils.init();
        RecyclerAdapter adapter = new RecyclerAdapter(list, this);
        mRecyclerView.setAdapter(adapter);

        //2、設置ItemTouchHelper
        ItemTouchHelper.Callback callback = new MyItemTouchHelperCallback(adapter);
        mItemTouchHelper = new ItemTouchHelper(callback);
        mItemTouchHelper.attachToRecyclerView(mRecyclerView);

    }

    /**
     * 在Adapter中需要執行startDrag方法開始拖動效果
     */
    @Override
    public void onStartDrag(RecyclerView.ViewHolder viewHolder) {
        // 執行拖動效果
        mItemTouchHelper.startDrag(viewHolder);
    }
}

具體實現

通過上圖的演示效果想必不難看出:在通過ItemTouchHelper實現上下拖動和左右滑動時分別對RecyclerView的item做了交換位置和刪除的操作,這實際上是通過RecyclerView的Adapter實現的。
所以要想實現以上效果,我們需要將Adapter和ItemTouchHelper關聯起來,這裏我們可以定義一個接口來完成這樣的操作。

創建Adapter

在本次演示中,我們主要是通過觸摸頭像來實現上下滑動的效果,所以我們需要爲頭像設置觸摸事件,並執行拖動的效果。
代碼如下:

package com.example.itemtouchhelperdemo;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Collections;
import java.util.List;

/**
 * Created by zhangke on 16/6/21.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder> implements ItemTouchMoveListener {
    private List<Message> list;
    private StartDragListener dragListener;

    public RecyclerAdapter(List<Message> list, StartDragListener dragListener) {
        this.list = list;
        this.dragListener = dragListener;
    }

    class MyViewHolder extends RecyclerView.ViewHolder {

        private ImageView mIvHead;
        private TextView mTvTitle;

        public MyViewHolder(View itemView) {
            super(itemView);
            mIvHead = (ImageView) itemView.findViewById(R.id.iv_logo);
            mTvTitle = (TextView) itemView.findViewById(R.id.tv_title);
        }

    }

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

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem, parent, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, int location) {
        List<Message> list = this.list;
        Message message = list.get(location);
        holder.mIvHead.setImageResource(message.getImage());
        holder.mTvTitle.setText(message.getTitle());

        // 給頭像設置觸摸事件,實現觸摸頭像時實現拖動效果
        holder.mIvHead.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    // 執行開始拖動動畫
                    dragListener.onStartDrag(holder);
                }
                return false;
            }
        });
    }
}

  /**
     * 當Item上下拖動會調用該方法
     *
     * @param fromPosition
     * @param toPosition
     * @return
     */
    @Override
    public boolean onItemMove(int fromPosition, int toPosition) {
        Collections.swap(list, fromPosition, toPosition);
        notifyItemMoved(fromPosition, toPosition);
        return true;
    }

    /**
     * 當Item左右滑動時調用該方法
     *
     * @param position
     * @return
     */
    @Override
    public boolean onItemRemove(int position) {
        list.remove(position);
        notifyItemRemoved(position);

        return true;
    }

在定義Adapter時,會讓該adapter實現自定義接口ItemTouchMoveListener,該接口中定義了兩個方法分別實現處理上下拖動和左右滑動時的回調函數,具體實現邏輯在adapter中,最終我們會在ItemTouchHelper.Callback中調用這兩個函數已達到交互動畫的效果。

public interface ItemTouchMoveListener {

    /**
     * 當Item上下拖動時調用
     */
    boolean onItemMove(int fromPosition, int toPosition);

    /**
     * 當item左右滑動時調用
     */
    boolean onItemRemove(int position);
}

創建ItemTouchHelper.Callback

ItemTouchHelper.Callback是一個抽象類,所以在使用的時候需要自定義一個類繼承自它,同時需要複寫三個抽象方法:

  • getMovementFlags:設置支持的拖動和滑動的方向
  • onMove:當拖動的時候調用該方法
  • onSwipe:當滑動的時候調用該方法

具體實現代碼如下:

package com.example.itemtouchhelperdemo;

import android.content.ClipData;
import android.graphics.Canvas;
import android.graphics.Color;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;
import android.util.Log;

/**
 * Created by zhangke on 16/6/21.
 */
public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {

    private ItemTouchMoveListener mItemTouchMoveListener;

    public MyItemTouchHelperCallback(ItemTouchMoveListener listener) {
        this.mItemTouchMoveListener = listener;
    }

    /**
     * 設置RecyclerView支持拖動和滑動的方向
     */
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

        //支持上下拖動
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;

        //支持左右滑動
        int swipeFlag = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;

        int flags = makeMovementFlags(dragFlags, swipeFlag);
        return flags;
    }

    /**
     * 當上下拖動的時候調用該方法
     */
    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        if (viewHolder.getItemViewType() != target.getItemViewType()) {
            // 當item的類型不一樣的時候不能交換
            return false;
        }

        boolean result = mItemTouchMoveListener.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition());
//        boolean result = mItemTouchMoveListener.onItemMove(viewHolder.getLayoutPosition(), target.getLayoutPosition());

        return result;
    }

    /**
     * 當左右滑動的時候調用該方法
     */
    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        mItemTouchMoveListener.onItemRemove(viewHolder.getAdapterPosition());
    }

    /**
     * 選中狀態改變時監聽
     */
    @Override
    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
        if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
            //不是空閒狀態
            viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(R.color.colorPrimary));
        }

        super.onSelectedChanged(viewHolder, actionState);
    }

    /**
     * 恢復item狀態
     */
    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        viewHolder.itemView.setBackgroundColor(Color.WHITE);
        super.clearView(recyclerView, viewHolder);
    }

    /**
     * holde ItemView繪製,屬性動畫
     */
    @Override
    public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
        //在左右滑動時,讓item的透明度隨着移動而改變,並縮放
        float alpha = 1 - Math.abs(dX) / viewHolder.itemView.getWidth();
        if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
            viewHolder.itemView.setAlpha(alpha);
            viewHolder.itemView.setScaleX(alpha);
            viewHolder.itemView.setScaleY(alpha);

        }
        //防止item複用出現問題,如果大家不理解下面這段代碼,可以自行註釋效果,
        if (alpha <= 0) {
            viewHolder.itemView.setAlpha(1);
            viewHolder.itemView.setScaleX(1);
            viewHolder.itemView.setScaleY(1);

        }
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }

}

在以上代碼中,除了必須複用這三個抽象方法外,我們還使用到其他一些方法:

  • onSelectedChanged:當item的選中狀態改變時調用
  • clearView:移除item的效果
  • onChildDraw:在item繪製時調用,主要操作一些屬性動畫
  • isItemViewSwipeEnabled:這個方法默認返回值true即默認支持左右側滑
  • isLongPressDragEnabled:默認返回值爲true,支持長按拖動,通過該方法,我們可以不需要在頭像ImageView上設置觸摸事件就完成長按拖動效果。

到此,ItemTouchHelper的主要使用方法就介紹完了,
源代碼:https://github.com/kerwin1321/Study/tree/master/MaterialDesign/RecyclerView

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章