开源库AndroidSwipeLayout分析（一），炫酷ItemView滑动呼出效果-白红宇

开源库AndroidSwipeLayout分析（一），炫酷ItemView滑动呼出效果

阅读量：4660 次

发布时间：2019-06-09

本文共 8500 字，大约阅读时间需要 28 分钟。

如需转载请注明博客出处： http://www.cnblogs.com/wondertwo/p/5525671.html

开源库AndroidSwipeLayout地址请戳： https://github.com/daimajia/AndroidSwipeLayout 开源库作者 @代码家

实现一个类似手机QQ聊天列表项item侧滑呼出对应的删除、置顶、标为未读等一个或多个操作项的动能，起初的想法很简单，直接拦截掉ViewPager的滑动事件，然后为上层View加置顶的平移动画即可。可是这样代码就会写死，代码可复用性也不高，本着不重复造轮子的原则，在Github发现了AndroidSwipeLayout这个开源库就是做这个功能的，所以就研究了下写点总结。第一篇会具体介绍用法；o(￣▽￣)d

AndroidSwipeLayout的用法非常广泛，不仅仅可以用在ListView和GridView上，实现类似手机QQ聊天列表项ItemView的左滑呼出效果，而且还可以用在RecyclerView上，实现样式丰富多彩的瀑布流式效果，比如在本篇博客的第二部分，我实现了一个瀑布流式的异步图片加载功能，就可以通过SwipeLayout为每个Item加上滑动呼出功能操作的效果，想想都觉得很有意思，有兴趣的可以自己亲自去敲一遍，非常简单。本篇博客主要分两个部分来写：

简要说明AndroidSwipeLayout开源库的结构（结合ListView和GridView）；

介绍AndroidSwipeLayout在RecyclerView上使用方法；

第一部分 AndroidSwipeLayout开源库的结构（结合ListView和GridView）

先看AndroidSwipeLayout的目录结构，如下图：

回忆一下，在使用ListView和GridView的时候，一般都是简单的三步走：

封装数据源data；

重写Adapter适配器；

创建ListView或者GridView实例，为其设置adapter；

通过以上三步，数据源和展示层已经完全解耦，数据源和ItemView的适配工作完全交由中间层Adapter来完成，这也体现了经典的MVC模型思想。AndroidSwipeLayout的做法很聪明，直接在Adapter层做文章，我们就来一探究竟!下面贴的是一个ListViewAdapter，代码如下：

public class ListViewAdapter extends BaseSwipeAdapter {    private Context mContext;    private LayoutInflater mInflater;    public ListViewAdapter(Context context) {        this.mContext = context;        mInflater = LayoutInflater.from(context);    }    @Override    public int getSwipeLayoutResourceId(int i) {        return R.id.listview_swipe;    }    /**     * 重新计算ListView的每个item view的大小     */    @Override    public View generateView(int i, ViewGroup viewGroup) {        View v = mInflater.inflate(R.layout.listview_item, null);        SwipeLayout swipeLayout = (SwipeLayout)v.findViewById(getSwipeLayoutResourceId(i));        swipeLayout.addSwipeListener(new SimpleSwipeListener() {            @Override            public void onOpen(SwipeLayout layout) {            }        });        swipeLayout.setOnDoubleClickListener(new SwipeLayout.DoubleClickListener() {            @Override            public void onDoubleClick(SwipeLayout layout, boolean surface) {                Toast.makeText(mContext, "DoubleClick", Toast.LENGTH_SHORT).show();            }        });        v.findViewById(R.id.delete).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Toast.makeText(mContext, "click delete", Toast.LENGTH_SHORT).show();            }        });        v.findViewById(R.id.item_button).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(mContext, "click button", Toast.LENGTH_SHORT).show();            }        });        return v;    }    /**     * 为ListView的每个item项进行赋值     */    @Override    public void fillValues(int i, View view) {        TextView text = (TextView) view.findViewById(R.id.item_position);        Button button = (Button) view.findViewById(R.id.item_button);        text.setText("第 " + (i+1) + " 个列表项");        text.setTextColor(Color.RED);        text.setPadding(40, 0, 20, 0);        button.setText(R.string.button_str);    }    @Override    public int getCount() {        return 99;    }    @Override    public Object getItem(int position) {        return null;    }    @Override    public long getItemId(int position) {        return position;    }}

ListViewAdapter继承自BaseSwipeAdapter，而BaseSwipeAdapter就是开源库封装好的多个Adapter之一。重写Adapter最重要的任务就是重写getView()方法，然而在上面的代码中，我们并没有发现重写的getView()方法，仔细一看，发现ListViewAdapter中多出了以下3个方法：

|--  public View generateView(int position, ViewGroup parent) {}|--  public void fillValues(int position, View convertView) {}|--  public int getSwipeLayoutResourceId(int position) {}

只关注前两个方法，按住Ctrl+左击，跟踪到BaseSwipeAdapter源码中，发现不仅重写了getView()方法，而且generateView()和getSwipeLayoutResourceId()这两个方法都在重写的getView()方法中调用，于是我们把getView()方法单独拿出来分析，源码如下：

@Overridepublic final View getView(int position, View convertView, ViewGroup parent) {    View v = convertView;    if(v == null){        v = generateView(position, parent);    }    mItemManger.bind(v, position);    fillValues(position, v);    return v;}

果然是这样！实现的逻辑也很简单，把ItemView的生成过程和ItemView的数据绑定过程拆分为两部分进行。先是调用generateView()方法生成ItemView，这样做的好处是我们可以在generateView()方法只关注View的事件处理逻辑，而不用关心View和数据源的绑定，这个生成的View就是我们getView()方法最后要返回的View；而绑定ItemView和数据源的工作就交给fillValues()方法了。

