在第二阶段中,我们准备完成主界面的设计,这一阶段需要编写的代码量比较大,你一定要跟上脚步。
主界面的设计采用选项卡组件,在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>将其设置为首先启动的类。
现在可以运行一下程序了,结果如图所示:
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>
结果如图所示: