TabHost可以用来做导航栏。如果要把导航栏放在底部而不是顶部,则需要把TabWidget放到FrameLayout下面。 在Activity中添加子项,如下所示
tabHost=(TabHost) findViewById(android.R.id.tabhost); tabHost.setup(); final TabSpec tabSpec1=tabHost.newTabSpec("weather").setIndicator(null, getResources().getDrawable(R.drawable.sun2)).setContent(R.id.tab1); final TabSpec tabSpec2=tabHost.newTabSpec("tip").setIndicator(null, getResources().getDrawable(R.drawable.love)).setContent(R.id.tab2); final TabSpec tabSpec3=tabHost.newTabSpec("list").setIndicator(null, getResources().getDrawable(R.drawable.list)).setContent(R.id.tab3); tabHost.addTab(tabSpec1); tabHost.addTab(tabSpec2); tabHost.addTab(tabSpec3);
这样可以定义导航栏中的TabSpec, tabHost.newTabSpec("weather")表示设置当前item的标签为weather,setIndicator(null,getResources(),getDrawable(R.drawable.sun2))表示设置当前item的文字提示和图标,然而经过我的试验发现文字和图标不能同时显示,除非自己定义一个才能解决,所以我就设置文字为null,用意思很明显的图标来当做标志了。 setContent(R.id.tab1)则表示当前tabSpec代表的是哪一个item,这个需要绑定一个id。也可以在此处添加intent,用来跳转到不同的Activity。 设置好三个item后,将它们添加到tabHost中去就好了。 前面讲的是tabhost的基本应用,这篇博客主要是讲下面几个方法,记下来以后要用的时候可以马上用上。
1.tab底部的蓝色线条的去除,因为如果使用系统TabHost会在底部产生蓝色线条表示选中当前的item,但是这给人一种十分不协调的感觉,所以我打算去掉这个东西。具体做法是
TabWidget tabWidget=tabHost.getTabWidget(); for (int i=0; i<tabWidget.getChildCount(); i++){//循环每个tabView View view = tabWidget.getChildAt(i); //获取tabView项 view.setBackgroundResource(R.color.transparent); }
其实就是遍历每一个item将它们的背景色设置为透明(transparent)就行了。
2.去掉了蓝色线条之后有一个缺点,就是无法确认当前点击的item是哪一个了,我看到微信上是当点击某一item时相应的item的图标便会产生变化,跟其他未点击的item的图标有明显的区别。于是我模仿微信的做法,将我的天气app的导航栏做了一些修改,能够在用户点击某一item时能够很清楚自己点的是哪一个item。
tabHost.setOnTabChangedListener(new OnTabChangeListener() { @Override public void onTabChanged(String arg0) { if(arg0.equals("weather")){ ImageView iv=(ImageView) tabHost.getTabWidget().getChildAt(0).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.sun2)); iv = (ImageView)tabHost.getTabWidget().getChildAt(1).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.love)); iv = (ImageView)tabHost.getTabWidget().getChildAt(2).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.list)); } else if(arg0.equals("tip")){ ImageView iv=(ImageView) tabHost.getTabWidget().getChildAt(0).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.sun)); iv = (ImageView)tabHost.getTabWidget().getChildAt(1).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.love2)); iv = (ImageView)tabHost.getTabWidget().getChildAt(2).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.list)); }else if(arg0.equals("list")){ ImageView iv=(ImageView) tabHost.getTabWidget().getChildAt(0).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.sun)); iv = (ImageView)tabHost.getTabWidget().getChildAt(1).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.love)); iv = (ImageView)tabHost.getTabWidget().getChildAt(2).findViewById(android.R.id.icon); iv.setImageDrawable(getResources().getDrawable(R.drawable.list2)); } } });
具体做法是使用setOnTabChangedListener这个监听器,当tab(我习惯叫item)改变时,根据arg0来判断切换到哪一个item了,此处就需要前面设置的标签来作为参考了,如果切换到第一个item,在我这里是tag为weather的item,那么就让它的图标改变,而其他两个就不用变。这样就能很明显地看到用户当前点击的是哪个item了。
最后的效果图如下: