RecyclerView侧滑菜单，滑动删除，长按拖拽，下拉刷新上拉加载

最新推荐文章于 2019-04-01 17:05:48 发布
baochuan1
最新推荐文章于 2019-04-01 17:05:48 发布
阅读量237
点赞数
<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post">
        <div class="markdown_views"><blockquote>
  <p>版权声明：转载必须注明本文转自严振杰的博客: <a href="http://blog.youkuaiyun.com/yanzhenjie1003" target="_blank">http://blog.youkuaiyun.com/yanzhenjie1003</a> </p>
</blockquote>



<h1 id="feature"><a name="t0"></a>Feature</h1>

<ol>
<li>以下功能全部支持：竖向ListView、横向ListView、Grid、StaggeredGrid四种形式。</li>
<li>RecyclerView 左右两侧 侧滑菜单。</li>
<li>菜单横向排布、菜单竖向排布。</li>
<li>RecyclerView长按拖拽Item。</li>
<li>RecyclerView侧滑删除item。</li>
<li>指定RecyclerView的某一个Item不能滑动删除或长按拖拽。</li>
<li>某一个Item显示的不同的菜单（类似QQ）。</li>
<li>用SwipeMenuLayout在任何地方都可以实现你自己的侧滑菜单。</li>
<li>使用SwipeRecyclerView下拉刷新、自动加载更多。</li>
<li>可以和ViewPager、DrawerLayout、CardView嵌套使用。</li>
</ol>

<p>SwipeRecyclerView项目地址：<a href="https://github.com/yanzhenjie/SwipeRecyclerView" target="_blank">https://github.com/yanzhenjie/SwipeRecyclerView</a></p>

<h1 id="引用方法"><a name="t1"></a>引用方法</h1>

<ul>
<li>Eclipse 请放弃治疗</li>
<li>Gradle</li>
</ul>

<pre class="prettyprint" name="code"><code class="language-groovy hljs bash has-numbering">compile <span class="hljs-string">'com.yanzhenjie:recyclerview-swipe:1.0.3'</span></code><ul class="pre-numbering" style=""><li>1</li></ul></pre>

<p>Or Maven:</p>

<pre class="prettyprint" name="code"><code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">dependency</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">groupId</span>></span>com.yanzhenjie<span class="hljs-tag"></<span class="hljs-title">groupId</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">artifactId</span>></span>recyclerview-swipe<span class="hljs-tag"></<span class="hljs-title">artifactId</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">version</span>></span>1.0.3<span class="hljs-tag"></<span class="hljs-title">version</span>></span>
  <span class="hljs-tag"><<span class="hljs-title">type</span>></span>pom<span class="hljs-tag"></<span class="hljs-title">type</span>></span>
<span class="hljs-tag"></<span class="hljs-title">dependency</span>></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></pre>

<h1 id="效果图"><a name="t2"></a>效果图</h1>

<p>gif有一些失真，且网页加载速度慢，可以[下载demo的apk][3]看效果。  </p>



<h2 id="侧滑菜单"><a name="t3"></a>侧滑菜单</h2>

<ol>
<li>左右两侧都有菜单，主动调出第几个菜单或者手指滑动出现。  </li>
<li>根据ViewType某一个Item显示的不同的菜单（类似QQ）   </li>
</ol>

<p><img src="https://img-blog.youkuaiyun.com/20160825165439474" alt="<两侧侧滑菜单" title="">  <img src="https://img-blog.youkuaiyun.com/20160825170328548" alt="不同的Item不同的菜单" title=""></p>



<h2 id="和viewpager嵌套-下拉刷新自动加载更多"><a name="t4"></a>和ViewPager嵌套 下拉刷新、自动加载更多</h2>

<ol>
<li>和ViewPager嵌套使用，兼容了滑动冲突。  </li>
<li>可以和任何下拉刷新的框架结合，滑动到底部自动加载更多。  </li>
</ol>

<p><img src="https://img-blog.youkuaiyun.com/20160825165711305" alt="和ViewPager嵌套使用" title="">  <img src="https://img-blog.youkuaiyun.com/20160825165735008" alt="下拉刷新加载更多" title=""></p>



