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

已于 2023-09-08 14:24:42 修改
阅读量1.6k 收藏
点赞数
分类专栏： AndroidTV开发 文章标签： kotlin webview android
于 2021-02-08 01:46:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012556114/article/details/113750501
版权

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源码如下:

https://gitee.com/jackning_admin/custom-web-view-scroll-bar

淡淡的香烟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
android tv webview,聊聊Android中的WebView控件
weixin_32911063的博客
05-26 1026
软硬件环境Macbook Pro MGX 72Android Studio 1.4坚果手机、Genymotion模拟器前言WebView是Android中用来显示网页内容的一个控件。随着前端技术的不断发展，WebView也被使用得越来越普遍，更有甚者，有的App只有一个WebView控件，所有的内容与事件响应都在服务器端中进行，这在Android TV中比较常见。常规使用方法要想使用WebView...
Android之 WebView的使用
qq_29848853的博客
04-25 7118
WebView的使用
Android WebView访问网页+自动播放视频+自动全屏+切换横屏
飞机火车巴雷特的博客
02-26 5591
Android WebView网页访问在线视频并自动全屏横屏播放的简单实现
2024年安卓最全android中自定义WebView显示网页或本地html文件(1)，面试灵魂三问
最新发布
2401_84123213的博客
05-15 366
我一直以来都有整理练习大厂面试题的习惯，有随时跳出舒服圈的准备，也许求职者已经很满意现在的工作，薪酬，觉得习惯而且安逸。不过如果公司突然倒闭，或者部门被裁减，还能找到这样或者更好的工作吗？我建议各位，多刷刷面试题，知道最新的技术，每三个月可以去面试一两家公司，因为你已经有不错的工作了，所以可以带着轻松的心态去面试，同时也可以增加面试的经验。我可以将最近整理的一线互联网公司面试真题+解析分享给大家，大概花了三个月的时间整理2246页，帮助大家学习进步。
Android 自定义纵向滚动调，自定义垂直滚动条，自定义Webview滚动条
chengzhenjia的博客
11-14 788
项目中有一个需求说要做自定义滚动条，而且要求滚动条在webview的左边，一看UI设计稿就蒙了，于是网上找了一堆结果发现没几个有用的要么就是要用积分换，泱泱大国内卷至此无语的很，还去Android bus上找了下，结果发现大背景下啥都不行。于是一怒之下自己写了一个！！！废话不多说直接上效果图原理：继承View自己写了一个控件。
android tv webview,Android TV开发---WebView焦点处理
weixin_29051245的博客
05-26 1624
背景开发的Android TV应用时，有一个做题模块用到了WebView做为题目和选项的展示容器问题对于正常的文字内容来说，在相应元素中使用tabindex属性即可实现焦点的简单控制，但是此处展示的题目和选项会涉及到公式，相应位置已用MathJax做了转换，经过转换后用图形化的公式替代了文字符号描述，在焦点控制上就出现了问题，这些公式会获取到焦点，导致遥控器在选项间切换时焦点会跳到公式上，无法正确...
Android自定义 WebView浏览器
01-05
WebView是Android中一个非常实用的组件，它和Safai、Chrome一样都是基于Webkit网页渲染引擎，可以通过加载HTML数据的方式便捷地展现软件的界面。 在布局文件中添加和<Button/>控件， 在布局文件中添加<WebView...
Android WebView自定义长按选择实现收藏/分享选中文本功能
08-30
Android WebView自定义长按选择实现收藏/分享选中文本功能 Android WebView 是 Android 中的一个组件，允许开发者在应用程序中显示 web 内容。但是，Android WebView 的长按选择功能是有限的，无法满足一些特殊的...
Android自定义webView头部进度加载效果
01-20
就是自己画一条进度线（大家应该都会吧）然后加载到WebView的上面，开始进度条是隐藏的，进度线初始值为1，然后为了效果好一点，初始少于10的进度都让它加载到10的位置，等进度到100的时候0.2秒后隐藏。 请记得添加...
Android WebView实现网页滚动截图
08-27
在Android开发中，WebView是一种非常重要的组件，它允许我们在应用程序中嵌入并显示网页内容。然而，有时我们可能需要对整个网页进行截图，而不仅仅是当前屏幕显示的部分。这就是Android WebView实现网页滚动截图的...
Android 之 WebView (网页视图)基本用法
leyang0910的博客
07-08 7011
答：Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件！
Android WebView滚动条不显示说明
lidongxiu0714
08-01 7570
WebView常用的地方是作为列表详情页展示，右侧滚动条可以很好的展示详情页刷到了哪个位置，还有多久才能到底。 滚动条展示的简单设置： mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); mWebView.setVerticalScrollBarEnabled(true); mWebView.setHoriz...
Android TV上 WebView播放视屏与TV自带画中画不兼容处理及分析
热门推荐
dev晴天的博客
10-17 1万+
最近在做TV上的h5与安卓的交互工作，话说Android 原生WebView坑真的多，上次碰到个低版本webview播放视屏时视屏有混音的bug，高版本的webView上无此问题。经过一番调查发现前端代码写的不太兼容，修改webview的框架不太现实，最终在前端的代码上优化掉了这个bug。这次又碰到了画中画相关的bug，究其原因还是webview框架不够完善。还好google在不断迭代者系统webview的版本。但是兼容问题确实不好分析，需要你了解很多知识才能定位。今天就在这里分享下这次的心得！ 背景 图
设置Webview的滚动条属性- 滚动条白边解决方法
hyshucom
04-13 1027
我以前一篇文章说用Webview来显示网页，但是很多人用了以后发现，右侧的滚动条占据的地方出现了白边。 这个小的困扰造成软件界面的缺陷，真是令人不舒服。 这个问题应如何解决呢？ 经过一段困扰，研究终于解决了，加入这个语句 mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); 就行了。 例如： ........
vue实现TV端长图浏览组件----可以遥控器上下滑动适配各种机型
u012556114的博客
10-24 1728
vue实现长图浏览组件----可以遥控器上下滑动适配各种机型
Android TV上下翻屏
cc198506192的博客
05-28 1650
Android TV上下翻屏效果 效果 https://github.com/SandyTown/PagePanel/blob/master/art/device-2020-05-28-154418.mp4 插入视频代码： 插入gif代码： 插入视频代码： 插入gif代码：
Android TV 自定义Listview平滑滑动
cike123_的博客
02-20 313
由于在TV上面的操作不是通过手指来滑动，需要用遥控器来操作，所以Listview中item的焦点处理就显得很重要，但自带的listview会有一个缺点导致操作体验不是很好，那就是item的焦点会随着上下按键显示在最上方和最下方，而且也没有动画效果。
android webview自定义,android 自定义WebView实现网页加载
weixin_28872105的博客
05-25 1079
现在的实际项目中一般是少不了混合开发的，通常加载页面我们都需要一个WebView，为了美观我们还需要一个用于显示当前加载进度的进度条。接下来就看看我们自定义的WebView：*** Created by SerryWang* on 2018/8/23*/public class ProgressWebView extends WebView {private ProgressBar progres...
关于webview的设置（滚动条、自适应屏幕、缩放按钮）
林静月下的博客
08-29 1万+
（一）去掉滚动条
android自定义webview
06-10
要自定义WebView，您需要继承WebView类并重写它的方法以实现所需的功能。以下是一个简单的自定义WebView示例： ``` public class CustomWebView extends WebView { public CustomWebView(Context context) { super(context); init(); } public CustomWebView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CustomWebView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { // 在此处添加您的自定义初始化代码 } @Override public void loadUrl(String url) { // 在此处添加您的自定义加载代码 super.loadUrl(url); } @Override public WebSettings getSettings() { // 在此处添加您的自定义设置代码 return super.getSettings(); } // 在此处添加其他自定义方法和重写的方法 } ``` 在这个示例中，我们创建了一个名为CustomWebView的类，它继承自WebView类，并重写了loadUrl和getSettings方法。您可以在这些方法中添加自定义代码，以实现您的需求。同时，您也可以添加其他自定义方法和重写的方法，以满足您的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值