筆記：WebView的圖片居中問題

1、后臺給一段json數(shù)據(jù)（里面是HTML的body數(shù)據(jù)）
2、WebView加載這段數(shù)據(jù)(主要是加載圖片)
3、Webview展示的內(nèi)容(主要是圖片)要居中，自適應(yīng)屏幕

WebView webView;
webView = (WebView)findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);//支持js注入
        WebSettings webSettings = webView.getSettings();//獲取webview的設(shè)置
        //html的圖片就會以單列顯示就不會變形占了別的位置
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webSettings.setUseWideViewPort(true); // 將內(nèi)容調(diào)整到適合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 設(shè)置加載進來的頁面自適應(yīng)手機屏幕
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return true;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
               // top4 = F.id(R.id.ll_top4).getView().getTop()-  F.id(R.id.ll_tit_det).getView().getHeight();
            }
        });


主要是以下代碼
//后臺給的數(shù)據(jù)
String url = "\n" +
                "  <p style=\"margin:0;width:0;height:0;overflow:hidden;\"><img src=\"http://img.alicdn.com/imgextra/i4/T2s4moXH8XXXXXXXXX-350475995.png?p=recommend_v2_6840830_start_top_1\" /></p> \n" +
                "  <table width=\"750\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" bgcolor=\"#ffffff\" align=\"center\" style=\"width:750.0px;margin:0 auto;line-height:1.5;text-align:left;color:#000000;font-size:12.0px;word-wrap:normal;\"> \n" +
                "   <tbody>\n" +
                "    <tr> \n" +
                "     <td> \n" +
                "      <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\"> \n" +
                "       <tbody>\n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i6/TB1u2f8cXuWBuNjSspnYXF1NVXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565381764227&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i5/TB1_L.ccamWBuNjy1XaYXFCbXXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565380680096&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i1/TB1hwJAcCBYBeNjy0FeYXHnmFXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565567762817&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i1/889086618/TB2YsD7aYSYBuNjSspfXXcZCpXa_!!889086618.jpg_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565030012218&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i7/TB1rjOxlY_I8KJjy1XaYXHsxpXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=563868786523&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i7/TB1VUDDXSr85uJjSZPiYXHOBFXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=560134228244&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i3/889086618/TB2vtfae6uhSKJjSspjXXci8VXa_!!889086618.jpg_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=559631326666&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i2/889086618/TB2R_YVa29TBuNjy0FcXXbeiFXa_!!889086618.jpg_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=565270371113&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "         <td width=\"234\"> \n" +
                "          <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" bgcolor=\"#f3f2f2\"> \n" +
                "           <tbody>\n" +
                "            <tr> \n" +
                "             <td background=\"https://img.alicdn.com/bao/uploaded/i6/TB1KW9biILJ8KJjy0FnYXIFDpXa_M2.SS2_250x250.jpg\" style=\"background-repeat:no-repeat;background-position:50.0% 50.0%;\"> <a href=\"http://item.taobao.com/item.htm?id=562755256676&amp;source=superboss&amp;appId=113\" target=\"_blank\" style=\"height:250.0px;display:block;\"></a> </td> \n" +
                "            </tr> \n" +
                "           </tbody>\n" +
                "          </table> </td> \n" +
                "         <td width=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "        <tr> \n" +
                "         <td colspan=\"7\" height=\"12\"> &nbsp; </td> \n" +
                "        </tr> \n" +
                "       </tbody>\n" +
                "      </table> </td> \n" +
                "    </tr> \n" +
                "   </tbody>\n" +
                "  </table> \n" +
                "  <p style=\"margin:0 0 5.0px 0;width:0;height:0;overflow:hidden;\"><img src=\"http://img.alicdn.com/imgextra/i4/T2s4moXH8XXXXXXXXX-350475995.png?p=recommend_v2_6840830_end_top_1\" /></p>\n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2e8vOqC3PL1JjSZFxXXcBBVXa_!!889086618.jpg\" align=\"absmiddle\" /></p> \n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2PW9ehaagSKJjy0FhXXcrbFXa_!!889086618.jpg\" align=\"absmiddle\" /></p> \n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2qUIJlwoQMeJjy1XaXXcSsFXa_!!889086618.jpg\" align=\"absmiddle\" /></p> \n" +
                "  <p><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2mPjgllUSMeJjy1zjXXc0dXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2qJSYgvNNTKJjSspfXXbXIFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2IJK2lbsTMeJjSsziXXcdwXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2tm8ZhjihSKJjy0FlXXadEXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2v814lbsTMeJjy1zeXXcOCVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB20W58gvBNTKJjSszeXXcu2VXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2Co1UlbsTMeJjSszdXXcEupXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2xnaKlgMPMeJjy1XdXXasrXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2u.5LgvBNTKJjSszcXXbO2VXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2ZUPRlgoQMeJjy0FoXXcShVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2NEjulgMPMeJjy1XbXXcwxVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2W8VVhjqhSKJjSspnXXc79XXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2JebDlgMPMeJjy1XcXXXpppXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2dT9KlgMPMeJjy1XdXXasrXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB28.aKlgMPMeJjy1XdXXasrXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB24q83haagSKJjy0FcXXcZeVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2tvPXlbsTMeJjy1zcXXXAgXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2U2K2lbsTMeJjSsziXXcdwXXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2C2nbgvNNTKJjSspcXXb4KVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2PI2klgoQMeJjy1XaXXcSsFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2lZTqlgoQMeJjy0FnXXb8gFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2Gq03haigSKJjSsppXXabnpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB28YduhjihSKJjy0FeXXbJtpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB26CCMllUSMeJjy1zkXXaWmpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2u80EhjihSKJjy0FfXXbGzFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2isp3haagSKJjy0FcXXcZeVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i3/889086618/TB2c2YDlgMPMeJjy1XcXXXpppXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB25inrlgoQMeJjy0FpXXcTxpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB25yvrlgoQMeJjy0FpXXcTxpXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2SFW0lbsTMeJjSszgXXacpFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i4/889086618/TB2nURZhjuhSKJjSspaXXXFgFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2eXy5lbsTMeJjy1zeXXcOCVXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i1/889086618/TB2U3SYlbwTMeJjSszfXXXbtFXa_!!889086618.jpg\" align=\"absmiddle\" /><img style=\"max-width:750.0px;\" src=\"http://img.alicdn.com/imgextra/i2/889086618/TB2btx3haagSKJjy0FcXXcZeVXa_!!889086618.jpg\" align=\"absmiddle\" /> </p>\n" +
                "  <script src=\"https://g.alicdn.com/i/popshop/0.0.23/p/seemore/load.js?c\"></script> \n" +
                " ";
