Android开发之麦田福音网移动版本演示程序

原文来自 http://caotian.appspot.com/2011/02/18/mtfy-android-demo.html  感谢作者的分享！

         Android手机终于入手了，HTC Desire G7 水货2700的价格也不算太贵，终于可以开始我的Android开发之旅了，没有真机只有模拟器我还真有点底气不足。

         近来给麦田福音网规划移动平台，制作了一个麦田福音网部分功能的移动程序。演示程序只做展示，不提供登陆交互，因此还是比较简单的，打算做一个类似浏览器的外壳，提供几个按钮可以切换不同的功能，再做一个导航工具栏就可以了。当然，这之前先把3G版本的网页做出来，添加了一个m.php，使用mod参数控制调用不同的功能，这个不在本文讨论范围内。

         程序功能十分简单，只有一个名为MainPage的Activity。常规的，先把布局整理出来，老老实实地用Tab控件拖了四个，分别对应“麦田沙龙”，“麦田微博”，“麦田杂志”，“公共主页”，然后在每个Tab里嵌入一个WebView控件，充当浏览器功能，然后分别针对每个tab增加click事件响应函数，设定对应的WebView对加载指定的功能所需要的网页。写完后，发现这样挺傻的，WebView维护了四个，要是再添加Tab还要再增加WebView，虽然对Android刚刚入门，依然觉得不同的Tab应该可以共享一个WebView。而且Tab最好可以动态生成，这样可以在代码中控制Tab的生成，比写死到界面xml文件中要好的多。于是，打开main.xml，修改页面布局为：

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@+id/TabHost01" android:layout_width="fill_parent"      android:layout_height="fill_parent">      <LinearLayout android:layout_width="fill_parent"          android:orientation="vertical" android:layout_height="fill_parent">          <TabWidget android:id="@android:id/tabs"              android:layout_width="fill_parent"              android:layout_height="wrap_content" />          <FrameLayout android:id="@android:id/tabcontent"              android:layout_width="fill_parent"              android:layout_height="fill_parent">                 </FrameLayout>      </LinearLayout>          <LinearLayout android:orientation="horizontal"android:id="@+id/btnbar" android:background="#333333"android:layout_width="fill_parent" android:layout_gravity="bottom"android:layout_height="40dp"><RelativeLayout android:layout_width="50dp" android:layout_height="fill_parent"android:layout_marginLeft="10dp"><ImageView android:src="@drawable/left" android:layout_centerInParent="true"android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnleft"/></RelativeLayout><RelativeLayout android:layout_width="50dp" android:layout_height="fill_parent"android:layout_marginLeft="10dp"><ImageView android:src="@drawable/right" android:layout_centerInParent="true"android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnright"/></RelativeLayout><RelativeLayout android:layout_width="50dp" android:layout_height="fill_parent"android:layout_marginLeft="10dp"><ImageView android:src="@drawable/home" android:layout_centerInParent="true"android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnhome"/></RelativeLayout><RelativeLayout android:layout_width="50dp" android:layout_height="fill_parent"android:layout_marginLeft="10dp"><ImageView android:src="@drawable/refresh" android:layout_centerInParent="true"android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnrefresh"/></RelativeLayout><RelativeLayout android:layout_width="50dp" android:layout_height="fill_parent"android:layout_marginLeft="10dp"><ImageView android:src="@drawable/quit" android:layout_centerInParent="true"android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnquit"/></RelativeLayout></LinearLayout></TabHost>  

          正文是一排导航按钮图片，没有什么好说的。为简单，此处一个一个写出来，没有动态生成，也没必要。同时准备好导航图片，放到res\drawable-mdpi下。

 

          下面简单说说演示程序的几点需要编程的地方：

