最近做商城项目，商品详情页是一张长图，后台返回的商品图片数据是一个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();
}
}
大家如果有更好地方式，可以给我留言，一起学习进步，欢迎大家参与讨论.
下一篇实现京东详情页沉浸式状态栏和视差效果。