Android使用RecyclerView實現(xiàn)今日頭條頻道管理功能

更新時間：2017年07月23日 11:19:25 作者：ZACH_ZHOU

這篇文章主要為大家詳細介紹了Android使用RecyclerView實現(xiàn)今日頭條頻道管理功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用過今日頭條的伙計們對這個效果肯定很熟悉。拖拽可排序，點擊標(biāo)簽后可以刪除。今天我們采用RecyclerView來實現(xiàn)。

實現(xiàn)思路：

通過ItemTouchHelper來綁定RecyclerView的子控件觸摸事件。
當(dāng)滑動拖拽的時候，通知適配器來交換兩個子控件的顯示位置。
更改數(shù)據(jù)源，使數(shù)據(jù)源與子空間顯示內(nèi)容一致。
這就是實現(xiàn)的基本思路，是不是很簡單?當(dāng)然，首先要了解一下ItemTouchHelper這哥們兒是干啥的，有什么作用。

This is a utility class to add swipe to dismiss and drag & drop support to RecyclerView.

It works with a RecyclerView and a Callback class, which configures what type of interactions are enabled and also receives events when user performs these actions.

Depending on which functionality you support, you should override onMove(RecyclerView, ViewHolder, ViewHolder) and / or onSwiped(ViewHolder, int).

This class is designed to work with any LayoutManager but for certain situations, it can be optimized for your custom LayoutManager by extending methods in the ItemTouchHelper.Callback class or implementing ItemTouchHelper.ViewDropHandler interface in your LayoutManager.

By default, ItemTouchHelper moves the items' translateX/Y properties to reposition them. You can customize these behaviors by overriding onChildDraw(Canvas, RecyclerView, ViewHolder, float, float, int, boolean) or onChildDrawOver(Canvas, RecyclerView, ViewHolder, float, float, int, boolean).

Most of the time you only need to override onChildDraw.

通過API文檔的介紹，這個哥們兒是為RecyclerView工作的，他需要一個CallBack,可以回調(diào)RecyclerView的子控件滑動和拖拽事件，而且也可以通過這個CallBack重繪我們的子view。這就一目了然了嘛。通過使用ItemTouchHelper，可以很輕松的就實現(xiàn)了RecyclerView觸摸事件的回調(diào)。換句話說，只要我們?yōu)镽ecyclerView 綁定了ItemTouchHelper之后，RecyclerView子控件的拖動和滑動事件已經(jīng)幫我們實現(xiàn)了。我們所要做的就是在觸摸事件之后，如何去改變?nèi)ジ翧dapter和改變我們的數(shù)據(jù)。

開始擼碼：

public class ChannelActivity extends Activity {

  public RecyclerView rv;

  public List<DataBean> list = new ArrayList<>();

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_channel);
    initData();
    initView();
  }

  private void initView() {

    rv = (RecyclerView) findViewById(R.id.rl_view);
    rv.setLayoutManager(new GridLayoutManager(this, 4));
    MyAdapter adapter = new MyAdapter(this, list);
    rv.setAdapter(adapter);
    //關(guān)聯(lián)ItemTouchHelper
    ItemTouchHelper touchHelper = new ItemTouchHelper(new MyItemTouchCallBack(adapter));
    touchHelper.attachToRecyclerView(rv);

  }

  private void initData() {

    DataBean bean1 = new DataBean("體育", 0, "url");
    DataBean bean2 = new DataBean("新聞", 1, "url");
    DataBean bean3 = new DataBean("影視", 2, "url");
    DataBean bean4 = new DataBean("電視劇", 3, "url");
    DataBean bean5 = new DataBean("熱點", 4, "url");
    DataBean bean6 = new DataBean("推薦", 5, "url");
    DataBean bean7 = new DataBean("屌絲男士", 6, "url");
    DataBean bean8 = new DataBean("音樂", 7, "url");
    DataBean bean9 = new DataBean("電影", 8, "url");

    list.add(bean1);
    list.add(bean2);
    list.add(bean3);
    list.add(bean4);
    list.add(bean5);
    list.add(bean6);
    list.add(bean7);
    list.add(bean8);
    list.add(bean9);
  }
}

自定義MyItemTouchCallBack

public class MyItemTouchCallBack extends ItemTouchHelper.Callback {

  private TouchInterface touchInterface;

  public MyItemTouchCallBack(TouchInterface touchInterface) {
    this.touchInterface = touchInterface;
  }

  @Override
  public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    //拖拽
    int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.RIGHT | ItemTouchHelper.LEFT;
    //滑出屏幕
    int swipeFlags = ItemTouchHelper.RIGHT | ItemTouchHelper.LEFT | ItemTouchHelper.UP | ItemTouchHelper.DOWN;
    return makeMovementFlags(dragFlags, 0);
  }

  @Override
  public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {

    int position_target = target.getLayoutPosition();
    int position = viewHolder.getLayoutPosition();
    //滑動事件回調(diào)到了Adapter，用來處理數(shù)據(jù)
    touchInterface.onMove(position, position_target);
    return true;
  }


  //標(biāo)簽動畫持續(xù)時間，默認是250
  @Override
  public long getAnimationDuration(RecyclerView recyclerView, int animationType, float animateDx, float animateDy) {

    return super.getAnimationDuration(recyclerView, animationType, animateDx, animateDy);
  }


  /**
   * 是否可以長按拖拽，默認是true
   *
   * @return
   */
  @Override
  public boolean isLongPressDragEnabled() {
    return super.isLongPressDragEnabled();
  }

  /**
   * 標(biāo)簽劃出去的回調(diào)，direction是滑動的方向
   *
   * @return
   */

  @Override
  public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
  }

}