1)       Tab的动态生成：这个毫无疑问，使用工厂生成就是了。新建一个TabFactory类，继承自abContentFactory。Tab中应包含WebView，由于共享WebView，所以WebView采用单例模式，静态只生成一次就好了，并且给它指定一个固定的数字ID，我使用了100，以方便其它页面取得对WebView的引用。代码如下：

package org.mtfy;import android.content.Context;import android.view.View;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.TabHost.TabContentFactory;public class TabFactory implements TabContentFactory {private Context con;private static WebView webView;static final int webview = 0x100;public TabFactory(Context c){con = c;}public View createTabContent(String tag) {if(webView==null){webView = new WebView(con);webView.setId(webview);WebSettings webSettings = webView.getSettings();   webSettings.setJavaScriptEnabled(true);//webSettings.setBuiltInZoomControls(true);webView.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}});}return webView;}}

2)       在MainPage的Activity中，定义一些常量和变量。TabHost变量用来控制生成的Tab添加到当前Activity 中。webView用来引用唯一的WebView。几个ImageView为导航图片按钮的引用， url1-4为四个Tab页面对应的主url。

private TabHost tabHost;private WebView webView;private ImageView imageViewLeft;private ImageView imageViewRight;private ImageView imageViewHome;private ImageView imageViewRefresh;private ImageView imageViewQuit;static final int webview = 0x100;static final String url1 = "http://www.mtfy.org/m.php?mod=home";static final String url2 = "http://www.mtfy.org/m.php?mod=t";static final String url3 = "http://www.mtfy.org/m.php?mod=magazine";static final String url4 = "http://www.mtfy.org/m.php?mod=public";

3)       OnCreate函数中，增加Tab动态创建的代码，并设置第一个Tab为选中状态：

@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);try {tabHost = (TabHost) this.findViewById(R.id.TabHost01);tabHost.setup();tabHost.addTab(tabHost.newTabSpec("tab1").setContent(new TabFactory(this)).setIndicator("麦田沙龙"));tabHost.addTab(tabHost.newTabSpec("tab2").setContent(new TabFactory(this)).setIndicator("麦田微博"));tabHost.addTab(tabHost.newTabSpec("tab3").setContent(new TabFactory(this)).setIndicator("麦田杂志"));tabHost.addTab(tabHost.newTabSpec("tab4").setContent(new TabFactory(this)).setIndicator("公共主页"));tabHost.setCurrentTab(0);final TabWidget tabWidget = tabHost.getTabWidget();for (int i = 0; i < tabWidget.getChildCount(); i++) {tabWidget.getChildAt(i).getLayoutParams().height = 40;}} catch (Exception ex) {ex.printStackTrace();}webView = (WebView) this.findViewById(webview);webView.loadUrl(url1);OnTabChangeListener changeList = new OnTabChangeListener() {public void onTabChanged(String tabId) {if (tabId.equals("tab1")) {webView.loadUrl(url1);} else if (tabId.equals("tab2")) {webView.loadUrl(url2);} else if (tabId.equals("tab3")) {webView.loadUrl(url3);} else if (tabId.equals("tab4")) {webView.loadUrl(url4);}webView.clearHistory();}};tabHost.setOnTabChangedListener(changeList);imageViewLeft = (ImageView) this.findViewById(R.id.btnleft);imageViewLeft.setOnClickListener(new OnClickListener() {public void onClick(View v) {webView.goBack();}});imageViewRight = (ImageView) this.findViewById(R.id.btnright);imageViewRight.setOnClickListener(new OnClickListener() {public void onClick(View v) {webView.goForward();}});imageViewHome = (ImageView) this.findViewById(R.id.btnhome);imageViewHome.setOnClickListener(new OnClickListener() {public void onClick(View v) {int currId = tabHost.getCurrentTab();switch (currId) {case 0:webView.loadUrl(url1);break;case 1:webView.loadUrl(url2);break;case 2:webView.loadUrl(url3);break;case 3:webView.loadUrl(url4);break;}}});imageViewRefresh = (ImageView) this.findViewById(R.id.btnrefresh);imageViewRefresh.setOnClickListener(new OnClickListener() {public void onClick(View v) {webView.reload();}});imageViewQuit = (ImageView) this.findViewById(R.id.btnquit);imageViewQuit.setOnClickListener(new OnClickListener() {public void onClick(View v) {quitConfirm();}});}