<h2 id="长按拖拽-侧滑菜单结合使用"><a name="t5"></a>长按拖拽 侧滑菜单结合使用</h2>

<ol>
<li>一直按住Item进行拖拽排序，支持List、Grid形式。  </li>
<li>长按拖拽并且和侧滑菜单结合使用。 </li>
</ol>

<p><img src="https://img-blog.youkuaiyun.com/20160825165803944" alt="List拖拽排序、菜单" title="">  <img src="https://img-blog.youkuaiyun.com/20160825165831257" alt="Grid拖拽排序、菜单" title=""></p>



<h2 id="直接滑动删除-长按拖拽item排序"><a name="t6"></a>直接滑动删除 长按拖拽Item排序</h2>

<ol>
<li>侧滑直接删除，也可以长按拖拽排序。  </li>
<li>可以指定某个Item不能被侧滑删除、不能被长按拖拽。  </li>
</ol>

<p><img src="https://img-blog.youkuaiyun.com/20160825165854882" alt="侧滑删除" title="">  <img src="https://img-blog.youkuaiyun.com/20160825165918116" alt="指定某一个不能拖拽、滑动删除" title=""></p>



<h2 id="竖型菜单-用自定义布局实现自己的菜单"><a name="t7"></a>竖型菜单 用自定义布局实现自己的菜单</h2>

<ol>
<li>给菜单设置排列方向，支持横向、竖向。  </li>
<li>开发者用库中的<code>SwipeMenuLayout</code>开发自己的侧滑菜单。  </li>
</ol>

<p><img src="https://img-blog.youkuaiyun.com/20160825165947038" alt="菜单排列方向" title="">  <img src="https://img-blog.youkuaiyun.com/20160825170008351" alt="自定义菜单" title=""></p>



<h1 id="使用介绍"><a name="t8"></a>使用介绍</h1>

<p>这里列出关键实现，具体请参考demo，或者加最上面的交流群一起讨论。 更多教程请进入<a href="http://blog.youkuaiyun.com/yanzhenjie1003" target="_blank">我的博客</a>查看。</p>



<h2 id="启用swipereyclerview的长按item拖拽功能和侧滑删除功能"><a name="t9"></a>启用SwipeReyclerView的长按Item拖拽功能和侧滑删除功能</h2>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering">recyclerView.setLongPressDragEnabled(<span class="hljs-keyword">true</span>);<span class="hljs-comment">// 开启长按拖拽</span>
recyclerView.setItemViewSwipeEnabled(<span class="hljs-keyword">true</span>);<span class="hljs-comment">// 开启滑动删除。</span>
recyclerView.setOnItemMoveListener(onItemMoveListener);<span class="hljs-comment">// 监听拖拽和侧滑删除，更新UI和数据。</span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>



<h2 id="添加item侧滑菜单"><a name="t10"></a>添加Item侧滑菜单</h2>

<p>侧滑菜单支持自动打开某个Item的菜单，并可以指定是左边还是右边的：</p>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering"><span class="hljs-comment">// 打开第一个Item的左侧菜单。</span>
recyclerView.openLeftMenu(<span class="hljs-number">0</span>);

<span class="hljs-comment">// 打开第一个Item的右侧菜单。</span>
recyclerView.openRightMenu(<span class="hljs-number">0</span>);</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<ul>
<li>第一步，引用自定义View：SwipeMenuReyclerView：  </li>
</ul>



<pre class="prettyprint" name="code"><code class="language-xml hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">com.yanzhenjie.recyclerview.swipe.SwipeMenuRecyclerView
</span>    <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/recycler_view"</span>
    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>
    <span class="hljs-attribute">app:layout_behavior</span>=<span class="hljs-value">"@string/appbar_scrolling_view_behavior"</span> /></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<ul>
<li>第二步，设置菜单创建器、菜单点击监听：</li>
</ul>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering">SwipeMenuRecyclerView swipeMenuRecyclerView = findViewById(R.id.recycler_view);
<span class="hljs-comment">// 设置菜单创建器。</span>
swipeMenuRecyclerView.setSwipeMenuCreator(swipeMenuCreator);
<span class="hljs-comment">// 设置菜单Item点击监听。</span>
swipeMenuRecyclerView.setSwipeMenuItemClickListener(menuItemClickListener);</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<ul>
<li>第三步，菜单创建器创建菜单：</li>
</ul>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering"><span class="hljs-javadoc">/**
 * 菜单创建器。在Item要创建菜单的时候调用。
 */</span>
