สีพื้นหลังสไตล์ Android WebView: ละเว้นแบบไม่โปร่งใสบน android 2.2


156

ฉันพยายามสร้าง WebView ด้วยพื้นหลังโปร่งใส

webView.setBackgroundColor(0x00FFFFFF);
webView.setBackgroundDrawable(myDrawable);

จากนั้นฉันก็โหลดหน้า html ด้วย

<body style="background-color:transparent;" ...

สีพื้นหลังของ WebView นั้นโปร่งใส แต่ทันทีที่โหลดเพจมันจะถูกเขียนทับโดยพื้นหลังสีดำจากหน้า html สิ่งนี้เกิดขึ้นกับ android 2.2 เท่านั้นมันใช้งานได้กับ android 2.1

ดังนั้นมีบางอย่างที่จะเพิ่มในรหัสหน้า html เพื่อให้โปร่งใสจริงๆ?


1
ฉันขอโทษที่จะพูด แต่สำหรับปัญหาของฉันไม่มีวิธีแก้ปัญหาที่นี่ทำงาน ... : = (ขอบคุณเลย .. หน้าเว็บใช้พื้นหลังสีขาวเสมอ ...
cV2

คำตอบ:


291

สิ่งนี้ได้ผลสำหรับฉัน

mWebView.setBackgroundColor(Color.TRANSPARENT);

1
คุณได้ทดสอบระบบปฏิบัติการ 2.2 จริง ๆ หรือไม่?
jptsetung

87
ฉันพบว่าสิ่งนี้จะต้องเรียกว่าหลังจากโหลด URL หรือข้อมูล
Mark

11
มันใช้งานไม่ได้ใน android 3.x หากคุณใช้งานandroid:hardwareAccelerated="true"
Macarse

2
โปรดทราบว่าใน ICS (4.0.3) นอกเหนือจากความคิดเห็นด้านบน ฉันต้องปิดการใช้งาน "การตั้งค่า -> ตัวเลือกสำหรับนักพัฒนา -> บังคับให้แสดงผล GPU" เพื่อให้เกิดความโปร่งใสในการทำงานกับ API ระดับ 10
Aki

10
จริงๆแล้วฉันไม่เข้าใจว่าทำไมคำตอบนี้จึงได้รับการโหวตมากมาย webView.setBackgroundColor (0x00000000); เหมือนกับ webView.setBackgroundColor (0x00FFFFFF) ค่าอัลฟาคือ 0x00
jptsetung

128

ที่ด้านล่างของปัญหาที่กล่าวถึงก่อนหน้านี้มีวิธีแก้ไขคือ มันเป็นการรวมกันของ 2 โซลูชั่น

webView.setBackgroundColor(Color.TRANSPARENT);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

เมื่อเพิ่มรหัสนี้ไปยัง WebViewer หลังจาก โหลด URL แล้วจะใช้งานได้ (API 11+)

มันสามารถทำงานได้แม้ในขณะที่การเร่งความเร็วของฮาร์ดดิสก์เปิดอยู่


2
ทำงานได้ตราบใดที่ Webview ไม่สามารถเลื่อนได้
Rany Ishak

ฉันต้องการสีพื้นหลังชุดหลังจากการแสดงผลซอฟต์แวร์บังคับใน samsung S3
neworld

7
webView.setBackgroundColor (Color.argb (1, 0, 0, 0)); ถ้าคุณต้องการไม่มีพื้นหลังริบหรี่ในเลื่อน
Trent Seed

@Trent ฉันลองใช้วิธีการของคุณแล้วและหากแก้ไขปัญหาการสั่นไหวของ Jelly Bean แต่ตอนนี้มันแสดงพื้นหลังสีดำบน Gingerbread ข้อเสนอแนะอื่น ๆ ?
Tiago

2
สิ่งนี้จะปิดใช้งานการเร่งด้วยฮาร์ดแวร์สำหรับ Webview! ! นี่ไม่ชัดเจนสำหรับฉัน (กล่าวโทษฉันที่ไม่ได้ค้นหาก่อนใช้: D) และประโยคสุดท้ายของคำตอบทำให้ความประทับใจตรงกันข้าม สิ่งนี้มีผลกับหลายสิ่งหลายอย่างวิดีโอการแปลง UI การเลื่อนผ้าใบเป็นต้นการแก้ไขที่เป็นไปได้stackoverflow.com/a/17815574/2487876
Kristjan Liiva

36

ฉันมีปัญหาเดียวกันกับ 2.2 และใน 2.3 ฉันแก้ไขปัญหาโดยให้ค่า alpa ใน html ไม่ใช่ใน Android ฉันลองหลายสิ่งหลายอย่างและสิ่งที่ฉันพบคือsetBackgroundColor();สีใช้ไม่ได้กับค่าอัลฟา webView.setBackgroundColor(Color.argb(128, 0, 0, 0));จะไม่ทำงาน.

ดังนั้นนี่คือทางออกของฉันใช้งานได้สำหรับฉัน

      String webData = StringHelper.addSlashes("<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " +
      "content=\"text/html; charset=utf-8\"> </head><body><div style=\"background-color: rgba(10,10,10,0.5); " +
      "padding: 20px; height: 260px; border-radius: 8px;\"> $$$ Content Goes Here ! $$$ </div> </body></html>");

และในชวา

    webView = (WebView) findViewById(R.id.webview);
    webView.setBackgroundColor(0);
    webView.loadData(webData, "text/html", "UTF-8");

และนี่คือภาพหน้าจอผลลัพธ์ด้านล่างป้อนคำอธิบายรูปภาพที่นี่


สมบูรณ์แบบขอบคุณ!
Ayman Mahgoub

31

ที่จริงมันเป็นข้อผิดพลาดและไม่มีใครพบวิธีแก้ปัญหาเพื่อให้ห่างไกล มีการสร้างปัญหา ข้อผิดพลาดยังคงอยู่ในรังผึ้ง

โปรดติดดาวถ้าคุณคิดว่ามันสำคัญ: http://code.google.com/p/android/issues/detail?id=14749


22

นี่คือวิธีที่คุณทำ:

ก่อนอื่นให้สร้างฐานโครงการของคุณในวันที่ 11 แต่ใน AndroidManifest ตั้งค่า minSdkVersion เป็น 8

android: hardwareAccelerated = "false" ไม่จำเป็นและเข้ากันไม่ได้กับ 8

wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

this.wv.setWebViewClient(new WebViewClient()
{
    @Override
    public void onPageFinished(WebView view, String url)
    {
        wv.setBackgroundColor(0x00000000);
        if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }
});

เพื่อความปลอดภัยใส่ในสไตล์ของคุณ:

BODY, HTML {background: transparent}

ทำงานสำหรับฉันใน 2.2 และ 4


สิ่งนี้ใช้ได้กับฉัน: android: hardwareAccelerated = "false" BODY, HTML {พื้นหลัง: โปร่งใส}
jayellos

12

สิ่งที่สำคัญที่สุดไม่ได้กล่าวถึง

html ที่ต้องมีbodyแท็กกับชุดbackground-colortransparent

ดังนั้นวิธีแก้ปัญหาเต็มรูปแบบจะเป็น:


HTML

    <body style="display: flex; background-color:transparent">some content</body>

กิจกรรม

    WebView wv = (WebView) findViewById(R.id.webView);
    wv.setBackgroundColor(0);
    wv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    wv.loadUrl("file:///android_asset/myview.html");

มันถูกกล่าวถึงในคำถาม แต่นี่น่าจะเป็นเรซูเม่ที่ดีของสิ่งที่คุณต้องทำถ้าคุณต้องการให้มันทำงานบน Android ทุกรุ่น
jptsetung

9

โค้ดด้านล่างใช้งานได้ดีกับAndroid 3.0+แต่เมื่อคุณลองใช้รหัสนี้ด้านล่าง android 3.0 แอปของคุณจะปิดอย่างแรง

webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

คุณพยายามที่ด้านล่างรหัสบนAPI แล้วน้อยกว่า 11

webview.setBackgroundColor(Color.parseColor("#919191"));

หรือ

คุณสามารถลองใช้โค้ดด้านล่างซึ่งใช้ได้กับการปรับAPIทั้งหมด

    webview.setBackgroundColor(Color.parseColor("#919191"));
    if (Build.VERSION.SDK_INT >= 11) {
        webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }

รหัสข้างต้นใช้เต็มสำหรับฉัน


ฉันไม่แนะนำให้คุณตั้งค่า LayerType เป็น LAYER_TYPE_SOFTWARE มันลดประสิทธิภาพลงอย่างมากโดยเฉพาะเมื่อเลื่อน
Navarr

8

ลอง webView.setBackgroundColor(0);


1
ไม่มีความแตกต่างระหว่าง webView.setBackgroundColor (0x00FFFFFF); และ webView.setBackgroundColor (0x00) ทั้งสองควรเป็นสีโปร่งใส
jptsetung

7

รหัสต่อไปนี้ใช้งานได้สำหรับฉันแม้ว่าฉันจะมีหลาย webviews และการเลื่อนระหว่างพวกเขานั้นค่อนข้างซบเซา

v.setBackgroundColor(Color.TRANSPARENT);
Paint p = new Paint();
v.setLayerType(LAYER_TYPE_SOFTWARE, p); 

3
สิ่งนี้ใช้ได้กับ Honeycomb แต่น่าเสียดายที่ไม่ใช่ใน ICS ประณาม. แต่ถ้าคุณใช้มันจะง่ายกว่าที่จะระบุในไฟล์เลย์เอาต์โดยใช้คุณสมบัติ "android: layerType" เพราะมันจะทำงานได้ดีในรีลีสเก่าที่แท็กจะถูกละเว้น
เวน

2
สิ่งที่ทำงานได้แม้ใน ICS คือการยกเลิกการเร่งด้วยฮาร์ดแวร์สำหรับกิจกรรมทั้งหมดที่ใช้android:hardwareAccelerated="false"ใน AndroidManifest สำหรับactivityองค์ประกอบ
เวน

1
ไม่จำเป็นต้องสร้างวัตถุ 'ระบายสี' v.setLayerType(LAYER_TYPE_SOFTWARE, null);ยังจะทำงาน
Sergey Glotov


6
  • หลังจากลองทุกอย่างที่ได้รับด้านบน ฉันพบว่าไม่สำคัญว่าคุณจะระบุ
    webView.setBackgroundColor(Color.TRANSPARENT)ก่อนหรือหลัง/loadUrl()loadData()
  • สิ่งที่สำคัญคือคุณควรประกาศอย่างชัดเจนandroid:hardwareAccelerated="false"ในรายการ

ทดสอบบนIceCream Sandwich


3

เพียงใช้บรรทัดเหล่านี้ .....

webView.loadDataWithBaseURL(null,"Hello", "text/html", "utf-8", null);
webView.setBackgroundColor(0x00000000);

และจำจุดที่ตั้งค่าสีพื้นหลังเสมอหลังจากโหลดข้อมูลในเว็บวิว


3
webView.setBackgroundColor(0x00000000);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

สิ่งนี้จะใช้ได้แน่นอน .. ตั้งค่าพื้นหลังใน XML ด้วย Editbackground ตอนนี้พื้นหลังนั้นจะปรากฏขึ้น


2

ตั้งค่า bg หลังจากโหลด html (จากการทดสอบอย่างรวดเร็วดูเหมือนว่าการโหลด html จะรีเซ็ตสี bg .. สำหรับ 2.3)

หากคุณกำลังโหลด html จากข้อมูลที่คุณได้รับเพียงทำโพสต์ล่าช้าซึ่งคุณเพิ่งตั้ง bg (เป็นแบบโปร่งใส) ก็เพียงพอแล้ว ..


2

หาก webview สามารถเลื่อนได้:

  1. เพิ่มไปยังรายการ:

    android:hardwareAccelerated="false"

หรือ

  1. เพิ่มรายการต่อไปนี้ใน WebView ในโครงร่าง:

    android:background="@android:color/transparent"
    android:layerType="software"
  2. เพิ่มรายการต่อไปนี้ลงในมุมมองการเลื่อนพ่อแม่:

    android:layerType="software"


0

ฉันพยายามวางซ้อน HTML แบบโปร่งใสไว้ในมุมมอง GL ของฉัน แต่มีการกะพริบสีดำอยู่เสมอซึ่งครอบคลุมมุมมอง GL ของฉัน หลังจากหลายวันพยายามกำจัดริบหรี่นี้ฉันพบวิธีแก้ปัญหานี้ซึ่งเป็นที่ยอมรับสำหรับฉัน (แต่เป็นความอัปยศสำหรับ android)

ปัญหาคือฉันต้องการเร่งความเร็วฮาร์ดแวร์สำหรับภาพเคลื่อนไหว CSS ที่ดีและอื่น ๆ webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);ไม่ใช่ตัวเลือกสำหรับฉัน