4)       取得WebView的引用，并默认加载第一个地址，即第一个Tab对应的网址。

webView = (WebView) this.findViewById(webview); webView.loadUrl(url1);

5)       增加Tab的TabChangeListener事件，用来响应各个Tab的点击。由于几个不同的Tab共享同一个WebView，因此切换Tab的时候，同时清除WebView的缓存，防止点击后退的时候，后退到非当前Tab下的页面。

OnTabChangeListener changeList = new OnTabChangeListener() {public void onTabChanged(String tabId) {if (tabId.equals("tab1")) {webView.loadUrl(url1);} else if (tabId.equals("tab2")) {webView.loadUrl(url2);} else if (tabId.equals("tab3")) {webView.loadUrl(url3);} else if (tabId.equals("tab4")) {webView.loadUrl(url4);}webView.clearHistory();}};tabHost.setOnTabChangedListener(changeList);

6)       增加几个导航图片按钮的点击事件，分别用来后退，前进，主页，刷新，退出。点击主页的时候，先取得当前Tab，再判断需要加载哪个url。退出按钮调用了退出确认函数quitConfirm，用来询问用户是否要调用，函数内容比较简单，只是显示一个对话框，用户点确认就退出系统，否则不做处理返回。

imageViewLeft = (ImageView) this.findViewById(R.id.btnleft);imageViewLeft.setOnClickListener(new OnClickListener() {public void onClick(View v) {webView.goBack();}});imageViewRight = (ImageView) this.findViewById(R.id.btnright);imageViewRight.setOnClickListener(new OnClickListener() {public void onClick(View v) {webView.goForward();}});imageViewHome = (ImageView) this.findViewById(R.id.btnhome);imageViewHome.setOnClickListener(new OnClickListener() {public void onClick(View v) {int currId = tabHost.getCurrentTab();switch (currId) {case 0:webView.loadUrl(url1);break;case 1:webView.loadUrl(url2);break;case 2:webView.loadUrl(url3);break;case 3:webView.loadUrl(url4);break;}}});imageViewRefresh = (ImageView) this.findViewById(R.id.btnrefresh);imageViewRefresh.setOnClickListener(new OnClickListener() {public void onClick(View v) {webView.reload();}});imageViewQuit = (ImageView) this.findViewById(R.id.btnquit);imageViewQuit.setOnClickListener(new OnClickListener() {public void onClick(View v) {quitConfirm();}});

protected void quitConfirm() {AlertDialog.Builder builder = new Builder(MainPage.this);builder.setMessage("确定要退出麦田福音吗？");builder.setTitle("麦田福音提示");builder.setPositiveButton("确认",new android.content.DialogInterface.OnClickListener() {public void onClick(DialogInterface dialog, int which) {dialog.dismiss();System.exit(0);}});builder.setNegativeButton("取消",new android.content.DialogInterface.OnClickListener() {public void onClick(DialogInterface dialog, int which) {dialog.dismiss();}});builder.create().show();}

7)       由于手机上的返回键，默认会直接关闭Activity，因为还要检测返回键，如果按下了，再判断WebView是否有历史记录，如果有就后退，没有就提示是否退出系统，我见主流的软件都是这样做，我也不多想，仿冒一个就是了。

@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {if (webView.canGoBack()) {webView.goBack();} else {quitConfirm();}return false;}return false;}

至此，程序完毕，在仿真器中打开看一下 ，效果还不错：

打包成apk文件，部署到手机中：

该演示程序比较简单，本文只流水记录一下开发步骤，至此Android开发大体有了点点的了解。