Adapter類中處理數(shù)據(jù)

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> implements TouchInterface {

  private Context context;
  //是否顯示delete
  public boolean isShow;

  public List<DataBean> getList() {
    return list;
  }

  public void setList(List<DataBean> list) {
    this.list = list;
  }

  private List<DataBean> list;

  public MyAdapter(Context context, List<DataBean> list) {
    this.context = context;
    this.list = list;
  }

  @Override
  public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    MyViewHolder viewHolder = new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.item_layout, parent, false));
    return viewHolder;
  }


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

    holder.tv_des.setText(list.get(position).name);
    holder.tv_des.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        DataBean bean = list.remove(position);
        notifyDataSetChanged();
        Toast.makeText(context,"刪除了"+bean.name+"頻道",Toast.LENGTH_SHORT).show();
      }
    });

    holder.tv_des.setOnLongClickListener(new View.OnLongClickListener() {
      @Override
      public boolean onLongClick(View v) {
        isShow = true;
        notifyDataSetChanged();
        return true;
      }
    });

    if (isShow) {
      holder.iv_icon.setVisibility(View.VISIBLE);
    } else {
      holder.iv_icon.setVisibility(View.GONE);
    }
  }

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

  @Override
  public void onMove(int currentPosition, int targetPosition) {

    Collections.swap(list, currentPosition, targetPosition);
    if (targetPosition < currentPosition) {
      List<DataBean> subList = list.subList(targetPosition + 1, currentPosition + 1);
      //向右移一位
      rightStepList(0, subList);
    } else {
      List<DataBean> subList = list.subList(currentPosition, targetPosition);
      //向左移一位
      leftStepList(0, subList);
    }
    notifyItemMoved(currentPosition, targetPosition);
  }
}

class MyViewHolder extends RecyclerView.ViewHolder {

  public ImageView iv_icon;
  public TextView tv_des;

  public MyViewHolder(View itemView) {
    super(itemView);
    iv_icon = (ImageView) itemView.findViewById(R.id.iv_icon);
    tv_des = (TextView) itemView.findViewById(R.id.tv_des);
  }
}

解釋一下onMove方法，例如：我們的數(shù)據(jù)是[1,2,3,4,5,6]，當(dāng)6移動到3的位置時，那么數(shù)據(jù)源最后變化為[1,2,6,3,4,5]。但是在顯示的時候我們先是將當(dāng)前position和targetposition對調(diào)[1,2,6,4,5,3],然后取出[4,5,3]進行右移一位，這樣數(shù)據(jù)源就對上了。如果是從3移動到6進行左移就可以了，數(shù)據(jù)排序的算法，采用反轉(zhuǎn)的思想。

public class DataUtils {

  /**
   * 利用反轉(zhuǎn)的思想對數(shù)據(jù)進行排序
   * 例如：list{0,1,2,3,4,5,6,7} 左移一位
   * 第一步:第一位先反轉(zhuǎn){0,1,2,3,4,5,6,7}
   * 第二部:剩下的在反轉(zhuǎn){0,7,6,5,4,3,2,1}
   * 第三步:全部反轉(zhuǎn){1,2,3,4,5,6,7,0}
   *
   * 例如：list{0,1,2,3,4,5,6,7} 右移一位
   * 第一步:最右邊一位先反轉(zhuǎn){1,2,3,4,5,6,7}
   * 第二部:剩下的在反轉(zhuǎn){6,5,4,3,2,1,0,7}
   * 第三步:全部反轉(zhuǎn){7,6,5,4,3,2,1,0}
   *
   * 因為list的index是從0開始的，step要相應(yīng)的-1
   * 優(yōu)點:少創(chuàng)建對象，優(yōu)化內(nèi)存
   *
   * @param start
   * @param end
   * @param list
   */

  public static void reverseList(int start,int end,List list){

    int count = (end+1-start)/2 ;
    for(int i = 0;i< count;i++){
      Object temp = list.get(start+i);
      list.set(start+i,list.get(end-i));
      list.set(end-i,temp);
    }
  }
  public static void leftStepList(int step,List list){

    int size = list.size() -1;
    //左移
    reverseList(0,step,list);
    reverseList(step+1,size,list);
    reverseList(0,size,list);

  }

  public static void rightStepList(int step,List list){

    int size = list.size() -1;
    //右移
    reverseList(size-step,size,list);
    reverseList(0,size-step-1,list);
    reverseList(0,size,list);
  }
}

Activity布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_channel"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.iwintrue.channe.ChannelActivity">

  <android.support.v7.widget.RecyclerView
    android:id="@+id/rl_view"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>

</RelativeLayout>

子控件布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  >

  <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp">
    <TextView
      android:id="@+id/tv_des"
      android:layout_width="80dp"
      android:layout_height="30dp"
      android:text="屌絲男士"
      android:gravity="center"
      android:background="@drawable/rl_shape"
      android:textColor="@color/textColor"
      android:layout_marginTop="5dp"
      android:layout_marginRight="5dp" />
    <ImageView
      android:layout_alignRight="@+id/tv_des"
      android:layout_marginRight="-5dp"
      android:id="@+id/iv_icon"
      android:layout_width="20dp"
      android:layout_height="20dp"
      android:src="@mipmap/delete"
      android:scaleType="fitXY"
      android:visibility="gone" />

  </RelativeLayout>
</LinearLayout>

實現(xiàn)效果：