TabHost实现底部导航栏

源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/tabnavigation.zip

    

     

 

现在很多Android应用界面都采用底部导航栏的设计方式,这样可以使用户灵活的切换不同的页面。采用TabHost控件很容易实现一个底部导航栏的功能,下面以模仿鲁大师客户端底部导航栏为例小试牛刀

1.设计主界面,布局文件tab_ludashi.xml如下:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/container"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >



    <TabHost

        android:id="@android:id/tabhost"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent" 

        android:background="@drawable/bg"

     >



        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical" >



             <FrameLayout

                android:id="@android:id/tabcontent"

                android:layout_width="fill_parent"

                android:layout_height="0.0dp"

                android:layout_weight="1"

              >

             </FrameLayout>

             <TabWidget

                android:id="@android:id/tabs"

                android:layout_width="fill_parent"

                android:layout_height="@dimen/tabwidget_height" 

                android:gravity="center"

                android:showDividers="none"

             >

             </TabWidget>



        </LinearLayout>

        

    </TabHost>



</FrameLayout>

每一个TabItem对应的布局文件tab_ludashi_item.xml如下,图片在上部，文字在下部

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/tabwidget_item_layout"

    android:layout_width="fill_parent"

    android:layout_height="@dimen/tabwidget_height"

    android:orientation="vertical" 

    android:gravity="center" 

    android:background="@drawable/selector_ludashi_tabitem_bg"

   >

    <RelativeLayout 

      android:layout_width="fill_parent" 

      android:layout_height="wrap_content"

    >

      <ImageView 

          android:id="@+id/tabwidget_item_image"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:layout_centerInParent="true"

          android:contentDescription="@null"

          android:scaleType="fitCenter"

       />  

       <ImageView 

          android:id="@+id/tabwidget_item_dot"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:layout_alignParentTop="true"

          android:layout_toRightOf="@id/tabwidget_item_image"

          android:contentDescription="@null"

          android:scaleType="fitCenter"

          android:visibility="invisible"

          android:src="@drawable/red_dot"

       />  

    </RelativeLayout>

    

    <TextView 

       android:id="@+id/tabwidget_item_text"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:gravity="center_vertical"

       android:layout_marginTop="3dp"

       android:textSize="12sp"

       android:textColor="@drawable/selector_ludashi_tabitem_text"

    />



</LinearLayout>

选中状态和未选中状态下背景对应的xml文件selector_ludashi_tabitem_bg.xml为:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" android:drawable="@drawable/ludashi_tabitem_selected" />

    <item android:state_selected="true" android:drawable="@drawable/ludashi_tabitem_selected" />

    <item android:drawable="@android:color/transparent" />

</selector>

 选中状态和未选中状态下文字颜色对应的xml文件selector_ludashi_tabitem_text.xml为:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="#ff00a5df" />

    <item android:state_selected="true" android:color="#ff00a5df" />

    <item android:color="#ff797979" />

</selector>

2.设计每一个TabItem选中状态和未选中状态对应的图片，以第一个Item为例,对应的xml文件selector_ludashi_tabitem_image_myphone.xml如下:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" android:drawable="@drawable/ludashi_tabitem_myphone_pressed" />

    <item android:state_selected="true" android:drawable="@drawable/ludashi_tabitem_myphone_pressed" />

    <item android:drawable="@drawable/ludashi_tabitem_myphone_normal" />

</selector>

3.编写Java代码,如下:

@SuppressWarnings("deprecation")

public class LudashiActivity extends TabActivity 

{



    private TabHost mTabHost;

    private int []mTabImage=new int[]{R.drawable.selector_ludashi_tabitem_image_myphone,R.drawable.selector_ludashi_tabitem_image_bench,
    R.drawable.selector_ludashi_tabitem_image_optimize,R.drawable.selector_ludashi_tabitem_image_find};

    private int []mTabText=new int[]{R.string.ludashi_tab1,R.string.ludashi_tab2,R.string.ludashi_tab3,R.string.ludashi_tab4};

    private String[]mTabTag=new String[]{"tab1","tab2","tab3","tab4"};

    private Class<?>[] mTabClass=new Class<?>[]{Tab1.class,Tab2.class,Tab3.class,Tab4.class};

    

    @Override

    protected void onCreate(Bundle savedInstanceState) 

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.tab_ludashi);

        

        initUI();

        

    }



    private void initUI()

    {

        this.setTitle(R.string.button2);

        

        this.mTabHost=this.getTabHost();

        this.mTabHost.setup();

        

        //设置显示的图片和文字

        for(int i=0;i<mTabClass.length;i++)

        {

           View view=LayoutInflater.from(this).inflate(R.layout.tab_ludashi_item, null);

       

          ((ImageView)view.findViewById(R.id.tabwidget_item_image)).setImageResource(mTabImage[i]);

          ((TextView)view.findViewById(R.id.tabwidget_item_text)).setText(mTabText[i]);

          

           this.mTabHost.addTab(this.mTabHost.newTabSpec(mTabTag[i]).setIndicator(view).setContent(new Intent(this,mTabClass[i]))); 

        }

       

        //设置默认选中项

        this.mTabHost.setCurrentTab(0);

    }

}