如何在Android应用WebView中实现Gmail式回复消息隐藏/显示按钮

要实现类似Gmail点击回复后隐藏原始消息到"..."按钮的效果，核心是在WebView加载的页面中通过HTML+CSS+JavaScript实现交互逻辑，Android端只需确保WebView支持JavaScript即可，具体步骤如下：

1. 前端页面实现 #

HTML结构 #

构建包含原始消息、折叠按钮和回复框的容器：

<div class="message-wrapper">
    <!-- 原始消息区域 -->
    <div class="original-content" id="originalContent">
        <p>这是需要折叠的原始消息内容，比如邮件正文、聊天记录等</p>
        <p>多行消息示例，测试折叠效果...</p>
    </div>
    <!-- 折叠/展开切换按钮 -->
    <button class="toggle-btn" id="toggleBtn" onclick="toggleContent()">...</button>
    <!-- 回复输入区域 -->
    <div class="reply-area">
        <textarea placeholder="输入回复内容"></textarea>
        <button id="replyBtn">发送回复</button>
    </div>
</div>

CSS样式 #

控制消息显示/隐藏的过渡效果，以及按钮样式：

.message-wrapper {
    margin: 15px;
    font-family: sans-serif;
}

.original-content {
    max-height: 600px; /* 设置足够显示完整内容的高度 */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* 添加平滑过渡动画 */
    padding-bottom: 10px;
}

.original-content.collapsed {
    max-height: 0; /* 折叠时高度设为0，隐藏内容 */
    padding-bottom: 0;
}

.toggle-btn {
    background: transparent;
    border: none;
    color: #1967d2; /* 用Gmail风格的蓝色 */
    cursor: pointer;
    font-size: 16px;
    padding: 8px 0;
}

.reply-area {
    margin-top: 10px;
}

.reply-area textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.reply-area button {
    margin-top: 8px;
    background: #1967d2;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

JavaScript交互逻辑 #

实现按钮点击切换折叠状态，以及点击回复按钮时自动折叠原始消息：

// 切换消息显示/隐藏
function toggleContent() {
    const content = document.getElementById('originalContent');
    const btn = document.getElementById('toggleBtn');
    
    content.classList.toggle('collapsed');
    // 切换按钮文本（可选，也可以固定显示"..."）
    btn.textContent = content.classList.contains('collapsed') ? '...' : '隐藏消息';
}

// 点击回复按钮时自动折叠原始消息
document.getElementById('replyBtn').addEventListener('click', () => {
    const content = document.getElementById('originalContent');
    const btn = document.getElementById('toggleBtn');
    
    if (!content.classList.contains('collapsed')) {
        content.classList.add('collapsed');
        btn.textContent = '...';
    }
    // 这里可以添加发送回复的逻辑
});

2. Android WebView配置 #

确保WebView启用JavaScript，加载上述前端页面：

Kotlin示例 #

val webView = findViewById<WebView>(R.id.web_view)
webView.apply {
    settings.javaScriptEnabled = true
    // 加载本地assets中的HTML文件
    loadUrl("file:///android_asset/message_page.html")
    // 如果是加载远程页面，直接传入对应URL：loadUrl("https://your-domain.com/message.html")
}

Java示例 #

WebView webView = findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///android_asset/message_page.html");

关键细节说明 #

• 使用max-height过渡而非display: none，可以实现平滑的折叠/展开动画，更贴近Gmail的体验。
• 按钮样式可以根据需求调整，比如添加hover效果、调整字体大小等。
• 如果需要和Android原生交互（比如点击按钮触发原生弹窗），可以通过addJavascriptInterface实现，但本功能不需要额外原生交互。

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