Android WebView带动画展开/收起（View More）功能实现求助

我完全理解你遇到的问题——那个ExpandableLayout库确实不太适配WebView，而且它的展开收起逻辑太生硬，不符合电商App里常见的「指定高度折叠/平滑展开」的需求。下面给你两个经过验证的可行方案，都是业内常用的实现方式：

方案一：自定义容器+ValueAnimator控制高度 #

这个方案通过自定义ViewGroup包裹WebView，用属性动画平滑修改容器高度，精准控制折叠/展开的状态，完全适配WebView的特性。

步骤1：编写布局文件 #

<!-- 自定义容器包裹WebView -->
<com.yourpackage.ExpandableWebViewContainer
    android:id="@+id/expand_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="true">

    <WebView
        android:id="@+id/content_webview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</com.yourpackage.ExpandableWebViewContainer>

<!-- View More按钮 -->
<Button
    android:id="@+id/view_more_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="View More"
    android:layout_gravity="center_horizontal"/>

步骤2：实现自定义容器类 #

public class ExpandableWebViewContainer extends FrameLayout {
    private int collapsedHeight; // 折叠状态的固定高度（比如200dp）
    private int expandedHeight; // WebView内容的实际高度
    private boolean isExpanded = false;
    private ValueAnimator heightAnimator;

    public ExpandableWebViewContainer(Context context) {
        this(context, null);
    }

    public ExpandableWebViewContainer(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ExpandableWebViewContainer(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 初始化折叠高度（转成像素）
        collapsedHeight = dp2px(200);
    }

    // dp转px工具方法
    private int dp2px(int dp) {
        return (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
    }

    // 设置WebView加载完成后的实际高度
    public void setExpandedHeight(int height) {
        expandedHeight = height;
        // 默认设置为折叠状态
        getLayoutParams().height = collapsedHeight;
        requestLayout();
    }

    // 切换展开/折叠状态
    public void toggleExpand() {
        if (heightAnimator != null && heightAnimator.isRunning()) {
            heightAnimator.cancel();
        }

        int targetHeight = isExpanded ? collapsedHeight : expandedHeight;
        heightAnimator = ValueAnimator.ofInt(getHeight(), targetHeight);
        heightAnimator.setDuration(300); // 动画时长，可按需调整
        heightAnimator.addUpdateListener(animation -> {
            int currentHeight = (int) animation.getAnimatedValue();
            getLayoutParams().height = currentHeight;
            requestLayout();
        });
        heightAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                isExpanded = !isExpanded;
                // 切换WebView的滚动权限：折叠时禁止滚动，展开时允许
                WebView webView = (WebView) getChildAt(0);
                webView.setScrollContainer(isExpanded);
            }
        });
        heightAnimator.start();
    }

    public boolean isExpanded() {
        return isExpanded;
    }
}

步骤3：在页面中绑定逻辑 #

WebView webView = findViewById(R.id.content_webview);
ExpandableWebViewContainer container = findViewById(R.id.expand_container);
Button viewMoreBtn = findViewById(R.id.view_more_btn);

// 配置WebView（根据你的需求添加设置）
webView.getSettings().setJavaScriptEnabled(true);

// 监听WebView加载完成，获取内容实际高度
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 计算WebView内容的实际像素高度
        int contentHeight = (int) (view.getContentHeight() * view.getScale());
        container.setExpandedHeight(contentHeight);
        
        // 如果内容高度小于折叠高度，隐藏View More按钮
        if (contentHeight <= dp2px(200)) {
            viewMoreBtn.setVisibility(View.GONE);
        }
    }
});

// 按钮点击事件
viewMoreBtn.setOnClickListener(v -> {
    container.toggleExpand();
    viewMoreBtn.setText(container.isExpanded() ? "View Less" : "View More");
});

// 复用dp转px方法
private int dp2px(int dp) {
    return (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}

方案二：用ConstraintLayout+Guideline实现 #

如果你不想自定义ViewGroup，可以用系统自带的ConstraintLayout配合Guideline，通过修改约束实现动画效果，代码更简洁。

步骤1：编写ConstraintLayout布局 #

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <WebView
        android:id="@+id/content_webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/fold_guideline" />

    <!-- 控制WebView底部位置的Guideline -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/fold_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="200dp" />

    <Button
        android:id="@+id/view_more_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View More"
        app:layout_constraintTop_toBottomOf="@id/fold_guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

步骤2：绑定页面逻辑 #

WebView webView = findViewById(R.id.content_webview);
Guideline guideline = findViewById(R.id.fold_guideline);
Button viewMoreBtn = findViewById(R.id.view_more_btn);
ConstraintLayout mainLayout = findViewById(R.id.main_layout);
boolean isExpanded = false;
final int collapsedPos = dp2px(200);
int expandedPos = 0;

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 计算展开时Guideline的位置（父布局底部减去按钮高度）
        expandedPos = mainLayout.getHeight() - viewMoreBtn.getHeight();
    }
});

viewMoreBtn.setOnClickListener(v -> {
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.clone(mainLayout);
    // 设置Guideline的目标位置
    int targetPos = isExpanded ? collapsedPos : expandedPos;
    constraintSet.setGuidelineBegin(R.id.fold_guideline, targetPos);
    
    // 应用过渡动画
    TransitionManager.beginDelayedTransition(mainLayout);
    constraintSet.applyTo(mainLayout);
    
    isExpanded = !isExpanded;
    viewMoreBtn.setText(isExpanded ? "View Less" : "View More");
    webView.setScrollContainer(isExpanded);
});

private int dp2px(int dp) {
    return (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}

关键注意事项 #

1. WebView高度获取时机：必须在onPageFinished之后获取内容高度，否则会得到不准确的值；如果页面有懒加载内容，可以配合WebChromeClient的onProgressChanged判断加载完成状态。
2. 滚动权限控制：折叠状态下一定要禁用WebView的滚动（setScrollContainer(false)），避免用户滑动查看隐藏内容。
3. 边界情况处理：如果WebView内容高度小于折叠高度，要隐藏View More按钮，避免无效交互。

内容的提问来源于stack exchange，提问作者WiL BaJaMas