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

---

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

---

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

---

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

@Override
public 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如下：

<?xml version="1.0" encoding="utf-8" ?>
<com.daimajia.swipe.SwipeLayout
xmlns:swipe="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/listview_swipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
swipe:leftEdgeSwipeOffset="0dp"
swipe:rightEdgeSwipeOffset="0dp">
<!--BottomViews-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FF5534"
android:gravity="center"
android:tag="Bottom3"
android:weightSum="10">
<ImageView
android:id="@+id/trash"
android:layout_width="27dp"
android:layout_height="30dp"
android:layout_weight="1"
android:src="@drawable/trash" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5"
android:text="Delete Item?"
android:textColor="#fff"
android:textSize="17sp" />
<Button
android:id="@+id/delete"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="4"
android:background="@drawable/white"
android:text="Yes,Delete"
android:textColor="#FF5534" />
</LinearLayout>
<!--SurfaceViews-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/item_selector"
android:padding="10dp">
<TextView
android:id="@+id/item_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/item_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="Hover"
android:text="@string/button_str" />
</LinearLayout>
</com.daimajia.swipe.SwipeLayout>

在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布局文件，代码如下：

<com.daimajia.swipe.SwipeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:swipe="http://schemas.android.com/apk/res-auto"
android:id="@+id/itemview_swipe"
swipe:leftEdgeSwipeOffset="0dp"
swipe:rightEdgeSwipeOffset="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--BottomViews-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="vertical"
android:background="#FF5534"
android:gravity="center"
android:tag="Bottom3"
android:weightSum="10">
<ImageView
android:id="@+id/bottom_trash"
android:layout_width="27dp"
android:layout_height="38dp"
android:layout_gravity="center_horizontal"
android:paddingBottom="5dp"
android:src="@drawable/trash" />
<Button
android:id="@+id/bottom_delete"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:background="#ffffff"
android:text="Delete Item ?"
android:textSize="18sp"
android:textColor="#FF5534" />
</LinearLayout>
<!--SurfaceViews-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/surface_user_image"
android:layout_width="100dp"
android:layout_height="100dp"/>
</LinearLayout>
</com.daimajia.swipe.SwipeLayout>

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

/**
* StaggeredAdapter 瀑布流式的RecyclerView数据源适配器
*
* Created by wondertwo on 2016/5/19.
*/
public class StaggeredAdapter extends RecyclerView.Adapter<StaggeredAdapter.MyViewHolder> {
private Context mContext;
private LayoutInflater mInflater;
private String[] mDatas;
private AsyncImageLoader mImageLoader;
private List<Integer> 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);
}
}
}

1. StaggeredAdapter就是实现瀑布流式加载效果，继承自RecyclerView.Adapter；包含一个内部类MyViewHolder，继承自RecyclerView.ViewHolder。除此之外，需要关心的就只有onBindViewHolder()方法了。
2. 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，需要源码的同学请在我的Github下载！