Comment implémenter Android Pull-to-Refresh

Dans les applications Android telles que Twitter (application officielle), lorsque vous rencontrez un ListView, vous pouvez le tirer vers le bas (et il rebondira lorsqu'il sera publié) pour actualiser le contenu.

Je me demande quelle est la meilleure façon, à votre avis, de mettre cela en œuvre?

Quelques possibilités auxquelles je pourrais penser:

1. Un élément au-dessus de ListView - mais je ne pense pas que revenir à la position 1 de l'élément (basé sur 0) avec une animation sur ListView soit une tâche facile.
2. Une autre vue en dehors de ListView - mais je dois prendre soin de déplacer la position de ListView vers le bas lorsqu'elle est tirée, et je ne suis pas sûr si nous pouvons détecter si les touches de glisser vers ListView font toujours vraiment défiler les éléments sur ListView.

Des recommandations?

PS Je me demande quand le code source officiel de l'application Twitter sera publié. Il a été mentionné qu'il serait publié, mais 6 mois se sont écoulés et nous n'en avons plus entendu parler depuis.

Enfin, Google a publié une version officielle de la bibliothèque pull-to-refresh!

Il est appelé SwipeRefreshLayout, à l'intérieur de la bibliothèque de support, et la documentation est ici :

1. Ajouter en SwipeRefreshLayouttant que parent de vue qui sera traité comme un pull pour rafraîchir la mise en page. (J'ai pris ListViewcomme exemple, ça peut être Viewcomme ça LinearLayout, ScrollViewetc.)

   <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. Ajoutez un auditeur à votre classe

   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);
           }
       });
   }
   

Vous pouvez également appeler pullToRefresh.setRefreshing(true/false);selon vos besoins.

MISE À JOUR

Les bibliothèques de support Android sont obsolètes et ont été remplacées par AndroidX. Le lien vers la nouvelle bibliothèque se trouve ici .

De plus, vous devez ajouter la dépendance suivante à votre projet:

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'

OU

Vous pouvez aller dans Refactor >> Migrer vers AndroidX et Android Studio gérera les dépendances pour vous.

J'ai essayé d'implémenter un composant pull to refresh, il est loin d'être complet mais montre une implémentation possible, https://github.com/johannilsson/android-pulltorefresh .

La logique principale est implémentée dans PullToRefreshListViewcette extension ListView. En interne, il contrôle le défilement d'une vue d'en-tête à l'aide de smoothScrollBy(API niveau 8). Le widget est maintenant mis à jour avec la prise en charge de la version 1.5 et ultérieure, veuillez lire le fichier README pour la prise en charge 1.5.

Dans vos mises en page, vous l'ajoutez simplement comme ceci.

<com.markupartist.android.widget.PullToRefreshListView
    android:id="@+id/android:list"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    />

J'ai également implémenté une bibliothèque PullToRefresh robuste, open source, facile à utiliser et hautement personnalisable pour Android. Vous pouvez remplacer votre ListView par le PullToRefreshListView comme décrit dans la documentation sur la page du projet.

https://github.com/erikwt/PullToRefresh-ListView

Je pense que la façon la plus simple est fournie par la bibliothèque de support Android:

android.support.v4.widget.SwipeRefreshLayout;

une fois importé, vous pouvez définir votre mise en page comme suit:

  <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refresh"
        android:layout_height="match_parent"
        android:layout_width="match_parent">
    <android.support.v7.widget.RecyclerView
        xmlns:recycler_view="http://schemas.android.com/apk/res-auto"
        android:id="@android:id/list"
        android:theme="@style/Theme.AppCompat.Light"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/button_material_light"
        >

    </android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>

Je suppose que vous utilisez la vue recycleur au lieu de la vue liste. Cependant, listview fonctionne toujours, il vous suffit donc de remplacer recyclerview par listview et de mettre à jour les références dans le code java (Fragment).

Dans votre fragment d'activité, vous implémentez d'abord l'interface,: SwipeRefreshLayout.OnRefreshListeneri, e

public class MySwipeFragment extends Fragment implements SwipeRefreshLayout.OnRefreshListener{
private SwipeRefreshLayout swipeRefreshLayout;

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_item, container, false);
        swipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.refresh);
        swipeRefreshLayout.setOnRefreshListener(this);
}


 @Override
  public void onRefresh(){
     swipeRefreshLayout.setRefreshing(true);
     refreshList();
  }
  refreshList(){
    //do processing to get new data and set your listview's adapter, maybe  reinitialise the loaders you may be using or so
   //when your data has finished loading, cset the refresh state of the view to false
   swipeRefreshLayout.setRefreshing(false);

   }
}

