乐学成语实现之二显示主界面

       在第二阶段中，我们准备完成主界面的设计，这一阶段需要编写的代码量比较大，你一定要跟上脚步。

主界面的设计采用选项卡组件，在res的drawable_hdpi目录下拷入需要的图片素材，在res/layout目录中新建activity_main.xml布局，代码如下所示：

<?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"
    tools:context=".MainActivity">
    <TabHost 
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true">
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <TabWidget 
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                
            </TabWidget>
            <FrameLayout 
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <LinearLayout 
                    android:id="@+id/tab1"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    
                </LinearLayout>
                <LinearLayout 
                    android:id="@+id/tab2"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    
                </LinearLayout>
                <LinearLayout 
                    android:id="@+id/tab3"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</RelativeLayout>

      布局文件中的内容比较简单，主要是拖了一个TabHost控件到界面上，然后在res的values目录的string.xml文件中定义所需的字符串。代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">HappyIdiom</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
	<string name="title_activity_main">MainActivity</string>
	<string name="title_study">学习</string>
	<string name="title_search">搜搜</string>
	<string name="title_game">游戏</string>
	<string name="title_save">收藏</string>
	<string name="title_help">帮助</string>
</resources>

接下来也是最关键的一步，我们需要编写活动了。在activity包下新建MainActivity继承自Activity,代码如下所示：

public class MainActivity extends TabActivity {

	private TabHost tabHost;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);// 取消标题栏
		setContentView(R.layout.activity_main);
		tabHost = getTabHost();
		addTab("study", R.string.title_study, R.drawable.search, R.id.tab1);
		addTab("search", R.string.title_search, R.drawable.search, R.id.tab2);
		addTab("game", R.string.title_game, R.drawable.game, R.id.tab3);
		addTab("save", R.string.title_save, R.drawable.save, R.id.tab1);
		addTab("help", R.string.title_help, R.drawable.search, R.id.tab2);
	}

	private void addTab(String tag, int title_introduction, int title_icon,
			int content) {
		tabHost.addTab(tabHost
				.newTabSpec(tag)
				.setIndicator(getString(title_introduction),
						getResources().getDrawable(title_icon))
				.setContent(content));
	}
	public boolean onCreateOptionsMenu(Menu menu){
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

     在这个类的onCreate()方法里，通过调用getTabHost()方法来获取整个TabHost组件，然后调用了抽取出来的自定义的方法addTab()添加了五个选项卡。方法的四个参数分别为每个选项卡的tag，指示器上显示的标题，指示器上显示的图片，选项卡对应的内容。

      注意取消标题栏的方法，一定要位于setContentView()方法之前。

      是不是很简单呢？现在第二阶段的开发工作也完成得差不多了，我们可以运行一下看看效果。不过在运行之前还有一件事没有做，当然就是配置AndroidManifest.xml文件了。修改AndroidManifest.xml中的代码，如下所示：

<activity 
            android:name="cn.edu.bztc.happyidiom.activity.MainActivity"
            android:label="@string/title_activity_main">
           <intent-filter>
               <action android:name="android.intent.action.MAIN"/>
               <category android:name="android.intent.category.LAUNCHER"/>
           </intent-filter> 
        </activity>

    主要是注册了MainActivity,通过加入<intent-filter>将其设置为首先启动的类。

    现在可以运行一下程序了，结果如图所示：

       可以看出，上图的运行结果指示器上只显示出了文字，但是图片未显示出来，究竟原因是什么呢？其实就是我们项目是运行在Android4.2上的，只有文字标题显示，图标是不显示的。如果将文字标题设置为空字符串，则此时图标可显示。如果都想显示怎么办呢？可以通过修改主题来实现。如设置activity的theme为：

android:theme="@android:style/Theme.NoTitleBar" 

如果想让指示器显示在底部，只需要对activity_main.xml文件稍加修改，代码如下：

<?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:theme="@android:style/Theme.NoTitleBar" 
    tools:context=".MainActivity">
    <TabHost 
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true">
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            
            <FrameLayout 
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1">
                <LinearLayout 
                    android:id="@+id/tab1"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    
                </LinearLayout>
                <LinearLayout 
                    android:id="@+id/tab2"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    
                </LinearLayout>
                <LinearLayout 
                    android:id="@+id/tab3"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    
                </LinearLayout>
            </FrameLayout>
            <TabWidget 
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                
            </TabWidget>
        </LinearLayout>
    </TabHost>

</RelativeLayout>

        结果如图所示：