Ищем пример Android ViewFlipper с несколькими WebViews - PullRequest
5 голосов
/ 18 сентября 2011

Как я уверен, вы все знаете.Настройка WebView - это создание клиента браузера WebView, настройка свойств и загрузка ресурса в клиент браузера.Я создал несколько приложений для Android, которые делают именно это.

Сейчас я хотел бы попробовать горизонтальное перелистывание различных веб-ресурсов.Представьте главную домашнюю страницу по одному URL, страницу категорий по другому URL и страницу поиска по другому URL.Я хотел бы создать конструкцию пользовательского интерфейса, которая позволяет переходить от представления URL главной домашней страницы к представлению, отображающему URL-адрес категории, а затем провести еще одно пролистывание, которое показывает представление с поисковым ресурсом (например, новый пользовательский интерфейс рынка Android - проведите пальцем влево, чтобы отобразить категории)..

Я прочитал о ViewFlipper и нескольких постах здесь, но я не могу найти исчерпывающий пример того, как интегрировать создание экземпляров браузера с переключением / смахиванием представления.

Вопрос: Можеткто-то предоставил пример, который может выполнить некоторое изменение вышеупомянутого и / или предоставить ссылку на пример, который показывает создание экземпляра браузера с переключением / перелистыванием веб-представления.

Не стесняйтесь исправлять предложенную мной реализацию ... можетбыть лучшим способом сделать это, что я еще не рассмотрел ...

1 Ответ

15 голосов
/ 25 сентября 2011

Ну, я работал над этим в течение некоторого времени, и у меня есть решение, которое работает.Я не уверен, что это самое эффективное решение, но я просто продолжал исследовать и писать код, пока не понял, что имеет смысл.С помощью следующего кода мне нужно дать большой крик Android & Amir по адресу http://android -journey.blogspot.com / 2010/01 / android-webview.html , чтобы помочь мне разобраться в этом.У него есть кое-что интересное, и вы все должны это проверить.

Первый шаг - создать в вашем пакете Activity класс с именем SimpleGestureFilter и использовать код , найденный здесь .Это происходит непосредственно от Амира и значительно упрощает взаимодействие жестов для проведения пальца.

Следующим шагом является использование 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,В флипплере есть три веб-представления.

Последний шаг - это действие ...

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

Итак ... Основной шаблон, который я придумал, заключается в использовании одной сетинастройки клиента и браузера.Я использую метод onCreate для загрузки представлений, устанавливаю первый вид, а затем метод Async для загрузки других представлений после загрузки основного представления.Таким образом, два представления загружаются в фоновом режиме.Я использую шаблоны, которые Амир передал, чтобы управлять проведением.Я использую кнопки и интерфейсы JS для вызова одинаковых анимаций при щелчках.

Конечный результат - анимация смахивания и щелчка для веб-просмотров ViewFlipping, аналогичных пользовательскому интерфейсу, который вы увидите в новом пользовательском интерфейсе Android Market.Не стесняйтесь рекомендовать любую дополнительную реализацию, которая может сделать этот шаблон сильнее.

...