Como usar o SwipeRefreshLayout?
-
21-12-2019 - |
Pergunta
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...
Solução
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.
Outras dicas
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>
Por favor, veja o seguinte para um exemplo: http://developer.android.com/Amostras / SwiperefreshlayoutBasic / index.html
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
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
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);
}
}