Android 高仿騰訊新聞頻道定製頁面

先上效果圖

騰訊效果

高仿效果 移除頻道的動畫效果模仿得不是很像，若是有更好的實現方法能夠在下面留言告訴我。

頁面效果拆解

• 部分已選頻道位置固定，不能拖動
• 已選頻道能夠長按拖拽改變順序，長按後背景色改變，刪除按鈕隱藏，本來的位置會出現一個虛線的矩形
• 點擊已選頻道或刪除按鈕會移除該頻道，這裏會分兩種狀況，若頻道屬於下方顯示的頻道，則移動到下方第一個，隱藏刪除按鈕；不屬於則出現一個動畫進行移除
• 點擊推薦頻道或地方新聞下方內容會進行切換
• 點擊推薦頻道或地方新聞下的頻道，頻道會移動到已選頻道的最後一個，同時出現刪除按鈕

既然它是一個列表，能夠拖動，又須要動畫，那這裏就使用recyclerView+ItemTouchHelper來實現整個頁面的效果

拖拽實現

這裏須要新建一個類繼承ItemTouchHelper.Callback，並重寫其中的幾個方法

• public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) 這個方法返回的是拖拽和滑動的方向。通常使用makeMovementFlags(int,int)或者makeFlag(int,int)構造返回值。咱們須要的全部方向的拖拽，不須要滑動，因此能夠這麼寫：

public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
        int swipeFlags = 0;
        return makeMovementFlags(dragFlags, swipeFlags);
    }
複製代碼

但已選頻道這裏是有一個或多個固定頻道的，並且咱們是一個recyclerView去實現整個頁面，tab及tab下面的item都是不能拖動的，因此還須要處理一下：

public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        //固定位置及tab下面的channel不能拖動
        if (viewHolder.getLayoutPosition() < mAdapter.getFixSize() + 1 || viewHolder.getLayoutPosition() > mAdapter.getSelectedSize()) {
            return makeMovementFlags(0, 0);
        }
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
        int swipeFlags = 0;
        return makeMovementFlags(dragFlags, swipeFlags);
    }
複製代碼

• public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) 當用戶拖動item進行移動時會回調這個方法,若是item移動到新的位置，返回true；不然返回false。咱們能夠在這裏實現item的位置交換。要注意的是，某些item是不能改變位置的，因此也要進行處理：

public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        int fromPosition = viewHolder.getAdapterPosition();   //拖動的position
        int toPosition = target.getAdapterPosition();     //釋放的position
        //固定位置及tab下面的channel不能拖動
        if (toPosition < mAdapter.getFixSize() + 1 || toPosition > mAdapter.getSelectedSize())
            return false;
        mAdapter.itemMove(fromPosition, toPosition);
        return true;
    }
複製代碼

• public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) 當用戶滑動item的時候會回調此方法，這裏咱們不須要滑動，不須要重寫這個方法 重寫完以上兩個方法就能夠實現拖拽滑動了，但距離咱們想要的效果仍是有點差距的。

  

  長按拖拽的時候item的顏色會改變，出現陰影，刪除按鈕會隱藏，本來的位置還會出現一個虛線的方框。

  

  吐槽完了還得繼續作啊...... emmmmm...看一下ItemTouchHelper.Callback還有哪些方法能用得上吧

  

• public void onSelectedChanged(ViewHolder viewHolder, int actionState) 當viewHolder被拖拽或滑動時回調(感受這麼翻譯有點怪...)。這裏有個actionState參數，它的值共有3個：ACTION_STATE_IDLE、ACTION_STATE_SWIPE、ACTION_STATE_DRAG。這裏能夠根據actionState改變item的樣式。

public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
        super.onSelectedChanged(viewHolder, actionState);
        if(actionState==ACTION_STATE_DRAG){
            //長按時調用
            ChannelAdapter.ChannelHolder holder= (ChannelAdapter.ChannelHolder) viewHolder;
            holder.name.setBackgroundColor(Color.parseColor("#FDFDFE"));
            holder.delete.setVisibility(View.GONE);
            holder.name.setElevation(5f);
        }
    }
複製代碼

這裏須要注意一下，不能當actionState爲ACTION_STATE_IDLE時重置item的狀態，viewHolder有可能爲空指針

• public void clearView(RecyclerView recyclerView, ViewHolder viewHolder) 當交互完成後會回調此方法。重寫這個方法重置item的樣式。

