简述
相信在开发的过程中，有不少人需要实现二级列表的需求，这次依然是站在大佬的肩膀上，给其他小伙伴们提供借鉴思路，老规矩先上图。
视频录制效果图.gif
参考的博客出处
RecyclerView 二级列表实现
RecyclerView实现侧滑删除
测滑菜单的实现
先来看看侧滑的实现，这边继承了RecyclerView，直接在onInterceptTouchEvent方法中进行触摸判断是否是滚动或侧滑
SlideRecyclerView自定义控件代码如下：
public class SlideRecyclerView extends RecyclerView {
private static final String TAG = "SlideRecyclerView";
private static final int INVALID_POSITION = -1; // 触摸到的点不在子View范围内
private static final int INVALID_CHILD_WIDTH = -1; // 子ItemView不含两个子View
private static final int SNAP_VELOCITY = 600; // 最小滑动速度
private VelocityTracker mVelocityTracker; // 速度追踪器
private int mTouchSlop; // 认为是滑动的最小距离（一般由系统提供）
private Rect mTouchFrame; // 子View所在的矩形范围
private Scroller mScroller;
private float mLastX; // 滑动过程中记录上次触碰点X
private float mFirstX, mFirstY; // 首次触碰范围
private boolean mIsSlide; // 是否滑动子View
private ViewGroup mFlingView; // 触碰的子View
private int mPosition; // 触碰的view的位置
private int mMenuViewWidth; // 菜单按钮宽度
public SlideRecyclerView(Context context) {
this(context, null);
}
public SlideRecyclerView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public SlideRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
mScroller = new Scroller(context);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent e) {
int x = (int) e.getX();
int y = (int) e.getY();
obtainVelocity(e);
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN:
if (!mScroller.isFinished()) { // 如果动画还没停止，则立即终止动画
mScroller.abortAnimation();
}
mFirstX = mLastX = x;
mFirstY = y;
mPosition = pointToPosition(x, y); // 获取触碰点所在的position
if (mPosition != INVALID_POSITION) {
View view = mFlingView;
// 获取触碰点所在的view
mFlingView = (ViewGroup) getChildAt(mPosition - ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition());
// 这里判断一下如果之前触碰的view已经打开，而当前碰到的view不是那个view则立即关闭之前的view，此处并不需要担动画没完成冲突，因为之前已经abortAnimation
if (view != null && mFlingView != view && view.getScrollX() != 0) {
view.scrollTo(0, 0);
}
// 这里进行了强制的要求，RecyclerView的子ViewGroup必须要有2个子view,这样菜单按钮才会有值，
// 需要注意的是:如果不定制RecyclerView的子View，则要求子View必须要有固定的width。
// 比如使用LinearLayout作为根布局，而content部分width已经是match_parent，此时如果菜单view用的是wrap_content，menu的宽度就会为0。
if (mFlingView.getChildCount() == 2) {
mMenuViewWidth = mFlingView.getChildAt(1).getWidth();
} else {
mMenuViewWidth = INVALID_CHILD_WIDTH;
}
}
break;
case MotionEvent.ACTION_MOVE:
mVelocityTracker.computeCurrentVelocity(1000);
// 此处有俩判断，满足其一则认为是侧滑：
// 1.如果x方向速度大于y方向速度，且大于最小速度限制；
// 2.如果x方向的侧滑距离大于y方向滑动距离，且x方向达到最小滑动距离；
float xVelocity = mVelocityTracker.getXVelocity();
float yVelocity = mVelocityTracker.getYVelocity();
if (Math.abs(xVelocity) > SNAP_VELOCITY && Math.abs(xVelocity) > Math.abs(yVelocity)
|| Math.abs(x - mFirstX) >= mTouchSlop
&& Math.abs(x - mFirstX) > Math.abs(y - mFirstY)) {
mIsSlide = true;
return true;
}
break;
case MotionEvent.ACTION_UP:
releaseVelocity();
break;
}
return super.onInterceptTouchEvent(e);
}
@Override
public boolean onTouchEvent(MotionEvent e) {
if (mIsSlide && mPosition != INVALID_POSITION) {
float x = e.getX();
obtainVelocity(e);
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN: // 因为没有拦截，所以不会被调用到
break;
case MotionEvent.ACTION_MOVE:
// 随手指滑动
if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
float dx = mLastX - x;
if (mFlingView.getScrollX() + dx <= mMenuViewWidth
&& mFlingView.getScrollX() + dx > 0) {
mFlingView.scrollBy((int) dx, 0);
}
mLastX = x;
}
break;
case MotionEvent.ACTION_UP:
if (mMenuViewWidth != INVALID_CHILD_WIDTH) {
int scrollX = mFlingView.getScrollX();
mVelocityTracker.computeCurrentVelocity(1000);
// 此处有两个原因决定是否打开菜单：
// 1.菜单被拉出宽度大于菜单宽度一半；
// 2.横向滑动速度大于最小滑动速度；
// 注意：之所以要小于负值，是因为向左滑则速度为负值
if (mVelocityTracker.getXVelocity() < -SNAP_VELOCITY) { // 向左侧滑达到侧滑最低速度，则打开
mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
} else if (mVelocityTracker.getXVelocity() >= SNAP_VELOCITY) { // 向右侧滑达到侧滑最低速度，则关闭
mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
} else if (scrollX >= mMenuViewWidth / 2) { // 如果超过删除按钮一半，则打开
mScroller.startScroll(scrollX, 0, mMenuViewWidth - scrollX, 0, Math.abs(mMenuViewWidth - scrollX));
} else { // 其他情况则关闭
mScroller.startScroll(scrollX, 0, -scrollX, 0, Math.abs(scrollX));
}
invalidate();
}
mMenuViewWidth = INVALID_CHILD_WIDTH;
mIsSlide = false;
mPosition = INVALID_POSITION;
releaseVelocity(); // 这里之所以会调用，是因为如果前面拦截了，就不会执行ACTION_UP,需要在这里释放追踪
break;
}
return true;
} else {
// 此处防止RecyclerView正常滑动时，还有菜单未关闭
closeMenu();
// Velocity，这里的释放是防止RecyclerView正常拦截了，但是在onTouchEvent中却没有被释放；
// 有三种情况：1.onInterceptTouchEvent并未拦截，在onInterceptTouchEvent方法中，DOWN和UP一对获取和释放；
// 2.onInterceptTouchEvent拦截，DOWN获取，但事件不是被侧滑处理，需要在这里进行释放；
// 3.onInterceptTouchEvent拦截，DOWN获取，事件被侧滑处理，则在onTouchEvent的UP中释放。
releaseVelocity();
}
return super.onTouchEvent(e);
}
private void releaseVelocity() {
if (mVelocityTracker != null) {
mVelocityTracker.clear();
mVelocityTracker.recycle();
mVelocityTracker = null;
}
}
private void obtainVelocity(MotionEvent event) {
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain();
}
mVelocityTracker.addMovement(event);
}
public int pointToPosition(int x, int y) {
int firstPosition = ((LinearLayoutManager) getLayoutManager()).findFirstVisibleItemPosition();
Rect frame = mTouchFrame;
if (frame == null) {
mTouchFrame = new Rect();
frame = mTouchFrame;
}
final int count = getChildCount();
for (int i = count - 1; i >= 0; i--) {
final View child = getChildAt(i);
if (child.getVisibility() == View.VISIBLE) {
child.getHitRect(frame);
if (frame.contains(x, y)) {
return firstPosition + i;
}
}
}
return INVALID_POSITION;
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
mFlingView.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
invalidate();
}
}
/**
* 将显示子菜单的子view关闭
* 这里本身是要自己来实现的，但是由于不定制item，因此不好监听器点击事件，因此需要调用者手动的关闭
*/
public void closeMenu() {
if (mFlingView != null && mFlingView.getScrollX() != 0) {
mFlingView.scrollTo(0, 0);
}
}
}
关于侧滑item的添加，则在适配器的编写中，设置在每个item的布局上，注意这里的侧滑菜单按钮的宽度不能设置为wrap_content，不然侧滑按钮的宽度就会为0,需要给固定宽度，这里先给上布局截图
item布局.png
为了看看效果，这边写了个简单的适配器，实现item中两个控件的点击监听，侧滑出删除菜单后点击删除数据并且提示并关闭，适配器代码如下：
public class TestAdapter extends RecyclerView.Adapter<TestAdapter.ViewHolder> {
private List<String> list;
private onAdapterItemClickListener itemClickListener;
public TestAdapter(List<String> list) {
this.list = list;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view= LayoutInflater.from(parent.getContext()).
inflate(R.layout.item_text,parent,false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
holder.tv_content.setText(list.get(position));
holder.tv_content.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
itemClickListener.onItemClick(view,position);
}
});
holder.tv_delete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
itemClickListener.onItemClick(view,position);
}
});
}
@Override
public int getItemCount() {
return list.size();
}
static class ViewHolder extends RecyclerView.ViewHolder{
TextView tv_content,tv_delete;
public ViewHolder(@NonNull View itemView) {
super(itemView);
tv_content=itemView.findViewById(R.id.tv_content);
tv_delete=itemView.findViewById(R.id.tv_delete);
}
}
public void reFreshData(List<String> list){
this.list=list;
notifyDataSetChanged();
}
public interface onAdapterItemClickListener{
void onItemClick(View view,int selectPosition);
}
public void setItemClickListener(onAdapterItemClickListener itemClickListener) {
this.itemClickListener = itemClickListener;
}
}
在主界面绑定控件后实现适配器初始化，initAdapter()代码如下：
private void initAdapter() {
final List<String> data=new ArrayList<>();
for(int i=0; i<10;i++){
data.add("i:"+i);
}
final TestAdapter testAdapter=new TestAdapter(data);
ry.setLayoutManager(new LinearLayoutManager(this));
ry.setAdapter(testAdapter);
testAdapter.setItemClickListener(new TestAdapter.onAdapterItemClickListener() {
@Override
public void onItemClick(View view, int selectPosition) {
switch (view.getId()){
case R.id.tv_content:
Toast.makeText(MainActivity.this, "点击了：" + data.get(selectPosition), Toast.LENGTH_SHORT).show();
break;
case R.id.tv_delete:
ry.closeMenu();
Toast.makeText(MainActivity.this, "删除第：" +(selectPosition+1) +"个", Toast.LENGTH_SHORT).show();
data.remove(selectPosition);
testAdapter.reFreshData(data);
break;
}
}
});
}
效果图如下：
测滑简单效果图.gif
到这里为止实现了简单侧滑，若是觉得可扩展功能太少，github上有更为成熟的自定义控件，各位可以看看这位大佬的开源库： com.yanzhenjie.recyclerview
二级列表适配器的实现
接着来说说二级列表的实现，其实就是实现多样式布局的编写，根据item类型来绑定我们自定义创建的holder,然后在各自的item实现控件不同样式布局编写,这里我在原来大佬的基础上实现打开某个父列表下的子item。
先编写用来封装数据类型的类DataTree
import java.util.List;
/**
* 二级列表数据格式
*/
public class DataTree<K, V> {
private K groupItem;//第一级
private List<V> subItems;//第二级
public DataTree(K groupItem, List<V> subItems) {
this.groupItem = groupItem;
this.subItems = subItems;
}
public K getGroupItem() {
return groupItem;
}
public void setGroupItem(K groupItem) {
this.groupItem = groupItem;
}
public List<V> getSubItems() {
return subItems;
}
public void setSubItems(List<V> subItems) {
this.subItems = subItems;
}
}
接着再编写用于判断每个item的视图类型，用来区分ViewType 的类型与记录索引位置的类 ItemStatus
public class ItemStatus {
public static final int VIEW_TYPE_GROUPITEM = 0;
public static final int VIEW_TYPE_SUBITEM = 1;
private int viewType;
private int groupItemIndex = 0;
private int subItemIndex = -1;
public ItemStatus() {
}
public int getViewType() {
return viewType;
}
public void setViewType(int viewType) {
this.viewType = viewType;
}
public int getGroupItemIndex() {
return groupItemIndex;
}
public void setGroupItemIndex(int groupItemIndex) {
this.groupItemIndex = groupItemIndex;
}
public int getSubItemIndex() {
return subItemIndex;
}
public void setSubItemIndex(int subItemIndex) {
this.subItemIndex = subItemIndex;
}
}
接着来实现我们的抽象类SecondListAdapter
public abstract class SecondListAdapter<GVH, SVH extends RecyclerView.ViewHolder> extends RecyclerView
.Adapter<RecyclerView.ViewHolder> {
private List<Boolean> groupItemStatus = new ArrayList<>();
private List<DataTree> dataTrees = new ArrayList<>();
/**
* 用来通知刷新某个父view是否展开其子列表
*/
public void openParentItem(int index) {
expandOneItem(index);
}
private void expandOneItem(int index) {
if (index > dataTrees.size() - 1) return;//超过下标默认不打
groupItemStatus.clear();
for (int i = 0; i < dataTrees.size(); i++) {
if (index == i) {
groupItemStatus.add(true);
} else {
groupItemStatus.add(false);
}
}
}
/**
* 用于刷新数据
*/
public void notifyNewData(List dataTrees) {
setDataTrees(dataTrees);
}
private void setDataTrees(List dataTrees) {
this.dataTrees = dataTrees;
initGroupItemStatus(groupItemStatus);
notifyDataSetChanged();
}
/**
* 刷新数据，初始化 ，将所有列表的状态都重置为False,不展开列表
*/
private void initGroupItemStatus(List<Boolean> groupItemStatus) {
for (int i = 0; i < dataTrees.size(); i++) {
groupItemStatus.add(false);
}
}
/**
* 二级列表的父holder
*/
public abstract RecyclerView.ViewHolder groupItemViewHolder(ViewGroup parent);
/**
* 二级列表的子holder
*/
public abstract RecyclerView.ViewHolder subItemViewHolder(ViewGroup viewGroup);
/**
* 根据viewType 选择实现不同的项目布局
*/
@Override
public final RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
RecyclerView.ViewHolder viewHolder = null;
if (viewType == ItemStatus.VIEW_TYPE_GROUPITEM) {
viewHolder = groupItemViewHolder(parent);
} else if (viewType == ItemStatus.VIEW_TYPE_SUBITEM) {
viewHolder = subItemViewHolder(parent);
}
return viewHolder;
}
/**
* 抽象方法 设置绑定父类Holder 与获取其下标位置
*/
public abstract void onGroupItemBindViewHolder(RecyclerView.ViewHolder holder, int
groupItemIndex, boolean ifExpand);
/**
* 抽象方法 设置绑定子类Holder 与获取其下标位置
*/
public abstract void onSubItemBindViewHolder(RecyclerView.ViewHolder holder, int
groupItemIndex, int subItemIndex);
/**
* 抽象方法 实现二级列表父item是否点击
*/
public abstract void onGroupItemClick(Boolean isExpand, GVH holder, int groupItemIndex);
/**
* 抽象方法 实现二级列表子item的点击
*/
public abstract void onSubItemClick(SVH holder, int groupItemIndex, int subItemIndex);
@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
final ItemStatus itemStatus = getItemStatusByPosition(position);
final DataTree dt = dataTrees.get(itemStatus.getGroupItemIndex());
if (itemStatus.getViewType() == ItemStatus.VIEW_TYPE_GROUPITEM) {
final int groupItemIndex = itemStatus.getGroupItemIndex();
onGroupItemBindViewHolder(holder, itemStatus.getGroupItemIndex(), groupItemStatus.get(groupItemIndex));
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (!groupItemStatus.get(groupItemIndex)) {
onGroupItemClick(false, (GVH) holder, groupItemIndex);
groupItemStatus.set(groupItemIndex, true);
notifyItemRangeInserted(holder.getAdapterPosition() + 1, dt.getSubItems
().size());
} else {
onGroupItemClick(true, (GVH) holder, groupItemIndex);
groupItemStatus.set(groupItemIndex, false);
notifyItemRangeRemoved(holder.getAdapterPosition() + 1, dt.getSubItems
().size());
}
}
});
} else if (itemStatus.getViewType() == ItemStatus.VIEW_TYPE_SUBITEM) {
onSubItemBindViewHolder(holder, itemStatus.getGroupItemIndex(), itemStatus
.getSubItemIndex());
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onSubItemClick((SVH) holder, itemStatus.getGroupItemIndex(), itemStatus.getSubItemIndex());
}
});
}
}
/**
* 每行该显示哪种item
*/
@Override
public int getItemViewType(int position) {
return getItemStatusByPosition(position).getViewType();
}
/***
* 统计所有的item数量
* */
@Override
public final int getItemCount() {
int itemCount = 0;
if (groupItemStatus.size() == 0) {
return 0;
}
for (int i = 0; i < dataTrees.size(); i++) {
if (groupItemStatus.get(i)) {
itemCount += dataTrees.get(i).getSubItems().size() + 1;
} else {
itemCount++;
}
}
return itemCount;
}
/**
* 根据当前索引 判断是一级还是二级的item
*/
private ItemStatus getItemStatusByPosition(int position) {
ItemStatus itemStatus = new ItemStatus();
int count = 0;
int i = 0;
for (i = 0; i < groupItemStatus.size(); i++) {
if (count == position) {
itemStatus.setViewType(ItemStatus.VIEW_TYPE_GROUPITEM);
itemStatus.setGroupItemIndex(i);
break;
} else if (count > position) {
itemStatus.setViewType(ItemStatus.VIEW_TYPE_SUBITEM);
itemStatus.setGroupItemIndex(i - 1);
itemStatus.setSubItemIndex(position - (count - dataTrees.get(i - 1).getSubItems
().size()));
break;
}
count++;
if (groupItemStatus.get(i)) {
count += dataTrees.get(i).getSubItems().size();
}
}
if (i >= groupItemStatus.size()) {
itemStatus.setGroupItemIndex(i - 1);
itemStatus.setViewType(ItemStatus.VIEW_TYPE_SUBITEM);
itemStatus.setSubItemIndex(position - (count - dataTrees.get(i - 1).getSubItems().size
()));
}
return itemStatus;
}
}
让我们自己创建的适配器RecyclerAdapter 继承抽象类 SecondListAdapter，实现其中的方法
public class RecyclerAdapter extends SecondListAdapter<RecyclerAdapter.GroupItemViewHolder, RecyclerAdapter.SubItemViewHolder> {
private Context context;
private List<DataTree<String, String>> dts;
private OnParentItemClickListener parentItemClickListener;
private OnSubItemClickListener subItemClickListener;
private int expandIndex = -1;//打开某个父级item的子列表的下标，默认不打开
public RecyclerAdapter(Context context, OnParentItemClickListener parentItemClickListener, OnSubItemClickListener subItemClickListener) {
this.context = context;
this.parentItemClickListener = parentItemClickListener;
this.subItemClickListener = subItemClickListener;
}
@Override
public RecyclerView.ViewHolder groupItemViewHolder(ViewGroup parent) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_first_level, parent, false);
return new GroupItemViewHolder(view);
}
@Override
public RecyclerView.ViewHolder subItemViewHolder(ViewGroup viewGroup) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_second_level, viewGroup, false);
return new SubItemViewHolder(view);
}
@Override
public void onGroupItemBindViewHolder(RecyclerView.ViewHolder holder, final int groupItemIndex, boolean ifExpand) {
((GroupItemViewHolder) holder).tv_group.setText("第" + (groupItemIndex + 1) + "个" + dts.get(groupItemIndex).getGroupItem());
((GroupItemViewHolder) holder).tv_delete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
parentItemClickListener.onParentClick(v, groupItemIndex);
}
});
if (groupItemIndex == expandIndex)
((GroupItemViewHolder) holder).img_right.setRotation(ifExpand ? 90 : 0);
}
@Override
public void onSubItemBindViewHolder(RecyclerView.ViewHolder holder, int groupItemIndex, int subItemIndex) {
((SubItemViewHolder) holder).tv_name.setText(dts.get(groupItemIndex).getSubItems().get(subItemIndex));
}
@Override
public void onGroupItemClick(Boolean isExpand, GroupItemViewHolder holder, int groupItemIndex) {
//isExpand:false 展开 true：收起来
holder.img_right.setRotation(isExpand ? 0 : 90);
}
@Override
public void onSubItemClick(SubItemViewHolder holder, int groupItemIndex, int subItemIndex) {
subItemClickListener.onChildClick(groupItemIndex, subItemIndex);
}
public static class GroupItemViewHolder extends RecyclerView.ViewHolder {
TextView tv_group, tv_delete;
ImageView img_right;
LinearLayout ly_parent;
public GroupItemViewHolder(View itemView) {
super(itemView);
tv_group = itemView.findViewById(R.id.tv_group);
img_right = itemView.findViewById(R.id.img_right);
tv_delete = itemView.findViewById(R.id.tv_delete);
ly_parent = itemView.findViewById(R.id.ly_parent);
}
}
public static class SubItemViewHolder extends RecyclerView.ViewHolder {
TextView tv_name;
public SubItemViewHolder(View itemView) {
super(itemView);
tv_name = itemView.findViewById(R.id.tv_name);
}
}
public void setData(List data) {
dts = data;
notifyNewData(dts);
}
public void expand(int position) {
expandIndex = position;
openParentItem(position);
notifyNewData(dts);
}
/**
* 父列表控件点击监听
*/
public interface OnParentItemClickListener {
void onParentClick(View view, int groupItemIndex);
}
/**
* 二级列表整个item点击监听
*/
public interface OnSubItemClickListener {
void onChildClick(int groupItemIndex, int subItemIndex);
}
}
这里附上我两个不同的holder的布局编写样式
item_first_level.png
item_second_level.png
接下来在在主界面实现数据填充和初始化，绑定控件啥的就不写，直接上适配器初始化的代码 initAdapter()：
private void initAdapter() {
List<String> professionList1 = new ArrayList<>();
professionList1.add("Android 开发工程师");
professionList1.add("后台开发");
List<String> professionList2 = new ArrayList<>();
professionList2.add("WEB前端工程师");
dataTrees.add(new DataTree<String, String>("JAVA", professionList1));
dataTrees.add(new DataTree<>("JavaScript", professionList2));
//二级列表初始化
adapter = new RecyclerAdapter(this, this, this);
ry.setLayoutManager(new LinearLayoutManager(this));
ry.setAdapter(adapter);
adapter.setData(dataTrees);
//这个是实现填充数据后，默认展开某个父级列表下的子item
// 传入的下标超过数据集合的索引则默认不打开，可不调用该方法
adapter.expand(0);
}
这个运行的效果就是最先贴出来的gif图（ adapter.expand(0) 没有录制进去，就是进入的时候默认打开了某个父级列表下的子列表 ，小伙伴们好奇的话可自行去试试)
至此，二级列表的实现到此为止，在这里在附上我项目的源码，有不足之处麻烦指正，希望能帮上阅读此篇文章的各位
