AndroidTV开发10实现自定义WebView及滚动条颜色

AndroidTV开发10实现自定义WebView及滚动条颜色

前言：

之前做了一段时间的TV开发，有个需求是Webview在TV中遥控器上下滑动的时候需要显示滚动条，并且获得焦点时显示一种自定义颜色的滚动条，失去焦点时隐藏滚动条，于是研究了一番，用自定义的方式实现了。

1.初始化WebView：

  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.焦点事件WebView隐藏显示代码：

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"//焦点方向横向或者竖向

4.完整的布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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>

5.实现的效果如下：

由于这是在TV上开发的控件，所有在TV上面预览和操作效果更佳，当然手机也可以使用。上下滑动即可.

6.自定义webview滚动条颜色：

可以看到当webview获取焦点时显示滚动条，失去焦点时隐藏滚动条，小伙伴们可以自己定义webview滚动条的颜色：
​
设置如下：
​
android:scrollbarThumbVertical="@drawable/custom_scrollbar_focus"
android:scrollbarTrackVertical="@drawable/custom_scrollbar_normal"
drawable文件如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
​
    <solid android:color="@color/color_45D57B" />
    <corners android:radius="4dp" />
    <size android:width="4dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />
​
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
​
    <solid android:color="@color/color_e1e6f0" />
    <corners android:radius="4dp" />
    <size android:width="4dp"/>
    <padding
        android:left="0.5dp"
        android:right="0.5dp" />
​
</shape>

7.自定义WebView:

/**
 *@author:njb
 *@date:2021/2/1
 *@desc:
 */
class MyCustomWebView @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : WebView(context, attrs, defStyleAttr) {
​
}

8.完整的测试代码如下：

package com.example.webviewcustomscrollbar
​
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*
​
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        initView()
        initListener()
    }
​
    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)
    }
​
    private fun initListener() {
        webView.onFocusChangeListener = View.OnFocusChangeListener { v, hasFocus ->
            if (hasFocus) {
                webView.isHorizontalScrollBarEnabled = false
                webView.isVerticalScrollBarEnabled = true
            } else {
                webView.isHorizontalScrollBarEnabled = false
                webView.isVerticalScrollBarEnabled = false
            }
        }
    }
}

9.总结：

以为就是今天的内容使用Kolin自定义WebVIew滚动条颜色，在TV开发中是一个非常友好的体验,小伙伴们可以自己去尝试，根据需求实现自己的颜色，在代码中设置webView的滚动条颜色失败，直接报错了，所以最后采用这种方式.如果您有更好的方式给我留言，我会努力改正，一起学习~~

10.demo源码如下:

gitee.com/jackning_ad...