仿 iOS 列表的编辑功能
来源:互联网 发布:java并查集 编辑:程序博客网 时间:2024/05/16 02:14
之前做过一个仿 iOS 列表的编辑删除功能,在快做完的时候发现在 iOS 里,编辑的时候还带有排序的功能,所以这次把排序功能加上,并做了一些优化。现在的效果如下:
有兴趣的可以先看一下之前删除的那篇:
仿 iOS 列表的编辑功能 - 删除篇
按键布局
首先,我们需要在布局中增加一个排序的按键,所以在 EditLayout 的成员变量增加:
private View mSortView; //排序按键private int mSortWidth; //排序按键宽度
处于编辑状态时,才会显示编辑按键。
我把右边的删除按钮固定在右侧底部(感觉好看一点),为了让它处于其它控件的底部,item 布局文件的控件摆放顺序变成这样:
<EditLayout...> <!--右侧删除按键--> <view.../> <!--内容区域--> <view.../> <!--左侧预删除按键--> <view.../> <!--排序按键--> <view.../></EditLayout>
相应的,获取及摆放控件改成这样:
@Overrideprotected void onFinishInflate() { super.onFinishInflate(); mRightView = getChildAt(0); mContentView = getChildAt(1); mLeftView = getChildAt(2); mSortView = getChildAt(3);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; mRightWidth = mRightView.getMeasuredWidth(); mLeftWidth = mLeftView.getMeasuredWidth(); mSortWidth = mSortView.getMeasuredWidth();}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); //判断是否为编辑模式,摆放每个子View的位置 mRightView.layout(mWidth - mRightWidth, 0, mWidth, mHeight); mSortView.layout(mWidth - mSortWidth, 0, mWidth, mHeight); if (isEdit) { mContentView.layout(mLeftWidth, 0, mWidth, mHeight); mLeftView.layout(0, 0, mLeftWidth, mHeight); mSortView.setVisibility(VISIBLE); } else { mContentView.layout(0, 0, mWidth, mHeight); mLeftView.layout(-mLeftWidth, 0, 0, mHeight); mSortView.setVisibility(INVISIBLE); }}
三种状态
在增加了排序功能后,三个状态也有了变化:
可以看到,进入编辑状态后,mContentView 的宽度发生了变化,那么我们在哪里改变它的宽度呢?
缩短 mContentView 宽度
在 ViewDragHelper.Callback 中,onViewPositionChanged 方法负责监听控件的位置变化。我们在这里判断,当左侧完全展开时,缩短 mContentView 的宽度:
@Overridepublic void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) { if (changedView == mContentView) { mLeftView.offsetLeftAndRight(dx); mSortView.offsetLeftAndRight(dx); } invalidate(); //左侧展开时,修改 mContentView 宽度 if (left == mLeftWidth) { mContentView.layout(mLeftWidth, 0, mWidth, mHeight); mSortView.layout(mWidth - mSortWidth, 0, mWidth, mHeight); mSortView.setVisibility(VISIBLE); }}
复原 mContentView 宽度
当结束编辑状态时,就将控件的宽度复原。我们需要先将宽度复原,再让它滑动到关闭的状态。这里会有两种情况,左边展开关闭和右边展开关闭。关闭时会调用 close() 方法,我们在这里做处理:
public void close() { if (mOnStateChangeListener != null) { mOnStateChangeListener.onClose(this); } //将 mContentView 宽度复原 if (mContentView.getLeft() > 0) { //左边展开复原 mContentView.layout(mLeftWidth, 0, mWidth + mLeftWidth, mHeight); mLeftView.layout(0, 0, mLeftWidth, mHeight); } else { //右边展开复原 mContentView.layout(-mRightWidth, 0, mWidth - mRightWidth, mHeight); mLeftView.layout(-mLeftWidth - mRightWidth, 0, -mRightWidth, mHeight); } mSortView.setVisibility(INVISIBLE); //滑动到关闭位置 mDragHelper.smoothSlideViewTo(mContentView, 0, 0); invalidate();}
UI 方面的改动就到这里。
排序
ItemTouchHelper 可以让 RecyclerView 的 item 实现上下左右拖动,我们把排序的操作交给它处理。
ItemTouchHelper.Callback
和 ViewDragHelper 类似,ItemTouchHelper 也有一个 Callback,我们自定义一个 EditTouchHelperCallback:
public class EditTouchHelperCallback extends ItemTouchHelper.Callback { @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { // 允许上下拖拽 int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; // 禁止左右拖拽 int swipeFlags = 0; return makeMovementFlags(dragFlags, swipeFlags); } @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { return true; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { } @Override public boolean isLongPressDragEnabled() { //禁止长按触发拖拽 return false; }}
这几个方法都很好理解:
- getMovementFlags - 确定 item 是否可上下左右拖动,我们这里只允许上下拖动
- onMove - 上下拖动 item 到另一个位置的回调
- onSwiped - 左右拖动 item 的回调,这里不需要实现
- isLongPressDragEnabled - 长按 item 是否会触发可拖动,默认返回 true,这里不需要
在 Activity 中,需要将 ItemTouchHelper 和 RecyclerView 绑定:
mItemTouchHelper = new ItemTouchHelper(new EditTouchHelperCallback());mItemTouchHelper.attachToRecyclerView(mRecyclerView);
这样,我们的 item 就已经支持上下拖动了,但是要如何触发拖动以及交换控件位置呢?
OnItemSortListener
ItemTouchHelper 有两种方式可以触发拖动,一个是上面说到的长按,还有就是调用它的 startDrag 方法。
至于交换位置,ItemTouchHelper 是不支持的,毕竟它负责的是单个 item 的操作。但我们 RecyclerView 的 Adapter 支持啊,它的 notifyItemMoved 方法就是用来交换 item 位置的。
所以我们创建一个监听器,用于监听开始拖拽及位置交换:
/** * 排序监听器 */public interface OnItemSortListener { void onStartDrags(RecyclerView.ViewHolder viewHolder); void onItemMove(int fromPosition, int toPosition);}
这个监听器由 Activity 实现:
@Overridepublic void onStartDrags(RecyclerView.ViewHolder viewHolder) { mItemTouchHelper.startDrag(viewHolder);}@Overridepublic void onItemMove(int fromPosition, int toPosition) { Collections.swap(mList, fromPosition, toPosition); mAdapter.notifyItemMoved(fromPosition, toPosition);}
这两个方法在哪里调用?
调用 Listener
触发拖动的当然是排序按键。将 ItemTouchHelper 传给 Adapter,然后给排序按键设置触摸事件:
viewHolder.vSort.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { if (isEdit && mRightOpenItem != null) { mRightOpenItem.openLeft(); } else { mOnItemSortListener.onStartDrags(viewHolder); } return false; }});
至于位置交换,不要忘了 ItemTouchHelper.Callback 里有个 onMove 方法。创建 EditTouchHelperCallback 时,将 OnItemSortListener 传入,然后在 onMove 里加一句代码:
@Overridepublic boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { mOnItemSortListener.onItemMove(viewHolder.getAdapterPosition(), target.getAdapterPosition()); return true;}
这样就完成啦,妥妥的。目前的效果还是比较满意的。
源码地址
- 仿 iOS 列表的编辑功能
- 仿 iOS 列表的编辑功能
- IOS实现仿qq好友列表功能
- 带清除功能的EditText,仿IOS
- ios 编辑表格功能
- android 仿ios列表头可以停靠在列表顶部的列表PinnedHeaderListView
- iOS 8 新的功能列表
- IOS 仿淘宝购物列表一键TOP置顶,小功能,挺实用
- 仿ios,网易,京东的搜索界面和功能
- sharepoint 2016 学习系列篇(16)-自定义列表应用篇-(5)列表的快速编辑功能
- js 可编辑并用ajax保存的a标签仿input功能代码,测试ff/ie
- ios TableView系统自带的编辑cell功能
- 仿IOS弹出相机相册框--可进入相机相册仿朋友圈功能的demo
- MFC列表框实现可编辑功能
- 文章列表加上编辑分类功能了!
- 仿QQ登录(账号列表并可编辑)
- 山寨风,高仿QQ附近的人筛选功能的滑动选择列表来袭!
- iOS开发之仿新闻拖拽排序,编辑删除的效果
- LDD3源码分析之vmalloc
- [Qt]Qt的Connect中调用重载signal的问题
- Java基础
- Android常见异常记录
- Windows7集成SP1微软原版光盘镜像下载汇总
- 仿 iOS 列表的编辑功能
- 处理recycleview与viewpage的滑动冲突
- 7. Cordova文件操作和IO
- 105. Construct Binary Tree from Preorder and Inorder Traversal
- PhpStrom8.0.3配置Yaf
- Java 定时任务
- Larange插值
- 106. Construct Binary Tree from Inorder and Postorder Traversal
- 什么是N+1查询?