2011-09-18 14 views
5

あなたがすべて知っていると確信しています。 WebViewを設定することは、Webviewブラウザクライアントを作成し、プロパティを設定し、リソースをブラウザクライアントにロードすることです。私はちょうどそれを行ういくつかのアンドロイドアプリを作成しました。複数のWebViewを使用したAndroid ViewFlipperの例を確認

今私が試したいのは、さまざまなWebリソースの水平スワイプです。 1つのURLにメインのホームページ、別のURLにカテゴリのページ、別のURLに検索ページを想像してみてください。メインホームページのURLビューからカテゴリURLを表示するビューにスワイプし、次に検索リソースを含むビューを表示する別のスワイプ(新しいアンドロイドマーケットのUI - スワイプの左のカテゴリを考える)を作成するUIコンストラクトを作成したいと思います。 。

ここではViewFlipperといくつかの記事を読んでいますが、ブラウザのインス​​タンス化とビューの反転/スワイプを統合する方法の包括的な例は見つかりません。

質問:上記のバリエーションを実行できる例や、Webビューのフリップ/スワイプでブラウザのインス​​タンス化を示す例へのリンクを提供できる例があります。

私の提案の実装を修正すること自由に感じ

は...

答えて

15

まあ、私はいくつかの時間と私のために、この上で働いてきた...私はまだ考慮していないこと、これを行うには良い方法があるかもしれません機能するソリューションをお持ちですか?私はそれが最も効果的な解決策であるかどうかはわかりませんが、意味を成し遂げたことが分かるまで研究とコードの作成を続けました。次のコードで、私はAndroidに& Amirでhttp://android-journey.blogspot.com/2010/01/android-webview.htmlという大きな叫び声を出す必要があります。彼はいくつかの素晴らしいものを持っているし、あなたはすべてそれをチェックアウトする必要があります。

まず、アクティビティパッケージにSimpleGestureFilterというクラスを作成し、コード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を含む線形レイアウトを表しています。ビューフリッパーには3つの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() {} 
} 

活動ですので...私が思いついた基本的なパターンは、単一のWebクライアントはブラウザや設定を使用することです。 onCreateメソッドを使用してビューをロードし、最初のビューを設定してから、メインビューをロードした後に他のビューをロードするAsyncメソッドを設定します。したがって、2つのビューがバックグラウンドで読み込まれます。私は彼らがスワイプを管理するために渡したパターンを使用します。私は、ボタンとJSインターフェースを使用して、クリック時に同じアニメーションを呼び出します。

最後の結果は、新しいアンドロイドマーケットのUIに表示されるUIに似たViewFlippingウェブビューのスワイプとクリックのアニメーションです。このパターンをより強くする可能性がある追加の実装をお勧めします。

+0

@ jroot.Zenこのトピックですばらしい作品.. –

関連する問題