public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        super.clearView(recyclerView, viewHolder);
        ChannelAdapter.ChannelHolder holder= (ChannelAdapter.ChannelHolder) viewHolder;
        holder.name.setBackgroundColor(Color.parseColor("#f0f0f0"));
        holder.name.setElevation(0f);
        holder.delete.setVisibility(View.VISIBLE);
    }
複製代碼

虛線方框須要繪製，只能找跟draw相關的方法羅

• onChildDraw
• onChildDrawOver 區別想必你們都懂的，這裏很少說，重寫一下onChildDrawOver方法繪製虛線方框。

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 (dX != 0 && dY != 0 || isCurrentlyActive) {
            //長按拖拽時底部繪製一個虛線矩形
            c.drawRect(viewHolder.itemView.getLeft(),viewHolder.itemView.getTop()-mPadding,viewHolder.itemView.getRight(),viewHolder.itemView.getBottom(),mPaint);
        }
    }
複製代碼

適配器

多佈局什麼的我想你們都懂的，就不細說了。tab這裏爲了方便直接使用了兩個textView實現。 着重說一下要注意的幾個地方吧：

• 頻道的長按事件須要返回true，不然長按頻道觸發拖動但卻不移動的話會觸發後面的點擊事件
• 若是使用的ItemDecoration，頻道添加和刪除後須要調用recyclerView.invalidateItemDecorations()刷新ItemDecoration
• 頻道的移除分兩種：移除的頻道屬於當前下方顯示的頻道，直接移動item，利用系統動畫完成；不屬於則移動到tab的位置並逐漸消失。 這裏個人作法是用ObjectAnimator同時實現平移和透明度動畫。可是會出現下面的問題...

  

  這裏(應該是吧，其實我也不太清楚啊...)recyclerView的複用引發的問題，因此在動畫結束後須要重置view的屬性 emmmm...... 貼一下部分代碼吧

private void setChannel(final ChannelHolder holder, ChannelBean bean) {
        final int position = holder.getLayoutPosition();
        holder.name.setText(bean.getName());
        holder.name.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (holder.getLayoutPosition() < selectedSize + 1) {
                    //tab上面的 點擊移除
                    removeFromSelected(holder);
                } else {
                    //tab下面的 點擊添加到已選頻道
                    selectedSize++;
                    itemMove(holder.getLayoutPosition(), selectedSize);
                    notifyItemChanged(selectedSize);
                    if (onItemRangeChangeListener != null) {
                        onItemRangeChangeListener.refreshItemDecoration();
                    }
                }
            }
        });
        holder.name.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View v) {
                //返回true 防止長按拖拽事件跟點擊事件衝突
                return true;
            }
        });
        holder.delete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                removeFromSelected(holder);
            }
        });
    }

    private void removeFromSelected(ChannelHolder holder) {
        int position = holder.getLayoutPosition();
        holder.delete.setVisibility(View.GONE);
        ChannelBean bean = mList.get(position);
        if ((isRecommend && bean.isRecommend()) || (!isRecommend && !bean.isRecommend())) {
            //移除的頻道屬於當前tab顯示的頻道，直接調用系統的移除動畫
            itemMove(position, selectedSize + 1);
            notifyItemRangeChanged(selectedSize + 1, 1);
            if (onItemRangeChangeListener != null) {
                //若是設置了itemDecoration，必須調用recyclerView.invalidateItemDecorations(),不然間距會不對
                onItemRangeChangeListener.refreshItemDecoration();
            }
        } else {
            //不屬於當前tab顯示的頻道
            removeAnimation(holder.itemView, isRecommend ? mRight : mLeft, mTabY, position);
        }
        selectedSize--;
    }

    void itemMove(int fromPosition, int toPosition) {
        if (fromPosition < toPosition) {
            for (int i = fromPosition; i < toPosition; i++) {
                Collections.swap(mList, i, i + 1);
            }
        } else {
            for (int i = fromPosition; i > toPosition; i--) {
                Collections.swap(mList, i, i - 1);
            }
        }
        notifyItemMoved(fromPosition, toPosition);
    }

}
複製代碼

因爲使用了textView代替tab，因此會有一些計算用於藍色線條的位置改變。

上面只是我我的的實現方式，若是有更好的方式，能夠在下方留言。 最後，奉上源碼

java版

kotlin版

kotlin版本的語法可能有點問題，畢竟