2011-09-18 1 views
5

여러분 모두 알고 계실 것입니다. WebView를 설정하는 것은 웹 브라우저 클라이언트를 만들고 속성을 설정하고 브라우저 클라이언트에 리소스를로드하는 것입니다. 나는 정확하게 그것을하는 몇 안드로이드 애플 리케이션을 만들었습니다.안드로이드를 찾는 ViewFlipper 다중 WebView가있는 예제

지금 시도하고 싶은 것은 다른 웹 리소스를 가로로 스 와이프하는 것입니다. 하나의 URL에서 메인 홈페이지, 다른 url에서 카테고리 페이지, 다른 url에서 검색 페이지를 상상해보십시오. 기본 홈페이지 URL보기에서 카테고리 URL을 표시하는보기로 스 와이프하고 검색 리소스로보기를 표시하는 다른 스 와이프 (새 안드로이드 마켓 UI - 왼쪽 스 와이프 범주를 스 와이프한다고 생각하는) UI 구성을 만들고 싶습니다. .

여기에 ViewFlipper 및 여러 게시물을 읽었지만 브라우저 인스턴스화와보기 뒤집기/넘기기를 통합하는 방법에 대한 포괄적 인 예제를 찾을 수 없습니다.

질문 : 위의 일부 변형을 수행 할 수있는 예제를 제공하거나 웹보기 뒤집기/스 와이프를 통해 브라우저 인스턴스화를 보여주는 예제에 대한 링크를 제공 할 수 있습니까?

내 제안 구현을 수정 자유롭게

은 ...

답변

15

글쎄, 나는 시간이 나는이에 근무했습니다 ... 나는 아직 고려하지 않은이 작업을 수행 할 수있는 더 좋은 방법이있을 수 있습니다 효과가있는 해결책을 찾으십시오. 가장 효과적인 솔루션인지는 확실치 않지만, 이해할 수있을 때까지 계속 연구하고 코드를 작성했습니다. 다음 코드를 사용하면 안드로이드 & 아미르 (Amir) http://android-journey.blogspot.com/2010/01/android-webview.html에 큰 소리를 외워야합니다. 그는 좋은 물건을 가지고있어. 모두들 좀 봐.

첫 번째 단계는 SimpleGestureFilter라는 Activity 패키지에 클래스를 만들고 코드 found here을 사용하는 것입니다. 이것은 Amir에서 직접 제공되며 스 와이프의 제스처 상호 작용을 대폭 단순화합니다.

다음 단계는 레이아웃에 ViewFlipper를 사용하는 것입니다. 버튼과 여러 가지 다른 것들을 사용하여 필요한 것보다이 레이아웃 파일에 더 많은 것이 있지만 그림을 얻어야합니다.

<?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"> 
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:paddingTop="5dp"> 
    <Button 
     android:id="@+id/cat_btn" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Categories" /> 
    <Button 
     android:id="@+id/home_btn" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Home" /> 
    <Button 
     android:id="@+id/search_btn" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Search" /> 
</LinearLayout> 
    <ViewFlipper 
     android:id="@+id/flipview" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" > 
    <WebView 
     android:id="@+id/mainview" 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent" /> 
    <WebView xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/catview" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"/> 
    <WebView xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/searchview" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent"/> 
    </ViewFlipper> 
</LinearLayout> 

xml은 ViewFlipper가 포함 된 선형 레이아웃을 나타냅니다. 뷰 플리퍼에는 세 개의 WebView가 있습니다.

마지막 단계

는 ... 활동이다
package example.swipetest; 

// import Amir's SimpleGestureFilter 
import example.swipetest.SimpleGestureFilter; 
import example.swipetest.SimpleGestureFilter.SimpleGestureListener; 

// import other required packages 
import android.app.Activity; 
import android.app.ProgressDialog; 
import android.os.AsyncTask; 
import android.os.Bundle; 
import android.os.Handler; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.animation.Animation; 
import android.view.animation.AnimationUtils; 
import android.webkit.WebView; 
import android.webkit.WebViewClient; 
import android.widget.Button; 
import android.widget.ViewFlipper; 

// class implements Amir's Swipe Listener 
public class SwipeTest extends Activity implements SimpleGestureListener { 

