美文网首页
Android 实现可拖拽列表和多选功能

Android 实现可拖拽列表和多选功能

作者: 时光里捉迷藏 | 来源:发表于2019-05-09 10:42 被阅读0次

    这段时间在做一个app,整体功能不是非常复杂,所以感觉一直在啃老本,直到碰到一个需求,要实现列表拖拽功能,经过一番绞尽脑汁的探索加上参考各路大神的博客终于做完了,在此和大家分享自己的经历

    我最开始想到的方案是用第三方库,所以借助万能的百度查到了一个DragsortListview,然后就添加进项目中开始写Demo,结果发现各种坑爹(这都啥玩意儿,还有这么多人给星),然后我冷静地想了一下开始学Android的时候正是RecyclerView大火各方大神写动效,什么瀑布流,网格好像就有这个拖动效果,百度一查,谷歌爸爸早就把拖动的接口预留在RecyclerView里面了(掀桌子)

    RecyclerView是ViewGroup的子类,没有像ListView那样OnItemClickListener接口,点击事件需要自己实现和传值
    ItemTouchHelper是ItemDecoration的子类,用于定制RecyclerView的动效,ItemDecoration用于设置列表条目的分割线,ItemTouchHelper.Callback是联系RecyclerView.Adapter和ItemTouchHelper的关键,在其中可以设置侧滑和拖动等多种手势

    注意ReportListActivity中有两个监听接口,一个是View.OnClickListener,另外一个是RecyclerAdapter.Callback,为了区分开来,前者我用接口实现,后者用内部类实现

    我已经把这个模块放到GitHub上开源了,有兴趣可以看一下
    https://github.com/caoguoly940713/UIFrame

    废话不多说,直接上主菜
    主窗口代码:

    /**
     * 编辑状态下长按拖动条目
     * 1.通过ItemTouchHelper.Callback实现长按拖动
     * 2.通过isEditable的值判断是否编辑状态,初值是false
     * 3.切换编辑状态要把isEditable的值取反,并改变复选框图标状态
     * 4.在编辑状态下,按返回键回到非编辑状态
     * 5.RecyclerView的点击事件通过RecyclerAdapter.Callback实现
     */
    
    public class ReportListActivity extends AppCompatActivity implements View.OnClickListener {
    
        private static final String TAG = "ReportListActivity";
    
        @BindView(R.id.tv_title_middle)
        TextView title;
        @BindView(R.id.title_left)
        ImageView backButton;
        @BindView(R.id.online_report_listview)
        RecyclerView mRecyclerView;
        @BindView(R.id.edit_tv)
        TextView edit;
        @BindView(R.id.filter_tv)
        TextView filter;
        @BindView(R.id.btn_delete)
        TextView delete;
        @BindView(R.id.btn_release)
        TextView release;
        @BindView(R.id.btn_close)
        TextView close;
        @BindView(R.id.btn_top)
        TextView top;
    
        private Context mContext;
        private boolean isEditable;
        private RecyclerAdapter mAdapter;
        private List<ClsOnlineReport> mClsOnlineReportList;
        private ItemTouchHelper itemTouchHelper;
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_online_report);
            ButterKnife.bind(this);
    
            initView();
            initData();
            initListener();
        }
    
        private void initData() {
            mContext = this;
            getOfflineData(20);
    
            setIsEditable(false);
            OnlineReportListCallback callback = new OnlineReportListCallback(mAdapter);
            itemTouchHelper = new ItemTouchHelper(callback);
    
            setRecyclerViewDraggable(false);
        }
    
        private void getOfflineData(int num) {
    
            List<ClsOnlineReport> clsOnlineReportList = new ArrayList<>();
            for (int i = 0; i < num; i++) {
                ClsOnlineReport onlineReport = new ClsOnlineReport();
                onlineReport.setActiveDate("activeDate " + i);
                onlineReport.setAutoCloseDate("autoCloseDate " + i);
                onlineReport.setBulletinID("bulletinID " + i);
                onlineReport.setBulletinTime("bulletinTime " + i);
                onlineReport.setBulletinTitle("bulletinTitle " + i);
                onlineReport.setCreater("creater " + i);
                onlineReport.setCreaterID("creater " + i);
                onlineReport.setIsActive("isActive " + i);
                onlineReport.setModiManID("modiManID " + i);
                onlineReport.setModiManName("modiManName " + i);
                onlineReport.setOnTop("onTop " + i);
                onlineReport.setOrderNum("oderNum " + i);
                clsOnlineReportList.add(onlineReport);
            }
    
            mClsOnlineReportList = clsOnlineReportList;
            mAdapter = new RecyclerAdapter(mClsOnlineReportList);
            mRecyclerView.setAdapter(mAdapter);
        }
    
        private void initView() {
            title.setText("可拖拽列表");
            edit.setVisibility(View.VISIBLE);
            hideBottomMenu();
    
            mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext));
        }
    
        private void initListener() {
            filter.setOnClickListener(this);
            backButton.setOnClickListener(this);
            edit.setOnClickListener(this);
            delete.setOnClickListener(this);
            release.setOnClickListener(this);
            close.setOnClickListener(this);
            top.setOnClickListener(this);
    
            mAdapter.setmCallback((v, position) -> {
                switch (v.getId()) {
                    case R.id.view_parent_1:
                    case R.id.view_parent_2:
                        ClsOnlineReport clsOnlineReport = mClsOnlineReportList.get(position);
                        if (getIsEditable()) {
                            if (clsOnlineReport.getIsCheckBoxVisible()) {
                                clsOnlineReport.setIsChecked(!clsOnlineReport.getIsChecked());
                                mAdapter.notifyDataSetChanged();
                            }
    
                            for (int i = 0; i < mClsOnlineReportList.size(); i++) {
                                ClsOnlineReport onlineReport = mClsOnlineReportList.get(i);
                                if (onlineReport.getIsChecked()) {
                                    showBottomMenu();
                                    break;
                                }
                                if (i == mClsOnlineReportList.size() - 1) {
                                    hideBottomMenu();
                                }
                            }
                        } else {
                            Intent intent = new Intent(mContext, ReportDetailActivity.class);
                            intent.putExtra("bulletinID", clsOnlineReport.getBulletinID());
                            startActivityForResult(intent, 16371);
                        }
                }
            });
        }
    
        @Override
        public void onBackPressed() {
    
            if (getIsEditable()) {
                switchEditable();
            } else {
                finish();
            }
        }
    
        @Override
        public void onClick(View v) {
            if (v.getId() == R.id.title_left) {
                if (getIsEditable()) {
                    switchEditable();
                } else {
                    finish();
                }
            }
            if (v.getId() == R.id.edit_tv) {
                switchEditable();
            }
    
            switch (v.getId()) {
    
                case R.id.btn_top:
                case R.id.btn_close:
                case R.id.btn_release:
                case R.id.btn_delete:
                    Toast.makeText(mContext, "在此处调用接口", Toast.LENGTH_SHORT).show();
            }
    
        }
    
    
        private void hideBottomMenu() {
            delete.setVisibility(View.GONE);
            top.setVisibility(View.GONE);
            release.setVisibility(View.GONE);
            close.setVisibility(View.GONE);
        }
    
        private void showBottomMenu() {
            delete.setVisibility(View.VISIBLE);
            top.setVisibility(View.VISIBLE);
            release.setVisibility(View.VISIBLE);
            close.setVisibility(View.VISIBLE);
        }
    
        private void switchEditable() {
    
            setIsEditable(!getIsEditable());
    
            for (ClsOnlineReport clsOnlineReport : mClsOnlineReportList) {
                clsOnlineReport.setIsCheckBoxVisible(getIsEditable());
                clsOnlineReport.setIsChecked(false);
            }
    
            mAdapter.notifyDataSetChanged();
            hideBottomMenu();
    
            setRecyclerViewDraggable(getIsEditable());
        }
    
        public boolean getIsEditable() {
            return isEditable;
        }
    
        public void setIsEditable(boolean isEditable) {
            this.isEditable = isEditable;
        }
    
        private void setRecyclerViewDraggable(boolean draggable) {
            if (draggable) {
                itemTouchHelper.attachToRecyclerView(mRecyclerView);
            } else {
                itemTouchHelper.attachToRecyclerView(null);
            }
        }
    
        @Override
        protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    
            if (requestCode == 16371 && resultCode == RESULT_OK) {
                refreshData();
            }
    
            super.onActivityResult(requestCode, resultCode, data);
        }
    
        private void refreshData() {
            Toast.makeText(mContext, "在此处调用接口", Toast.LENGTH_SHORT).show();
        }
    }
    

    布局文件代码:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/ghostwhite"
        android:orientation="vertical">
    
    
        <include layout="@layout/title_bar" />
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/online_report_listview"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center">
    
            <TextView
                android:id="@+id/btn_delete"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                android:drawableTop="@drawable/ic_delete_black_24dp"
                android:gravity="center"
                android:text="删除"
                android:textColor="@color/black" />
    
            <TextView
                android:id="@+id/btn_release"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                android:drawableTop="@drawable/ic_send_black_24dp"
                android:gravity="center"
                android:text="发布"
                android:textColor="@color/black" />
    
            <TextView
                android:id="@+id/btn_close"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                android:drawableTop="@drawable/ic_close_black_24dp"
                android:gravity="center"
                android:text="关闭"
                android:textColor="@color/black" />
    
            <TextView
                android:id="@+id/btn_top"
                android:layout_width="60dp"
                android:layout_height="match_parent"
                android:layout_margin="5dp"
                android:drawableTop="@drawable/ic_check_black_24dp"
                android:gravity="center"
                android:text="置顶"
                android:textColor="@color/black" />
        </LinearLayout>
    </LinearLayout>
    

    适配器代码:

    /**
     * 可拖拽列表的适配器,
     * 1.需要实现OnlineReportListCallback.ItemTouchMoveListener
     * 2.持有一个接口用于传递position
     */
    public class RecyclerAdapter extends RecyclerView.Adapter implements OnlineReportListCallback.ItemTouchMoveListener, View.OnClickListener {
    
        private List<ClsOnlineReport> mList;
        private Callback mCallback;
    
        public RecyclerAdapter(List<ClsOnlineReport> mList) {
            this.mList = mList;
        }
    
        public void setmCallback(Callback mCallback) {
            this.mCallback = mCallback;
        }
    
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    
            LayoutInflater inflater = LayoutInflater.from(parent.getContext());
            View v = inflater.inflate(R.layout.item_report_list, parent, false);
            return new ItemHolder(v);
        }
    
        @Override
        public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    
            ClsOnlineReport clsOnlineReport = mList.get(position);
            ItemHolder itemHolder = (ItemHolder) holder;
    
            if (clsOnlineReport.getIsCheckBoxVisible()) {
                itemHolder.checkbox.setVisibility(View.VISIBLE);
                itemHolder.drag.setVisibility(View.VISIBLE);
            } else {
                itemHolder.checkbox.setVisibility(View.GONE);
                itemHolder.drag.setVisibility(View.GONE);
            }
    
            if (clsOnlineReport.getIsChecked()) {
                itemHolder.checkbox.setImageResource(R.drawable.ic_check_box_black_24dp);
            } else {
                itemHolder.checkbox.setImageResource(R.drawable.ic_check_box_outline_blank_black_24dp);
            }
    
            itemHolder.parent1.setTag(position);
            itemHolder.parent2.setTag(position);
    
            itemHolder.parent1.setOnClickListener(this);
            itemHolder.parent2.setOnClickListener(this);
    
            itemHolder.time.setText(clsOnlineReport.getBulletinTime());
            itemHolder.title.setText(clsOnlineReport.getBulletinTitle());
            itemHolder.author.setText(clsOnlineReport.getCreater());
        }
    
        @Override
        public int getItemCount() {
            return mList.size();
        }
    
        @Override
        public boolean onItemMove(int fromPosition, int toPosition) {
            Collections.swap(mList, fromPosition, toPosition);
            notifyItemMoved(fromPosition, toPosition);
            return true;
        }
    
        class ItemHolder extends RecyclerView.ViewHolder {
    
            @BindView(R.id.online_report_time)
            TextView time;
            @BindView(R.id.online_report_title)
            TextView title;
            @BindView(R.id.online_report_author)
            TextView author;
            @BindView(R.id.online_report_drag)
            ImageView drag;
            @BindView(R.id.online_report_checkbox)
            ImageView checkbox;
            @BindView(R.id.view_parent_1)
            LinearLayout parent1;
            @BindView(R.id.view_parent_2)
            LinearLayout parent2;
    
            ItemHolder(View itemView) {
                super(itemView);
                ButterKnife.bind(this, itemView);
            }
        }
    
        @Override
        public void onClick(View v) {
            mCallback.onClick(v, (int) v.getTag());
        }
    
        public interface Callback {
            void onClick(View v, int position);
        }
    }
    

    回调接口代码:

    /**
     * 用来完成RecyclerView长按拖拽的关键接口
     * 1.getMovementFlags里面表示设置为上下拖动
     * 2.onSelectedChanged里面表示拖动状态下改变背景色,拖动完成后恢复背景色
     * 3.拖动完成的时候viewHolder的值为空!!!所以要用srcHolder
     */
    public class OnlineReportListCallback extends ItemTouchHelper.Callback {
    
        private ColorDrawable drawable;
        private RecyclerView.ViewHolder srcHolder;
    
        public interface ItemTouchMoveListener {
            boolean onItemMove(int fromPosition, int toPosition);
        }
    
        private ItemTouchMoveListener moveListener;
    
        public OnlineReportListCallback(ItemTouchMoveListener moveListener) {
            this.moveListener = moveListener;
    
            int rgb = Color.rgb(0xff, 0xff, 0xff);
            drawable = new ColorDrawable(rgb);
        }
    
    
        @Override
        public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    
            int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
            return makeMovementFlags(dragFlags, ItemTouchHelper.ACTION_STATE_IDLE);
        }
    
        @Override
        public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder srcHolder, RecyclerView.ViewHolder targetHolder) {
    
            this.srcHolder = srcHolder;
            return srcHolder.getItemViewType() == targetHolder.getItemViewType() && moveListener.onItemMove(srcHolder.getAdapterPosition(), targetHolder.getAdapterPosition());
        }
    
        @Override
        public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
    
        }
    
        @Override
        public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
    
            super.onSelectedChanged(viewHolder, actionState);
    
            if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
                viewHolder.itemView.setBackground(null);
            }
    
            if (actionState == ItemTouchHelper.ACTION_STATE_IDLE) {
                srcHolder.itemView.setBackground(drawable);
            }
        }
    }
    

    实体类代码:

    public class ClsOnlineReport  {
    
        private String bulletinID;
        private String bulletinTime;
        private String bulletinTitle;
        private String isActive;
        private String activeDate;
        private String autoCloseDate;
        private String modiManID;
        private String modiManName;
        private String orderNum;
        private String onTop;
        private String createrID;
        private String creater;
        private boolean isChecked;
        private boolean isCheckBoxVisible;
    
        public ClsOnlineReport() {
        }
    
        public String getBulletinID() {
            return bulletinID;
        }
    
        public void setBulletinID(String bulletinID) {
            this.bulletinID = bulletinID;
        }
    
        public String getBulletinTime() {
            return bulletinTime;
        }
    
        public void setBulletinTime(String bulletinTime) {
            this.bulletinTime = bulletinTime;
        }
    
        public String getBulletinTitle() {
            return bulletinTitle;
        }
    
        public void setBulletinTitle(String bulletinTitle) {
            this.bulletinTitle = bulletinTitle;
        }
    
        public String getIsActive() {
            return isActive;
        }
    
        public void setIsActive(String isActive) {
            this.isActive = isActive;
        }
    
        public String getActiveDate() {
            return activeDate;
        }
    
        public void setActiveDate(String activeDate) {
            this.activeDate = activeDate;
        }
    
        public String getAutoCloseDate() {
            return autoCloseDate;
        }
    
        public void setAutoCloseDate(String autoCloseDate) {
            this.autoCloseDate = autoCloseDate;
        }
    
        public String getModiManID() {
            return modiManID;
        }
    
        public void setModiManID(String modiManID) {
            this.modiManID = modiManID;
        }
    
        public String getModiManName() {
            return modiManName;
        }
    
        public void setModiManName(String modiManName) {
            this.modiManName = modiManName;
        }
    
        public String getOrderNum() {
            return orderNum;
        }
    
        public void setOrderNum(String orderNum) {
            this.orderNum = orderNum;
        }
    
        public String getOnTop() {
            return onTop;
        }
    
        public void setOnTop(String onTop) {
            this.onTop = onTop;
        }
    
        public String getCreaterID() {
            return createrID;
        }
    
        public void setCreaterID(String createrID) {
            this.createrID = createrID;
        }
    
        public String getCreater() {
            return creater;
        }
    
        public void setCreater(String creater) {
            this.creater = creater;
        }
    
        public boolean getIsChecked() {
            return isChecked;
        }
    
        public void setIsChecked(boolean isChecked) {
            this.isChecked = isChecked;
        }
    
        public boolean getIsCheckBoxVisible() {
            return isCheckBoxVisible;
        }
    
        public void setIsCheckBoxVisible(boolean isCheckBoxVisible) {
            this.isCheckBoxVisible = isCheckBoxVisible;
        }
    }
    

    适配器布局文件代码:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_marginBottom="10dp"
        android:background="@color/white"
        android:orientation="horizontal">
    
        <ImageView
            android:id="@+id/online_report_checkbox"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_check_box_outline_blank_black_24dp" />
    
        <include layout="@layout/layout_item_divider_vertical" />
    
        <LinearLayout
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:id="@+id/view_parent_1"
            android:orientation="vertical">
    
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:gravity="center_vertical"
                android:text="时间"
                android:textColor="@color/black" />
    
            <include layout="@layout/layout_item_divider_horizontal" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:gravity="center_vertical"
                android:text="标题"
                android:textColor="@color/black" />
    
            <include layout="@layout/layout_item_divider_horizontal" />
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:gravity="center_vertical"
                android:text="创建人"
                android:textColor="@color/black" />
    
        </LinearLayout>
    
        <include layout="@layout/layout_item_divider_vertical" />
    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/view_parent_2"
            android:orientation="vertical">
    
            <TextView
                android:id="@+id/online_report_time"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:gravity="center"
                android:textColor="@color/black" />
    
            <include layout="@layout/layout_item_divider_horizontal" />
    
            <TextView
                android:id="@+id/online_report_title"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:gravity="center"
                android:textColor="@color/black" />
    
            <include layout="@layout/layout_item_divider_horizontal" />
    
            <TextView
                android:id="@+id/online_report_author"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:gravity="center"
                android:textColor="@color/black" />
    
        </LinearLayout>
    
        <include layout="@layout/layout_item_divider_vertical" />
    
        <ImageView
            android:id="@+id/online_report_drag"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_margin="10dp"
            android:src="@drawable/ic_drag_handle_black_24dp" />
    
    </LinearLayout>
    

    代码有点多,但并不是很难,没有用设计模式,图片使用Android Studio内置的SVG,引入了ButterKnife绑定控件,另外内部类使用了lambda表达式折叠了,把代码在自己的IDE上面跑一遍,然后尝试修改代码,看看有什么影响,有不懂的可以问我

    实现效果:


    Movie201905081838_20190508190911.gif

    相关文章

      网友评论

          本文标题:Android 实现可拖拽列表和多选功能

          本文链接:https://www.haomeiwen.com/subject/kitiiqtx.html