寻找具有多个WebViews的Android ViewFlipper示例

Question

正如你们所知。建立一个WebView是创建一个WebView浏览器客户端、设置属性并将资源加载到浏览器客户端的事情。我创建了几个Android应用程序，就是这样做的。

现在，我想尝试水平滑动不同的Web资源。想象一下一个主页URL，另一个URL上的类别页面和一个搜索页面。我想创建一个UI结构，允许从主页URL视图向左滑动到显示类别URL的视图，然后再向左滑动到显示搜索资源的视图（像新的Android市场UI-向左滑动显示类别）。

我已经阅读了ViewFlipper和这里的几篇文章，但我无法找到一个综合性的例子，展示如何将浏览器实例化与视图翻转/滑动集成。

问题：有人能提供一个可以执行上述某种变化和/或提供显示web视图翻转/滑动的示例链接吗？

请随时更正我的建议实现...可能还有更好的方法，我还没有考虑过...

- jroot.zen

Answer 1

我已经尝试了一段时间并且有一个可行的解决方案。我不确定这是否是最有效的解决方案，但我继续研究和编写代码，直到找到有意义的东西为止。以下代码中，我需要向Android和Amir在http://android-journey.blogspot.com/2010/01/android-webview.html提供大声喊叫，因为他帮助我弄清楚了这个问题。他有些很棒的东西，你们都应该去看看。

第一步是在您的Activity包中创建一个名为SimpleGestureFilter的类，并使用此处的代码。这直接来自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的线性布局。在视图翻转器中有三个WebViews。

最后一步是Activity...

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方法加载视图，设置第一个视图，然后使用异步方法在主视图加载后加载其他视图。因此，其中两个视图在后台加载。我使用Amir传递的模式来管理滑动。我使用按钮和JS接口在单击时调用相同的动画。

最终结果是针对ViewFlipping Webviews的滑动和点击动画，类似于您将在新Android市场UI中看到的用户界面。随时推荐任何可能使此模式更强大的其他实现。

- jroot.zen