毕业设计之android混合模式开发第一天--具有下拉刷新和页面加载等待的WebView搭建

第一次真正接触android的混合模式开发，之前了解过如何进行混合模式的开发，常见的是通过WebView组件加载url，使用HTML5和CSS3构建手机端响应式布局。

今天主要是搭建出一个可加载url，具有下拉刷新和页面等待的WebView。

1.目前下拉刷新的开源组件有很多，我参考的是https://github.com/chrisbanes/Android-PullToRefresh。这块的使用可以参考文档demo去使用。

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.点击原生按钮时出现等待页面，会有闪烁出现

上述两个问题，如果大家有解决方案，希望告知本人。