寻找具有多个 WebView 的 Android ViewFlipper 示例 [英] Looking for Android ViewFlipper Example with Multiple WebViews
问题描述
我相信你们都知道.设置 WebView 就是创建一个 webview 浏览器客户端、设置属性并将资源加载到浏览器客户端的问题.我已经创建了几个完全可以做到这一点的 Android 应用.
As I am sure you all know. Setting up a WebView is a matter of creating a webview browser client, setting properties and loading a resource into the browser client. I have created several android apps that do exactly that.
我现在想尝试的是横向滑动不同的网络资源.想象一个主主页位于一个 url，一个类别页面位于另一个 url，一个搜索页面位于另一个 url.我想创建一个 UI 构造，允许从主主页 url 视图滑动到显示类别 url 的视图，然后再滑动显示带有搜索资源的视图(想想新的 android 市场 UI - 向左滑动显示类别).
What i would like to try now is horizontal swiping of different web resources. Imagine a main home page at one url, a categories page at another url and a search page at another url. I would like to create a UI construct that allows swiping from the main home page url view to a view displaying the categories url and then another swipe that shows the view with the search resource (think the new android market UI - swipe left shows categories).
我已经阅读了 ViewFlipper 和这里的几篇文章，但我找不到关于如何将浏览器实例化与视图翻转/滑动集成的综合示例.
I have read up on ViewFlipper and several posts here, but I am not able to find a comprehensive example of how to integrate the browser instantiation with view flipping/swiping.
问题:有人可以提供一个可以执行上述某些变体的示例和/或提供一个示例的链接，该示例显示浏览器实例化和 web 视图翻转/滑动.
Question: Can someone provide an example that can perform some variation of the above and/or provide a link to an example that shows browser instantiation with web view flipping/ swiping.
请随意更正我建议的实现...可能有更好的方法来做到这一点，但我还没有考虑过...
Feel free to correct my suggested implementation... there may be a better way to do this that I haven't considered yet...
推荐答案
嗯，我已经研究了一段时间，我有一个有效的解决方案.我不确定这是最有效的解决方案，但我一直在研究和编写代码，直到找到有意义的东西.使用以下代码，我需要向 Android & 大喊大叫.阿米尔在 http://android-journey.blogspot.com/2010/01/android-webview.html 帮助我解决这个问题.他有一些很棒的东西，你们都应该去看看.
Well, I've worked on this for some time and I have a solution that works. I am not sure it is the most effective solution, but I just kept researching and writing code until I figured out something that made sense. With the following code I need to give a big shout out to Android & Amir at http://android-journey.blogspot.com/2010/01/android-webview.html for helping me figure this out. He's got some great stuff and you all should check it out.
第一步是在您的 Activity 包中创建一个名为 SimpleGestureFilter 的类并使用代码 找到这里.这直接来自 Amir，极大地简化了滑动的手势交互.
The first step is to create a class in your Activity package called SimpleGestureFilter and use the code found here. This comes directly from Amir and dramatically simplifies the gesture interactions for swipe.
下一步是为您的布局使用 ViewFlipper.我使用了按钮和其他一些东西，所以这个布局文件中的内容比必要的要多，但你应该得到图片.
The next step is to use ViewFlipper for your layout. I was using buttons and several other things so there is more in this layout file than necessary, but you should get the picture.
<?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.
As you can see, the xml describes a linear layout that contains a ViewFlipper. In the view flipper there are three WebViews.
最后一步是活动...
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 接口在点击时调用相同的动画.
So... The basic pattern I came up with is to use a single web client and browser settings. I use the onCreate method to load the views, set the first view and then an Async method to load the other views after the main view is loaded. So two of the views load in the background. I them use the patterns Amir passed on to manage swipe. I use buttons and JS interfaces to invoke the same animations on clicks.
最终结果是 ViewFlipping 网页视图的滑动和点击动画，类似于您将在新的安卓市场用户界面中看到的用户界面.随意推荐任何可能使此模式更强大的其他实现.
The final result is swipe and click animations for ViewFlipping webviews similar to the UI you'll see in the new android market UI. Feel free to recommend any additional implementation that might make this pattern stronger.
这篇关于寻找具有多个 WebView 的 Android ViewFlipper 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
