在Android原有ListView控件基础之上打造一个类似于表格形式，全方位滚动（既可以上下滚动又可以左右滚动）的UDLRSlideListView控件。
一. 要实现的目标
在实现之前咱们先列出UDLRSlideListView控件要实现的目标有哪些：
- 为了扩展方便重写ListView，ListView大部分的特性我们还继续保留着，关键时候有大用处。
- ListView的行可以左右滑动，因为手机的屏幕比较小，咱们经常显示表格的时候不能保证一个屏幕全部显示完成。
- 在行可以左右滑动的基础上，咱还可以动态设置固定每一行前面多少列是不会滑动（把每一行分成左右两个部分，左边的一部分不能滑动，右边的一部可以滑动）。
- 可以设置标题，并且UDLRSlideListView上下滑动的时候标题可以一直固定在顶部（可以动态设置是否固定）。
- 下拉刷新，上拉加载功能。
二. 效果展示
三. 实现过程
为了实现UDLRSlideListView控件的所有功能，咱们把整体拆分成一个一个小的部分，依次实现，最后再拼到一起来。
3.1 固定标题栏在顶部
中心思想就是在上下滑动的过程中，把标题栏View画到ListView的顶部。这里又得分两个部分了：一个是怎么在上下滚动的过程中拿到标题栏对应的View，并且让重绘；一个怎么画到ListView的顶部。
1). 拿到标题栏，这个简单，adapter里面有getView()的方法，同时我们规定如果有标题栏的时候position=0的位置是标题栏。核心代码如下：
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
if (mScrollListener != null) {
mScrollListener.onScroll(view, firstVisibleItem, visibleItemCount, totalItemCount);
}
if (getAdapter() != null && !(getAdapter() instanceof UDLRSlideAdapter)) {
return;
}
int headerViewCount = getHeaderViewsCount();
if (getAdapter() == null || !mPinTitle || firstVisibleItem < headerViewCount) {
/**
* 第一个section都还没出来
*/
mLayoutTitleSection = null;
for (int i = 0; i < visibleItemCount; i++) {
View itemView = getChildAt(i);
if (itemView != null) {
itemView.setVisibility(VISIBLE);
}
}
return;
}
if (getAdapter().getCount() <= 0) {
return;
}
if (mLayoutTitleSection == null) {
mLayoutTitleSection = getTitleSectionLayout(0);
ensurePinViewLayout(mLayoutTitleSection);
}
if (mLayoutTitleSection == null) {
return;
}
invalidate();
} /**
* 获取固定在顶部的View
*
* @return View
*/
private View getTitleSectionLayout(int adapterPosition) {
if (getAdapter() == null) {
return null;
}
/**
* getView的第二个参数一定要传空，因为我们不能用复用的View
*/
return getAdapter().getView(adapterPosition, null, this);
}2). 拿到标题栏的View之后，就要把他绘制到ListView的顶部了。核心代码如下（其中mLayoutTitleSection是标题栏View）：
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (getAdapter() == null || !(getAdapter() instanceof UDLRSlideAdapter) || mLayoutTitleSection == null || !mPinTitle) {
return;
}
int saveCount = canvas.save();
canvas.clipRect(0, 0, getWidth(), mLayoutTitleSection.getMeasuredHeight());
mLayoutTitleSection.draw(canvas);
canvas.restoreToCount(saveCount);
}ps: 关于固定标题栏在顶部更加具体的细节可以瞧一瞧 Android分组悬浮列表实现
3.2 上下滚动
这个容易，上下滚动我们直接用ListView自带的就好了，super，super就好了。
3.3 左右滚动
对于每一行，前面一部分不让滚动fix，后面一部分可以让滚动slide。这样我们每一行都是一个horizontal的LinearLayout了，并且含有两个LinearLayout，我们在adapter getView()获取每一行的convertView的时候，把固定的column，addView到不可滚动的LinearLayout当中去，把可以滚动的column addView到可以滚动的LinearLayout里面去。这样每一行的convertView就出来了。对每一行的convertView我们做了一个简单的封装UDLRSlideRowLayout主要是封装左右滑动的处理。因为adapter的getView()我们要提前做好处理，那我们就得在BaseAdapter的基础上打造一个UDLRSlideAdapter，核心代码如下(这里我们只是列出了UDLRSlideAdapter里面的getView()方法的实现):
@Override
public View getView(int position, View convertView, ViewGroup parent) {
List<T> itemData = getItem(position);
UDLRSlideViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_udlr_slide, parent, false);
//设置item高度
AbsListView.LayoutParams params = (AbsListView.LayoutParams) convertView.getLayoutParams();
params.height = getItemViewHeight();
convertView.setLayoutParams(params);
onCrateConvertViewFinish(convertView, position);
holder = new UDLRSlideViewHolder(convertView, position);
UDLRSlideRowLayout rowLayout = (UDLRSlideRowLayout) convertView.findViewById(R.id.item_udls_slide_row);
//组合每一行的View,包含两部分，一个是固定的LinearLayout,一个是可滑动的LinearLayout
if (itemData != null && !itemData.isEmpty()) {
for (int index = 0; index < itemData.size(); index++) {
View columnView;
if (index < mSlideStartColumn) {
columnView = getColumnView(position, index, itemData.size(), rowLayout.getFixLayout());
columnView.setLayoutParams(getColumnViewParams(position, index, itemData.size()));
rowLayout.getFixLayout().addView(columnView);
} else {
columnView = getColumnView(position, index, itemData.size(), rowLayout.getSlideLayout());
columnView.setLayoutParams(getColumnViewParams(position, index, itemData.size()));
rowLayout.getSlideLayout().addView(columnView);
}
holder.addColumnView(index, columnView);
}
}
convertView.setTag(holder);
} else {
holder = (UDLRSlideViewHolder) convertView.getTag();
//更新下holder position的位置
holder.setPosition(position);
}
//复用的时候不能滑倒指定位置
UDLRSlideRowLayout slideLayout = (UDLRSlideRowLayout) holder.getConvertView().findViewById(R.id.item_udls_slide_row);
slideLayout.slideSet(mSlideLength);
if (itemData != null && !itemData.isEmpty()) {
for (int index = 0; index < itemData.size(); index++) {
if (holder.getColumnView(index) != null) {
convertColumnViewData(position, index, holder.getColumnView(index), convertView, itemData.get(index), itemData);
}
}
}
return convertView;
}这里稍微做一点点解释，15~29行，生成每一个row里面所有的column的View并且分成了两部分，不可以滑动的column View add到了fix layout里面，可以滑动的column View add到了slide layout里面。
到这里每一行的converView我们就已经组合好了，接下来就是捕捉左右滑动的事件了，这里为了简单一点当左右滑动的同时我们就不让上下滑动了，事件的捕捉这个应该简单吧，那咱就得对onTouchEvent（）函数动刀子了，核心代码如下：
@Override
public boolean onTouchEvent(MotionEvent ev) {
boolean handler = false;
if (mVelocityTracker == null) {
mVelocityTracker = VelocityTracker.obtain();//跟踪触摸事件滑动的帮助类
}
mVelocityTracker.addMovement(ev);
final int action = ev.getAction();
final float x = ev.getX();
final float y = ev.getY();
switch (action) {
case MotionEvent.ACTION_MOVE:
final int xDiff = (int) Math.abs(x - mLastMotionDownX);
final int yDiff = (int) Math.abs(y - mLastMotionDownY);
if (!mInSlideMode) {
if (xDiff > mTouchSlop && xDiff > yDiff) {
mInSlideMode = true;
}
}
if (mInSlideMode) {
final int deltaX = (int) (mLastMotionX - x);//滑动的距离
prepareSlideMove(deltaX);
mLastMotionX = x;
handler = true;
}
break;
case MotionEvent.ACTION_UP:
if (mInSlideMode) {
final VelocityTracker velocityTracker = mVelocityTracker;
velocityTracker.computeCurrentVelocity(1000);//1000毫秒移动了多少像素
int velocityX = (int) velocityTracker.getXVelocity();//当前的速度
if (canSlide()) {
if (Math.abs(velocityX) < SNAP_VELOCITY) {
//TODO:
} else {
prepareFling(-velocityX);
}
}
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}
ev.setAction(MotionEvent.ACTION_CANCEL);
super.onTouchEvent(ev);
return true;
}
mInSlideMode = false;
break;
case MotionEvent.ACTION_CANCEL:
mInSlideMode = false;
if (mVelocityTracker != null) {
mVelocityTracker.recycle();
mVelocityTracker = null;
}
break;
}
return handler || super.onTouchEvent(ev);
}UDLRSlideListView里面onTouchEvent()函数15~26行，判断是左右滑动，拿到滑动的位移，最终会调用到UDLRSlideRowLayout里面的slideMove()函数，更加详细的实现可以参考UDLRSlideRowLayout类的实现。
3.4 事件的拦截
每一行里面的某列子View要自己处理事件的时候，会和左右滑动事件冲突，那咱们就得稍微做点处理了，当左右滑动的时候，咱得把事件拦截下来，那就得对onInterceptTouchEvent函数动刀子了，核心代码如下：
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
final float x = ev.getX();
final float y = ev.getY();
switch (action) {
case MotionEvent.ACTION_MOVE:
final int xDiff = (int) Math.abs(x - mLastMotionDownX);
final int yDiff = (int) Math.abs(y - mLastMotionDownY);
if (!mInSlideMode) {
if (xDiff > mTouchSlop && xDiff > yDiff) {
return true;
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
break;
}
return super.onInterceptTouchEvent(ev);
}ps:在实现的过程中，这里有个小插曲，也算是个小问题吧，在MotionEvent.ACTION_DOWN的时候我们肯定是要做一些初始化的，刚开始的时候我是放在onTouchEvent()函数里面做的，后来我直接放到dispatchTouchEvent()函数里面去处理了。因为当子View有事件处理的时候onTouchEvent()函数里面是走不到MotionEvent.ACTION_DOWN事件的。
3.5 下拉刷新，上拉加载
因为我们的UDLRSlideListView没有破坏ListView的特性，这样网上就有很多开源的框架来给我们实现这个功能了。例子里面用的XRefreshView实现的。
四. 源码
五. 写在结尾的话
整个实现过程介绍的很简单，如果有相同需求的话可以扒源码下来瞧一瞧，也可以在这基础上做相应的修改，当然里面肯定也有很多不合理的地方，很多需要完善的地方。欢迎指出。
扫一扫
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
