详解Android TabHost的多种实现方法 附源码下载

最近仔细研究了下tabhost，主要是为了实现微信底部导航栏的功能，最后也给出一个文章链接，大家不要着急

正文：

tabhost的实现分为两种，一个是不继承tabactivity，一个是继承自tabactivity；当然了选用继承自tabactivity的话就相对容易一些，下面来看看分别是怎样来实现的吧。

方法一、定义tabhost：不用继承tabactivity
 1、布局文件：activity_main.xml

<linearlayout 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:orientation="vertical" 
 tools:context=".mainactivity" > 
 <button 
 android:id="@+id/button1" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text="button" /> 
 <tabhost 
 android:id="@+id/tabhost" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content"> 
 
 <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" > 
 
  <!-- 第一个tab的布局 --> 
  <linearlayout 
   android:id="@+id/tab1" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" > 
 
   <textview 
   android:id="@+id/textview1" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="林炳东" /> 
 
  </linearlayout> 
 
  <!-- 第二个tab的布局 --> 
  <linearlayout 
   android:id="@+id/tab2" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" > 
 
   <textview 
   android:id="@+id/textview2" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="张小媛" /> 
 
  </linearlayout> 
 
  <!-- 第三个tab的布局 --> 
  <linearlayout 
   android:id="@+id/tab3" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" > 
 
   <textview 
   android:id="@+id/textview3" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:text="马贝贝" /> 
 
  </linearlayout> 
  </framelayout> 
 </linearlayout> 
 </tabhost> 
 
</linearlayout> 

2、java代码

public class mainactivity extends activity { 
 
 @override 
 protected void oncreate(bundle savedinstancestate) { 
 super.oncreate(savedinstancestate); 
 setcontentview(r.layout.activity_main); 
  
 tabhost th=(tabhost)findviewbyid(r.id.tabhost); 
 th.setup();  //初始化tabhost容器 
  
 //在tabhost创建标签，然后设置：标题／图标／标签页布局 
 th.addtab(th.newtabspec("tab1").setindicator("标签1",getresources().getdrawable(r.drawable.ic_launcher)).setcontent(r.id.tab1)); 
 th.addtab(th.newtabspec("tab2").setindicator("标签2",null).setcontent(r.id.tab2)); 
 th.addtab(th.newtabspec("tab3").setindicator("标签3",null).setcontent(r.id.tab3)); 
 
 //上面的null可以为getresources().getdrawable(r.drawable.图片名)设置图标 
 
 } 
} 

效果图：

此例源码地址：demo1

方法二、tab的内容分开：不用继承tabactivity
1、第一个tab的xml布局文件，tab1.xml:

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:id="@+id/linearlayout01" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content"> 
 <textview 
  android:text="我是标签1的内容喔" 
  android:id="@+id/textview01" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content"> 
 </textview> 
 </linearlayout> 

2、第二个tab的xml布局文件，tab2.xml:

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:id="@+id/linearlayout02" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content"> 
 
 <textview android:text="标签2" 
   android:id="@+id/textview01" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" /> 
</linearlayout> 

3、主布局文件，activity_main.xml：

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:orientation="vertical" > 
 
 <tabhost 
 android:id="@+id/tabhost"  
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <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" > 
   
  </framelayout> 
 </linearlayout> 
 </tabhost> 
 
</linearlayout> 

4、java代码：

public class mainactivity extends activity { 
 
 @override 
 protected void oncreate(bundle savedinstancestate) { 
 super.oncreate(savedinstancestate); 
 setcontentview(r.layout.activity_main); 
  
 tabhost m = (tabhost)findviewbyid(r.id.tabhost); 
 m.setup(); 
  
 layoutinflater i=layoutinflater.from(this); 
 i.inflate(r.layout.tab1, m.gettabcontentview()); 
 i.inflate(r.layout.tab2, m.gettabcontentview());//动态载入xml，而不需要activity 
  
 m.addtab(m.newtabspec("tab1").setindicator("标签1").setcontent(r.id.linearlayout01)); 
  m.addtab(m.newtabspec("tab2").setindicator("标签2").setcontent(r.id.linearlayout02)); 
 
 } 
} 

效果图：

此例源码地址：demo2

方法三、继承自tabactivity
1、主布局文件，activity_main.xml：

<?xml version="1.0" encoding="utf-8"?> 
<framelayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent"> 
 
 <!-- 第一个布局 --> 
 <linearlayout 
 android:id="@+id/view1" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 <textview 
  android:id="@+id/textview1" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="张小媛" /> 
 </linearlayout> 
 
 <!-- 第二个布局 --> 
 <linearlayout 
 android:id="@+id/view2" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
  
 <textview 
  android:id="@+id/textview2" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:text="马贝贝" /> 
 </linearlayout> 
 
 <!-- 第三个布局 --> 
 <textview android:id="@+id/view3" 
 android:background="#00ff00" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:text="tab3"/> 
 
</framelayout> 

2、java代码：
先将派生自activity改为tabactivity，然后代码如下： 

public class mainactivity extends tabactivity { 
 
 @override 
 protected void oncreate(bundle savedinstancestate) { 
 super.oncreate(savedinstancestate); 
 settitle("tabdemoactivity"); 
 tabhost tabhost = gettabhost(); 
 layoutinflater.from(this).inflate(r.layout.activity_main, 
  tabhost.gettabcontentview(), true); 
 tabhost.addtab(tabhost.newtabspec("tab1").setindicator("tab1", getresources().getdrawable(r.drawable.ic_launcher)) 
  .setcontent(r.id.view1)); 
 tabhost.addtab(tabhost.newtabspec("tab3").setindicator("tab2") 
  .setcontent(r.id.view2)); 
 tabhost.addtab(tabhost.newtabspec("tab3").setindicator("tab3") 
  .setcontent(r.id.view3)); 
  
  
  //标签切换事件处理，setontabchangedlistener 
 tabhost.setontabchangedlistener(new ontabchangelistener(){ 
  @override 
  public void ontabchanged(string tabid) { 
  if (tabid.equals("tab1")) { //第一个标签 
  } 
  if (tabid.equals("tab2")) { //第二个标签 
  } 
  if (tabid.equals("tab3")) { //第三个标签 
  } 
  }  
 }); 
  
  
 } 
 
} 

效果图：

 

此例源码地址：demo3

四、实现微信底部导航栏

效果：

 

参看：android仿微信底部菜单栏功能显示未读消息数量

原文地址：

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持。