今天为大家介绍下列表的策划删除功能，废话不多说，直接看效果图：
我们先坐下介绍：和QQ列表的侧滑删除功能很像
1.是个列表
2.每一个条目都可以向左滑动，并且滑动第二个条目时，第一个条目返回，显示“取消收藏”，也就是删除。
3.点击“取消收藏”，条目删除，并且不存在列表条目错乱问题。
接下来我们就逐一介绍：
1.使用ListView或者RecyclerView都可，不做介绍。
2.每一个条目都可以向左滑动，并且滑动第二个条目时，第一个条目返回，显示“取消收藏”
这里我用的是RecyclerView，通过图 我们可以看出是三fragment组成，并且每个fragment里都可以上拉加载，下拉刷新（这里对这一部分功能我们以后再做介绍），我们先看代码：这里的每一个条目（也就是列表的item）是一个自定义的item。
我们先看整体的代码，然后再介绍;
1.自定义SlidingButtonView 继承 HorizontalScrollView
/**
* Created by MJJ on 2015/7/25.
* 可以左滑显示删除的view
*/
public class SlidingButtonView extends HorizontalScrollView {
private TextView mTextView_Delete;
private IonSlidingButtonListener mIonSlidingButtonListener;
private int mScrollWidth;
private Boolean isOpen = false;
private Boolean once = false;
public SlidingButtonView(Context context) {
this(context, null);
}
public SlidingButtonView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SlidingButtonView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.setOverScrollMode(OVER_SCROLL_NEVER);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (!once) {//如果是第一次
mTextView_Delete = (TextView) findViewById(R.id.tv_delete);
once = true;
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (changed) {
this.scrollTo(0, 0);
//获取水平滚动条可以滑动的范围，即右侧按钮的宽度
mScrollWidth = mTextView_Delete.getWidth();
Log.i("asd", "mScrollWidth:" + mScrollWidth);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
if (mIonSlidingButtonListener != null)
mIonSlidingButtonListener.onDownOrMove(this);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
//按滚动条被拖动距离判断关闭或打开菜单
changeScrollx();
return true;
default:
break;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
mTextView_Delete.setTranslationX(l - mScrollWidth);
}
/**
* 按滚动条被拖动距离判断关闭或打开菜单
*/
public void changeScrollx() {
if (getScrollX() >= (mScrollWidth / 2)) {//拖动距离大于"取消"按钮的一半
this.smoothScrollTo(mScrollWidth, 0);//滑动至(mScrollWidth, 0) ,smoothScrollTo 与scrollTo相似
isOpen = true;//为打开状态
if (mIonSlidingButtonListener != null)
mIonSlidingButtonListener.onMenuIsOpen(this);//菜单开启
} else {//拖动距离小于"取消"按钮的一半
this.smoothScrollTo(0, 0);//滑动至(0, 0)
isOpen = false;//为关闭状态
}
}
/**
* 打开菜单
*/
public void openMenu() {
if (isOpen) {
return;
}
this.smoothScrollTo(mScrollWidth, 0);
isOpen = true;
if (mIonSlidingButtonListener != null)
mIonSlidingButtonListener.onMenuIsOpen(this);
}
/**
* 关闭菜单
*/
public void closeMenu() {
if (!isOpen) {
return;
}
this.smoothScrollTo(0, 0);
isOpen = false;//关闭状态
}
public interface IonSlidingButtonListener {
void onMenuIsOpen(View view);//菜单开启
void onDownOrMove(SlidingButtonView slidingButtonView);//点击或拖动菜单
}
public void setSlidingButtonListener(IonSlidingButtonListener listener) {
mIonSlidingButtonListener = listener;
}
}我们看到SlidingButtonView继承了一个HorizontalScrollView 具体参考：
http://www.tuicool.com/articles/yQ3E7b
http://blog.csdn.net/lixiang_y/article/details/55102855
http://www.cnblogs.com/xiaoluo501395377/p/3460645.html
这里有一个方法：
public SlidingButtonView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.setOverScrollMode(OVER_SCROLL_NEVER);
}我们需要注意的就是setOverScrollMode(OVER_SCROLL_NEVER); 具体介绍看考：
http://blog.sina.com.cn/s/blog_5da93c8f0102uxxd.html
http://yangsongjing.iteye.com/blog/1973903
方法onMrasue 中:获取空间
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (!once) {//如果是第一次
mTextView_Delete = (TextView) findViewById(R.id.tv_delete);
once = true;
}
}方法onLayout 中：得到空间的宽，并且当changed时，不移动
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if (changed) {
this.scrollTo(0, 0);
//获取水平滚动条可以滑动的范围，即右侧按钮的宽度
mScrollWidth = mTextView_Delete.getWidth();
Log.i("asd", "mScrollWidth:" + mScrollWidth);
}
}scrollTo: http://blog.csdn.net/bigconvience/article/details/26697645
重写 onTouchEvent ：在不同的动作中作出操作：
@Override
public boolean onTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
if (mIonSlidingButtonListener != null)
mIonSlidingButtonListener.onDownOrMove(this);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
//按滚动条被拖动距离判断关闭或打开菜单
changeScrollx();
return true;
default:
break;
}
return super.onTouchEvent(ev);
}当操作为“点击”“滑动” 和 “抬起”“取消” 是不懂得状态中，在“点击”“滑动” 状态 中自定义监听方法onDownOrMove() , 在 “抬起”“取消” 状态中 自定义监听方法 onmenuIsOpen() 判断菜单是否为打开状态。
看监听方法：
public interface IonSlidingButtonListener {
void onMenuIsOpen(View view);//菜单开启
void onDownOrMove(SlidingButtonView slidingButtonView);//点击或拖动菜单
}
public void setSlidingButtonListener(IonSlidingButtonListener listener) {
mIonSlidingButtonListener = listener;
}
/**
* 按滚动条被拖动距离判断关闭或打开菜单
*/
public void changeScrollx() {
if (getScrollX() >= (mScrollWidth / 2)) {//拖动距离大于"取消"按钮的一半
this.smoothScrollTo(mScrollWidth, 0);//滑动至(mScrollWidth, 0) ,smoothScrollTo 与scrollTo相似
isOpen = true;//为打开状态
if (mIonSlidingButtonListener != null)
mIonSlidingButtonListener.onMenuIsOpen(this);//菜单开启
} else {//拖动距离小于"取消"按钮的一半
this.smoothScrollTo(0, 0);//滑动至(0, 0)
isOpen = false;//为关闭状态
}
}2.看一下Adapter 的代码，列表条目的操作都是在adapter中完成的。
/**
* 我的收藏列表 -- 产品
*/
public class MyCollect_ProductAdapter extends RecyclerView.Adapter<MyCollect_ProductAdapter.ViewHolder> implements SlidingButtonView.IonSlidingButtonListener {
private Context mContext;
private LayoutInflater mInflater;
private List<MyCollectListBean.CollectListBean> mDatas;
private SlidingButtonView mMenu = null;
public MyCollect_ProductAdapter(Context context, List<MyCollectListBean.CollectListBean> lists) {
mContext = context;
mDatas = lists;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
mInflater = LayoutInflater.from(parent.getContext());
View view = mInflater.inflate(R.layout.item_mycollect_product, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
Glide.with(mContext).load(mDatas.get(position).product_photo).centerCrop().into(holder.iv_img);
holder.tv_product_name.setText(mDatas.get(position).product_name);
holder.tv_product_date.setText(mDatas.get(position).collect_time);
holder.tv_factory_name.setText(mDatas.get(position).p_shop_name);
holder.tv_product_price.setText("¥ " + mDatas.get(position).product_price);
holder.tv_sale_num.setText("销售量: " + mDatas.get(position).product_count_order);
//获取屏幕像素赋值给条目的宽
holder.rl_item.getLayoutParams().width = UIutils.getWindowDisplayMetrics(mContext).widthPixels;
holder.rl_item.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(mContext, Classify_ProductDetailActivity.class);
intent.putExtra("product_id", mDatas.get(position).content_id);
mContext.startActivity(intent);
}
});
holder.tv_delete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// int realPos = holder.getLayoutPosition();
onLoadToCancleCollect(mDatas.get(position).product_id, position);
}
});
}
@Override
public int getItemCount() {
return mDatas.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
RelativeLayout rl_item;
ImageView iv_img;
TextView tv_product_name;
TextView tv_product_date;
TextView tv_factory_name;
TextView tv_product_price;
TextView tv_sale_num;
TextView tv_delete;
public ViewHolder(View itemView) {
super(itemView);
rl_item = (RelativeLayout) itemView.findViewById(R.id.rl_item);
iv_img = (ImageView) itemView.findViewById(R.id.iv_img);
tv_product_name = (TextView) itemView.findViewById(R.id.tv_product_name);
tv_product_date = (TextView) itemView.findViewById(R.id.tv_product_date);
tv_factory_name = (TextView) itemView.findViewById(R.id.tv_factory_name);
tv_product_price = (TextView) itemView.findViewById(R.id.tv_product_price);
tv_sale_num = (TextView) itemView.findViewById(R.id.tv_sale_num);
tv_delete = (TextView) itemView.findViewById(R.id.tv_delete);
//获取监听
((SlidingButtonView) itemView).setSlidingButtonListener(MyCollect_ProductAdapter.this);
}
}
/**
* 取消收藏
*
* @param product_id 收藏 产品product_id
* @param position 取消的位置position
*/
private void onLoadToCancleCollect(String product_id, final int position) {
String user_id = SpUtils.getUserId(mContext);
ServiceApi.getCancleCollect(user_id, product_id, "0", new MyString2Callback() {
@Override
public void onError(Call call, Exception e) {
ToastUtils.showInternetErrorToast();
}
@Override
public void onResponse(Call call, String s) {
BaseBean result = new Gson().fromJson(s, BaseBean.class);
if (result.code == 0) {
//取消成功
mDatas.remove(position);
notifyItemRemoved(position);
if (position != mDatas.size()) {
notifyItemRangeChanged(position, mDatas.size() - position);
}
} else {
ToastUtils.showToast(result.msg);
}
}
});
}
@Override
public void onMenuIsOpen(View view) { //菜单开启,//mMenu 当菜单开启才会获得mMenu
mMenu = (SlidingButtonView) view;
}
@Override
public void onDownOrMove(SlidingButtonView slidingButtonView) {//点击或拖动菜单
if (menuIsOpen()) { //判断是否有菜单打开 ,有菜单是开启状态
if (mMenu != slidingButtonView) { //判断拖动的菜单是否是已开启的菜单
closeMenu();//关闭已开启的菜单
}
}
}
/**
* 关闭菜单
*关闭已开启的菜单
*/
public void closeMenu() {
mMenu.closeMenu(); //关闭菜单 ,调取SlidingButtonView中方法
mMenu = null;
}
/**
* 判断是否有菜单打开
*/
public Boolean menuIsOpen() {
if (mMenu != null) { //mMenu 当已经有菜单是开启状态才会获得mMenu
return true;
}
Log.i("asd", "mMenu为null");
return false;
}
}
3.对于点击“取消收藏”，条目删除，并且不存在列表条目错乱问题。解决的方法：
if (result.code == 0) {
//取消成功
mDatas.remove(position);
notifyItemRemoved(position);
if (position != mDatas.size()) {
notifyItemRangeChanged(position, mDatas.size() - position);
}具体介绍参考：http://blog.csdn.net/lijinweii/article/details/72636753
最后我们展示下xml,文件：item_mycollect_product.xml
<?xml version="1.0" encoding="utf-8"?>
<包名.view.SlidingButtonView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/slidingbt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_delete"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_alignBottom="@id/rl_item"
android:layout_alignTop="@+id/rl_item"
android:layout_toRightOf="@+id/rl_item"
android:background="@color/red"
android:gravity="center"
android:text="取消收藏"
android:textColor="#000000" />
<RelativeLayout
android:id="@+id/rl_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">
<ImageView
android:id="@+id/iv_img"
android:layout_width="110dp"
android:layout_height="90dp"
android:layout_centerVertical="true"
android:layout_margin="8dp"
android:background="@drawable/error_img"
android:scaleType="fitXY"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/iv_img"
android:layout_alignTop="@+id/iv_img"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_toRightOf="@id/iv_img">
<TextView
android:id="@+id/tv_product_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_toLeftOf="@+id/tv_product_date"
android:ellipsize="end"
android:maxLines="1"
android:text="@string/default_text"
android:textColor="@color/black"
android:textSize="14sp" />
<TextView
android:id="@+id/tv_product_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/tv_product_name"
android:layout_alignParentRight="true"
android:text="@string/default_text"
android:textColor="@color/tv_gray"
android:textSize="11sp" />
<TextView
android:id="@+id/tv_factory_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="@string/default_text"
android:textColor="@color/tv_black_light"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_product_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:minWidth="50dp"
android:text="@string/default_text"
android:textColor="@color/tv_orange"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_sale_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/tv_product_price"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@+id/tv_product_price"
android:text="@string/default_text"
android:textSize="13sp" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
</包名.view.SlidingButtonView>
我们的介绍就这些啦！你还有什么不明白的请告诉我哦。。。
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
