【问题标题】:How to set backGround color Black and text white in android webview如何在android webview中设置背景颜色黑色和文本白色
【发布时间】:2013-09-24 06:43:15
【问题描述】:
package com.example.webviewtheme;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {
WebView webview1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        webview1=(WebView)findViewById(R.id.webView1);

        String rawHTML = "<HTML>"+  
         "<body style='color: #000000; background-color: #ffffff'><h1>Hello Android </h1></body>"+  
     "</HTML>";
        webview1.setBackgroundColor(00000000);
        webview1.loadData(rawHTML, "text/HTML", "UTF-8");
    }

}

这是我的代码,我想设置 webView 的背景颜色黑色和文本白色,我尝试在 Html 中应用但无法输出,请帮助我如何在 Webview 文本和背景中设置夜间模式

【问题讨论】:

标签: android


【解决方案1】:

使用这个

webview1=(WebView)findViewById(R.id.webView1);
    String rawHTML = "<HTML>"+ 
     "<head>"+"<style  type=\"text/css\">"+
     "body,h1{color: #000000;"+
     "background-color: #ffffff;}"+
     "</style></head>"+
     "<body><h1>Hello Android </h1></body>"+  
 "</HTML>";
    webview1.loadData(rawHTML, "text/html; charset=UTF-8",null);

6 月 20 日更新:

如果您想在加载完成后更改网页 css(例如使用 loadUrl 加载 webPageAddress 时),您可以这样做:

  • webView上设置javascript启用

    webView.getSettings().setJavaScriptEnabled(true);
    
  • 在页面加载完成时设置监听器

    webView.setWebViewClient(new WebViewClient() {
       @Override
       public void onPageFinished(WebView view, String url) {
          // Inject CSS on PageFinished
          injectCSS();
          super.onPageFinished(view, url);
       }
    });
    
  • 注入 CSS

    private void injectCSS() {
      webView.loadUrl(
        "javascript:document.body.style.setProperty(\"color\", \"white\");"
      );
      webView.loadUrl(
        "javascript:document.body.style.setProperty(\"background-color\", \"black\");"
      );
    }
    

【讨论】:

  • 谢谢。你节省了我宝贵的时间。
  • @Parthi 很高兴我能帮助你:)
  • 我们如何使用 loadUrl 做同样的事情,因为我使用外部 url 在 webview 中加载数据
【解决方案2】:

这里有一些东西可以将 Javascript 注入网页以使其反转颜色:

String js ="javascript: ("
                    +"function () { "

                    +"var css = 'html {-webkit-filter: invert(100%);' +"
                    +"    '-moz-filter: invert(100%);' + "
                    +"    '-o-filter: invert(100%);' + "
                    +"    '-ms-filter: invert(100%); }',"

                    +"head = document.getElementsByTagName('head')[0],"
                    +"style = document.createElement('style');"

                    +"if (!window.counter) { window.counter = 1;} else  { window.counter ++;"
                    +"if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter:    invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}"
                    +"};"

                    +"style.type = 'text/css';"
                    +"if (style.styleSheet){"
                    +"style.styleSheet.cssText = css;"
                    +"} else {"
                    +"style.appendChild(document.createTextNode(css));"
                    +"}"

                    //injecting the css to the head
                    +"head.appendChild(style);"
                    +"}());";

                    CustomWebView.this.loadUrl(js);

【讨论】:

  • 这个过滤器很好,但在我的 4.4 设备上它会使文本模糊。
【解决方案3】:

好的,这不在文档中,也不推荐,但它会起作用:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    webview.loadUrl("http://en.wikipedia.org/wiki/Lena_S%C3%B6derberg");
    try {
        Class clsWebSettingsClassic = 
            getClassLoader().loadClass("android.webkit.WebSettingsClassic");
        Method md = clsWebSettingsClassic.getMethod(
                "setProperty", String.class, String.class);
        md.invoke(webview.getSettings(), "inverted", "true");
        md.invoke(webview.getSettings(), "inverted_contrast", "1");
    } catch (Exception e) {}
}

这将对 WebView 进行反向渲染。
“inverted_contrast”的范围大约是 1 到 30(不太确定)。
android 4.2测试结果:

http://i.imgur.com/IWsRcAW.png

【讨论】:

  • 它也对我有用...使用这种颜色的字体和其他颜色是黑色或白色...我们可以得到它的颜色吗?我需要 webview 中的夜间模式...谢谢。!!
  • 它抛出 ClassNotFoundException。我查看了调试器 - getSettings() 返回 WebSettings 实例。
【解决方案4】:

webview.setBackgroundColor(0) 使 webview 透明。

您需要在 HTML 标签 bg 中设置 bg 颜色为黑色。

