webview跳转动画

最新推荐文章于 2021-05-27 23:32:30 发布

Orion-Vu

最新推荐文章于 2021-05-27 23:32:30 发布

阅读量1.1k

点赞数

分类专栏： h5+

本文链接：https://blog.csdn.net/androidwubo/article/details/79034816

版权

h5+ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

情景:

项目里面内容是html，ios和Android是壳，内部实现是当点击webview内部的时候，跳转另一个页面的时候是加载本地的另一个html，那么将这个新加载的html通过addview的方式添加，监听webview的状态，当onpagestart或者finish的时候执行addview的动画

activity里面的布局一定要是通过framlayout的方式add进去webview，不能直接写一个webview进行加载，否者会出现闪屏，原因是因为，你加载的webview会先执行一次加载是本地数据，然后又执行一次加载是ajax数据绑定的时候，这样会导致你的webview再一次执行，出现闪屏的情况

还有一个就是，点击返回键，通过这样addview你会发现只有两个界面，无论怎么添加，所以你需要设置一个listview<webview>，这样你在添加界面的时候就创建一个新的webview，添加到list中，点击返回的时候就移除掉最后一个，在移除的时候再添加一个反向的动画，效果更好。

设置webview跳转动画，webview加载的时候比较操蛋，直接显示，体验太差，通过查看一些博客，总结出自己的方案，目前感觉还行，如果有什么优化，大家可以留言说一下。

以下是我的代码，里面实现了下拉刷新和上拉加载的，如果不需要自行删除，上拉加载是一个自定义view

这个是布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    android:overScrollMode="never">

    <com.example.orion.htmltext1.View.PullToRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/srl"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <FrameLayout
            android:id="@+id/ll_bac"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:overScrollMode="never">

        </FrameLayout>
        </android.support.v4.widget.SwipeRefreshLayout>

    </com.example.orion.htmltext1.View.PullToRefreshLayout>

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>

这个是activity的代码,但是想用viewpager写，发现动画实现无法从第10个跳第1个，这样隔着几个页面的情况

/**
 * 本类：
 * Created by Orion on 2018/1/5.
 */

