寻找Android的ViewFlipper实例与多个WebViews [英] Looking for Android ViewFlipper Example with Multiple WebViews
问题描述
正如我相信你们都知道。建立一个web视图是创建web视图浏览器的客户端，设置属性和加载资源到浏览器客户机的问题。我创建了做的正是这几款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，然后又刷卡，显示与搜索资源视图的视图（认为新的Android Market的用户界面 - 刷卡左边显示的类别）
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这里的几个职位，但我无法找到如何整合浏览器实例与观点翻转/刷卡一个COM prehensive例子。
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...
推荐答案
嗯，我在这一段时间的工作，我有一个解决方案，工程。我不知道这是最有效的解决方案，但我只是不停地研究和写作code，直到我想通了一些有意义。用下面的code我需要给一个大的喊出来到Android和放大器;阿米尔在<一个href="http://android-journey.blogspot.com/2010/01/android-webview.html">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.
第一步是在你所谓的SimpleGestureFilter活动包创建一个类，并使用code的此处找到。这直接来自阿米尔，并显着简化了轻扫手势交互。
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线性布局。在视图中导板有三个WebViews
As you can see, the xml describes a linear layout that contains a ViewFlipper. In the view flipper there are three WebViews.
的最后一步是在活动...
The final step is the 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方法加载的意见，设置第一个视图，然后加载主视图后，一个异步方法加载其他视图。所以，两个意见装载在后台。我他们用阿米尔转嫁到刷卡管理模式。我使用的按键和接口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 webviews相似，你会在新的Android市场的用户界面看到的用户界面。随意提出任何额外的实施可能使这种模式更强大。
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.
这篇关于寻找Android的ViewFlipper实例与多个WebViews的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
