• TabHost详解

    【转】http://blog.csdn.net/harvic880925/article/details/17120325

    前言：今天仔细研究了下TabHost，主要是为了实现微信底部导航栏的功能，最后也给出一个链接，这位老兄用TabHost基本做出来了微信导航栏。

    正文

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

    方法一、定义tabhost：不用继承TabActivity

     1、布局文件：activity_main.xml

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"   
    5.     android:orientation="vertical"  
    6.     tools:context=".MainActivity" >  
    7.     <Button  
    8.         android:id="@+id/button1"  
    9.         android:layout_width="wrap_content"  
    10.         android:layout_height="wrap_content"  
    11.         android:text="Button" />  
    12.      <TabHost  
    13.         android:id="@+id/tabhost"  
    14.         android:layout_width="match_parent"  
    15.         android:layout_height="wrap_content">  
    16.   
    17.         <LinearLayout  
    18.             android:layout_width="match_parent"  
    19.             android:layout_height="match_parent"  
    20.             android:orientation="vertical" >  
    21.   
    22.             <TabWidget  
    23.                 android:id="@android:id/tabs"  
    24.                 android:layout_width="match_parent"  
    25.                 android:layout_height="wrap_content" >  
    26.             </TabWidget>  
    27.   
    28.             <FrameLayout  
    29.                 android:id="@android:id/tabcontent"  
    30.                 android:layout_width="match_parent"  
    31.                 android:layout_height="match_parent" >  
    32.   
    33.                 <!-- 第一个tab的布局 -->  
    34.                 <LinearLayout  
    35.                     android:id="@+id/tab1"  
    36.                     android:layout_width="match_parent"  
    37.                     android:layout_height="match_parent" >  
    38.   
    39.                     <TextView  
    40.                         android:id="@+id/textView1"  
    41.                         android:layout_width="wrap_content"  
    42.                         android:layout_height="wrap_content"  
    43.                         android:text="林炳东" />  
    44.   
    45.                 </LinearLayout>  
    46.   
    47.                 <!-- 第二个tab的布局 -->  
    48.                 <LinearLayout  
    49.                     android:id="@+id/tab2"  
    50.                     android:layout_width="match_parent"  
    51.                     android:layout_height="match_parent" >  
    52.   
    53.                     <TextView  
    54.                         android:id="@+id/textView2"  
    55.                         android:layout_width="wrap_content"  
    56.                         android:layout_height="wrap_content"  
    57.                         android:text="张小媛" />  
    58.   
    59.                 </LinearLayout>  
    60.   
    61.                 <!-- 第三个tab的布局 -->  
    62.                 <LinearLayout  
    63.                     android:id="@+id/tab3"  
    64.                     android:layout_width="match_parent"  
    65.                     android:layout_height="match_parent" >  
    66.   
    67.                     <TextView  
    68.                         android:id="@+id/textView3"  
    69.                         android:layout_width="wrap_content"  
    70.                         android:layout_height="wrap_content"  
    71.                         android:text="马贝贝" />  
    72.   
    73.                 </LinearLayout>  
    74.             </FrameLayout>  
    75.         </LinearLayout>  
    76.     </TabHost>   
    77.       
    78. </LinearLayout>  

    2、JAVA代码

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. public class MainActivity extends Activity {  
    2.   
    3.     @Override  
    4.     protected void onCreate(Bundle savedInstanceState) {  
    5.         super.onCreate(savedInstanceState);  
    6.         setContentView(R.layout.activity_main);  
    7.           
    8.         TabHost th=(TabHost)findViewById(R.id.tabhost);  
    9.         th.setup();            //初始化TabHost容器  
    10.           
    11.         //在TabHost创建标签，然后设置：标题／图标／标签页布局  
    12.         th.addTab(th.newTabSpec("tab1").setIndicator("标签1",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));  
    13.         th.addTab(th.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));  
    14.         th.addTab(th.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));      
    15.   
    16.        //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标   
    17.   
    18.     }  
    19. }  

    效果图：

    此例源码地址：http://download.csdn.net/detail/harvic880925/6657611  （不要分，欢迎下载）

     方法二：Tab的内容分开：不用继承TabActivity

     1、第一个tab的XML布局文件，tab1.xml:

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="UTF-8"?>  
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.        android:id="@+id/LinearLayout01"   
    4.        android:layout_width="wrap_content"  
    5.        android:layout_height="wrap_content">  
    6.        <TextView   
    7.             android:text="我是标签1的内容喔"  
    8.             android:id="@+id/TextView01"   
    9.             android:layout_width="wrap_content"  
    10.             android:layout_height="wrap_content">  
    11.        </TextView>  
    12.  </LinearLayout>  

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

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="UTF-8"?>  
    2. <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  
    3.         android:id="@+id/LinearLayout02"  
    4.         android:layout_width="wrap_content"  
    5.         android:layout_height="wrap_content">  
    6.   
    7.         <TextView android:text="标签2"  
    8.                   android:id="@+id/TextView01"   
    9.                   android:layout_width="wrap_content"  
    10.                   android:layout_height="wrap_content" />  
    11. </LinearLayout>  

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

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     android:layout_width="fill_parent"  
    3.     android:layout_height="fill_parent"  
    4.     android:orientation="vertical" >  
    5.   
    6.     <TabHost  
    7.         android:id="@+id/tabhost"           
    8.         android:layout_width="match_parent"  
    9.         android:layout_height="match_parent" >  
    10.   
    11.         <LinearLayout  
    12.             android:layout_width="match_parent"  
    13.             android:layout_height="match_parent"  
    14.             android:orientation="vertical" >  
    15.   
    16.             <TabWidget  
    17.                 android:id="@android:id/tabs"  
    18.                 android:layout_width="match_parent"  
    19.                 android:layout_height="wrap_content" >  
    20.             </TabWidget>  
    21.   
    22.             <FrameLayout  
    23.                 android:id="@android:id/tabcontent"  
    24.                 android:layout_width="match_parent"  
    25.                 android:layout_height="match_parent" >  
    26.                   
    27.             </FrameLayout>  
    28.         </LinearLayout>  
    29.     </TabHost>  
    30.   
    31. </LinearLayout>  

    4、JAVA代码：

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. public class MainActivity extends Activity {  
    2.   
    3.     @Override  
    4.     protected void onCreate(Bundle savedInstanceState) {  
    5.         super.onCreate(savedInstanceState);  
    6.         setContentView(R.layout.activity_main);  
    7.           
    8.         TabHost m = (TabHost)findViewById(R.id.tabhost);  
    9.         m.setup();  
    10.           
    11.         LayoutInflater i=LayoutInflater.from(this);  
    12.         i.inflate(R.layout.tab1, m.getTabContentView());  
    13.         i.inflate(R.layout.tab2, m.getTabContentView());//动态载入XML，而不需要Activity  
    14.           
    15.         m.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.LinearLayout01));    
    16.             m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02));   
    17.   
    18.     }  
    19. }  

    效果图：

    此例源码地址：http://download.csdn.net/detail/harvic880925/6657679   （不要分，欢迎下载）

     方法三：继承自TabActivity

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

    [html] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="fill_parent"  
    4.     android:layout_height="fill_parent">  
    5.   
    6.     <!-- 第一个布局 -->  
    7.     <LinearLayout     
    8.         android:id="@+id/view1"  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="match_parent" >        
    11.         <TextView  
    12.             android:id="@+id/textView1"  
    13.             android:layout_width="wrap_content"  
    14.             android:layout_height="wrap_content"  
    15.             android:text="张小媛" />  
    16.     </LinearLayout>  
    17.   
    18.     <!-- 第二个布局 -->  
    19.     <LinearLayout     
    20.         android:id="@+id/view2"  
    21.         android:layout_width="match_parent"  
    22.         android:layout_height="match_parent" >  
    23.           
    24.         <TextView  
    25.             android:id="@+id/textView2"  
    26.             android:layout_width="wrap_content"  
    27.             android:layout_height="wrap_content"  
    28.             android:text="马贝贝" />  
    29.     </LinearLayout>  
    30.   
    31.     <!-- 第三个布局 -->  
    32.     <TextView android:id="@+id/view3"   
    33.         android:background="#00ff00"  
    34.         android:layout_width="fill_parent"  
    35.         android:layout_height="fill_parent"  
    36.         android:text="Tab3"/>  
    37.   
    38. </FrameLayout>  

    2、JAVA代码： 

     先将派生自Activity改为TabActivity，然后代码如下：

     

    [java] view plain copy
     在CODE上查看代码片派生到我的代码片
    1. public class MainActivity extends TabActivity {  
    2.   
    3.     @Override  
    4.     protected void onCreate(Bundle savedInstanceState) {  
    5.         super.onCreate(savedInstanceState);  
    6.         setTitle("TabDemoActivity");  
    7.         TabHost tabHost = getTabHost();  
    8.         LayoutInflater.from(this).inflate(R.layout.activity_main,  
    9.                 tabHost.getTabContentView(), true);  
    10.         tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1", getResources().getDrawable(R.drawable.ic_launcher))  
    11.                 .setContent(R.id.view1));  
    12.         tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")  
    13.                 .setContent(R.id.view2));  
    14.         tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")  
    15.                 .setContent(R.id.view3));  
    16.           
    17.           
    18.          //标签切换事件处理，setOnTabChangedListener  
    19.         tabHost.setOnTabChangedListener(new OnTabChangeListener(){    
    20.             @Override  
    21.             public void onTabChanged(String tabId) {  
    22.                 if (tabId.equals("tab1")) {   //第一个标签  
    23.                 }  
    24.                 if (tabId.equals("tab2")) {   //第二个标签  
    25.                 }  
    26.                 if (tabId.equals("tab3")) {   //第三个标签  
    27.                 }  
    28.             }              
    29.         });   
    30.           
    31.           
    32.     }  
    33.   
    34. }  

    效果如下：

     

    此例源码地址：http://download.csdn.net/detail/harvic880925/6657791   （不要分，仅供分享）

     四：实现微信底部导航栏

    效果：

     

    参看博客：http://blog.csdn.net/wangkuifeng0118/article/details/7745109

     源码地址：http://download.csdn.net/detail/harvic880925/6657767   （不要分，仅供分享）

     

     请大家尊重作者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/17120325
  • 相关阅读:
    一个重构眼中的“项目管理”
    vim显示行号、语法高亮、自动缩进的设置
    python中的try/except/else/finally语句--自我小结
    python 列表函数
    python异常处理
    gerrit使用总结
    数据访问对象模式
    组合实体模式
    业务代表模式
    MVC模式
  • 原文地址：https://www.cnblogs.com/wxmdevelop/p/5180340.html
Copyright © 2020-2023  润新知