Como usar o SwipeRefreshLayout?

Question

Fundo

O Google publicou recentemente uma atualização para sua biblioteca de suporte, que agora tem um novo "SwipeRefreshLayout" visualizar.

A visualização permite agrupar outra visualização, ao mesmo tempo em que suporta deslizar para baixo para realizar uma operação de atualização.

captura de tela:

O problema

O Google não forneceu uma amostra (pelo menos nenhuma que eu possa encontrar ainda), então tentei usá-la sozinho.

No começo, eu travava (NPE) sempre que deslizava, mas depois descobri que era porque não forneci um "OnRefreshListener" para ele.

Mas ainda não sei como usá-lo e muito menos personalizá-lo

Aqui está o XML do arquivo de layout:

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.swiperefreshlayouttest.MainActivity"
    tools:ignore="MergeRootFrame" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TTT"
                android:textSize="40sp" />
        </LinearLayout>
    </ScrollView>

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

Código, embora não faça nada de especial:

public class MainActivity extends ActionBarActivity
  {
  @Override
  protected void onCreate(final Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final SwipeRefreshLayout swipeRefreshLayout=(SwipeRefreshLayout)findViewById(R.id.container);
    swipeRefreshLayout.setOnRefreshListener(new OnRefreshListener()
      {
        @Override
        public void onRefresh()
          {
          // do nothing
          }
      });
    }
  }

A questão

Qual é a maneira correta de usar essa visualização?

Como faço para personalizá-lo?Atualmente é apenas uma linha preta...

Answer 1

Não sei o que é isso ActionBarActivity classe que você está estendendo é, mas consegui funcionar muito bem usando um FragmentActivity

public class ActivityMain extends FragmentActivity implements OnRefreshListener {

    private SwipeRefreshLayout mSwipeRefreshLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_main);
        mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.container);
        mSwipeRefreshLayout.setOnRefreshListener(this);

        super.onCreate(savedInstanceState);
    }

    @Override
    public void onRefresh() {
        Toast.makeText(this, "Refresh", Toast.LENGTH_SHORT).show();
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mSwipeRefreshLayout.setRefreshing(false);
            }
        }, 2000);
    }
}

Vale ressaltar que copiei e colei seu layout xml exatamente como está

Em termos de personalização, não há muito que você possa fazer além de alterar a cor da barra colorida chamando setColorScheme(int colorResId, int colorResId, int colorResId, int colorResId);

por exemplo.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="blue">#0099CC</color>
    <color name="purple">#9933CC</color>
    <color name="green">#669900</color>
    <color name="orange">#FF8800</color>

</resources>

mSwipeRefreshLayout.setColorScheme(R.color.blue, R.color.purple, R.color.green, R.color.orange);

É realmente uma adição decepcionante.A sensibilidade na atualização é bastante alta e não há configuração para alterá-la

Editar

Eu escrevi isso quando esta aula (e a ActionBarActivity class) acabou de ser adicionado ao SDK.Como tal, algumas coisas mudaram desde quando escrevi esta resposta.Além disso, o tipo de atividade que você usa não deve afetar esta solução.

setColorScheme agora está obsoleto, setColorSchemeResources(int... colorResIds) deve ser usado em seu lugar.(você pode colocar quantos IDs de cores quiser).

setDistanceToTriggerSync(int distance) também pode ser usado para definir até que ponto um usuário precisa deslizar para acionar uma atualização.

Recomendo conferir o documentação oficial para ver o que mais a classe tem a oferecer.

Answer 2

MainActivity.java

public class MainActivity extends ActionBarActivity {
    TextView textView;
    private SwipeRefreshLayout mSwipeRefreshLayout;
    static int count = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    textView = (TextView) findViewById(R.id.scrollTextView);

