programacion - Buscando Android ViewFlipper Ejemplo con múltiples WebViews

programacion android pdf 2018

Question

Como estoy seguro de que todos ustedes saben. La configuración de una WebView es una cuestión de crear un cliente de navegador webview, establecer propiedades y cargar un recurso en el cliente del navegador. He creado varias aplicaciones de Android que hacen exactamente eso.

Lo que me gustaría probar ahora es deslizar horizontalmente diferentes recursos web. Imagine una página de inicio principal en una url, una página de categorías en otra url y una página de búsqueda en otra url. Me gustaría crear una construcción UI que permita deslizar desde la vista principal de la página principal a una vista que muestre la URL de las categorías y luego deslizar otra vez que muestra la vista con el recurso de búsqueda (piense en la nueva interfaz de usuario del mercado Android - deslice hacia la izquierda muestra categorías) .

He leído en ViewFlipper y en varias publicaciones aquí, pero no puedo encontrar un ejemplo exhaustivo de cómo integrar la instanciación del navegador con la vista flipping / swiping.

Pregunta: ¿Alguien puede proporcionar un ejemplo que puede realizar alguna variación de lo anterior y / o proporcionar un enlace a un ejemplo que muestre la creación de instancias del navegador con la vista web volteando / deslizando.

No dude en corregir mi implementación sugerida ... puede haber una mejor manera de hacer esto que no he considerado todavía ...

Answer 1

Bueno, he trabajado en esto por un tiempo y tengo una solución que funciona. No estoy seguro de que sea la solución más efectiva, pero seguí investigando y escribiendo código hasta que descubrí algo que tenía sentido. Con el siguiente código, debo dar un gran saludo a Android & Amir en http://android-journey.blogspot.com/2010/01/android-webview.html por ayudarme a resolver esto. Él tiene algunas cosas geniales y todos ustedes deberían echarle un vistazo.

El primer paso es crear una clase en su paquete de actividades llamado SimpleGestureFilter y usar el código que se encuentra aquí . Esto viene directamente de Amir y simplifica dramáticamente las interacciones de gestos para deslizar.

El siguiente paso es usar ViewFlipper para su diseño. Estaba usando botones y varias otras cosas, por lo que hay más en este archivo de diseño de lo necesario, pero debe obtener la imagen.

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

Como puede ver, el xml describe un diseño lineal que contiene un ViewFlipper. En la aleta de vista hay tres WebViews.

El último paso es la Actividad ...

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

Entonces ... El patrón básico que se me ocurrió es utilizar un único cliente web y la configuración del navegador. Utilizo el método onCreate para cargar las vistas, establezco la primera vista y luego un método Async para cargar las otras vistas después de cargar la vista principal. Entonces, dos de las vistas se cargan en segundo plano. Yo uso los patrones que Amir pasó para administrar el deslizamiento. Uso botones e interfaces JS para invocar las mismas animaciones en los clics.

El resultado final es deslizar y hacer clic en animaciones para vistas web de ViewFlipping similares a la interfaz de usuario que verá en la nueva interfaz de usuario de Android Market. No dude en recomendar cualquier implementación adicional que pueda fortalecer este patrón.