Android之使用Tabhost设计底部标签栏


iPhone中标签栏在底部的这种风格，现在网上都很流行，那么在Android中该怎么实现呢？网上看到几篇文章，其中农民伯伯的一篇比较有参考价值，但方法不是太简便。因为公司的项目也使用到这个技术，我研究后发现写的也过于复杂，后来我就自己琢磨写了一个Demo出来，这个是我看到的网上的最简单的方式，下面直接贴代码了。

1.主Activity

  1. package com.zhf.TabHostDemo;  
  2. import android.app.ActivityGroup;  
  3. import android.content.Intent;  
  4. import android.os.Bundle;  
  5. import android.view.LayoutInflater;  
  6. import android.widget.ImageView;  
  7. import android.widget.LinearLayout;  
  8. import android.widget.TabHost;  
  9. import android.widget.TabWidget;  
  10. import android.widget.TextView;  
  11. import android.widget.TabHost.TabSpec;  
  12.   
  13. public class TabHostDemoActivity extends ActivityGroup {  
  14.     private TabHost tabHost;  
  15.     @Override  
  16.     public void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.main);  
  19.           
  20.         //加载底部Tab布局   
  21.         LinearLayout tab1=(LinearLayout)LayoutInflater.from(this).inflate(R.layout.action_item, null);  
  22.         ImageView icon1=(ImageView)tab1.findViewById(R.id.icon);  
  23.         icon1.setBackgroundResource(R.drawable.icon1);  
  24.         TextView title1=(TextView)tab1.findViewById(R.id.title);  
  25.         title1.setText("Activity1");  
  26.           
  27.         LinearLayout tab2=(LinearLayout)LayoutInflater.from(this).inflate(R.layout.action_item, null);  
  28.         ImageView icon2=(ImageView)tab2.findViewById(R.id.icon);  
  29.         icon2.setBackgroundResource(R.drawable.icon2);  
  30.         TextView title2=(TextView)tab2.findViewById(R.id.title);  
  31.         title2.setText("Activity2");  
  32.           
  33.         // 加载TabSpec   
  34.         tabHost = (TabHost) findViewById(R.id.view_tab_host);  
  35.         tabHost.setup(getLocalActivityManager());  
  36.   
  37.         TabSpec ts1 = tabHost.newTabSpec("Activity1");  
  38.         ts1.setIndicator(tab1);//这句话就是设置每个小tab显示的内容   
  39.         //第一个Activity   
  40.         ts1.setContent(new Intent(this, Activity1.class));  
  41.         tabHost.addTab(ts1);  
  42.       
  43.         TabSpec ts2 = tabHost.newTabSpec("Activity2");  
  44.         ts2.setIndicator(tab2);  
  45.         //第二个Activity   
  46.         ts2.setContent(new Intent(this, Activity2.class));  
  47.         tabHost.addTab(ts2);  
  48.   
  49.         //设置标签栏背景图片   
  50.         TabWidget tw = tabHost.getTabWidget();  
  51.         tw.setBackgroundResource(R.drawable.home_tab_bg);  
  52.     }  
  53. }  

2.主布局文件

 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TabHost  
  8.         android:id="@+id/view_tab_host"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent" >  
  11.   
  12.         <LinearLayout  
  13.             android:layout_width="fill_parent"  
  14.             android:layout_height="fill_parent"  
  15.             android:gravity="center"  
  16.             android:orientation="vertical" >  
  17.   
  18.             <FrameLayout  
  19.                 android:id="@android:id/tabcontent"  
  20.                 android:layout_width="fill_parent"  
  21.                 android:layout_height="wrap_content"  
  22.                 android:layout_gravity="center_vertical"  
  23.                 android:layout_weight="1"  
  24.                 android:gravity="center_vertical" >  
  25.             </FrameLayout>  
  26.   
  27.             <TabWidget  
  28.                 android:id="@android:id/tabs"  
  29.                 android:layout_width="fill_parent"  
  30.                 android:layout_height="52dip"  
  31.                 android:layout_weight="0">  
  32.             </TabWidget>  
  33.         </LinearLayout>  
  34.     </TabHost>  
  35.   
  36. </LinearLayout>  

  • 1
  • 2
  • 下一页

相关内容