Android WebView Activity自定义Toolbar：展示页面标题、URL及安全连接状态

先给你明确答案 #

Android系统没有提供一款自带页面标题、URL显示和安全状态标识的WebView专用Toolbar。你提到的Twitter、YouTube、Telegram这类应用的同款样式，全都是它们各自开发团队自行定制的组件。

自定义实现步骤（手把手教你） #

如果要自己做一个功能一致的Toolbar，其实并不复杂，分这几步来：

1. 编写布局文件，定义自定义Toolbar #

先在你的WebView Activity布局里，把Toolbar和WebView组合起来，Toolbar内部嵌入安全图标、URL文本、页面标题这几个元素：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/webview_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary">

        <!-- 安全状态图标 -->
        <ImageView
            android:id="@+id/security_icon"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginStart="8dp"/>

        <!-- URL显示区域（自动省略过长文本） -->
        <TextView
            android:id="@+id/url_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_marginHorizontal="8dp"
            android:ellipsize="end"
            android:singleLine="true"
            android:textSize="14sp"/>

        <!-- 页面标题 -->
        <TextView
            android:id="@+id/page_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:textSize="16sp"
            android:textStyle="bold"/>

    </androidx.appcompat.widget.Toolbar>

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

</LinearLayout>

2. 在Activity中绑定逻辑，监听WebView状态 #

接下来要在Activity里初始化组件，通过WebView的回调来更新Toolbar的内容：

class WebViewActivity : AppCompatActivity() {
    private lateinit var webView: WebView
    private lateinit var toolbar: Toolbar
    private lateinit var urlTextView: TextView
    private lateinit var pageTitleTextView: TextView
    private lateinit var securityIcon: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_webview)

        // 初始化所有控件
        webView = findViewById(R.id.web_view)
        toolbar = findViewById(R.id.webview_toolbar)
        urlTextView = findViewById(R.id.url_text)
        pageTitleTextView = findViewById(R.id.page_title)
        securityIcon = findViewById(R.id.security_icon)

        // 把自定义Toolbar设为ActionBar，隐藏默认标题
        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayShowTitleEnabled(false)

        // 基础WebView配置
        val webSettings = webView.settings
        webSettings.javaScriptEnabled = true
        webSettings.domStorageEnabled = true

        // 监听页面标题变化
        webView.webChromeClient = object : WebChromeClient() {
            override fun onReceivedTitle(view: WebView?, title: String?) {
                super.onReceivedTitle(view, title)
                title?.let { pageTitleTextView.text = it }
            }
        }

        // 监听URL变化+更新安全状态
        webView.webViewClient = object : WebViewClient() {
            override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
                super.onPageStarted(view, url, favicon)
                url?.let {
                    urlTextView.text = it
                    updateSecurityStatus(it)
                }
            }

            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                // 页面加载完成后再更新一次，防止重定向后状态没刷新
                url?.let {
                    urlTextView.text = it
                    updateSecurityStatus(it)
                }
            }

            // 判断当前链接是否为HTTPS安全连接
            private fun updateSecurityStatus(url: String) {
                val isSecure = url.startsWith("https://")
                if (isSecure) {
                    // 显示安全图标（比如锁形）
                    securityIcon.setImageResource(R.drawable.ic_secure)
                    securityIcon.setColorFilter(ContextCompat.getColor(this@WebViewActivity, R.color.green))
                } else {
                    // 显示不安全图标（比如带斜杠的锁）
                    securityIcon.setImageResource(R.drawable.ic_insecure)
                    securityIcon.setColorFilter(ContextCompat.getColor(this@WebViewActivity, R.color.red))
                }
            }
        }

        // 加载传入的初始URL
        val initialUrl = intent.getStringExtra("TARGET_URL") ?: "https://www.example.com"
        webView.loadUrl(initialUrl)
    }

    // 处理返回键，优先让WebView返回上一页
    override fun onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack()
        } else {
            super.onBackPressed()
        }
    }
}

3. 细节优化与扩展 #

• 图标准备：找两个矢量图标（安全/不安全状态），放到drawable目录下，替换代码里的ic_secure和ic_insecure。
• 交互增强：可以给URL TextView加点击事件，实现复制URL、分享URL的功能；或者给安全图标加弹窗，显示SSL证书信息。
• 进度条扩展：如果想加加载进度条，可以在Toolbar里添一个ProgressBar，然后在WebChromeClient的onProgressChanged方法中更新进度。
• 权限注意：记得在AndroidManifest.xml里添加<uses-permission android:name="android.permission.INTERNET"/>权限。

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