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

一笑的小酒馆2023-09-08 17:15

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

前言：

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

1.初始化WebView：

ini 复制代码 
  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隐藏显示代码：

ini 复制代码 
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.布局文件代码如下：

ini 复制代码 
实现webview滚动条的属性如下：
android:fadeScrollbars="false"//设置滚动条是否隐藏
android:focusable="true"//获取焦点
android:scrollbarThumbVertical="@drawable/custom_scrollbar_focus"
android:scrollbarTrackVertical="@drawable/custom_scrollbar_normal"
android:scrollbars="vertical"//焦点方向横向或者竖向

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

ini 复制代码 
<?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滚动条颜色：

ini 复制代码 
可以看到当webview获取焦点时显示滚动条，失去焦点时隐藏滚动条，小伙伴们可以自己定义webview滚动条的颜色：
​
设置如下：
​
android:scrollbarThumbVertical="@drawable/custom_scrollbar_focus"
android:scrollbarTrackVertical="@drawable/custom_scrollbar_normal"
drawable文件如下：
xml 复制代码 
<?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 复制代码 
<?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:

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

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

kotlin 复制代码 
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...

相关推荐
fie88892 小时前
MySQL：Prepared Statement 预处理语句
android·数据库·mysql
wu_android2 小时前
android 网络视图 手机相册
android·智能手机
VirusVIP2 小时前
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
android·ide·android studio
androidwork4 小时前
嵌套滚动交互处理总结
android·java·kotlin
fatiaozhang95275 小时前
中兴B860AV1.1强力降级固件包
android·adb·电视盒子·av1·机顶盒rom·魔百盒刷机
橙子199110167 小时前
Kotlin 中的 Object
android·开发语言·kotlin
AD钙奶-lalala11 小时前
android:foregroundServiceType详解
android
大胃粥14 小时前
Android V app 冷启动(13) 焦点窗口更新
android
fatiaozhang952718 小时前
中兴B860AV1.1_晨星MSO9280芯片_4G和8G闪存_TTL-BIN包刷机固件包
android·linux·adb·电视盒子·av1·魔百盒刷机
fatiaozhang952719 小时前
中兴B860AV1.1_MSO9280_降级后开ADB-免刷机破解教程（非刷机）
android·adb·电视盒子·av1·魔百盒刷机·移动魔百盒·魔百盒固件
热门推荐
01零代码入门 | Coze——让大模型接入自己的数据库02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04Coze扣子平台完整体验和实践（附国内和国际版对比）05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07扣子空间的使用教程与大模型技术思考08海康Visionmaster-常见问题排查方法-启动阶段09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10苹果iPhone 16 Pro Max上手体验:性能极致释放