Android仿百度外卖自定义下拉刷新效果

Android仿百度外卖自定义下拉刷新效果

在开发 Android 应用中，下拉刷新是一个很常见的需求。本篇教程将会介绍如何仿百度外卖的下拉刷新效果。

1. 布局

在布局文件中添加一个 SwipeRefreshLayout 控件作为父控件，并把需要刷新的布局放在其中。

示例代码：

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/refresh_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

2. 自定义刷新布局

下拉刷新的视觉效果主要是通过自定义刷新布局来实现的。这里我们可以用 ProgressBar 和 ImageView 来模拟刷新过程。

示例代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal">

    <ImageView
        android:id="@+id/refresh_image"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_refresh" />

    <ProgressBar
        android:id="@+id/refresh_progress"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:visibility="gone" />

    <TextView
        android:id="@+id/refresh_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#999999"
        android:textSize="12sp" />

</LinearLayout>

3. 刷新监听

需要在代码中监听下拉刷新事件，并在刷新过程中显示自定义的刷新布局。

示例代码：

SwipeRefreshLayout refreshLayout = findViewById(R.id.refresh_layout);
refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        // 下拉刷新事件
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                // 刷新完成
                refreshLayout.setRefreshing(false);
            }
        }, 3000);
    }
});

final ImageView refreshImage = findViewById(R.id.refresh_image);
final ProgressBar refreshProgress = findViewById(R.id.refresh_progress);
final TextView refreshText = findViewById(R.id.refresh_text);
refreshText.setText("下拉刷新");
refreshLayout.setColorSchemeResources(R.color.colorAccent);
refreshLayout.setProgressViewOffset(false, 0, 100);
refreshLayout.setOnChildScrollUpCallback(new SwipeRefreshLayout.OnChildScrollUpCallback() {
    @Override
    public boolean canChildScrollUp(@NonNull SwipeRefreshLayout parent, @Nullable View child) {
        // 判断是否可下拉
        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
        return layoutManager != null && layoutManager.findFirstVisibleItemPosition() > 0;
    }
});
refreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        // 显示刷新布局
        refreshImage.setVisibility(View.GONE);
        refreshProgress.setVisibility(View.VISIBLE);
        refreshText.setText("正在刷新");
        // 刷新数据
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                // 隐藏刷新布局
                refreshImage.setVisibility(View.VISIBLE);
                refreshProgress.setVisibility(View.GONE);
                refreshText.setText("刷新完成");
                refreshLayout.setRefreshing(false);
            }
        }, 3000);
    }
});

通过以上几步，就可以实现仿百度外卖的下拉刷新效果了。我希望这篇教程对你的 Android 开发有所帮助。

阅读剩余 59%