基于Android RecyclerView實(shí)現(xiàn)宮格拖拽效果

更新時(shí)間：2024年03月22日 09:10:31 作者：時(shí)光少年

在Android發(fā)展的進(jìn)程中,網(wǎng)格布局一直比較有熱度,其中一個(gè)原因是對(duì)用戶來(lái)說(shuō)便捷操作,對(duì)app廠商而言也會(huì)帶來(lái)很多的曝光量,本篇我們會(huì)使用RecyclerView來(lái)實(shí)現(xiàn)網(wǎng)格拖拽,本篇將結(jié)合圖片分片案例,實(shí)現(xiàn)拖拽效果,需要的朋友可以參考下

前言

在Android發(fā)展的進(jìn)程中，網(wǎng)格布局一直比較有熱度，其中一個(gè)原因是對(duì)用戶來(lái)說(shuō)便捷操作，對(duì)app廠商而言也會(huì)帶來(lái)很多的曝光量，對(duì)于很多頭部app，展示網(wǎng)格菜單幾乎是必選項(xiàng)。實(shí)現(xiàn)網(wǎng)格的方式有很多種，比如GridView、GridLayout，TableLayout等，實(shí)際上，由于RecyclerView的靈活性和可擴(kuò)展性很高，這些View基本沒(méi)必要去學(xué)了，為什么這樣說(shuō)呢？主要原因是基于RecyclerView可以實(shí)現(xiàn)很多布局效果，傳統(tǒng)的很多Layout都可以通過(guò)RecyclerView去實(shí)現(xiàn)，比如ViewPager、SlingTabLayout、DrawerLayout、ListView等，甚至連九宮格解鎖效果也可以實(shí)現(xiàn)。

當(dāng)然，在很早之前，實(shí)現(xiàn)網(wǎng)格的拖拽效果主要是通過(guò)GridView去實(shí)現(xiàn)的，如果列數(shù)為1的話，那么GridView基本上就實(shí)現(xiàn)了ListView一樣的上下拖拽。

話說(shuō)回來(lái)，我們現(xiàn)在基本不用去學(xué)習(xí)這類(lèi)實(shí)現(xiàn)了，因?yàn)镽ecyclerView足夠強(qiáng)大，通過(guò)簡(jiǎn)單的數(shù)據(jù)組裝，是完全可以替代GridView和ListView的。

效果

本篇我們會(huì)使用RecyclerView來(lái)實(shí)現(xiàn)網(wǎng)格拖拽，本篇將結(jié)合圖片分片案例，實(shí)現(xiàn)拖拽效果。

如果要實(shí)現(xiàn)網(wǎng)格菜單的拖拽，也是可以使用這種方式的，只要你的想象豐富，理論上，借助RecyclerView其實(shí)可以做出很多效果。

拖拽效果原理

拖動(dòng)其實(shí)需要處理3個(gè)核心的問(wèn)題，事件、圖像平移、數(shù)據(jù)交換。

事件處理

實(shí)際上無(wú)論傳統(tǒng)的拖拽效果還是最新的拖拽效果，都離不開(kāi)事件處理，不過(guò)，好處就是，google為RecyclerView提供了ItemTouchHelper來(lái)處理這個(gè)問(wèn)題，相比傳統(tǒng)的GridView實(shí)現(xiàn)方式，省去了很多事情，如動(dòng)畫(huà)、目標(biāo)查找等。

不過(guò)，我們回顧下原理，其實(shí)他們很多方面都是相似的，不同之處就是ItemTouchHelper 設(shè)計(jì)的非常好用，而且接口暴露的非常徹底，甚至能控制那些可以拖動(dòng)、那些不能拖動(dòng)、以及什么方向可以拖動(dòng)，如果我們上、下、左、右四個(gè)方向都選中的話，斜對(duì)角拖動(dòng)完全沒(méi)問(wèn)題，

