Android 는 WebView 를 클릭 하여 그림 크기 조정 및 슬라이딩 탐색 효 과 를 실현 합 니 다.

최근 에 한 항목 은 WebView 에 표 시 된 html 입 니 다.그림 을 클릭 할 때 확대 하고 크기 조정 과 미끄럼 을 해 야 합 니 다.
탐색,내 가 제일 먼저 생각 한 것 은 이것 은 js 와 상호작용 을 하 는 일이 지만 html 에 있 는 그림 의 url 을 어떻게 얻 고 저장 해서 표시 하 는 지 나 는 모른다.
그래서 자 료 를 찾 아 봤 더 니 해결 방법 을 찾 았 습 니 다.
블 로그 주소:Android WebView 의 그림 탐색 및 크기 조정 효과
먼저 이 요 구 를 처리 하 는 방향 을 말씀 드 리 겠 습 니 다.먼저 html 에 있 는 모든 그림 의 url 을 얻 고 집합 에 저장 해 야 합 니 다.그림 을 클릭 할 때 뛰 어야 합 니 다.
하나의 Activity 를 ViewPager 로 표시 하면 미끄럼 탐색 효 과 를 실현 할 수 있 습 니 다.그림 의 크기 조정 은 세 번 째 오픈 소스 라 이브 러 리 PhotoView 를 사용 해 야 합 니 다.
우선 WebView 설정:

webView = (WebView) findViewById(R.id.webview);
  webView.loadUrl(url);
  WebSettings settings = webView.getSettings();

  //      
  settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
  settings.setUseWideViewPort(true);
  settings.setLoadWithOverviewMode(true);

  //      
  settings.setDefaultTextEncodingName("UTF -8");
  settings.setJavaScriptEnabled(true);
  //  js
  webView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

  webView.setWebViewClient(new WebViewClient() {
   //     
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
    view.loadUrl(url);
    return super.shouldOverrideUrlLoading(view, url);
   }

   //       
   @Override
   public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);

    // html      ，         js  
    addImageClickListner();
   }
  });

그 다음 에 html 에 있 는 그림 url 을 가 져 와 저장 하고 엽 니 다(가장 중요 한 것 은 js 함수 감청 을 주입 하고 모든 그림 의 url 을 가 져 오 는 것 입 니 다).여기 서 그림 을 추가 할 때 그림 이 두 번 추 가 된 것 을 발 견 했 습 니 다.그래서 저 는 list 집합 에 있 는 요 소 를 다시 가 져 왔 습 니 다.

 //   js    
 private void addImageClickListner() {
  //       img   ，          url objs[i].src，       src.
  //           ，objs[i].onclick
  webView.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); " +
    " } " +
    "}" +
    "})()");
 }

 // js    
 public class JavascriptInterface {

  private Context context;

  public JavascriptInterface(Context context) {
   this.context = context;
  }

  @android.webkit.JavascriptInterface
  public void readImageUrl(String img) {  //      url   ArrayList<String> 
   images.add(img);
  }

  @android.webkit.JavascriptInterface //  targetSdkVersion>=17 ，      
  public void openImage(String clickimg)//           
  {
   int index = 0;
   ArrayList<String> list = addImages();
   for (String url : list)
    if (url.equals(clickimg)) index = list.indexOf(clickimg);//                 
   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(context, ShowWebImageActivity.class);
   context.startActivity(intent);//  ViewPagerActivity,      
  }
 }

 //   
 private ArrayList<String> addImages() {
  ArrayList<String> 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 ArrayList<String> images;

 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_show_webimage);
  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);
   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 만 있 습 니 다.
ViewPager Activity 레이아웃 에서 도 HackViewPager 일 뿐 입 니 다.
HackViewPager 의 모든 View 레이아웃:
view_pager_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns: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>

마지막 효과:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.