1. 程式人生 > >畢業設計之android混合模式開發第一天--具有下拉重新整理和頁面載入等待的WebView搭建

畢業設計之android混合模式開發第一天--具有下拉重新整理和頁面載入等待的WebView搭建

第一次真正接觸android的混合模式開發,之前瞭解過如何進行混合模式的開發,常見的是通過WebView元件載入url,使用HTML5和CSS3構建手機端響應式佈局。

今天主要是搭建出一個可載入url,具有下拉重新整理和頁面等待的WebView。

2.頁面等待的實現主要是通過自定義一個LinearLayout,裡面新增載入圖片(旋轉動畫),附加一些載入說明文字。

自定義LinearLayout程式碼如下:

public class LoadLayout extends LinearLayout {
	
	private ImageView loadImage = null;
	private TextView tipTextView = null;

	public LoadLayout(Context context) {
		super(context);
	}
	
	public LoadLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		if(loadImage == null && tipTextView == null) {
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
					LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
			LinearLayout.LayoutParams childparams = new LinearLayout.LayoutParams(
					LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
			this.setBackgroundColor(Color.TRANSPARENT);
			this.setOrientation(LinearLayout.VERTICAL);
			this.setLayoutParams(params);
	        this.setGravity(Gravity.CENTER);// 位置居中
	        loadImage = new ImageView(getContext());
	        loadImage.setImageResource(com.handmark.pulltorefresh.library.R.drawable.default_ptr_rotate);
	        // 載入動畫  
	        Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(  
	        		getContext(), R.anim.loading_animation);  
	        // 使用ImageView顯示動畫  
	        loadImage.startAnimation(hyperspaceJumpAnimation);  
	        
	        tipTextView = new TextView(getContext());
	        tipTextView.setText("頁面載入中...");// 設定載入資訊 
	        
	        this.addView(loadImage,childparams);
	        this.addView(tipTextView,childparams);
		}
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        
	}

}
佈局檔案如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ffffff" >
    
    <com.handmark.pulltorefresh.library.PullToRefreshWebView
        xmlns:ptr="http://schemas.android.com/apk/res-auto"
        android:id="@+id/home_webview"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        ptr:ptrMode="both" />
    
    <com.redwine.view.LoadLayout
        android:id="@+id/load_layout"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:orientation="vertical"
        android:visibility="invisible"
        android:background="#ffffff"
        />

</LinearLayout>

Activity程式碼如下:
import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener;
import com.handmark.pulltorefresh.library.PullToRefreshWebView;
import com.redwine.R;
import com.redwine.view.LoadLayout;
import android.annotation.SuppressLint;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import android.webkit.WebViewClient;

@SuppressLint("SetJavaScriptEnabled")
public class HomeFragment extends Fragment {
	private PullToRefreshWebView mPullRefreshWebView;
	private WebView mWebView;
	private LoadLayout loadLayout;
	private boolean reload = false;
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		reload = false;
		View view = inflater.inflate(R.layout.home_fragment, container, false);
		mPullRefreshWebView = (PullToRefreshWebView) view.findViewById(R.id.home_webview);
		mPullRefreshWebView.setOnRefreshListener(new OnRefreshListener<WebView>() {
			@Override
			public void onRefresh(PullToRefreshBase<WebView> refreshView) {
				refreshView.getRefreshableView().reload();
				reload = true;
			}
		});
		loadLayout = (LoadLayout) view.findViewById(R.id.load_layout);
		mWebView = mPullRefreshWebView.getRefreshableView();
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.setWebViewClient(new SampleWebViewClient());
		mWebView.loadUrl("http://www.gxnu.edu.cn");
		return view;
	}
	
	class SampleWebViewClient extends WebViewClient {
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			view.loadUrl(url);
			return true;
		} 
		
		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			if(!reload) {
				mPullRefreshWebView.setVisibility(View.GONE);
				loadLayout.setVisibility(View.VISIBLE);
			}
			super.onPageStarted(view, url, favicon);
		}
		
		@Override
		public void onPageFinished(WebView view, String url) {
			if(!reload) {
				loadLayout.setVisibility(View.GONE);
				mPullRefreshWebView.setVisibility(View.VISIBLE);
			}
			super.onPageFinished(view, url);
		}
	}

}

效果基本上可以實現,但有一些問題有待解決:

1.如何傳入自定義的訊息到頁面等待中

2.點選原生按鈕時出現等待頁面,會有閃爍出現

上述兩個問題,如果大家有解決方案,希望告知本人。