เคล็ดลับคือการวางวินาที (ว่าง) WebViewระหว่างมุมมอง GL ของฉันและการซ้อนทับ HTML สิ่งนี้dummyWebViewฉันบอกให้แสดงในโหมด SW และตอนนี้การวางซ้อน HTML ของฉันทำให้ HW ราบรื่นขึ้นและไม่มีการริบหรี่สีดำอีกต่อไป

ฉันไม่ทราบว่าอุปกรณ์นี้ทำงานได้กับอุปกรณ์อื่นนอกเหนือจาก Acer Iconia A700 ของฉันหรือไม่ แต่ฉันหวังว่าฉันจะสามารถช่วยเหลือผู้อื่นได้

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);

        RelativeLayout layout = new RelativeLayout(getApplication());
        setContentView(layout);

        MyGlView glView = new MyGlView(this);

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

        dummyWebView = new WebView(this);
        dummyWebView.setLayoutParams(params);
        dummyWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        dummyWebView.loadData("", "text/plain", "utf8");
        dummyWebView.setBackgroundColor(0x00000000);

        webView = new WebView(this);
        webView.setLayoutParams(params);
        webView.loadUrl("http://10.0.21.254:5984/ui/index.html");
        webView.setBackgroundColor(0x00000000);


        layout.addView(glView);
        layout.addView(dummyWebView);
        layout.addView(webView);
    }
}

