Suche für Android ViewFlipper Beispiel mit Mehreren WebViews

Gut, ich gearbeitet habe diesem für einige Zeit, und ich habe eine Lösung, die funktioniert. Ich bin nicht sicher, es ist die effektivste Lösung, aber ich habe einfach das recherchieren und schreiben von code, bis ich herausgefunden, etwas, das Sinn machte. Mit dem folgenden code, den ich brauche, um geben eine große shout out für Android & Amir an http://android-journey.blogspot.com/2010/01/android-webview.html, dass Sie mir helfen dies herauszufinden. Er hat ein paar tolle Sachen, und Sie sollten check it out.

Der erste Schritt ist das erstellen einer Klasse in Ihrer Aktivität Paket namens SimpleGestureFilter und verwenden Sie den code finden Sie hier. Dies kommt direkt von Amir und vereinfacht den gesten-Interaktionen für streichen.

Der nächste Schritt ist die Verwendung ViewFlipper für Ihr layout. Ich war mit Schaltflächen und verschiedene andere Dinge, so gibt es mehr in dieser layout-Datei als notwendig, aber Sie sollten das Bild zu bekommen.

<?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>

Wie Sie sehen können, die xml beschreibt ein linearer Anordnung enthält einen ViewFlipper. In der Ansicht Flosse es gibt drei WebViews.

Der Letzte Schritt ist die Aktivität...

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() {}
}

So... Die grundlegenden Muster, die ich verwende, ist die Verwendung einer einzigen web-client und browser-Einstellungen. Ich benutze die onCreate-Methode laden Sie die Aussicht, den ersten Blick und dann eine Asynchrone Methode zum laden der anderen Ansichten, nach der Haupt-Ansicht geladen wird. Also zwei Ansichten laden im hintergrund. Ich habe Sie mit dem Muster Amir übergeben, der Verwaltung streichen. Ich verwenden Sie die Tasten und JS-Schnittstellen aufrufen, die gleichen Animationen auf Klicks.

Das Endergebnis streichen, und klicken Sie auf Animationen für ViewFlipping webviews ähnlich der Benutzeroberfläche, die Sie sehen in den neuen android market UI. Fühlen Sie sich frei, Sie zu empfehlen, jeder weitere Umsetzung könnten diese Muster stärker.

InformationsquelleAutor jroot.zen