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

Question

我相信你们都知道。设置 WebView 就是创建 WebView 浏览器客户端、设置属性并将资源加载到浏览器客户端中。我已经创建了几个 Android 应用程序来实现这一点。

我现在想尝试的是水平滑动不同的网络资源。想象一下一个 url 上有一个主页，另一个 url 上有一个类别页面，另一个 url 上有一个搜索页面。我想创建一个 UI 构造，允许从主主页 url 视图滑动到显示类别 url 的视图，然后再滑动显示带有搜索资源的视图（想想新的 android market UI - 向左滑动显示类别） 。

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

问题：有人可以提供一个可以执行上述某些变体的示例和/或提供一个示例的链接，该示例显示通过 Web 视图翻转/滑动的浏览器实例化。

请随意纠正我建议的实现...可能有更好的方法来做到这一点，我还没有考虑过...

Answer 1

好吧，我已经为此工作了一段时间并且我有一个有效的解决方案。我不确定这是最有效的解决方案，但我一直在研究和编写代码，直到找到有意义的东西。通过以下代码，我需要对 Android & 大声喊叫。阿米尔在 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 的线性布局。在视图翻转器中有三个 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 方法加载视图，设置第一个视图，然后在加载主视图后使用异步方法加载其他视图。因此两个视图在后台加载。我使用阿米尔传承的模式来管理滑动。我使用按钮和 JS 接口在单击时调用相同的动画。

最终结果是 ViewFlipping webview 的滑动和单击动画，类似于您将在新的 android market UI 中看到的 UI。请随意推荐任何可能使此模式更强大的其他实现。