WebView加載Html文本圖片自適應手機屏幕，圖片可查（三方依賴）
前言：我們在開發(fā)的時候稻轨，后臺有時候會給我們Html的文本灵莲，和圖片，但Html一般是電腦端的澄者，放在手機端圖片會特別大笆呆，所以我們要進行一些適配
先看一下效果
這里因為要用到圖片查看器请琳，所以加上以下依賴 ，支持手勢雙擊赠幕，單機
//圖片選擇控件
implementation'com.github.chrisbanes.photoview:library:1.2.4'
先獲取到布局里面的WebView進行一些設置俄精，此webview是你自己布局里面的
WebSettings webSettings = webview.getSettings();//獲取webview設置屬性
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//把html中的內容放大webview等寬的一列中
webSettings.setJavaScriptEnabled(true);//支持js
webSettings.setBuiltInZoomControls(true); // 顯示放大縮小
webSettings.setSupportZoom(true); // 可以縮放
此用法設計到js，所以代碼中一定要添加這句話
webSettings.setJavaScriptEnabled(true);//支持js
因為要實現點擊圖片查看功能榕堰，給webview重新設置WebViewClient
loadDataWithBaseURL要解析的Html文本
webview.setWebViewClient(new MyWebViewClient());
//這個是給圖片設置點擊監(jiān)聽的竖慧，如果你項目需要webview中圖片，點擊查看大圖功能逆屡，可以這么添加
webview.addJavascriptInterface(new JavaScriptInterface(this), "imagelistner");
webview.loadDataWithBaseURL(null, result.getContent(), "text/html", "utf-8", null);
重寫WebViewClient的onPageFinished方法
此類直接可直接寫成activity的內部類方便使用
private class MyWebViewClientextends WebViewClient {
@Override
? ? public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
imgReset(view);//重置webview中img標簽的圖片大小
// html加載完成之后圾旨，添加監(jiān)聽圖片的點擊js函數
? ? ? ? addImageClickListner(view);
}
@Override
? ? public boolean shouldOverrideUrlLoading(WebView view, String url) {
//? view.loadUrl(url);
? ? ? ? return true;
}
/**
* 對圖片進行重置大小，寬度就是手機屏幕寬度魏蔗，高度根據寬度比便自動縮放
*
? ? * @param view
? ? */
? ? private void imgReset(WebView view) {
view.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName('img'); " +
"for(var i=0;i<objs.length;i++)? " +
"{"
? ? ? ? ? ? ? ? +"var img = objs[i];? " +
"? ? img.style.maxWidth = '100%'; img.style.height = 'auto';? " +
"}" +
"})()");
}
/**
* 這段js函數的功能就是砍的，遍歷所有的img節(jié)點，并添加onclick函數莺治，
? ? * <p>* 函數的功能是在圖片點擊的時候調用本地java接口并傳遞url過去
*
? ? * @param view
? ? */
? ? private void addImageClickListner(WebView view) {
view.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i<objs.length;i++)? " +
"{"
? ? ? ? ? ? ? ? +"window.imagelistner.readImageUrl(objs[i].src);"
? ? ? ? ? ? ? ? +"? ? objs[i].onclick=function()? " +
"? ? {? "
? ? ? ? ? ? ? ? +"? ? ? ? window.imagelistner.openImage(this.src);? " +
"? ? }? " +
"}" +
"})()");
}
}
實現監(jiān)聽（內部類）
class JavaScriptInterface {
private Contextcontext;
private Listimages =new ArrayList<>();
public JavaScriptInterface(Context context) {
this.context = context;
}
@JavascriptInterface
? ? public void readImageUrl(String img) {//把所有圖片的url保存在ArrayList中
? ? ? ? images.add(img);
}
//點擊圖片回調方法
//必須添加注解,否則無法響應
? ? @JavascriptInterface
? ? public void openImage(String img) {
Log.i("TAG","響應點擊事件!");
int index =0;
ArrayList list = addImages();
for (String url : list)
if (url.equals(img)) index = list.indexOf(img);//獲取點擊圖片在整個頁面圖片中的位置
? ? ? ? Intent intent =new Intent();
Bundle bundle =new Bundle();
bundle.putStringArrayList("list_image", list);
bundle.putInt("index", index);
intent.putExtra("bundle", bundle);//將所有圖片的url以及點擊圖片的位置作為參數傳給啟動的activity
? ? ? ? intent.setClass(DetailActivity.this, ShowWebImageActivity.class);
startActivity(intent);//啟動ViewPagerActivity,用于顯示圖片
? ? }
//去重復
? ? private ArrayList addImages() {
ArrayList list =new ArrayList<>();
Set set =new HashSet();
for (String cd :images) {
if (set.add(cd)) {
list.add(cd);
}
}
return list;
}
}
接下來展示ShowWebImageActivity中的代碼,因為ShowWebImageActivity需要進行圖片的滑動瀏覽,所以需?
要用ViewPager,所以自定義了一個ViewPager,在里面處理了觸摸事件,接下來就貼下代碼:
public class ShowWebImageActivity extends AppCompatActivity {
private ArrayListimages;
@Override
? ? protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_showwebimage);
HackyViewPager hackyViewPager = (HackyViewPager) findViewById(R.id.view_pager);
Bundle bundle = getIntent().getBundleExtra("bundle");
images = bundle.getStringArrayList("list_image");
int index = bundle.getInt("index");
hackyViewPager.setAdapter(new ViewPagerAdapter());
hackyViewPager.setCurrentItem(index);
}
class ViewPagerAdapter extends PagerAdapter {
@Override
? ? ? ? public int getCount() {
return images.size();
}
@Override
? ? ? ? public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
? ? ? ? public Object instantiateItem(ViewGroup container,int position) {
View view = View.inflate(ShowWebImageActivity.this, R.layout.view_pager_item,null);
PhotoView photoView = (PhotoView) view.findViewById(R.id.photoview);
photoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() {
@Override
? ? ? ? ? ? ? ? public void onPhotoTap(View view,float v,float v1) {
finish();
}
});
photoView.setBackgroundColor(Color.TRANSPARENT);
TextView indicator = (TextView) view.findViewById(R.id.indicator);
//用Glide加載圖片
? ? ? ? ? ? Glide.with(ShowWebImageActivity.this).load(images.get(position)).into(photoView);
CharSequence text = getString(R.string.viewpager_indicator, position +1,images.size());
//設置indicator
? ? ? ? ? ? indicator.setText(text);
container.addView(view, ViewPager.LayoutParams.MATCH_PARENT, ViewPager.LayoutParams.MATCH_PARENT);
return view;
}
@Override
? ? ? ? public void destroyItem(ViewGroup container,int position, Object object) {
container.removeView((View) object);
}
}
}
自定義ViewPager:
public class HackyViewPager extends ViewPager {
private boolean isLocked;
public HackyViewPager(Context context) {
super(context);
isLocked =false;
}
public HackyViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
isLocked =false;
}
@Override
? ? public boolean onInterceptTouchEvent(MotionEvent ev) {//用于處理Touch事件
? ? ? ? if (!isLocked) {
try {
return super.onInterceptTouchEvent(ev);
}catch (IllegalArgumentException e) {
e.printStackTrace();
return false;
}
}
return false;
}
@Override
? ? public boolean onTouchEvent(MotionEvent event) {
return !isLocked &&super.onTouchEvent(event);
}
}
相關布局文件:?
MainActivity布局中只有一個簡單的webView;?
ViewPagerActivity布局中也只是一個HackViewPager;?
HackViewPager中每一個View的布局：?
view_pager_item.xml:
<?xmlversion="1.0"encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
?android:layout_width="match_parent"
?android:layout_height="match_parent"
?>
?<uk.co.senab.photoview.PhotoView
??android:id="@+id/photoview"
??android:layout_width="match_parent"
??android:layout_height="match_parent"/>
?<TextView
??android:id="@+id/indicator"
??android:layout_width="match_parent"
??android:layout_height="wrap_content"
??android:layout_alignParentBottom="true"
??android:gravity="center"
??android:textSize="18sp"
??android:textColor="@android:color/black"
??android:text="@string/viewpager_indicator"
??android:background="@android:color/transparent"/>
</RelativeLayout>
用到了一個@string/viewpager_indicator為
<string name="viewpager_indicator">%1$d/%2$d</string>
以上是借用的這兩篇文章
https://blog.csdn.net/smileiam/article/details/72123227
https://www.jb51.net/article/130645.htm