//解決方法
//將后臺給的數(shù)據(jù)加入一段js函數(shù)
        String html = "<html>" +
                "<head>" +
                "<style type=\"text/css\">" +
                "body {font-size:15px;}" +
                "</style>" +
                "</head>" +
                "<body>" +
//-----------------下面是要加的js函數(shù)
                "<script type='text/javascript'>" +
                "window.onload = function(){" +

                "for (var i=0;i<document.getElementsByTagName('p').length;i++){ document.getElementsByTagName('p')[i].style.textAlign = 'center' }" +//p標(biāo)簽內(nèi)容居中

                "var $img = document.getElementsByTagName('img');for(var p in  $img){$img[p].style.width = '100%';$img[p].style.height ='auto'}" +//p標(biāo)簽里面的<img>標(biāo)簽的圖片100%大小 長度自適應(yīng)，也就是居中展示
                "}" +
                "</script>" + 
//-------------------------------------
                  url +
                "</body>" +
                "</html>";

        LogUtil.e(html);

        mWebView.loadDataWithBaseURL("about:blank", html, "text/html", "utf-8", null);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,205評論 3贊 119
  • 認字一直是你的難點，今天又因為認字我們鬧別扭，媽媽真不知道如何做才能讓你對認字提起興趣，隨口說了句“以后媽媽不管了...
    瑤媽1閱讀 171評論 0贊 0
  • 如何活出優(yōu)雅的自己？ 1. 和大家印象里刻板傳統(tǒng)教師的形象不同，陳果外型靚到時尚雜志都會請她去拍廣告，波浪大卷，駝...
    caucxiaom閱讀 387評論 0贊 0
  • 解決以下異常問題： 1.在new OkHttpClient()時忽略 2.在webview中忽略 3.在HttpU...
    消極程序員閱讀 9,087評論 0贊 1
  • 作者|宜壽東木 今天是感恩節(jié)，一大早就收到了朋友發(fā)來的感恩節(jié)祝福。 說實話，現(xiàn)在的節(jié)日越來越多了，一時也不清楚，這...
    宜壽東木閱讀 562評論 0贊 2

友情鏈接更多精彩內(nèi)容