【讨论】:

    【解决方案5】:

    在java类中给出以下内容

    webView1.setBackgroundColor(0);
    

    并设置xml中文本的颜色

    【讨论】:

      【解决方案6】:

      在 XML 中

      <WebView
                  android:id="@+id/web"
                  android:layout_width="fill_parent"
                  android:layout_height="fill_parent"
                  android:background="@android:color/black" />
      

      在java代码中

      String str="<div style=\'background-color:transparent;padding: 5px ;color:#white'>Enter text to display in web view</div";
      WebView web=(WebView)findViewById(R.id.web);
      web.loadData(str,"text/html","utf-8");
      web.setBackgroundColor(Color.TRANSPARENT);
      

      【讨论】:

      • 其实我想为白天模式和夜间模式应用主题设置。
      【解决方案7】:

      嘿,这可能对你有帮助

      dialogMesage.setBackgroundColor(0x00000000);
      

      myWebView.setBackgroundColor(Color.parseColor("#FFFFFF"));
      

      【讨论】:

        【解决方案8】:

        将这个用于 webview 背景颜色:

           import android.os.Bundle;
        import android.app.Activity;
        import android.view.Menu;
        import android.webkit.WebView;
        
        public class MainActivity extends Activity {
        
            WebView webview1;
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
        
        
                webview1=(WebView)findViewById(R.id.webview1);
        
                String text = "<html><head>"
                          + "<style type=\"text/css\">body{color: #fff; background-color: #000;}"
                          + "</style></head>"
                          + "<body>"                          
                          + "Helloo Andorid"
                          + "</body></html>";
        
                webview1.loadData(text, "text/html", "utf-8");
                webview1.setBackgroundColor(00000000);
            }
        
        }
        

        这对我有用..

        【讨论】:

        • 我已经为日间模式添加了另一个按钮,其中我已经设置了背景底白我将如何做到这一点
        • 你必须为同一个网页视图应用背景白色?
        【解决方案9】:

        您可以使用 WebView 的父级反转颜色。

        1. 您需要在父级中实现反转。我使用的是FrameLayout,但您可以使用其他形式的布局。

          public class WebViewInverter extends FrameLayout {
               public WebViewInverter(Context context) {
                  super(context);
                  init();
              }
          
              public WebViewInverter(Context context, AttributeSet attrs) {
                  super(context, attrs);
                  init();
              }
          
              public WebViewInverter(Context context, AttributeSet attrs, int defStyleAttr) {
                  super(context, attrs, defStyleAttr);
                  init();
              }
          
              public WebViewInverter(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
                  super(context, attrs, defStyleAttr, defStyleRes);
                  init();
              }
          
              private boolean nightMode = false;
          
              private Paint paint = new Paint(); 
              private ColorFilter cf;
              private Rect inversionRect;
          
              @Override protected void dispatchDraw(Canvas c){
                      inversionRect = new Rect(0, 0, getWidth(), getHeight());
                      Bitmap b = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888);
                      Canvas cc = new Canvas(b);
                      super.dispatchDraw(cc);
                      paint.setColorFilter(null);
                      c.drawBitmap(b, 0, 0, paint);
                      paint.setColorFilter(cf);
                      c.drawBitmap(b, inversionRect, inversionRect, paint);
              }
          
              private void init(){
                  float[] mat = new float[]
                  {
                      -1,  0,  0, 0,  255,
                       0, -1,  0, 0,  255,
                       0,  0, -1, 0,  255,
                       0,  0,  0, 1,  0
                  };
                  cf = new ColorMatrixColorFilter(new ColorMatrix(mat));
              }
          
          }
          
        2. 将您的WebView 放置在您的布局文件中的逆变器内:

          <your.package.name.WebViewInverter
              android:id="@+id/view_inverter"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:layout_weight="1"
              android:layout_marginLeft="@dimen/reader_side_margins"
              android:layout_marginTop="@dimen/reader_top_margin"
              android:layout_marginRight="@dimen/reader_side_margins"
              android:layout_marginBottom="@dimen/reader_bottom_margin">
          
              <ru.yandex.reader.widget.ReaderView
                  android:id="@+id/view_reader"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"/>
          
          </your.package.name.WebViewInverter>
          

        WebView 应该倒置。

        【讨论】:

          【解决方案10】:

          Android 有内置的夜间模式主题,称为 Theme.AppCompat.DayNight 主题

          <style name="MyTheme" parent="Theme.AppCompat.DayNight"> <!-- Blah blah --> </style>

          要了解更多,如何实现此功能,请查看下面的链接

          https://medium.com/@chrisbanes/appcompat-v23-2-daynight-d10f90c83e94

          【讨论】:

            猜你喜欢
            • 2017-09-04
            • 2021-12-03
            • 2010-11-22
            • 1970-01-01
            • 1970-01-01
            • 2017-04-23
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多