[android] WebView에서 Flipper처리

회사에서 작업하다 웹뷰로 작성한 화면을 플립처리를 해줘하는 상황이 됐다.

웹뷰의 스크롤 처리와 (상하) 해당화면의 플립처리(좌우) 하는데 좀 애를 먹었어서 해당 처리를 정리해놓자!!

우선 XML에 뷰플립퍼를 정의 하고

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:id="@+id/layout_article">     <ViewFlipper android:id="@+id/artflipper"        android:layout_width="fill_parent"        android:layout_height="fill_parent">     </ViewFlipper>  </LinearLayout>

소스코드에서 웹뷰를 등록한다.

final String mimeType = "text/html";         final String encoding = "utf-8";         WebView wv;         wv = new WebView(getApplicationContext());         //        wv.loadData("<a href='x'>Hello World! - 5</a>", mimeType, encoding);         wv.loadDataWithBaseURL("about:blank"             ,"<img src=\"file:///android_asset/buttom_bg.png\" width='100%' />"             , mimeType,   encoding, "");           여기서 loadDataWithBaseURL(디폴트웹화면, 웹화면,  인코딩할 녀석, 인코딩종류         , 히스토리화면) 메소드와 loadData() 메소드의 차이점은 loadData()는 인코딩할때         태그와 텍스트를 구분하지않고 인코딩하므로 html태그가 깨질수 있다.          허나 loadDataWithBaseURL()메소드는 태그와 값을 구분해서         인코딩해주는 아주 착한 녀석 ㅋㅋ         나는 테스트로 이미지를 띄웠는데 해당 이미지는 안드로이드 프로젝트의 assets아래에         있는 녀석이다.         width를 정해준거는 실제 이미지가 디바이스 화면보다 큰 이미지였는데 그냥 이미지          지정만 하면 화면 밖으로 나가버린다 ㅠㅠ 그래서 이래저래 찾아보다 저렇게          너비를 100%로 지정해주면 해당 부모의 너비 만큼 축소해서 보여준다! 착한녀석!!                viewFlipper.addView(wv);       //이렇게 플립퍼에 뷰를 추가하고         wv.setOnTouchListener(this);  //웹뷰의 터치리스너를 등록해준다.                                                     //아무리 플리퍼에 리스너를 등록해서 웹뷰 위에서 터치 이벤트를                                                     //감지하지 못한다 ㅠㅠ 완전 삽질함.          wv = new WebView(getApplicationContext());         //        wv.loadData("<a href='x'>Hello World! - 6</a>", mimeType, encoding);         wv.loadDataWithBaseURL("about:blank",            "<table border='0' cellSpacing='1' cellPadding='0' width='300' bgColor='#b7bcc5' height='40'>" +            "<tbody><tr bgColor='#ffffff'><td width='329'>             <img src=\"file:///android_asset/buttom_bg.png\" width='100%' /></td>             <td width='329'>&nbsp;</td></tr>" +            "<tr bgColor='#ffffff'><td>한글</td><td>&nbsp;</td&gt;</tr></tbody></table>"           , mimeType,   encoding, "");         viewFlipper.addView(wv);         wv.setOnTouchListener(this);         // 이번에 테이블 태크를 넣어봤다. 테이블 레이아웃으로 테이블 스러운 디자인이 아무리 해도          // 나오질 않아서 웹뷰를 이용 HTML로 테이블을 표현하기로 결정!          // 해당 테이블이 글씨 뿐만 아니라 이미지도 표현해야 하므로 테이블 안에          // 이미지도 넣어보고 한글도 넣어보고 ㅋ           wv = new WebView(getApplicationContext());         wv.loadDataWithBaseURL("about:blank",             "<table border='0' cellSpacing='1' cellPadding='0' width='300' bgColor='#b7bcc5' height='40'>" +             "<tbody><tr bgColor='#ffffff'><td width='329'>              <img src=\"file:///sdcard/test/test_img.png\" width='100%' /></td>              <td width='329'>&nbsp;</td></tr>" +            "<tr bgColor='#ffffff'><td>한글</td><td>&nbsp;</td&gt;</tr></tbody></table>"            , mimeType,   encoding, "");         viewFlipper.addView(wv);         wv.setOnTouchListener(this);

public boolean onTouch(View arg0, MotionEvent event) {         switch (event.getAction()){             case MotionEvent.ACTION_DOWN:{                 // store the X value when the user's finger was pressed down                 Log.i("ACTION_DOWN", "OK!!!!!!");                 downXValue = event.getX();                 downYValue = event.getY();                 break;             }             case MotionEvent.ACTION_UP:    {                 // Get the X value when the user released his/her finger                 Log.i("ACTION_UP", "OK!!!!!!"); //              upXValue = event.getX(); //              upYValue = event.getY();                             if (downXValue > upXValue + 100)                     viewFlipper.showNext();                     Log.i("자식뷰 인덱스", viewFlipper.getChildCount()+"");                     Log.i(" 터치 확인 ", "left");                 if (downXValue+100 < upXValue)                     viewFlipper.showPrevious();                     Log.i(" 터치 확인 ", "right"); //                if (downYValue > upYValue +100) //                    Log.i(" 터치 확인 ", "up"); //                if (downYValue+100 < upYValue) //                    Log.i(" 터치 확인 ", "down");                 break;             }         }         return true;     } 이렇게 터치 리스너를 오버라이드 해주면 OK 좌우 뿐만 아니라 상하로도 구현할수 있따! 좌우로 터치했을때 플립효과를 주기위해 해당 조건에 맞으면 플리퍼의 이동 메소드를 호출하면 OK!! +100 씩 해주는거 터치해서 잡는 좌표값이 float타입으로 아주 미세한 수치로도 변화가 읽어나므로 확실한 좌우/ 상하 플립으로 인식하기 위한 일종의 값을 넣어준거임