    // handler for JS interface 
    private Handler handler = new Handler(); 

    // all the webviews to be loaded 
    private WebView mainView; 
    private WebView catView; 
    private WebView searchView; 

    // the viewflipper 
    private ViewFlipper flipview; 

    // buttons 
    private Button cat_btn; 
    private Button home_btn; 
    private Button search_btn; 

    // progress dialog 
    private ProgressDialog progressDialog; 

    // animations 
    private Animation slideLeftIn; 
    private Animation slideLeftOut; 
    private Animation slideRightIn; 
    private Animation slideRightOut; 

    // the activity 
    final Activity activity = this; 

    // gesture filter 
    private SimpleGestureFilter filter; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 

     super.onCreate(savedInstanceState); 
     setContentView(R.layout.main); 

     // set the main webview to the layout item 
     mainView = (WebView) findViewById(R.id.mainview); 

     // buttons 
     cat_btn = (Button) findViewById(R.id.cat_btn); 
     home_btn = (Button) findViewById(R.id.home_btn); 
     search_btn = (Button) findViewById(R.id.search_btn); 

     // set the client settings 
     mainView = _clientSettings(mainView); 

     // set the flipper 
     flipview = (ViewFlipper) findViewById(R.id.flipview); 

     // set onclick listeners for the buttons 
     cat_btn.setOnClickListener(new View.OnClickListener() { 
      public void onClick(View v) { 
       _flipView(cat_btn); 
      } 
     }); 
     home_btn.setOnClickListener(new View.OnClickListener() { 
      public void onClick(View v) { 
       _flipView(home_btn); 
      } 
     }); 
     search_btn.setOnClickListener(new View.OnClickListener() { 
      public void onClick(View v) { 
       _flipView(search_btn); 
      } 
     }); 

     // these animations came from the sdk. they are xml files loaded 
     // into the res folder into a folder called anim 
     slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_left); 
     slideLeftOut = AnimationUtils.loadAnimation(this, R.anim.slide_out_left); 
     slideRightIn = AnimationUtils.loadAnimation(this, R.anim.slide_in_right); 
     slideRightOut = AnimationUtils.loadAnimation(this, R.anim.slide_out_right); 

     // listen for gestures 
     this.filter = new SimpleGestureFilter(this, this); 
     this.filter.setMode(SimpleGestureFilter.MODE_TRANSPARENT); 

     // load the html resource into the main view 
     mainView.loadUrl("file:///android_asset/test1.html"); 
     // set the client 
     mainView.setWebViewClient(new BasicWebViewCient()); 
     // run async to load the other web resources into the views 
     new ManageViews().execute(); 
    } 

    // use a method to manage button clicks 
private Boolean _flipView(Button button) { 
    // Handle item selection 
    switch (button.getId()) { 
    case R.id.cat_btn: 
     _setCategories(); 
     return true; 
    case R.id.home_btn: 
     _setHome(); 
     return true; 
    case R.id.search_btn: 
     _setSearch(); 
     return true; 
    default: 
     return false; 
    } 
} 

    // adding client settings to the webviews 
    // I did this way so that I could set the same settings 
    // to all of the webviews 
private WebView _clientSettings(WebView view) { 
    view.getSettings().setJavaScriptEnabled(true); 
    view.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY); 
    view.addJavascriptInterface(new PanelJSI(), "interface"); 
    return view; 
} 

// Web view client 
private class BasicWebViewCient extends WebViewClient { 
    @Override 
    public boolean shouldOverrideUrlLoading(WebView view, String url) { 
     view.loadUrl(url); 
     return true; 
    } 

    @Override 
    public void onLoadResource(WebView view, String url) { 
     if (progressDialog == null) { 
      progressDialog = new ProgressDialog(activity); 
      progressDialog.setMessage("Locating"); 
      progressDialog.show(); 
     } 
    } 

    @Override 
    public void onPageFinished(WebView view, String url) { 
     if (progressDialog.isShowing()) { 
      progressDialog.dismiss(); 
     } 
    } 
} 

// Async to load the rest of the web resources into the webviews 
private class ManageViews extends AsyncTask<Void, Void, Void> { 