J'espère que cela aide les masses

Dans ce lien, vous pouvez trouver un fork de la fameuse PullToRefreshvue qui a de nouvelles implémentations intéressantes comme PullTorRefreshWebViewou PullToRefreshGridViewou la possibilité d'ajouter un PullToRefreshsur le bord inférieur d'une liste.

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

Et le meilleur, c'est que le travail est parfait dans Android 4.1 (la normale PullToRefreshne fonctionne pas)

J'ai un moyen très simple de le faire, mais maintenant je suis sûr que c'est la méthode infaillible. Il y a mon 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;
    }
}

Vous avez juste besoin d'implémenter ListViewTouchEventListener sur votre activité où vous souhaitez utiliser ce ListView et définir l'écouteur

Je l'ai implémenté dans 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");
    }
}

Ça marche pour moi :)

Pour implémenter Android Pull-to-Refresh, essayez ce morceau de code,

<android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/pullToRefresh"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ListView>

</android.support.v4.widget.SwipeRefreshLayout>

Classe d'activité:

ListView lv = (ListView) findViewById(R.id.lv);
SwipeRefreshLayout pullToRefresh = (SwipeRefreshLayout) findViewById(R.id.pullToRefresh);


lv.setAdapter(mAdapter);

pullToRefresh.setOnRefreshListener(new OnRefreshListener() {

        @Override
        public void onRefresh() {
            // TODO Auto-generated method stub

            refreshContent();

        }
    });



private void refreshContent(){ 

     new Handler().postDelayed(new Runnable() {
            @Override public void run() {
                pullToRefresh.setRefreshing(false);
            }
        }, 5000);

 }

Personne n'a mentionné le nouveau type de "Pull to refresh" qui s'affiche en haut de la barre d'action comme dans l'application Google Now ou Gmail.

Il existe une bibliothèque ActionBar-PullToRefresh qui fonctionne exactement de la même manière.

Notez qu'il y a des problèmes UX à gérer lors de la mise en œuvre sur Android et WP.

"Un excellent indicateur pour expliquer pourquoi les concepteurs / développeurs ne devraient pas implémenter le pull-to-refresh dans le style des applications iOS est la façon dont Google et leurs équipes n'utilisent jamais le pull-to-refresh sur Android alors qu'ils l'utilisent dans iOS."

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

Si vous ne voulez pas que votre programme ressemble à un programme iPhone forcé dans Android, visez une apparence et une sensation plus natives et faites quelque chose de similaire à Gingerbread:

J'ai écrit un pull pour actualiser le composant ici: https://github.com/guillep/PullToRefresh Cela fonctionne si la liste ne contient pas d'éléments, et je l'ai testée sur> = 1,6 téléphones Android.

Toute suggestion ou amélioration est appréciée :)

Je pense que la meilleure bibliothèque est: https://github.com/chrisbanes/Android-PullToRefresh .

Marche avec:

ListView
ExpandableListView
GridView
WebView
ScrollView
HorizontalScrollView
ViewPager

Pour obtenir la dernière actualisation Pull-To Lollipop:

1. Téléchargez le dernier SDK Lollipop et la bibliothèque de support Extras / Android
2. Définissez la cible de construction de Project sur Android 5.0 (sinon le package de support peut avoir des erreurs avec les ressources)
3. Mettez à jour vos libs / android-support-v4.jar vers la 21e version
4. Utiliser android.support.v4.widget.SwipeRefreshLayoutplusandroid.support.v4.widget.SwipeRefreshLayout.OnRefreshListener

Un guide détaillé peut être trouvé ici: http://antonioleiva.com/swiperefreshlayout/

De plus pour ListView, je recommande de lire canChildScrollUp()dans les commentaires;)

Pull-to-Refresh très intéressant par Yalantis . Gif pour iOS, mais vous pouvez le vérifier :)

<com.yalantis.pulltorefresh.library.PullToRefreshView
android:id="@+id/pull_to_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
    android:id="@+id/list_view"
    android:divider="@null"
    android:dividerHeight="0dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Nous devons d'abord savoir ce qu'est Pull pour rafraîchir la mise en page dans Android. nous pouvons appeler pull pour rafraîchir dans android comme glisser-rafraîchir. lorsque vous faites glisser l'écran de haut en bas, il effectuera une action basée sur setOnRefreshListener.

Voici un didacticiel qui montre comment implémenter Android Pull pour actualiser. J'espère que ça aide.