欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-01 19:38:04
最近仔细研究了下tabhost,主要是为了实现微信底部导航栏的功能,最后也给出一个文章链接,大家不要着急 正文: tabhost的实现分为两种,一个是不继承taba...

最近仔细研究了下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.图片名)设置图标 
 
 } 
} 

效果图:

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

此例源码地址: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)); 
 
 } 
} 

效果图:

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

此例源码地址: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")) { //第三个标签 
  } 
  }  
 }); 
  
  
 } 
 
} 

效果图:

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

此例源码地址:demo3

四、实现微信底部导航栏

效果:

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

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

原文地址:

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