第一次真正接触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.点击原生按钮时出现等待页面,会有闪烁出现
上述两个问题,如果大家有解决方案,希望告知本人。