ฉันทดสอบสิ่งนี้บน Galaxy Nexus และยังคงกะพริบอยู่
Navarr

0

สิ่งนี้ใช้ได้สำหรับฉัน ลองตั้งค่าสีพื้นหลังหลังจากโหลดข้อมูลแล้ว สำหรับ setWebViewClient นั้นบนวัตถุ webview ของคุณเช่น:

    webView.setWebViewClient(new WebViewClient(){

        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            webView.setBackgroundColor(Color.BLACK);
        }
    });


0

หากไม่มีสิ่งใดช่วยได้คุณคงขนาดที่กำหนดไว้webViewให้เปลี่ยนความกว้างและความสูงเป็น wrap_content หรือmatch_parentควรทำงานได้ สิ่งนี้ใช้ได้กับฉันเมื่อฉันพยายามโหลด Gif


0

คุณสามารถผู้ใช้ BindingAdapter เช่นนี้:

ชวา

@BindingAdapter("setBackground")
public static void setBackground(WebView view,@ColorRes int resId) {
        view.setBackgroundColor(view.getContext().getResources().getColor(resId));
        view.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}

XML:

<layout >

    <data>

        <import type="com.tdk.sekini.R" />


    </data>

       <WebView
            ...
            app:setBackground="@{R.color.grey_10_transparent}"/>

</layout>

ทรัพยากร

<color name="grey_10_transparent">#11e6e6e6</color>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.