Preface
Let's first look at an effect and expand the content of this article.
Realization
After a general App is refreshed, it will show how much content or update has been added. It is common for news or live broadcast. So, how to achieve this effect?
Pull down to refresh. After getting the latest data of the server, the size of the data collection will be compared with the original, and the required value or the work will be completed by the server.
The next step is to display the data through animation
Using class library
The animation can be realized by itself, this time with the help of a third-party class library ViewAnimator Realize cool special effects, refresh and use SmartRefresh.
Import class library reference
//Refresh - SmartRefreshLayout compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.0.4-7' //Smooth Android animation library compile 'com.github.florent37:viewanimator:1.0.5@aar'
Layout file
<com.scwang.smartrefresh.layout.SmartRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/refreshLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:srlEnableLoadmore="true"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello World!" /> <RelativeLayout android:id="@+id/rl_top_toast" android:layout_width="match_parent" android:layout_height="30dp" android:background="#D6E9F6" android:visibility="gone"> <TextView android:id="@+id/tv_toast" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="@string/live_toast" android:textColor="#3393D5" android:textSize="12sp" /> </RelativeLayout> </RelativeLayout> </com.scwang.smartrefresh.layout.SmartRefreshLayout>
Refresh animation
private void setListener() { refreshLayout.setOnRefreshListener(new OnRefreshListener() { @Override public void onRefresh(RefreshLayout refreshlayout) { showToast(new Random().nextInt(10) + 1); refreshlayout.finishRefresh(); } }); } private void showToast(int num) { tvToast.setText(String.format(getResources().getString(R.string.live_toast), num + "")); rlTopToast.setVisibility(View.VISIBLE); ViewAnimator.animate(rlTopToast) .newsPaper() .duration(1000) .start() .onStop(() -> ViewAnimator.animate(rlTopToast) .bounceOut() .duration(1000) .start()); }
Effect
Reference resources:
RefreshAnimal