How to implement Android pull to refresh

In Android applications such as Twitter (the official APP), when you encounter ListView, you can pull it down (and it bounces back when you publish) to refresh the content.

I want to know in your opinion, what is the best way to implement this method?

Some of the possibilities I can think of:

  1. Items at the top of the ListView - but I don't think scrolling back to item location 1 (starting from 0) using animation on the ListView is a simple task.
  2. Another view outside the ListView - but I need to pay attention to moving down the ListView position when pulling. I'm not sure if we can detect whether the drag of the ListView still actually scrolls the items on the ListView.

What's your suggestion?

PS I want to know when the official Twitter app source code will be released. It has been mentioned that it will be released, but it has been six months since then and we have not heard of it.

#1 building

In this link, you can find the branch of the famous pulltorrefresh view, which contains new interesting implementations such as PullTorRefreshWebView or PullToRefreshGridView, or you can add PullToRefresh at the bottom edge of the list.

https://github.com/chrisbanes/Android-PullToRefresh

The best is the perfect work in Android 4.1 (normal PullToRefresh doesn't work)

#2 building

Note that the UX issue needs to be resolved when implementing on Android and WP.

"A good indicator of why designers / developers should not implement pull refresh in iOS application style is that Google and their teams never use pull to refresh on Android when using it on iOS."

https://plus.google.com/109453683460749241197/posts/eqYxXR8L4eb

#3 building

I have a very simple way to do this, but now the surefire way to make sure of it is my code PullDownListView.java

package com.myproject.widgets;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ListView;

/**
 * @author Pushpan
 * @date Nov 27, 2012
 **/
public class PullDownListView extends ListView implements OnScrollListener {

    private ListViewTouchEventListener mTouchListener;
    private boolean pulledDown;

    public PullDownListView(Context context) {
        super(context);
        init();
    }

    public PullDownListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public PullDownListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        setOnScrollListener(this);
    }

    private float lastY;

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (ev.getAction() == MotionEvent.ACTION_DOWN) {
            lastY = ev.getRawY();
        } else if (ev.getAction() == MotionEvent.ACTION_MOVE) {
            float newY = ev.getRawY();
            setPulledDown((newY - lastY) > 0);
            postDelayed(new Runnable() {
                @Override
                public void run() {
                    if (isPulledDown()) {
                        if (mTouchListener != null) {
                            mTouchListener.onListViewPulledDown();
                            setPulledDown(false);
                        }
                    }
                }
            }, 400);
            lastY = newY;
        } else if (ev.getAction() == MotionEvent.ACTION_UP) {
            lastY = 0;
        }
        return super.dispatchTouchEvent(ev);
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        setPulledDown(false);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
    }

    public interface ListViewTouchEventListener {
        public void onListViewPulledDown();
    }

    public void setListViewTouchListener(
            ListViewTouchEventListener touchListener) {
        this.mTouchListener = touchListener;
    }

    public ListViewTouchEventListener getListViewTouchListener() {
        return mTouchListener;
    }

    public boolean isPulledDown() {
        return pulledDown;
    }

    public void setPulledDown(boolean pulledDown) {
        this.pulledDown = pulledDown;
    }
}

You only need to implement the ListViewTouchEventListener and set the listener on the activity you want to use this ListView

I implemented it in the PullDownListViewActivity

package com.myproject.activities;

import android.app.Activity;
import android.os.Bundle;

/**
 * @author Pushpan
 *
 */
public class PullDownListViewActivity extends Activity implements ListViewTouchEventListener {

    private PullDownListView listView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        listView = new PullDownListView(this);
        setContentView(listView);
        listView.setListViewTouchListener(this);

        //setItems in listview
    }

    public void onListViewPulledDown(){
        Log.("PullDownListViewActivity", "ListView pulled down");
    }
}

This works for me:)

#4 building

No one mentions the new "pull refresh" type, which appears at the top of the action bar, just like in Google Instant or Gmail applications.

ActionBar-PullToRefresh Libraries work exactly the same way.

#5 building

Finally, Google released an official version of the pull to refresh library!

It is called SwipeRefreshLayout in the support library, and the document is in the Here :

  1. Add SwipeRefreshLayout as the parent of the View and treat it as a pull to refresh layout. (for example, ListView can be any View such as LinearLayout, ScrollView, etc.)

    <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/pullToRefresh" android:layout_width="match_parent" android:layout_height="wrap_content"> <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent"/> </android.support.v4.widget.SwipeRefreshLayout>
  2. Add a monitor to your class

    protected void onCreate(Bundle savedInstanceState) { final SwipeRefreshLayout pullToRefresh = findViewById(R.id.pullToRefresh); pullToRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { refreshData(); // your code pullToRefresh.setRefreshing(false); } }); }

You can also call pullToRefresh.setRefreshing(true/false); as you request.

Tags: Android Google iOS github

Posted on Tue, 04 Feb 2020 13:07:52 -0500 by zcollvee