最近一直在做TV开发，有个需求是Webview需要显示滚动条，并且获得焦点时显示一种自定义颜色的滚动条，失去焦点时隐藏滚动条，于是研究了一番，用自定义的方式实现了。
1.代码如下：
private fun initView() {
webView!!.apply {
webView!!.settings.apply {
javaScriptEnabled = true
domStorageEnabled = true
useWideViewPort = false
loadWithOverviewMode = true
setSupportZoom(false)
builtInZoomControls = false
allowFileAccess = true
defaultTextEncodingName = “UTF-8”
}
}
webView.loadDataWithBaseURL(null, getString(R.string.content), “text/html”, “utf-8”, null)
}
2.实现获取焦点显示与隐藏代码如下：
private fun initListener() {
webView.onFocusChangeListener = View.OnFocusChangeListener { v, hasFocus ->
if (hasFocus) {
webView.isHorizontalScrollBarEnabled = false
webView.isVerticalScrollBarEnabled = true
} else {
webView.isHorizontalScrollBarEnabled = false
webView.isVerticalScrollBarEnabled = false
}
}
}
3.布局文件代码如下：
实现webview滚动条的属性如下：
android:fadeScrollbars=“false”//设置滚动条是否隐藏
android:focusable=“true”//获取焦点
android:scrollbarThumbVertical="@drawable/custom_scrollbar_focus"
android:scrollbarTrackVertical="@drawable/custom_scrollbar_normal"
android:scrollbars=“vertical”//焦点方向横向或者竖向
完整的布局代码如下：
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=“http://schemas.android.com/apk/res/android”
xmlns:app=“http://schemas.android.com/apk/res-auto”
xmlns:tools=“http://schemas.android.com/tools”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
tools:context=".MainActivity">
<TextView
android:id="@+id/tv_settlement_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:text="结算金额"
android:textColor="@color/white"
android:textSize="24sp" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/cl_invoice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/invoice_bg"
android:padding="20dp"
tools:ignore="MissingConstraints">
<TextView
android:id="@+id/tv_invoice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开票信息"
android:textColor="@color/black"
android:textSize="@dimen/text_size_14"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_account_information"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="查看我的账户资料"
android:textColor="#2E3BFF"
android:textSize="@dimen/text_size_12"
app:layout_constraintEnd_toEndOf="parent"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/public_14dp"
android:text="@string/company_name_string"
android:textColor="@color/c666666"
android:textSize="@dimen/text_size_14"
app:layout_constraintTop_toBottomOf="@+id/tv_invoice"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_Identification_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/public_13dp"
android:text="@string/taxpayer_identification_number_string"
android:textColor="@color/c666666"
android:textSize="@dimen/text_size_14"
app:layout_constraintTop_toBottomOf="@+id/tv_name"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/public_12dp"
android:ellipsize="end"
android:maxLines="3"
android:text="@string/company_address_string"
android:textColor="@color/c666666"
android:textSize="@dimen/text_size_14"
app:layout_constraintTop_toBottomOf="@+id/tv_Identification_number"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/public_12dp"
android:text="@string/work_phone_string"
android:textColor="@color/c666666"
android:textSize="@dimen/text_size_14"
app:layout_constraintTop_toBottomOf="@+id/tv_address"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_bank"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/public_13dp"
android:text="@string/bank_string"
android:textColor="@color/c666666"
android:textSize="@dimen/text_size_14"
app:layout_constraintTop_toBottomOf="@+id/tv_phone"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/tv_account_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/public_12dp"
android:text="@string/bank_account_string"
android:textColor="@color/c666666"
android:textSize="@dimen/text_size_14"
app:layout_constraintTop_toBottomOf="@+id/tv_bank"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
<WebView
android:id="@+id/webView"
android:layout_width="0dp"
android:layout_height="0dp"
android:fadeScrollbars="false"
android:focusable="true"
android:scrollbarThumbVertical="@drawable/custom_scrollbar_focus"
android:scrollbarTrackVertical="@drawable/custom_scrollbar_normal"
android:scrollbars="vertical"
app:layout_constraintBottom_toTopOf="@+id/btn_confirm_settlement"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cl_invoice" />
<Button
android:id="@+id/btn_confirm_settlement"
style="?android:attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="@dimen/public_40dp"
android:background="@drawable/btn_send_focus"
android:focusable="true"
android:text="@string/confirm_settlement"
android:textColor="@color/color_45D57B"
android:textSize="@dimen/text_size_16"
android:layout_margin="20dp"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
4.实现的效果如下：
5.可以看到当webview获取焦点时显示滚动条，失去焦点时隐藏滚动条，小伙伴们可以自己定义webview滚动条的颜色：
如下设置：android:scrollbarThumbVertical="@drawable/custom_scrollbar_focus"
android:scrollbarTrackVertical="@drawable/custom_scrollbar_normal"
drawable文件如下：
6.小伙伴们可以自己去尝试，根据需求实现自己的颜色，在代码中设置webView的滚动条颜色失败，直接报错了，所以用这种方法.