zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    HDU 3401 Trade
    POJ 1151 Atlantis
    HDU 3415 Max Sum of MaxKsubsequence
    HDU 4234 Moving Points
    HDU 4258 Covered Walkway
    HDU 4391 Paint The Wall
    HDU 1199 Color the Ball
    HDU 4374 One hundred layer
    HDU 3507 Print Article
    GCC特性之__init修饰解析 kasalyn的专栏 博客频道 CSDN.NET
  • 原文地址：https://www.cnblogs.com/wxmdevelop/p/5180340.html
Copyright © 2011-2022 走看看