ViewPager 에 webview JavaScriptInterface 사용

3개의 webview xml을 3개의 viewpager 에 각각 띄우기

각각의 웹뷰에서 자바스크립트 변수 넘길 수 있도록

1. main_layout.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical" >

<LinearLayout 

   android:id="@+id/ll_title_layout"

   android:layout_width="fill_parent"

   android:layout_height="30dip"

   >

    <Button

        android:id="@+id/btn_one"

        android:layout_width="140dip"

     android:layout_height="30dip"

     android:text="ViewPager1"

     android:textSize="16sp"

     android:textColor="#FFFFFF"

     android:layout_marginLeft="5dp"

     android:layout_marginRight="5dp"

   

        />

    <Button

        android:id="@+id/btn_two"

        android:layout_width="100dip"

     android:layout_height="30dip"

     android:text="ViewPager2"

     android:textSize="16sp"

     android:layout_marginRight="5dp"

   

    />

    <Button

        android:id="@+id/btn_three"

        android:layout_width="100dip"

     android:layout_height="30dip"

     android:text="ViewPager3"

     android:textSize="16sp"

  

      />

</LinearLayout> 

               

        <android.support.v4.view.ViewPager

            android:id="@+id/pager"

            android:layout_width="match_parent"

            android:layout_height="750dp" />

</LinearLayout> 

2. webview 레이아웃 3개

inflate_one.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/inflate_one"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" 

    >

    <WebView

        android:id="@+id/webView1"

        android:layout_width="match_parent"

        android:layout_height="750dp"

        />

   

         

</RelativeLayout>

inflate_two.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/inflate_one"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" 

    >

    <WebView

        android:id="@+id/webView2"

        android:layout_width="match_parent"

        android:layout_height="750dp"

        />

   

         

</RelativeLayout>

inflate_three.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/inflate_one"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" 

    >

    <WebView

        android:id="@+id/webView3"

        android:layout_width="match_parent"

        android:layout_height="750dp"

        />

   

         

</RelativeLayout>

3. MainActivity.java

public class MainActivity extends FragmentActivity implements OnRefreshListener {

private ViewPager mPager;

WebView web;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main_layout);

mPager = (ViewPager)findViewById(R.id.pager);

mPager.setAdapter(new PagerAdapterClass(getApplicationContext()));

//viewpager의 현재 위치 

mPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

            @Override

            public void onPageSelected(int position) {

   //여기에 할일

            }

        });

//버튼으로 viewpager이동하기

       Button btn_one = (Button)findViewById(R.id.btn_one);

       Button btn_two = (Button)findViewById(R.id.btn_two);

       Button  btn_three = (Button)findViewById(R.id.btn_three);

        

        btn_one.setOnClickListener(new OnClickListener(){

public void onClick(View v){

setCurrentInflateItem(0);

}

    });

        btn_two.setOnClickListener(new OnClickListener(){

        public void onClick(View v){

         setCurrentInflateItem(1);

        }

        });

        

        btn_three.setOnClickListener(new OnClickListener(){

        public void onClick(View v){

         setCurrentInflateItem(2);

        }

        });

        

}

//viewpager 이동 

private void setCurrentInflateItem(int type){

if(type==0){

mPager.setCurrentItem(0);

}else if(type==1){

mPager.setCurrentItem(1);

}else{

mPager.setCurrentItem(2);

 

}

}

//Pager 어댑터

private class PagerAdapterClass extends PagerAdapter{

private LayoutInflater mInflater;

public PagerAdapterClass(Context c){

super();

mInflater = LayoutInflater.from(c);

}

@Override

public int getCount() {

return 3;

}

@Override

public Object instantiateItem(View pager, int position) {

View v = null;

    if(position==0){//첫번째 뷰페이저

    v = mInflater.inflate(R.layout.inflate_one, null);

    

 

String url_web1 = "http://www.test.com/test_web1.html";

    WebView web1 = (WebView)v.findViewById(R.id.webView1);

       

    

    WebSettings set1 = web1.getSettings();

    set1.setJavaScriptEnabled(true);

    set1.setAllowFileAccess(true);

            web1.loadUrl(url_web1);

 web1.addJavascriptInterface(this, "android");

            web1.addJavascriptInterface(new JavaScriptInterface(web2.getContext()), "android");

    

    }

    else if(position==1){

    v = mInflater.inflate(R.layout.inflate_two, null);

     final String url_web2 = "http://www.test.com/test_web2.html";

     final WebView web2 = (WebView)v.findViewById(R.id.webView2);

     WebSettings set2 = web2.getSettings();

    set2.setJavaScriptEnabled(true);    

          web2.loadUrl(url_web3);

     web2.addJavascriptInterface(this, "android");

            web2.addJavascriptInterface(new JavaScriptInterface(web2.getContext()), "android");

   

    

    }else{

    v = mInflater.inflate(R.layout.inflate_three, null);

    

     final String url_web3 = "http://www.test.com/test_web3.html";

     final WebView web3 = (WebView)v.findViewById(R.id.webView3);

     WebSettings set3 = web3.getSettings();

     set3.setJavaScriptEnabled(true);    

          web3.loadUrl(url_web3);

     web3.addJavascriptInterface(this, "android");

             web3.addJavascriptInterface(new JavaScriptInterface(web3.getContext()), "android");

    }

    

         

    ((ViewPager)pager).addView(v, 0);

    

    return v; 

}

@Override

public void destroyItem(View pager, int position, Object view) {

((ViewPager)pager).removeView((View)view);

}

@Override

public boolean isViewFromObject(View pager, Object obj) {

return pager == obj; 

}

@Override public void restoreState(Parcelable arg0, ClassLoader arg1) {}

@Override public Parcelable saveState() { return null; }

@Override public void startUpdate(View arg0) {}

@Override public void finishUpdate(View arg0) {}

}

//자바스크립트 인터페이스

public class JavaScriptInterface {

private Context mContext;

JavaScriptInterface(Context c){

mContext = c;

}

@JavascriptInterface  

public void viewTest(String id, String title) { //웹뷰 내에서 호출하는 자바스크립트 함수와 연동 정의

      Intent it = new Intent();

      it.setClass(MainActivity.this,  ViewActivity.class);

      it.putExtra("id", id);

      it.putExtra("title", title);

      startActivityForResult(it, 0);  

}  

}

}

4. test_web1.html ... 나머지 파일도 비슷하게..

<!doctype html>

<html lang="ko">

 <head>

  <meta charset="UTF-8">

<script>

function viewTest(id, title){

android.viewTest(id, title);//연동함수 호출

}

</script>

 </head>

 

 <body> 

<a href="viewTest('1','제목');">보기</a> 

 </body>

</html>