    @Override 
    protected Void doInBackground(Void... args) { 
        // cat view will load a categories webview 
     catView = (WebView) findViewById(R.id.catview); 
     catView = _clientSettings(catView); 
     catView.loadUrl("file:///android_asset/test2.html"); 
     catView.setWebViewClient(new BasicWebViewCient()); 

        // load a search resource 
     searchView = (WebView) findViewById(R.id.searchview); 
     searchView = _clientSettings(searchView); 
     searchView.loadUrl("file:///android_asset/test3.html"); 
     searchView.setWebViewClient(new BasicWebViewCient()); 

     return null; 
    } 
} 

    // a method to manage the animation of the categories view 
private void _setCategories() { 
    if (flipview.getDisplayedChild() != 1) { 
     flipview.setInAnimation(slideLeftIn); 
     flipview.setOutAnimation(slideRightOut); 
     flipview.setDisplayedChild(1); 
    } 
} 

    // a method to manage the "center" view called home 
private void _setHome() { 
    if (flipview.getDisplayedChild() != 0) { 
     if (flipview.getDisplayedChild() == 1) { 
      flipview.setInAnimation(slideRightIn); 
      flipview.setOutAnimation(slideLeftOut); 
     } else if (flipview.getDisplayedChild() == 2) { 
      flipview.setInAnimation(slideLeftIn); 
      flipview.setOutAnimation(slideRightOut); 
     } 
     flipview.setDisplayedChild(0); 
    } 
} 

    // a method to handle the "right side" called search  
private void _setSearch() { 
    if (flipview.getDisplayedChild() != 2) { 
     flipview.setInAnimation(slideRightIn); 
     flipview.setOutAnimation(slideLeftOut); 
     flipview.setDisplayedChild(2); 
    } 
} 

    // javascript interface 
final class PanelJSI { 

    public void setView(final String shift) { 
     handler.post(new Runnable() { 
      public void run() { 
       if (shift.equals("categories")) { 
        _setCategories(); 
       } else if (shift.equals("home")) { 
        _setHome(); 
       } else { 
        _setSearch(); 
       } 
      } 
     }); 
    } 
} 

    // override the dispatch 
@Override 
public boolean dispatchTouchEvent(MotionEvent me) { 
    this.filter.onTouchEvent(me); 
    return super.dispatchTouchEvent(me); 
} 

    // manage swipe animations 
@Override 
public void onSwipe(int direction) { 

    switch (direction) { 

    case SimpleGestureFilter.SWIPE_RIGHT: 
     if (flipview.getDisplayedChild() == 0) { 
      _setCategories(); 
     } else if (flipview.getDisplayedChild() == 2) { 
      _setHome(); 
     } 
     break; 
    case SimpleGestureFilter.SWIPE_LEFT: 
     if (flipview.getDisplayedChild() == 1) { 
      _setHome(); 
     } else if (flipview.getDisplayedChild() == 0) { 
      _setSearch(); 
     } 
     break; 
    case SimpleGestureFilter.SWIPE_DOWN: 
    case SimpleGestureFilter.SWIPE_UP: 

    } 
} 

    // manage double tap 
@Override 
public void onDoubleTap() {} 
} 

그래서 ... 내가 생각 해낸 기본 패턴은 하나의 웹 클라이언트와 브라우저 설정을 사용하는 것입니다

. onCreate 메서드를 사용하여 뷰를로드하고 첫 번째 뷰를 설정 한 다음 Async 메서드를 사용하여 기본 뷰가로드 된 후 다른 뷰를로드합니다. 따라서 두 개의보기가 백그라운드에서로드됩니다. 나는 그들이 스 와이프를 관리하기 위해 통과 한 패턴을 사용한다. 버튼과 JS 인터페이스를 사용하여 클릭시 동일한 애니메이션을 호출합니다.

마지막 결과는 새로운 안드로이드 마켓 UI에서 볼 수있는 UI와 비슷한 ViewFlipping 웹뷰에 대한 스 와이프 및 클릭 애니메이션입니다. 이 패턴을 강하게 만들 수있는 추가 구현을 언제든지 권유하십시오.

+0

@ jroot.Zen이 주제에 대한 훌륭한 작업 .. –