我相信你们都知道。设置WebView就是创建一个WebView浏览器客户端,设置属性并将资源加载到浏览器客户端。我已经创建了几个android应用程序,正是这样做的。
我现在想尝试的是不同的web资源的水平滑动。想象一下,在一个url上有一个主主页,在另一个url上有一个分类页面,在另一个url上有一个搜索页面。我想创建一个UI结构,允许从主主页url视图滑动到显示类别url的视图,然后另一个滑动显示搜索资源的视图(认为新的android市场UI -向左滑动显示类别)。
我已经阅读了ViewFlipper和这里的几个帖子,但我无法找到一个全面的例子,如何集成浏览器实例化与视图翻转/滑动。
问题:有人能提供一个例子,可以执行一些变化的上述和/或提供一个链接到一个例子,显示浏览器实例化与网页视图翻转/滑动。
请随意纠正我建议的实现…也许有一种更好的方法可以做到这一点,我还没有考虑到…
嗯,我在这个问题上工作了一段时间,我有一个解决方案。我不确定这是最有效的解决方案,但我一直在研究和编写代码,直到我找到了一些有意义的东西。通过下面的代码,我需要给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的线性布局。在viewflipper中有三个webview
最后一步是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方法来加载视图,设置第一个视图,然后在主视图加载后使用Async方法来加载其他视图。两个视图在后台加载。如果他们用阿米尔传给他们的模式来控制刷卡。我使用按钮和JS接口来调用相同的动画点击。
最终结果是viewflip webviews的滑动和点击动画,类似于您将在新的android market UI中看到的UI。请随意推荐任何可能使此模式更强大的其他实现。