自定义Swift下拉刷新：替换默认转圈图标为自定义Logo方法咨询

嘿，我刚好熟这个！你已经用上那个Stack Overflow里的WebView加载进度方案了对吧？要把默认的旋转圆圈换成自己的Logo其实挺简单的，咱们一步步来：

1. 准备你的Logo资源 #

• 先把你的Logo图片（建议用透明背景的PNG/SVG，适配不同尺寸）放到项目的drawable目录下，比如命名为custom_loading_logo.png。
• 要是想适配不同分辨率，可以分别放到drawable-mdpi、drawable-hdpi等对应目录，保证在各种设备上显示清晰。

2. 修改加载布局文件 #

原来的方案里应该有个控制加载状态的布局（比如layout_progress.xml），你需要把默认的ProgressBar替换成ImageView，或者直接调整现有布局：

<!-- 替换前的默认进度条 -->
<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"/>

<!-- 替换后的自定义Logo布局 -->
<ImageView
    android:id="@+id/custom_loading_logo"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:layout_centerInParent="true"
    android:src="@drawable/custom_loading_logo"
    android:contentDescription="加载中"/>

如果想让Logo也有旋转动画（和默认圆圈一样的动态效果），可以给ImageView加个旋转动画：

• 先在anim目录下创建rotate_loading.xml动画文件：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:toDegrees="360"/>

• 然后在布局里给ImageView绑定这个动画，或者后续在代码里启动：

<ImageView
    ...
    android:animation="@anim/rotate_loading"/>

3. 修改代码逻辑（适配Kotlin/Java） #

原来的代码是在WebChromeClient的onProgressChanged方法里控制进度条的显示隐藏，现在换成Logo的话，调整对应的View逻辑就行：

Kotlin示例： #

// 初始化时找到自定义Logo的ImageView
val customLoadingLogo = findViewById<ImageView>(R.id.custom_loading_logo)

webView.webChromeClient = object : WebChromeClient() {
    override fun onProgressChanged(view: WebView?, newProgress: Int) {
        super.onProgressChanged(view, newProgress)
        when (newProgress) {
            100 -> {
                // 加载完成，隐藏Logo
                customLoadingLogo.visibility = View.GONE
            }
            else -> {
                if (customLoadingLogo.visibility == View.GONE) {
                    customLoadingLogo.visibility = View.VISIBLE
                    // 如果没在布局里绑定动画，这里手动启动旋转
                    val rotateAnim = AnimationUtils.loadAnimation(this@YourActivity, R.anim.rotate_loading)
                    customLoadingLogo.startAnimation(rotateAnim)
                }
            }
        }
    }
}

Java示例： #

ImageView customLoadingLogo = findViewById(R.id.custom_loading_logo);

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        if (newProgress == 100) {
            // 加载完成，隐藏Logo
            customLoadingLogo.setVisibility(View.GONE);
        } else {
            if (customLoadingLogo.getVisibility() == View.GONE) {
                customLoadingLogo.setVisibility(View.VISIBLE);
                // 如果没在布局里绑定动画，这里手动启动旋转
                Animation rotateAnim = AnimationUtils.loadAnimation(YourActivity.this, R.anim.rotate_loading);
                customLoadingLogo.startAnimation(rotateAnim);
            }
        }
    }
});

4. 额外优化小技巧 #

• 要是不想让Logo一直旋转，可以根据进度调整动画，比如进度到80%时停止旋转，不过一般保持旋转直到加载完成就够用了。
• 可以给Logo加个透明度渐变消失的效果，加载完成时慢慢隐去，体验更流畅：
  先在anim目录下创建fade_out.xml：

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"/>

然后在进度到100%时启动这个动画，动画结束后再隐藏：

val fadeOutAnim = AnimationUtils.loadAnimation(this@YourActivity, R.anim.fade_out)
fadeOutAnim.setAnimationListener(object : Animation.AnimationListener {
    override fun onAnimationStart(animation: Animation?) {}
    override fun onAnimationEnd(animation: Animation?) {
        customLoadingLogo.visibility = View.GONE
    }
    override fun onAnimationRepeat(animation: Animation?) {}
})
customLoadingLogo.startAnimation(fadeOutAnim)

内容的提问来源于stack exchange，提问作者Bob McCain