Android三種方式載入Image標籤（商品長圖）
阿新 • • 發佈：2019-01-01
最近做商城專案，商品詳情頁是一張長圖，後臺返回的商品圖片資料是一個image標籤，剛開始想h5實現比較方便，由於專案很趕，大家都有各自的任務，於是自己研究，實現了載入長圖，剛開始使用的是textview載入html的方式，發現圖片載入好後沒有顯示出來，回頭一想，圖片都是耗時操作，犯了這種小錯誤，於是開啟了一個執行緒用網路方式載入，圖片最終顯示出來，然後發現介面適配有問題，佈局沒有鋪滿整個螢幕，而且圖片不能上下滑動，於是改為webview，介面適配問題解決了，但是發現滑動到底部滑不上來了，長圖也不是上下滑動，滑動出現衝突，嘗試了幾種方法沒有解決，於是改用recyclerview，recyclerview是一個列表，可以設定橫向或者豎向兩個方向進行滑動，除錯後執行，發現介面適配和滑動衝突問題都解決.
實現效果截圖如下:
三種實現方式程式碼如下：
1.textview方式
** * 作者： njb * 時間： 2018/7/10 0010-上午 10:29 * 描述： TextView載入Img標籤 * 來源： */ public class TextViewForHtmlActivity extends AppCompatActivity { private TextView textView; private Drawable drawable; private String content; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_text_html); initView(); } private void initView() { textView = findViewById(R.id.tv_detail); content = "<img src=\"https://www.38.hn/images/image/20161104/20161104144203_82117.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161116/20161116165842_88829.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161104/20161104144206_17003.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161104/20161104144207_62404.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161104/20161104144208_78881.jpg\" alt=\"\" />"; setHtml(content); } /** * 設定html * @param content */ private void setHtml(String content) { textView.setMovementMethod(ScrollingMovementMethod.getInstance()); if (Build.VERSION.SDK_INT >= 24) { textView.setText(Html.fromHtml(content, Html.FROM_HTML_MODE_COMPACT, imageGetter, null)); } else { textView.setText(Html.fromHtml(content, imageGetter, null)); } } Html.ImageGetter imageGetter = new Html.ImageGetter() { @Override public Drawable getDrawable(String source) { if (drawable != null) { return drawable; } else { initDrawable(source); } return null; } }; /** * 載入網路圖片 * @param s */ private void initDrawable(final String s) { new Thread(new Runnable() { @Override public void run() { try { final Drawable drawable1 = Glide.with(TextViewForHtmlActivity.this).load(s).submit().get(); runOnUiThread(new Runnable() { @Override public void run() { if (drawable1 != null) { drawable1.setBounds(0, 0, ScreenUtil.getScreenWidth(TextViewForHtmlActivity.this),ScreenUtil.getFactHeight(TextViewForHtmlActivity.this)); //多張圖片情況下進行儲存：drawableMap.put(s,drawable); drawable = drawable1; setHtml(content); } } }); } catch (InterruptedException | ExecutionException e) { e.printStackTrace(); } } }).start(); } }
2.webview方式
/** * 作者： njb * 時間： 2018/7/10 0010-上午 10:29 * 描述： webView載入img標籤 * 來源： */ public class WebViewActivity extends AppCompatActivity { private WebView webView; private String content; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_webview); initView(); } private void initView() { webView = findViewById(R.id.webview); content = "<img src=\"https://www.38.hn/images/image/20161104/20161104144203_82117.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161116/20161116165842_88829.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161104/20161104144206_17003.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161104/20161104144207_62404.jpg\" alt=\"\" /><img src=\"https://www.38.hn/images/image/20161104/20161104144208_78881.jpg\" alt=\"\" />"; String linkCss = "<style type=\"text/css\"> " + "img {" + "width:100%;" + "height:auto;" + "}" + "</style>"; String html = "<html><header>" + linkCss + "</header>" + content + "</body></html>"; webView.loadData(html, "text/html", "UTF-8"); } }
3.recyclerview方式
**
* 作者： njb
* 時間： 2018/7/10 0010-上午 11:41
* 描述： recyclerView方式載入img標籤
* 來源：
*/
public class RecycleViewForHtmlActivity extends AppCompatActivity {
private BaseQuickAdapter<String, BaseViewHolder> adapter;
private RecyclerView rv;
private String content;
private String imgUrl;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recyclerview_html);
initView();
}
private void initView() {
rv = findViewById(R.id.rv_detail);
adapter = new BaseQuickAdapter<String, BaseViewHolder>(R.layout.item_detail, null) {
@Override
protected void convert(BaseViewHolder helper, String item) {
GlideUtils.loadImgByWrap(RecycleViewForHtmlActivity.this, item, (ImageView) helper.getView(R.id.iv_detail));
}
};
rv.setLayoutManager(new LinearLayoutManager(RecycleViewForHtmlActivity.this));
rv.setAdapter(adapter);
}
@Override
protected void onResume() {
super.onResume();
imgUrl = "<img src=\"/images/image/20161104/20161104144203_82117.jpg\" alt=\"\" /><img src=\"/images/image/20161116/20161116165842_88829.jpg\" alt=\"\" /><img src=\"/images/image/20161104/20161104144206_17003.jpg\" alt=\"\" /><img src=\"/images/image/20161104/20161104144207_62404.jpg\" alt=\"\" /><img src=\"/images/image/20161104/20161104144208_78881.jpg\" alt=\"\" />";
setHtml(imgUrl);
}
/**
* 設定html
*
* @param imgUrl
*/
private void setHtml(final String imgUrl) {
new Thread(new Runnable() {
@Override
public void run() {
content = imgUrl.replaceAll("src=\"", "src=\"https://www.38.hn");
String[] ht = content.split("\"");
List<String> list = new ArrayList<>();
for (String rx : ht) {
if (rx.contains("https")) {
list.add(rx);
}
}
adapter.setNewData(list);
}
}).start();
}
}
大家如果有更好地方式，可以給我留言，一起學習進步，歡迎大家參與討論.
下一篇實現京東詳情頁沉浸式狀態列和視差效果。