事件處理這里，GridView使用的方式相對(duì)傳統(tǒng)，而ItemTouchHelper借助RecyclerView的一個(gè)接口（看樣子是開(kāi)的后門(mén)），通過(guò)View自身去攔截事件.

public interface OnItemTouchListener {
    //是否讓RecyclerView攔截事件
    boolean onInterceptTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e);
    //攔截之后處理RecyclerView的事件
    void onTouchEvent(@NonNull RecyclerView rv, @NonNull MotionEvent e);
    //監(jiān)聽(tīng)禁止攔截事件的請(qǐng)求結(jié)果
    void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept);
}

這種其實(shí)相對(duì)GridView來(lái)說(shuō)簡(jiǎn)單的多

圖像平移

無(wú)論是RecyclerView和傳統(tǒng)GridView拖動(dòng)，都需要圖像平移。我們知道，RecyclerView和GridView本身是通過(guò)子View的邊界（left\top\right\bottom）來(lái)移動(dòng)的，那么，在平移圖像的時(shí)候必然不能選擇這種方式，只能選擇Matrix 變化，也就是transitionX和transitionY的等。不同點(diǎn)是GridView的子View本身并不移動(dòng)，而是將圖像繪制到一個(gè)GridView之外的View上，當(dāng)然，實(shí)現(xiàn)上是比較復(fù)雜的。

但是，ItemTouchHelper設(shè)計(jì)比較巧妙的一點(diǎn)是，通過(guò)RecyclerView#ItemDecoration來(lái)實(shí)現(xiàn)，在捕獲可以滑動(dòng)的View之后，在繪制時(shí)對(duì)View進(jìn)行偏移。

class ItemTouchUIUtilImpl implements ItemTouchUIUtil {
    static final ItemTouchUIUtil INSTANCE =  new ItemTouchUIUtilImpl();

    @Override
    public void onDraw(Canvas c, RecyclerView recyclerView, View view, float dX, float dY,
            int actionState, boolean isCurrentlyActive) {
        if (Build.VERSION.SDK_INT >= 21) {
            if (isCurrentlyActive) {
                Object originalElevation = view.getTag(R.id.item_touch_helper_previous_elevation);
                if (originalElevation == null) {
                    originalElevation = ViewCompat.getElevation(view);
                    float newElevation = 1f + findMaxElevation(recyclerView, view);
                    ViewCompat.setElevation(view, newElevation);
                    view.setTag(R.id.item_touch_helper_previous_elevation, originalElevation);
                }
            }
        }

        view.setTranslationX(dX);
        view.setTranslationY(dY);
    }
     //省略一些有關(guān)或者無(wú)關(guān)的代碼
}

不過(guò)，我們看到，Android 5.0的版本借助了setElevation 使得被拖拽View不被其他順序的View遮住，那Android 5.0之前是怎么實(shí)現(xiàn)的呢？

其實(shí)，做過(guò)TV app的都比較清楚，子View繪制順序可以通過(guò)下面方式調(diào)整，借助下面的方法，在TV上某個(gè)View獲取焦點(diǎn)之后，就不會(huì)被后面的View蓋住。

View#getChildDrawingOrder

ItemTouchHelper 同樣借助了此方法，為什么不統(tǒng)一一種呢，主要原因是getChildDrawingOrder是protected，總的來(lái)說(shuō)，沒(méi)有通過(guò)setElevation方便。

private void addChildDrawingOrderCallback() {
    if (Build.VERSION.SDK_INT >= 21) {
        return; // we use elevation on Lollipop
    }
    if (mChildDrawingOrderCallback == null) {
        mChildDrawingOrderCallback = new RecyclerView.ChildDrawingOrderCallback() {
            @Override
            public int onGetChildDrawingOrder(int childCount, int i) {
                if (mOverdrawChild == null) {
                    return i;
                }
                int childPosition = mOverdrawChildPosition;
                if (childPosition == -1) {
                    childPosition = mRecyclerView.indexOfChild(mOverdrawChild);
                    mOverdrawChildPosition = childPosition;
                }
                if (i == childCount - 1) {
                    return childPosition;
                }
                return i < childPosition ? i : i + 1;
            }
        };
    }
    mRecyclerView.setChildDrawingOrderCallback(mChildDrawingOrderCallback);
}

