Android refresh display data change animation

Keywords: Android github

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

Posted by Jason_London on Fri, 17 Apr 2020 09:40:35 -0700