前言
在開發(fā)中，有時候我們會在app中使用WebView加載一個web頁面。這樣可以適當減輕我們開發(fā)的難度宴猾。但是弊端是WebView中切換html陡舅，沒有像原生頁面的切換效果抵乓。這里我們就利用動畫，以及
獲取網(wǎng)頁的快照來實現(xiàn)android activity 默認的切換效果（頁面從右往左進入靶衍，從左往右退出）灾炭。
先看看效果：
大體思路
監(jiān)聽webview加載url的進度，在沒到100%之前先獲取當前頁面的截圖颅眶，并用imageview顯示在手機屏幕上蜈出。網(wǎng)頁加載好的時候。讓imageview和webView分別加載對應(yīng)的動畫效果涛酗，以達到從右到左或者從左到右的效果铡原，模擬原生頁面的切換效果。
第一步商叹、創(chuàng)建相關(guān)動畫資源
在animal文件夾下新建以下補間動畫：
1燕刻、頁面進入相關(guān)動畫
translate_in_go.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate android:fromXDelta="100%" android:toXDelta="0%p"
android:duration="300" />
</set>
translate_out_go.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0%" android:toXDelta="-100%p"
android:duration="300" />
</set>
2、頁面退出相關(guān)動畫
translate_in_back.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:fromXDelta="-100%" android:toXDelta="0%p"
android:duration="300" />
</set>
translate_out_back.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0%" android:toXDelta="100%p"
android:duration="300" />
</set>
第二步剖笙、在webView中調(diào)用動畫達到效果
package com.teprinciple.webviewdemo;
import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
private RelativeLayout root;
private boolean isGoBack = false;
private boolean isFirst = true;
private ImageView iamgeView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
root = (RelativeLayout) findViewById(R.id.root);
initoperation();
}
private void initoperation() {
initWebView();
mWebView.loadUrl("http://www.reibang.com/u/7c36ad462572");
}
private void initWebView() {
mWebView.setWebChromeClient(new WebChromeClient() {
//url加載進度改變的監(jiān)聽
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (isFirst)return; //剛進入頁面不需要模擬效果卵洗，app自己有
view.setVisibility(View.GONE);//先隱藏webview
if (newProgress == 100) {
//加載完畢，顯示webview 隱藏imageview
view.setVisibility(View.VISIBLE);
if (iamgeView != null)iamgeView.setVisibility(View.GONE);
//頁面進入效果的動畫
Animation translate_in = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_in_go);
Animation translate_out = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_out_go);
//頁面退出的動畫
if (isGoBack){
translate_in = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_in_back);
translate_out = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_out_back);
}
translate_in.setFillAfter(true);
translate_in.setDetachWallpaper(true);
translate_out.setFillAfter(true);
translate_out.setDetachWallpaper(true);
//開啟動畫
if(null!=iamgeView)iamgeView.startAnimation(translate_out);
view.startAnimation(translate_in);
//動畫結(jié)束后弥咪，移除imageView
translate_out.setAnimationListener(new Animation.AnimationListener(){
@Override
public void onAnimationEnd(Animation animation) {
if(null!=iamgeView){
root.removeView(iamgeView);
iamgeView=null;
isGoBack = false;
}
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
});
}else{
//url沒加載好之前过蹂，隱藏webview，在主布局中聚至，加入imageview顯示當前頁面快照
if(null==iamgeView){
iamgeView=new ImageView(MainActivity.this);
view.setDrawingCacheEnabled(true);
Bitmap bitmap=view.getDrawingCache();
if(null!=bitmap){
Bitmap b= Bitmap.createBitmap(bitmap);
iamgeView.setImageBitmap(b);
}
root.addView(iamgeView);
}
}
}
});
mWebView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
isFirst = false;
return super.shouldOverrideUrlLoading(view, url);
}
});
//webView的相關(guān)設(shè)置
WebSettings websettings = mWebView.getSettings();
websettings.setJavaScriptEnabled(true); // Warning! You can have XSS
websettings.setSupportZoom(true);
// websettings.setBlockNetworkImage(true); //使把圖片加載放在最后來加載渲染
websettings.setAppCacheEnabled(true); //開啟H5(APPCache)緩存功能
websettings.setCacheMode(WebSettings.LOAD_DEFAULT);
websettings.setAllowFileAccess(true); // 可以讀取文件緩存(manifest生效)
websettings.setDatabaseEnabled(true); //webSettings.setDatabaseEnabled(true);
websettings.setDomStorageEnabled(true); // 開啟 DOM storage 功能
websettings.setDisplayZoomControls(false);
websettings.setDefaultTextEncodingName("utf-8");
websettings.setRenderPriority(WebSettings.RenderPriority.HIGH); //提高渲染的優(yōu)先級
}
@Override
public void onBackPressed() {
if (mWebView.canGoBack()) {
isGoBack = true;
mWebView.goBack();
} else {
super.onBackPressed();
}
}
}
activity的布局文件：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/root"
tools:context="com.teprinciple.webviewdemo.MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
這樣就模仿出了app原生的切換效果酷勺。但是當url頁面的很豐富，加載時間會很長扳躬，這樣來實現(xiàn)就會有的卡頓的效果鸥印，不過一般的頁面效果還是很好的。