數(shù)據(jù)更新

數(shù)據(jù)更新這里其實(shí)ReyclerView的優(yōu)勢(shì)更加明顯，我們知道RecyclerView可以做到無(wú)requestLayout的局部刷新，性能更好。

@Override
public boolean onItemMove(int fromPosition, int toPosition) {
    Collections.swap(mDataList, fromPosition, toPosition);
    notifyItemMoved(fromPosition, toPosition);
    return true;
}

不過(guò)，數(shù)據(jù)交換后還有一點(diǎn)需要處理，對(duì)Matrix相關(guān)屬性清理，防止無(wú)法落到指定區(qū)域。

@Override
public void clearView(View view) {
    if (Build.VERSION.SDK_INT >= 21) {
        final Object tag = view.getTag(R.id.item_touch_helper_previous_elevation);
        if (tag instanceof Float) {
            ViewCompat.setElevation(view, (Float) tag);
        }
        view.setTag(R.id.item_touch_helper_previous_elevation, null);
    }

    view.setTranslationX(0f);
    view.setTranslationY(0f);
}

本篇實(shí)現(xiàn)

以上基本都是對(duì)ItemTouchHelper的原理梳理了，當(dāng)然，如果你沒(méi)時(shí)間看上面的話，就看實(shí)現(xiàn)部分吧。

圖片分片

下面我們把多張圖片分割成 [行數(shù) x 列數(shù)]數(shù)量的圖片。

Bitmap srcInputBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.image_4);
Bitmap source = Bitmap.createScaledBitmap(srcInputBitmap, width, height, true);
srcInputBitmap.recycle();

int colCount = spanCount;
int rowCount = 6;

int spanImageWidthSize = source.getWidth() / colCount;
int spanImageHeightSize = (source.getHeight() - rowCount * padding/2) / rowCount;

Bitmap[] bitmaps = new Bitmap[rowCount * colCount];
for (int i = 0; i < rowCount; i++) {
    for (int j = 0; j < colCount; j++) {
        int y = i * spanImageHeightSize;
        int x = j * spanImageWidthSize;
        Bitmap bitmap = Bitmap.createBitmap(source, x, y, spanImageWidthSize, spanImageHeightSize);
        bitmaps[i * colCount + j] = bitmap;
    }
}

在這種過(guò)程我們一定要處理一個(gè)問(wèn)題，如果我們對(duì)網(wǎng)格設(shè)置了邊界線（ItemDecoration）且是縱向布局的話，那么，縱向總高度要減去rowCount * bottomPadding，這里bottomPadding == padding/2，如下面代碼。

為什么要這么做呢？因?yàn)镽ecyclerView計(jì)算高度的時(shí)候，需要考慮這個(gè)高度，如果不去處理，那么ReyclerView可能不是禁止不動(dòng)，而是會(huì)滑動(dòng)，雖然影響不大，但是如果實(shí)現(xiàn)全屏效果，還能上下滑的話體驗(yàn)比較差。

public class SimpleItemDecoration extends RecyclerView.ItemDecoration {

    public int delta;
    public SimpleItemDecoration(int padding) {
        delta = padding;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view,
                               RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view);
        RecyclerView.Adapter adapter = parent.getAdapter();
        int viewType = adapter.getItemViewType(position);
        if(viewType== Bean.TYPE_GROUP){
            return;
        }
        GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager();
         //列數(shù)量
        int cols = layoutManager.getSpanCount(); 
        //position轉(zhuǎn)為在第幾列
        int current =  layoutManager.getSpanSizeLookup().getSpanIndex(position,cols); 
        //可有可無(wú)
        int currentCol = current % cols;


        int bottomPadding = delta / 2;