<span class="hljs-keyword">private</span> SwipeMenuCreator swipeMenuCreator = <span class="hljs-keyword">new</span> SwipeMenuCreator() {
    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreateMenu</span>(SwipeMenu swipeLeftMenu, SwipeMenu swipeRightMenu, <span class="hljs-keyword">int</span> viewType) {

        SwipeMenuItem addItem = <span class="hljs-keyword">new</span> SwipeMenuItem(mContext)
            .setBackgroundDrawable(R.drawable.selector_green)<span class="hljs-comment">// 点击的背景。</span>
            .setImage(R.mipmap.ic_action_add) <span class="hljs-comment">// 图标。</span>
            .setWidth(size) <span class="hljs-comment">// 宽度。</span>
            .setHeight(size); <span class="hljs-comment">// 高度。</span>
        swipeLeftMenu.addMenuItem(addItem); <span class="hljs-comment">// 添加一个按钮到左侧菜单。</span>

        SwipeMenuItem deleteItem = <span class="hljs-keyword">new</span> SwipeMenuItem(mContext)
            .setBackgroundDrawable(R.drawable.selector_red)
            .setImage(R.mipmap.ic_action_delete) <span class="hljs-comment">// 图标。</span>
            .setText(<span class="hljs-string">"删除"</span>) <span class="hljs-comment">// 文字。</span>
            .setTextColor(Color.WHITE) <span class="hljs-comment">// 文字颜色。</span>
            .setTextSize(<span class="hljs-number">16</span>) <span class="hljs-comment">// 文字大小。</span>
            .setWidth(size)
            .setHeight(size);
        swipeRightMenu.addMenuItem(deleteItem);<span class="hljs-comment">// 添加一个按钮到右侧侧菜单。.</span>

        <span class="hljs-comment">// 上面的菜单哪边不要菜单就不要添加。</span>
    }
};</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul></pre>

<p><strong>更多使用方法请参考Demo，或者加最上方的QQ群来交流。</strong></p>

<ul>
<li>第四步，继承SwipeMenuAdapter，和正常的Adapter一样使用：</li>
</ul>



<pre class="prettyprint" name="code"><code class="language-java hljs  has-numbering"><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MenuAdapter</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">SwipeMenuAdapter</span><<span class="hljs-title">MenuAdapter</span>.<span class="hljs-title">DefaultViewHolder</span>> {</span>

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getItemCount</span>() {
        <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> View <span class="hljs-title">onCreateContentView</span>(ViewGroup parent, <span class="hljs-keyword">int</span> viewType) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">null</span>;
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> ViewHolder <span class="hljs-title">onCompatCreateViewHolder</span>(View realContentView, <span class="hljs-keyword">int</span> viewType) {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">null</span>;
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onBindViewHolder</span>(MenuAdapter.DefaultViewHolder holder, <span class="hljs-keyword">int</span> position) {
    }
}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul></pre>

<p>就到这里，更多的细节，请参考Github上的demo和源码，<a href="https://github.com/yanzhenjie/SwipeRecyclerView" target="_blank">源码demo下载传送门</a>。  </p>

<hr>

<blockquote>
  <p>版权声明：转载必须注明本文转自严振杰的博客: <a href="http://blog.youkuaiyun.com/yanzhenjie1003" target="_blank">http://blog.youkuaiyun.com/yanzhenjie1003</a>  </p>
</blockquote></div>
        <script type="text/javascript">
            $(function () {
                $('pre.prettyprint code').each(function () {
                    var lines = $(this).text().split('\n').length;
                    var $numbering = $('<ul/>').addClass('pre-numbering').hide();
                    $(this).addClass('has-numbering').parent().append($numbering);
                    for (i = 1; i <= lines; i++) {
                        $numbering.append($('<li/>').text(i));
                    };
                    $numbering.fadeIn(1700);
                });
            });
        </script>
   
</div>