到此你会发现，要想实现ItemView的侧滑呼出效果，AndroidSwipeLayout库关注的只是中间层Adapter而已，并且对Android sdk提供的几种常用的Adapter都进行了封装，对应关系如下：

ArraySwipeAdapter对应ArrayAdapter；

BaseSwipeAdapter对应BaseAdapter；

CursorSwipeAdapter对应CursorAdapter；

SimpleCursorSwipeAdapter对应SimpleCursorAdapter；

RecyclerSwipeAdapter对应CyclerAdapter；

到这里，使用SwipeLayout就很简单了，只需要在ItemView的根布局嵌套一个SwipeLayout控件就可以了，例如看一下ListView的布局文件listView_item.xml如下：

在com.daimajia.swipe.SwipeLayout控件内部添加了两个LinearLayout，上面那个LinearLayout是BottomViews（底层View），下面那个LinearLayout是SurfaceViews（表层View）；当SurfaceView被滑开，BottomView就会展示出来，示意图如下：

第二部分 AndroidSwipeLayout在RecyclerView上的用法

其实熟悉RecyclerView的同学，肯定都不愿意再滚回去用ListView和GridView了。至于RecyclerView怎么用？好在哪？网上随便都能搜出一堆，这里不讨论！我用RecyclerView做了一个异步加载网络图片的瀑布流小demo，用AndroidSwipeLayout为每个Item添加了左滑呼出功能菜单的效果，详细请看下图：

项目开始之前，需要导入AndroidSwipeLayout库文件，可以去Github下载；也可以选择下载jar包，把下载好的jar包放在项目的额libs目录下，并右键add as a library!这两种方式选其一即可。库导入完成后，项目的目录结构如下图：

第一步需要将SwipeLayout组件设置给ItemView的根布局，也就是我们这里的recyclerview_item.xml布局文件，代码如下：

可以清楚的看到，SwipeLayout组件装了两个LinearLayout，上下两个LinearLayout分别代表BottomViews和SurfaceViews，当SurfaceViews滑开时，就会看到底层的BottomViews，这样理解起来非常形象。然后最最关键的，来看我们的适配器代码，StaggeredAdapter.java代码如下所示：

/** * StaggeredAdapter 瀑布流式的RecyclerView数据源适配器 * * Created by wondertwo on 2016/5/19. */public class StaggeredAdapter extends RecyclerView.Adapter
    
      {    private Context mContext;    private LayoutInflater mInflater;    private String[] mDatas;    private AsyncImageLoader mImageLoader;    private List
     
       mHeights;    public StaggeredAdapter(Context context, String[] data) {        this.mContext = context;        mInflater = LayoutInflater.from(context);        mDatas = data;        mImageLoader = new AsyncImageLoader(mContext);        // 随机生成item的高度        mHeights = new ArrayList<>();        for (String mData : mDatas) {            mHeights.add((int) (100 + Math.random() * 300));        }    }    @Override    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        return new MyViewHolder(mInflater.inflate(R.layout.recyclerview_item, parent, false));    }    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {        // 设置 itemView 高度        ViewGroup.LayoutParams lp = holder.iv.getLayoutParams();        lp.height = mHeights.get(position);        holder.iv.setLayoutParams(lp);        final String imgUrl = mDatas[position];        // 给 ImageView 设置一个 tag        holder.iv.setTag(imgUrl);        // 给 ImageView 预设一个图片        holder.iv.setImageResource(R.drawable.ic_launcher);        if (!TextUtils.isEmpty(imgUrl)) {            Bitmap bitmap = mImageLoader.loadImage(holder.iv, imgUrl);            if (bitmap != null) {                holder.iv.setImageBitmap(bitmap);            }        }    }    @Override    public int getItemCount() {        return mDatas.length;    }    // ViewHolder    class MyViewHolder extends RecyclerView.ViewHolder {        ImageView iv;        public MyViewHolder(View view) {            super(view);            iv = (ImageView) view.findViewById(R.id.surface_user_image);        }    }}

StaggeredAdapter就是实现瀑布流式加载效果，继承自RecyclerView.Adapter；包含一个内部类MyViewHolder，继承自RecyclerView.ViewHolder。除此之外，需要关心的就只有onBindViewHolder()方法了。

onBindViewHolder()方法中，先把我们随机生成的高度值设置给ItemView；然后为每个ItemView设置一个TAG，这样可以避免出现图片加载错乱的问题；最后把从网络上加载下来的图片设置给ItemView。

装备工作完成后，在MainActivity中把StaggeredAdapter设置给RecyclerView实例即可，这里注释写的比较详细，不熟悉RecyclerView的同学，完全可以按以下几步熟练地运用RecyclerView了，代码如下所示：

// 第一步：拿到RecyclerView对象    mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);    // 第二步：设置布局管理器    mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,            StaggeredGridLayoutManager.VERTICAL));    // 第三步：设置adapter适配器、点击监听    mAdapter = new StaggeredAdapter(MainActivity.this, images);    mRecyclerView.setAdapter(mAdapter);    // 第四步：设置item装饰器ItemDecoration，或者item动画ItemAnimation    mRecyclerView.addItemDecoration(new DividerGridItemDecoration(this));

就是这么简单！只有几行代码而已。另外，项目源码已上传Github，

转载于:https://www.cnblogs.com/wondertwo/p/5525671.html

你可能感兴趣的文章