仿IOS版QQ水滴下拉刷新,添加上拉加载、左滑删除

关注

原创最新推荐文章于 2026-10-08 10:31:05 发布 3.3k 阅读 AI 写同款· GEO 优化 ›

iOS版QQ的黏性下拉刷新效果简易实现前言对于市面上用户群体较大的App来说，Android和iOS两个版本的某些部分的使用体验有些差异。这种现象的起因或归结于平台的操作系统本身的不同，也可以想成是充分利用平台本身提供的资源，打造符合其使用习惯的应用。为了和文题相关，这里就举例QQ来说明。Android版本的下拉刷新就是一个翻转的小箭头效果，而iOS版本的却是其平台本身很经典的牛皮糖(黏性)效果。考虑到Tencent在后来推出针对强迫症阅读详情

转载请注明出处:
http://blog.youkuaiyun.com/guodongAndroid/article/details/51516451
本文来自:【孫小逗的博客】

1、概述

哈，对于我这样的菜鸟来说，看着大神们的博客总想啥子时候自己也能写博客啊。别说你不知道有哪些大神？好吧，比如，我一直关注的鸿神,还有让我买了第一本Android书籍的郭大侠。好了，就说这些吧。

效果如下：

2、整合

前面已经说了，像我这样学了不到1年Android的菜鸟哪会写这么高大上的控件啊。菜鸟就得站在巨人的肩膀上的飞啊。

言过正传，其实看到这个效果大家肯定不陌生，其实这是两个控件的结合体，哪两个控件呢。首先感谢两位作者！嘿嘿，悄悄的告诉你PullLayout和SwipeMenuListView，相信后面的控件大家都比较熟悉，Github上很火的ListView侧滑控件。

3、布局

首先在build.gradle中加入两个控件的依赖：

compile 'com.xiaosu:pullLayout:1.4.1'
compile 'com.baoyz.swipemenulistview:library:1.3.0'

接下来就是布局文件中使用了：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:sgd="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.xiaosu.pulllayout.PullLayout
        android:id="@+id/pulllayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        sgd:theme="@style/pull_style">

        <com.baoyz.swipemenulistview.SwipeMenuListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:dividerHeight="5dp"/>
    </com.xiaosu.pulllayout.PullLayout>
</LinearLayout>

首先我们在LinearLayout中声明了一个命名空间sgd，下面的PullLayout使用了自定义的属性sgd:theme，是一个style，
好的，我们看下这个style：

<style name="pull_style">
        <item name="waterDropColor">@color/colorPrimaryDark</item>
        <item name="indicatorArrowColor">@color/colorPrimaryDark</item>
        <item name="loadStartColor">#FFFFFFFF</item>
        <item name="loadEndColor">@color/colorAccent</item>
        <item name="android:textColor">@color/colorPrimaryDark</item>
        <item name="refreshArrowColor">@android:color/holo_red_light</item>
</style>

里面定义了一些属性，比如，水滴的颜色，水滴里面刷新图片的颜色等，这些我们都可以去定义。

好的，回到我们的布局文件，可以看到，我们的SwipeMenuListView被PullLayout所包裹。之前在Github上也看到类似的效果，地址为Android-PullToRefresh-SwipeMenuListView-Sample，这个效果是PullToRefresh和SwipeMenuListView整合体，对侧滑有时会有冲突，有兴趣的朋友可以去看看。

那么布局好了该怎么使用呢？

4、使用

使用也是很简单的呀。Talk is cheap. Show me the code。

public class MainActivity extends AppCompatActivity implements PullLayout.OnPullCallBackListener
{

    @Bind(R.id.listview)
    SwipeMenuListView mListView;

    @Bind(R.id.pulllayout)
    PullLayout mPullLayout;

    private List<String> mLists = new ArrayList<>();

    private SwipeAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        init();
    }

    private void init()
    {
        mPullLayout.setOnPullListener(this);
        for (int i = 0; i < 20; i++)
        {
            mLists.add("This is the " + i + " Item");
        }
        mAdapter = new SwipeAdapter();

        mListView.setAdapter(mAdapter);

        SwipeMenuCreator creator = new SwipeMenuCreator() {

            @Override
            public void create(SwipeMenu menu) {
                // create "open" item
                SwipeMenuItem openItem = new SwipeMenuItem(
                        getApplicationContext());
                // set item background
                openItem.setBackground(new ColorDrawable(Color.rgb(0xC9, 0xC9,
                        0xCE)));
                // set item width
                openItem.setWidth(dp2px(90));
                // set item title
                openItem.setTitle("Open");
                // set item title fontsize
                openItem.setTitleSize(18);
                // set item title font color
                openItem.setTitleColor(Color.WHITE);
                // add to menu
                menu.addMenuItem(openItem);

                // create "delete" item
                SwipeMenuItem deleteItem = new SwipeMenuItem(
                        getApplicationContext());
                // set item background
                deleteItem.setBackground(new ColorDrawable(Color.rgb(0xF9,
                        0x3F, 0x25)));
                // set item width
                deleteItem.setWidth(dp2px(90));
                // set a icon
                deleteItem.setIcon(R.drawable.ic_delete);
                // add to menu
                menu.addMenuItem(deleteItem);
            }
        };

        // set creator
        mListView.setMenuCreator(creator);

        mListView.setOnMenuItemClickListener(new SwipeMenuListView.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(int position, SwipeMenu menu, int index) {
                switch (index) {
                    case 0:
                        break;
                    case 1:
                        AppMsg.makeText(MainActivity.this, "您关闭了:" + mAdapter.getItem(position), AppMsg.STYLE_CONFIRM).show();
                        mLists.remove(position);
                        mAdapter.notifyDataSetChanged();
                        break;
                }
                // false : close the menu; true : not close the menu
                return false;
            }
        });
    }

    @Override
    public void onRefresh()
    {
        postDelay(new Runnable()
        {
            @Override
            public void run()
            {
                mPullLayout.finishPull();
            }
        });
    }

    @Override
    public void onLoad()
    {
        postDelay(new Runnable()
        {
            @Override
            public void run()
            {
                mPullLayout.finishPull();
            }
        });
    }

    private void postDelay(Runnable action)
    {
        getWindow().getDecorView().postDelayed(action, 3000);
    }

    private int dp2px(int dp)
    {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }

    class SwipeAdapter extends BaseAdapter
    {

        @Override
        public int getCount()
        {
            return mLists.size();
        }

        @Override
        public String getItem(int position)
        {
            return mLists.get(position);
        }

        @Override
        public long getItemId(int position)
        {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent)
        {
            if (convertView == null)
            {
                convertView = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1, parent, false);
            }
            TextView text = (TextView) convertView;
            text.setText(mLists.get(position));
            return convertView;
        }
    }
}