public class ViewPagerTbsActivity extends Activity {
    private WebView webView;
    private boolean isFirstView = true;
    private long first_pressed_time;
    private ProgressBar progressBar;
    private FrameLayout root;
    private String APP_CACAHE_DIRNAME = "/webviewcache";
    private Map<String, WebView> webViewMap = new HashMap<>();
    private List<WebView> webViewList = new ArrayList<>();
    private PullToRefreshLayout pullToRefreshLayout;
    private SwipeRefreshLayout swipeRefreshLayout;

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏
        setContentView(R.layout.activity_viewpagertbs);
        webView = new WebView(this);
        webViewList.add(webView);
        root = findViewById(R.id.ll_bac);
        root.addView(webView);
        progressBar = findViewById(R.id.progress);
        pullToRefreshLayout = findViewById(R.id.swipe_refresh_layout);
        swipeRefreshLayout = findViewById(R.id.srl);
        // 下拉刷新
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        webViewList.get(webViewList.size() - 1).loadUrl("javascript:javaCallJs" +
                                "('刷新成功')");
                        swipeRefreshLayout.setRefreshing(false);
                    }
                }, 1000);

            }
        });

        // 上拉加载
        pullToRefreshLayout.setCanRefresh(false);
        pullToRefreshLayout.setRefreshListener(new BaseRefreshListener() {
            @Override
            public void refresh() {
            }

            @Override
            public void loadMore() {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        webViewList.get(webViewList.size() - 1).loadUrl("javascript:javaCallJs" +
                                "('加载成功')");
                        pullToRefreshLayout.finishLoadMore();
                    }
                }, 1000);
            }
        });

        initWebView(webView);
        webView.loadUrl("file:///android_asset/www/CollegeHome.html");
    }

    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
    @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
    private void initWebView(final WebView webView) {
        webView.setOverScrollMode(View.OVER_SCROLL_NEVER);
        webView.addJavascriptInterface(new JsInterface1(), "Android");
        WebSettings settings = webView.getSettings();
        //支持JS
        settings.setJavaScriptEnabled(true);
        settings.setDefaultTextEncodingName("UTF-8");
        // 让JavaScript可以自动打开windows
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        // 将图片调整到合适的大小
        settings.setUseWideViewPort(true);
        // webView拓展的api是否打开：
        settings.setDomStorageEnabled(true);
        // 在高版本的时候我们是需要使用允许访问文件的urls：
        settings.setAllowFileAccessFromFileURLs(true);
        // 设置缓存
        settings.setAppCacheEnabled(true);
        // 设置缓存模式,一共有四种模式
        settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        settings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        settings.setLoadsImagesAutomatically(true);  //支持自动加载图片
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
        settings.supportMultipleWindows();  //多窗口
        settings.setAllowFileAccess(true);  //设置可以访问文件

        // 设置不闪白屏的设置
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        settings.setDatabaseEnabled(true);
        settings.setSavePassword(true);

        // 下面是设置缓存的东西
        //        if (isNetworkConnected()) {
        //            settings.setCacheMode(WebSettings.LOAD_DEFAULT);//根据cache-control决定是否从网络上取数据。
        //        } else {
        //            settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//没网，则从本地获取，即离线加载
        //        }
        //
        //        settings.setDomStorageEnabled(true); // 开启 DOM storage API 功能
        //        settings.setDatabaseEnabled(true);   //开启 database storage API 功能
        //        settings.setAppCacheEnabled(true);//开启 Application Caches 功能
        //
        //        String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
        //        settings.setAppCachePath(cacheDirPath); //设置  Application Caches 缓存目录
        webView.setDrawingCacheEnabled(true);

        // 不跳转到其他浏览器
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {//过时的方法用于sdk版本小于21的
                view.loadUrl(url);
                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP)//当Sdk版本大于21时才能使用此方法
                    view.loadUrl(request.getUrl().toString());
                return super.shouldOverrideUrlLoading(view, request);
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                progressBar.setVisibility(View.VISIBLE);
                // 当是首页的时候就不再执行动画
                if (isFirstView) {
                    isFirstView = false;
                } else {
                    Animation translate_in = AnimationUtils.loadAnimation(ViewPagerTbsActivity
                            .this, R.anim.translate_in);
                    translate_in.setFillAfter(true);
                    translate_in.setDuration(300);
                    translate_in.setDetachWallpaper(true);
                    //  translate_in.
                    view.setAnimation(translate_in);
                }
            }

            @Override
            public void onPageFinished(WebView view, String url) {
            }

            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                // 不要使用super，否则有些手机访问不了，因为包含了一条 handler.cancel()
                // super.onReceivedSslError(view, handler, error);
                // 接受所有网站的证书，忽略SSL错误，执行访问网页
                handler.proceed();
            }
        });
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                String url = view.getUrl();
                Log.e("webView--Url", url);
                if (newProgress == 100) {
                    progressBar.setVisibility(View.GONE);
                } else {
                    progressBar.setVisibility(View.VISIBLE);
                }
                super.onProgressChanged(view, newProgress);
            }
        });
    }

    @RequiresApi(api = Build.VERSION_CODES.M)
    public boolean isNetworkConnected() {
        ConnectivityManager manager = (ConnectivityManager) getSystemService(CONNECTIVITY_SERVICE);
        Network activeNetwork = manager.getActiveNetwork();
        if (activeNetwork != null) {
            return true;
        } else {
            return false;
        }
    }

    class JsInterface1 {
        @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
        @JavascriptInterface
        public void go(final String url) {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    WebView webView1 = new WebView(ViewPagerTbsActivity.this);
                    Animation translate_in = AnimationUtils.loadAnimation(ViewPagerTbsActivity
                            .this, R.anim.translate_in);
                    translate_in.setFillAfter(true);
                    translate_in.setDuration(300);
                    translate_in.setDetachWallpaper(true);
                    //  translate_in.
                    webView1.setAnimation(translate_in);
                    webViewList.add(webView1);
                    root.addView(webView1);
                    initWebView(webView1);
                    webView1.loadUrl(url);
                }
            });
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (webViewList.size() == 1) {
                doPressBackIcon();
            } else {
                WebView webView1 = webViewList.get(webViewList.size() - 1);
                Animation translate_out = AnimationUtils.loadAnimation(ViewPagerTbsActivity
                        .this, R.anim.translate_out);
                translate_out.setFillAfter(true);
                translate_out.setDuration(300);
                translate_out.setDetachWallpaper(true);
                //  translate_in.
                webView1.setAnimation(translate_out);
                root.removeView(webView1);
                webViewList.remove(webViewList.size() - 1);
            }

            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    /**
     * 用户点击手机下面的菜单返回键时执行的方法
     */
    public boolean doPressBackIcon() {
        //提示用户在3秒内再按一次返回键退出应用
        if (first_pressed_time == 0) {
            first_pressed_time = System.currentTimeMillis();
            ToastUtil.showShort(this, "3秒内再次点击返回键退出");
            return true;
        }
        long currentTime = System.currentTimeMillis();
        if (currentTime - first_pressed_time > 3000) {
            ToastUtil.showShort(this, "3秒内再次点击返回键退出");
            first_pressed_time = currentTime;
            return true;
        } else {
            //执行退出操作
            finish();
            return false;
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (webView != null)
            webView.destroy();
    }
}