        if (currentCol == 0) {  //第0列左側(cè)貼邊
            outRect.left = 0;
            outRect.right = delta / 4;
            outRect.bottom = bottomPadding;
        } else if (currentCol == cols - 1) {
            outRect.left = delta / 4;
            outRect.right = 0;
            outRect.bottom = bottomPadding;
             //最后一列右側(cè)貼邊
        } else {
            outRect.left = delta / 4;
            outRect.right = delta / 4;
            outRect.bottom = bottomPadding;
        }
    }
}

更新數(shù)據(jù)

這部分是常規(guī)操作，主要目的是設(shè)置LayoutManager、Decoration、Adapter以及ItemTouchHelper，當(dāng)然，ItemTouchHelper比較特殊，因?yàn)槠鋬?nèi)部試下是ItemTouchHelper、OnItemTouchListener、Gesture的組合，因此封裝為attachToRecyclerView 來(lái)調(diào)用。

mLinearLayoutManager = new GridLayoutManager(this, spanCount, LinearLayoutManager.VERTICAL, false);
mLinearLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup(){
    @Override
    public int getSpanSize(int position) {
        if(mAdapter.getItemViewType(position) == Bean.TYPE_GROUP){
            return spanCount;
        }
        return 1;
    }
});
mAdapter = new RecyclerViewAdapter();
mRecyclerView.setAdapter(mAdapter);
mRecyclerView.setLayoutManager(mLinearLayoutManager);
mRecyclerView.addItemDecoration(new SimpleItemDecoration(padding));
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(new GridItemTouchCallback(mAdapter));
itemTouchHelper.attachToRecyclerView(mRecyclerView);

這里，我們主要還是關(guān)注ItemTouchHelper，在初始化的時(shí)候，我們給了一個(gè)GridItemTouchCallback，用于監(jiān)聽(tīng)相關(guān)處理邏輯，最終通知Adapter調(diào)用notifyXXX更新View。

public class GridItemTouchCallback extends ItemTouchHelper.Callback {
    private final ItemTouchCallback mItemTouchCallback;
    public GridItemTouchCallback(ItemTouchCallback itemTouchCallback) {
        mItemTouchCallback = itemTouchCallback;
    }
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        // 上下左右拖動(dòng)，但允許觸發(fā)刪除
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
        return makeMovementFlags(dragFlags, 0);
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        // 通知Adapter移動(dòng)View
        return mItemTouchCallback.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition());
    }
    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        // 通知Adapter刪除View
        mItemTouchCallback.onItemRemove(viewHolder.getAdapterPosition());
    }

    @Override
    public void onChildDraw(@NonNull Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
        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) {
        Log.d("GridItemTouch","dx="+dX+", dy="+dY);
        super.onChildDrawOver(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }
}

這里，主要是對(duì)Flag的關(guān)注需要處理，第一參數(shù)是拖拽方向，第二個(gè)是刪除方向，我們本篇不刪除，因此，第二個(gè)參數(shù)為0即可。

public static int makeMovementFlags(int dragFlags, int swipeFlags) {
    return makeFlag(ACTION_STATE_IDLE, swipeFlags | dragFlags)
            | makeFlag(ACTION_STATE_SWIPE, swipeFlags)
            | makeFlag(ACTION_STATE_DRAG, dragFlags);
}

總結(jié)

本篇到這里就結(jié)束了，我們利用RecyclerView實(shí)現(xiàn)了宮格圖片的拖拽效果，主要是借助ItemTouchHelper實(shí)現(xiàn)，從ItemTouchHelper中我們能看到很多巧妙的的設(shè)計(jì)，里面有很多值得我們學(xué)習(xí)的技巧，特別是對(duì)事件的處理、繪制順序調(diào)整的方式，如果做吸頂，未嘗不是一種方案。

以上就是基于Android RecyclerView實(shí)現(xiàn)宮格拖拽效果的詳細(xì)內(nèi)容，更多關(guān)于Android RecyclerView宮格拖拽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: