Android三种方式加载Image标签（商品长图）

前言：

最近做商城项目，商品详情页是一张长图，后台返回的商品图片数据是一个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();
​
​
    }
}

4.大家如果有更好地方式，可以给我留言，一起学习进步，欢迎大家参与讨论.

下一篇实现京东详情页沉浸式状态栏和视差效果。

5.项目地址为:

WebViewDemo: webview、TextView、recyclerview三种方式加载多个image图片标签显示一张长图

​​​​​​​