天天看点

TabHost的底部线条的去除和图标的动态切换

     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了。

    最后的效果图如下:

TabHost的底部线条的去除和图标的动态切换
TabHost的底部线条的去除和图标的动态切换