    // /You will setup the action bar with pull to refresh layout
    mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.container);

     mSwipeRefreshLayout.setColorScheme(R.color.blue,
     R.color.green, R.color.orange, R.color.purple);
    mSwipeRefreshLayout.setOnRefreshListener(new OnRefreshListener() {
        @Override
        public void onRefresh() {
            Log.e(getClass().getSimpleName(), "refresh");
            new GetLinks().execute();
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
}

public class GetLinks extends AsyncTask<Void, Void, Void> {
    @Override
    protected void onPreExecute() {
        super.onPreExecute();

    }

    @Override
    protected Void doInBackground(Void... params) {

        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {

            e.printStackTrace();

        }
        return null;
    }

    @Override
    protected void onPostExecute(Void result) {
        super.onPostExecute(result);
         //Here you can update the view
        textView.setText(textView.getText().toString()+"--New Content Added" + ++count);

        // Notify swipeRefreshLayout that the refresh has finished
        mSwipeRefreshLayout.setRefreshing(false);
    }

}

}

atividade_main.xml

<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/scrollTextView"
                android:text="TTT"
                android:textSize="40sp" />
    </ScrollView>

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

cores.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <item name="blue" type="color">#FF33B5E5</item>
    <item name="purple" type="color">#FFAA66CC</item>
    <item name="green" type="color">#FF99CC00</item>
    <item name="orange" type="color">#FFFFBB33</item>

</resources>

Answer 3

Por favor, veja o seguinte para um exemplo: http://developer.android.com/Amostras / SwiperefreshlayoutBasic / index.html

Answer 4

Você pode simplesmente seguir o método abaixo (estou usando o SwipeLayout na lista expansível) test.xml

  <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/RelativeTop"
        android:background="@drawable/listbg" >

        <ExpandableListView
            android:id="@+id/lvExp"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:cacheColorHint="@android:color/transparent"
            android:groupIndicator="@null"
            android:listSelector="@android:color/white" />
    </android.support.v4.widget.SwipeRefreshLayout>

ListHeader.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/sectionbg"
         android:orientation="horizontal"
         android:padding="8dp" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:contentDescription="@string/contentdescription"
    android:src="@drawable/expandbtn" />

<TextView
    android:id="@+id/lblListHeader"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="3dp"
    android:text="this is test"
    android:textColor="@android:color/white"
    android:textSize="17sp" />

ChildItem.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:background="@color/GrayProductBackground" >

<TextView
    android:id="@+id/lblListItem"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginLeft="35dp"
    android:layout_marginRight="20dp"
    android:gravity="center_vertical"
    android:paddingBottom="5dp"
    android:textColor="@color/GrayTextProduct"
    android:textSize="17sp" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignRight="@+id/lblListItem"
    android:layout_centerVertical="true"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:contentDescription="@string/arrowdescription"
    android:gravity="center"
    android:src="@drawable/navigationarrow" />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="1dp"
    android:layout_alignParentBottom="true"
    android:background="@android:color/white" >
</RelativeLayout>

cores usadas

<color name="pDarkGreen">#8ec549</color>
<color name="pDarskSlowGreen">#c1f57f</color>
<color name="pLightGreen">#f7ffed</color>
<color name="pFullLightGreen">#d6d4d4</color>

Mainactivity.java

        swipeView = (SwipeRefreshLayout) findViewById(R.id.swipe2);
        swipeView.setColorSchemeResources(R.color.pDarkGreen, R.color.Gray, R.color.Yellow, R.color.pFullLightGreen);

swipeView.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
                @Override
                public void onRefresh() {

                        swipeView.setRefreshing(false);

                    }
                    (new Handler()).postDelayed(new Runnable() {
                        @Override
                        public void run() {

                            Log.d("Swipe", "Refreshing Number");

                        }
                    }, 0);
                }
            });

Você pode definir swipeView.setRefreshing(false); Falso ou verdadeiro de acordo com sua exigência, este mecanisam de onda funcionará no nível de API All Android

Answer 5

SwipeRefreshLayout com Kotlin

Código do arquivo XML

 <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:layout_width="0dp"
        android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="90dp" app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="93dp" app:layout_constraintEnd_toEndOf="parent"
        android:id="@+id/swipe_refresh_layout"
>
    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="0dp"
            android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="90dp" app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginBottom="93dp" app:layout_constraintEnd_toEndOf="parent"
            android:id="@+id/recyclerView"
    />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Código de atividade

Declare o seguinte código acima do método oncreate

    var mSwipeRefreshLayout: SwipeRefreshLayout? = null

Declare o seguinte código dentro do método oncreate após a linha setContentView

mSwipeRefreshLayout= findViewById<SwipeRefreshLayout>(R.id.swipe_refresh_layout)
mSwipeRefreshLayout!!.setOnRefreshListener {
   //API Calls
}

Em caso de chamada de API bem-sucedida ou falha em chamadas de API

                mSwipeRefreshLayout!!.isRefreshing = false

Answer 6

atividade_main.xml

 <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe_refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:visibility="gone"/>

MainActivity.java

public class MainActivity extends AppCompatActivity
    implements SwipeRefreshLayout.OnRefreshListener {

      static ViewPager viewPager;

     @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh_layout);
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    swipeRefreshLayout.setOnRefreshListener(this);
    swipeRefreshLayout.post(new Runnable() {
                                @Override
                                public void run() {
                                    swipeRefreshLayout.setRefreshing(true);
                                    setupViewPager(viewPager);
                                }
                            }
    );
}



 private void setupViewPager(ViewPager viewPager) {


swipeRefreshLayout.setRefreshing(false);


 }


}