在代码开始之前,我们需要对用到的名词进行解释下,如果你已经阅读了方式一,那么请略去!
名词解释: 既然我们使用tabhost来布局,我有必要对我们将要实现的代码做一个名词解释。
1、tabHost 这个我们可以简单的把它当作整个一张“Activity”,其中包括下面的托盘部分,以及点击托盘的任意按钮托盘上方显示的不同内容,这是最大的一个容器;
2、tabWidget 这个就是托盘部分,主要用来显示不同的栏目,其中包括tabSpec及tabContent;
3、tabSpec就是tabWidget的一个个栏目,你可以为它添加一张icon图片、icon图片下方的栏目名称,另外需要强调的是当用户点击任意 tabSpec时,tabWidget上方将显示内容,这个就是tabContent。
既然是自己布局TabHost,我们在布局文件中就需自己一一来布局TabHost,TabWidget等等了,示例中的布局文件tab_main.xml代码如下:
- <?xml version="1.0" encoding="utf-8"?>
- <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/tabhost"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <RelativeLayout
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <TabWidget
- android:id="@android:id/tabs"
- android:layout_width="fill_parent"
- android:layout_height="60dip"
- android:layout_alignParentBottom="true"
- android:background="#424242" >
- </TabWidget>
- <FrameLayout
- android:id="@android:id/tabcontent"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent" >
- <LinearLayout
- android:id="@+id/theme"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <TextView
- android:id="@+id/theme_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="主题" />
- </LinearLayout>
- <LinearLayout
- android:id="@+id/wallpaper"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <TextView
- android:id="@+id/wallpaper_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="壁纸" />
- </LinearLayout>
- <LinearLayout
- android:id="@+id/iconbg"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <TextView
- android:id="@+id/iconbg_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="背板" />
- </LinearLayout>
- <LinearLayout
- android:id="@+id/screenlock"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <TextView
- android:id="@+id/screenlock_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="锁屏" />
- </LinearLayout>
- <LinearLayout
- android:id="@+id/effect"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical" >
- <TextView
- android:id="@+id/effect_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="特效" />
- </LinearLayout>
- </FrameLayout>
- </RelativeLayout>
- </TabHost>
从布局文件中,依次可以看到我们的布局文件需要实现的样式了,如果您看到了上面的名词解释再看这个布局文件就很好理解了,另外我们需要注意的两个地方我已经用红色背景画出来了:
1、关于 TabWidget和FrameLayout的id,我们只能这样即使用系统自定义好的id;
2、android:layout_alignParentBottom="true"表示我们的widget是在屏幕的底部显示。
下面我们看java代码,在java代码中,我们无需继承TabActivity,依然和之前的一样继承Activity即可,代码如下:
- public class TabDesignActivity extends Activity{
- private Context mContex = this;
- private TabHost mTabHost;
- private String TAB1 = "主题";
- private String TAB2 = "壁纸";
- private String TAB3 = "背板";
- private String TAB4 = "锁屏";
- private String TAB5 = "特效";
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- setContentView(R.layout.tab_main);
- mTabHost = (TabHost) findViewById(R.id.tabhost);
- mTabHost.setup();
- mTabHost.addTab(mTabHost.newTabSpec("tab1").setIndicator(getMenuItem(R.drawable.theme_ispressed, TAB1)).setContent(R.id.theme));
- mTabHost.addTab(mTabHost.newTabSpec("tab2").setIndicator(getMenuItem(R.drawable.wallpaper_ispressed, TAB2)).setContent(R.id.wallpaper));
- mTabHost.addTab(mTabHost.newTabSpec("tab3").setIndicator(getMenuItem(R.drawable.iconbg_ispressed, TAB3)).setContent(R.id.iconbg));
- mTabHost.addTab(mTabHost.newTabSpec("tab4").setIndicator(getMenuItem(R.drawable.screenlock_ispressed, TAB4)).setContent(R.id.screenlock));
- mTabHost.addTab(mTabHost.newTabSpec("tab5").setIndicator(getMenuItem(R.drawable.effect_ispressed, TAB5)).setContent(R.id.effect));
- }
- public View getMenuItem(int imgID, String textID){
- LinearLayout ll = (LinearLayout) LayoutInflater.from(mContex).inflate(R.layout.tab_item, null);
- ImageView imgView = (ImageView)ll.findViewById(R.id.icon);
- imgView.setBackgroundResource(imgID);
- TextView textView = (TextView)ll.findViewById(R.id.name);
- textView.setText(textID);
- return ll;
- }
- }
同样我们自己定义个mTabHost,但是这次我们获取mTabHost 是从布局文件中过来的,另外注意的是我们需要写上mTabHost.setup()这么一句代码,这个务必在addTab之前写进去,另外在给tabWidget添加tabSpec时,自己定义了一个getMenuItem方法来实现其图片和文字的显示的,这个方法的使用到的布局文件tab_item.xml如下:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:gravity="center_horizontal|center_vertical"
- android:orientation="vertical" >
- <LinearLayout
- android:id="@+id/ll"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="@drawable/bg_ispressed"
- android:gravity="center_horizontal|center_vertical"
- android:orientation="vertical" >
- <ImageView
- android:id="@+id/icon"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" />
- <TextView
- android:id="@+id/name"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" />
- </LinearLayout>
- </LinearLayout>
另外我使用了一个技巧来实现点击tab时换取图片的方式,即在图片文件中加上另一配置文件selector动态切换,关于此可参见【动态改变Tabwidget/tabhost的tab标签图片】:或者下载下面的源码。