一、引出
虽随时间发展，Android UI 界面绘制有了长足发展，而ListView作为内容承载一个重要控件的事实依旧未改变。Item多种状态的展示，以及不同小分区的响应事件更丰富了ListView的展现形式。侧滑则能够更大的扩展item所展示的区域，尤其以IOS的更多效果作对比。IOS能行的，Android也要会。
本例借用网友的智慧，展示侧滑删除的两种特效。强化自己对于自定义控件的理解，也拓展侧滑展示部分事件响应的多形态。
二、左/右滑动删除
实现效果描述：实现向左/向右滑动，当滑动距离超过本身宽度三分之一时，删除当前item；否则则返回原始状态。保证每次滑动的item只有一条。且item点击事件与滑动事件不冲突。
自定义控件核心代码：
public class SlideDeleteListView extends ListView {
/**
* 当前滑动的ListView position
*/
private int slidePosition;
/**
* 手指按下X的坐标
*/
private int downY;
/**
* 手指按下Y的坐标
*/
private int downX;
/**
* 屏幕宽度
*/
private int screenWidth;
/**
* ListView的item
*/
private View itemView;
/**
* 滑动类
*/
private Scroller scroller;
private static final int SNAP_VELOCITY = 600;
/**
* 速度追踪对象
*/
private VelocityTracker velocityTracker;
/**
* 是否响应滑动，默认为不响应
*/
private boolean isSlide = false;
/**
* 认为是用户滑动的最小距离
*/
private int mTouchSlop;
/**
* 移除item后的回调接口
*/
private RemoveListener mRemoveListener;
/**
* 用来指示item滑出屏幕的方向,向左或者向右,用一个枚举值来标记
*/
private RemoveDirection removeDirection;
// 滑动删除方向的枚举值
public enum RemoveDirection {
RIGHT, LEFT
}
public SlideDeleteListView(Context context) {
this(context, null);
}
public SlideDeleteListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SlideDeleteListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
screenWidth = ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getWidth();
scroller = new Scroller(context);
mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
}
/**
* 设置滑动删除的回调接口
*
* @param removeListener
*/
public void setRemoveListener(RemoveListener removeListener) {
this.mRemoveListener = removeListener;
}
/**
* 分发事件，主要做的是判断点击的是那个item, 以及通过postDelayed来设置响应左右滑动事件
*/
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
addVelocityTracker(event);
// 假如scroller滚动还没有结束，我们直接返回
if (!scroller.isFinished()) {
return super.dispatchTouchEvent(event);
}
downX = (int) event.getX();
downY = (int) event.getY();
slidePosition = pointToPosition(downX, downY);
// 无效的position, 不做任何处理
if (slidePosition == AdapterView.INVALID_POSITION) {
return super.dispatchTouchEvent(event);
}
// 获取我们点击的item view
itemView = getChildAt(slidePosition - getFirstVisiblePosition());
break;
}
case MotionEvent.ACTION_MOVE: {
if (Math.abs(getScrollVelocity()) > SNAP_VELOCITY
|| (Math.abs(event.getX() - downX) > mTouchSlop && Math
.abs(event.getY() - downY) < mTouchSlop)) {
isSlide = true;
}
break;
}
case MotionEvent.ACTION_UP:
recycleVelocityTracker();
break;
}
return super.dispatchTouchEvent(event);
}
/**
* 往右滑动，getScrollX()返回的是左边缘的距离，就是以View左边缘为原点到开始滑动的距离，所以向右边滑动为负值
*/
private void scrollRight() {
removeDirection = RemoveDirection.RIGHT;
final int delta = (screenWidth + itemView.getScrollX());
// 调用startScroll方法来设置一些滚动的参数，我们在computeScroll()方法中调用scrollTo来滚动item
scroller.startScroll(itemView.getScrollX(), 0, -delta, 0,
Math.abs(delta));
postInvalidate(); // 刷新itemView
}
/**
* 向左滑动，根据上面我们知道向左滑动为正值
*/
private void scrollLeft() {
removeDirection = RemoveDirection.LEFT;
final int delta = (screenWidth - itemView.getScrollX());
// 调用startScroll方法来设置一些滚动的参数，我们在computeScroll()方法中调用scrollTo来滚动item
scroller.startScroll(itemView.getScrollX(), 0, delta, 0,
Math.abs(delta));
postInvalidate(); // 刷新itemView
}
/**
* 根据手指滚动itemView的距离来判断是滚动到开始位置还是向左或者向右滚动
*/
private void scrollByDistanceX() {
// 如果向左滚动的距离大于屏幕的三分之一，就让其删除
if (itemView.getScrollX() >= screenWidth / 3) {
scrollLeft();
} else if (itemView.getScrollX() <= -screenWidth / 3) {
scrollRight();
} else {
// 滚回到原始位置,为了偷下懒这里是直接调用scrollTo滚动
itemView.scrollTo(0, 0);
}
}
/**
* 处理我们拖动ListView item的逻辑
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (isSlide && slidePosition != AdapterView.INVALID_POSITION) {
addVelocityTracker(ev);
final int action = ev.getAction();
int x = (int) ev.getX();
switch (action) {
case MotionEvent.ACTION_MOVE:
int deltaX = downX - x;
downX = x;
// 手指拖动itemView滚动, deltaX大于0向左滚动，小于0向右滚
itemView.scrollBy(deltaX, 0);
break;
case MotionEvent.ACTION_UP:
int velocityX = getScrollVelocity();
if (velocityX > SNAP_VELOCITY) {
scrollRight();
} else if (velocityX < -SNAP_VELOCITY) {
scrollLeft();
} else {
scrollByDistanceX();
}
recycleVelocityTracker();
// 手指离开的时候就不响应左右滚动
isSlide = false;
break;
}
return true; // 拖动的时候ListView不滚动
}
//否则直接交给ListView来处理onTouchEvent事件
return super.onTouchEvent(ev);
}
@Override
public void computeScroll() {
// 调用startScroll的时候scroller.computeScrollOffset()返回true，
if (scroller.computeScrollOffset()) {
// 让ListView item根据当前的滚动偏移量进行滚动
itemView.scrollTo(scroller.getCurrX(), scroller.getCurrY());
postInvalidate();
// 滚动动画结束的时候调用回调接口
if (scroller.isFinished()) {
if (mRemoveListener == null) {
throw new NullPointerException("RemoveListener is null, we should called setRemoveListener()");
}
itemView.scrollTo(0, 0);
mRemoveListener.removeItem(removeDirection, slidePosition);
}
}
}
/**
* 添加用户的速度跟踪器
*
* @param event
*/
private void addVelocityTracker(MotionEvent event) {
if (velocityTracker == null) {
velocityTracker = VelocityTracker.obtain();
}
velocityTracker.addMovement(event);
}
/**
* 移除用户速度跟踪器
*/
private void recycleVelocityTracker() {
if (velocityTracker != null) {
velocityTracker.recycle();
velocityTracker = null;
}
}
/**
* 获取X方向的滑动速度,大于0向右滑动，反之向左
*
* @return
*/
private int getScrollVelocity() {
velocityTracker.computeCurrentVelocity(1000);
int velocity = (int) velocityTracker.getXVelocity();
return velocity;
}
/**
* 当ListView item滑出屏幕，回调这个接口
* 我们需要在回调方法removeItem()中移除该Item,然后刷新ListView
*
* @author xiaanming
*/
public interface RemoveListener {
public void removeItem(RemoveDirection direction, int position);
}
}
public class MainActivity extends Activity implements SlideDeleteListView.RemoveListener {
private SlideDeleteListView slideDeleteListView;
private ArrayAdapter<String> adapter;
private List<String> dataSourceList = new ArrayList<String>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
slideDeleteListView = (SlideDeleteListView) findViewById(R.id.slideDeleteListView);
slideDeleteListView.setRemoveListener(this);
for (int i = 0; i < 20; i++) {
dataSourceList.add("item主体" + i);
}
adapter = new ArrayAdapter<String>(this, R.layout.listview_item, R.id.list_item, dataSourceList);
slideDeleteListView.setAdapter(adapter);
slideDeleteListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
Toast.makeText(MainActivity.this, dataSourceList.get(position), Toast.LENGTH_SHORT).show();
}
});
}
//滑动删除之后的回调方法
@Override
public void removeItem(SlideDeleteListView.RemoveDirection direction, int position) {
adapter.remove(adapter.getItem(position));
switch (direction) {
case RIGHT:
Toast.makeText(this, "向右滑动删除" + position, Toast.LENGTH_SHORT).show();
break;
case LEFT:
Toast.makeText(this, "向左滑动删除 " + position, Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}
三、侧滑删除
实现效果：ListView填充丰富的Item对象，既实现侧滑显示删除提示并能够响应对应点击事件，又能够不影响item组成部分的其他响应事件。
SlideView.Java，滑动控件的实现：
public class SliderView extends LinearLayout {
private static final String TAG = "SlideView";
private static final int TAN = 2;
private int mHolderWidth = 120;
private float mLastX = 0;
private float mLastY = 0;
private Context mContext;
private LinearLayout mViewContent;
private Scroller mScroller;
public SliderView(Context context, Resources resources) {
super(context);
initView();
}
public SliderView(Context context) {
super(context);
initView();
}
public SliderView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
private void initView() {
setOrientation(LinearLayout.HORIZONTAL);
mContext = getContext();
mScroller = new Scroller(mContext);
View.inflate(mContext, R.layout.slide_view_merge, this);
mViewContent = (LinearLayout) findViewById(R.id.view_content);
mHolderWidth = Math.round(TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, mHolderWidth, getResources()
.getDisplayMetrics()));
}
public void setContentView(View view) {
mViewContent.addView(view);
}
public void shrink() {
int offset = getScrollX();
if (offset == 0) {
return;
}
scrollTo(0, 0);
}
public void reset() {
int offset = getScrollX();
if (offset == 0) {
return;
}
smoothScrollTo(0, 0);
}
public void adjust(boolean left) {
int offset = getScrollX();
if (offset == 0) {
return;
}
if (offset < 20) {
this.smoothScrollTo(0, 0);
} else if (offset < mHolderWidth - 20) {
if (left) {
this.smoothScrollTo(mHolderWidth, 0);
} else {
this.smoothScrollTo(0, 0);
}
} else {
this.smoothScrollTo(mHolderWidth, 0);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_MOVE:
float x = event.getX();
float y = event.getY();
float deltaX = x - mLastX;
float delatY = y - mLastY;
mLastX = x;
mLastY = y;
if (Math.abs(deltaX) < Math.abs(delatY) * TAN) {
break;
}
if (deltaX != 0) {
float newScrollX = getScrollX() - deltaX;
if (newScrollX < 0) {
newScrollX = 0;
} else if (newScrollX > mHolderWidth) {
newScrollX = mHolderWidth;
}
this.scrollTo((int) newScrollX, 0);
}
break;
}
return super.onTouchEvent(event);
}
private void smoothScrollTo(int destX, int destY) {
int scrollX = getScrollX();
int delta = destX - scrollX;
mScroller.startScroll(scrollX, 0, delta, 0, Math.abs(delta) * 3);
invalidate();
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
postInvalidate();
}
}
}
public class SilderListView extends ListView {
private static final String TAG = "SilderListView";
private SliderView mFocusedItemView;
float mX = 0;
float mY = 0;
private int mPosition = -1;
boolean isSlider = false;
public SilderListView(Context context) {
super(context);
}
public SilderListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SilderListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isSlider = false;
mX = x;
mY = y;
int position = pointToPosition((int) x, (int) y);
if (mPosition != position) {
mPosition = position;
if (mFocusedItemView != null) {
mFocusedItemView.reset();
}
}
break;
case MotionEvent.ACTION_MOVE:
if (mPosition != -1) {
if (Math.abs(mY - y) < 30 && Math.abs(mX - x) > 20) {
int first = this.getFirstVisiblePosition();
int index = mPosition - first;
mFocusedItemView = (SliderView) getChildAt(index);
mFocusedItemView.onTouchEvent(event);
isSlider = true;
return true;
}
}
break;
case MotionEvent.ACTION_UP:
if (isSlider) {
isSlider = false;
if (mFocusedItemView != null) {
mFocusedItemView.adjust(mX - x > 0);
return true;
}
}
break;
}
return super.onTouchEvent(event);
}
}
public class MainActivity extends Activity implements AdapterView.OnItemClickListener,
View.OnClickListener {
private static final String TAG = "MainActivity";
private SilderListView mListView;
private List<MessageItem> mMessageItems = new ArrayList<MessageItem>();
private SliderView mLastSlideViewWithStatusOn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mListView = (SilderListView) findViewById(R.id.list);
for (int i = 0; i < 20; i++) {
MessageItem item = new MessageItem();
if (i % 3 == 0) {
item.iconRes = R.mipmap.default_qq_avatar;
item.title = i + "标题";
item.msg = "内容信息";
item.time = "个体说明";
} else {
item.iconRes = R.mipmap.wechat_icon;
item.title = i + " 另类标题";
item.msg = "说点什么";
item.time = "个性化";
}
mMessageItems.add(item);
}
mListView.setAdapter(new SlideAdapter());
mListView.setOnItemClickListener(this);
}
private class SlideAdapter extends BaseAdapter {
private LayoutInflater mInflater;
SlideAdapter() {
super();
mInflater = getLayoutInflater();
}
@Override
public int getCount() {
return mMessageItems.size();
}
@Override
public Object getItem(int position) {
return mMessageItems.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
SliderView slideView = (SliderView) convertView;
if (slideView == null) {
View itemView = mInflater.inflate(R.layout.list_item, null);
slideView = new SliderView(MainActivity.this);
slideView.setContentView(itemView);
holder = new ViewHolder(slideView);
slideView.setTag(holder);
} else {
holder = (ViewHolder) slideView.getTag();
}
MessageItem item = mMessageItems.get(position);
slideView.shrink();
holder.icon.setImageResource(item.iconRes);
holder.title.setText(item.title);
holder.msg.setText(item.msg);
holder.time.setText(item.time);
holder.deleteHolder.setOnClickListener(MainActivity.this);
return slideView;
}
}
public class MessageItem {
public int iconRes;
public String title;
public String msg;
public String time;
}
private static class ViewHolder {
public ImageView icon;
public TextView title;
public TextView msg;
public TextView time;
public ViewGroup deleteHolder;
ViewHolder(View view) {
icon = (ImageView) view.findViewById(R.id.icon);
title = (TextView) view.findViewById(R.id.title);
msg = (TextView) view.findViewById(R.id.msg);
time = (TextView) view.findViewById(R.id.time);
deleteHolder = (ViewGroup) view.findViewById(R.id.holder);
}
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
Toast.makeText(this, "item点击事件", Toast.LENGTH_SHORT).show();
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.holder) {
Toast.makeText(this, "删除按钮点击事件", Toast.LENGTH_SHORT).show();
}
}
}
源码：
你引风雨来，我也不怨你，我打着雨伞多少与你同走一程可好？
你带沙尘来，我也不气你，我给我自己蒙上面巾，也给你一块可好？
你要是不愿意，那就算了罢，我自己一人独行，也有许多妙处可得。
你要是高兴，那就更好了，我与你说说这些年，我曾遇的那些人与风景。
2080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
