Cóż, pracował nad tym od pewnego czasu i I mieć rozwiązanie, które działa. Nie jestem pewien, czy jest to najskuteczniejsze rozwiązanie, ale po prostu kontynuowałem badania i pisanie kodu, dopóki nie odkryłem czegoś, co miało sens. Z poniższym kodem muszę dać duży okrzyk na Androida & Amir pod numerem http://android-journey.blogspot.com/2010/01/android-webview.html za pomoc w rozwiązaniu tego problemu. Ma świetne rzeczy i wszyscy powinniście to sprawdzić.
Pierwszym krokiem jest utworzenie klasy w pakiecie działań o nazwie SimpleGestureFilter i użycie kodu found here. To pochodzi bezpośrednio od Amira i dramatycznie upraszcza interakcje gestów do machnięcia.
Następnym krokiem jest użycie ViewFlipper do swojego układu. Używałem przycisków i kilku innych rzeczy, więc jest więcej w tym pliku układu niż to konieczne, ale powinieneś dostać zdjęcie.
<?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>
Jak widać, xml opisuje liniowy układ zawierający ViewFlipper. W widoku flipper są trzy WebView.
Ostatnim krokiem jest aktywny ...
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() {}
}
Więc ... Podstawowy wzór wymyśliłem jest korzystać z jednego ustawienia klienta i przeglądarki internetowej. Używam metody onCreate do załadowania widoków, ustawienia pierwszego widoku, a następnie metody Async w celu załadowania innych widoków po wczytaniu widoku głównego. Tak więc dwa widoki ładują się w tle. Używam wzorów, które przekazał im Amir, by zarządzać machnięciem. Używam przycisków i interfejsów JS do wywoływania tych samych animacji na kliknięciach.
Końcowy wynik to animacje przesuwania i klikania dla widoku Wyświetlenie stron internetowych podobne do interfejsu użytkownika widocznego w nowym interfejsie Android Market. Możesz polecić każdą dodatkową implementację, która może wzmocnić ten wzorzec.
@ jroot.Zen Świetna praca nad tym tematem .. –