自定义TabActivity,TabActivity的美化

自定义TabActivity,TabActivity的美化

使用tabhost实现脚下的菜单栏:

1.TabActivity的布局

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

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

 3  android:layout_width="fill_parent"

 4  android:layout_height="fill_parent"

 5   >

 6  <LinearLayout

 7   android:orientation="vertical"

 8   android:layout_width="fill_parent"

 9   android:layout_height="fill_parent">

10   

11          

12         <FrameLayout

13          android:gravity="center"

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

15          android:layout_width="fill_parent"

16          android:layout_height="wrap_content"

17          android:layout_weight="1.0" >

18          

19          <LinearLayout android:id="@+id/first"

20                 android:orientation="vertical"

21                 android:background="#ffffff"

22                 android:layout_width="fill_parent"

23                 android:layout_height="fill_parent"

24                >

25                 <TextView android:layout_width="fill_parent"

26                     android:layout_height="fill_parent"

27                     android:text="first tab" />

28             </LinearLayout>

29             <LinearLayout android:id="@+id/second"

30                 android:orientation="vertical"

31                 android:background="#ffffff"

32                 android:layout_width="fill_parent"

33                 android:layout_height="fill_parent"

34                 >

35                 <TextView android:layout_width="fill_parent"

36                     android:layout_height="fill_parent"

37                     android:text="second tab" />

38             </LinearLayout>

39          

40         </FrameLayout>

41        

42         <TabWidget

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

44          android:background="@drawable/tab_bottom_bg"

45          android:padding="3.0dip"

46          android:layout_width="fill_parent"

47          android:layout_height="wrap_content"

48          android:layout_weight="0.0" />

49        

50     </LinearLayout>   

51 </TabHost>  
View Code

分析一下这个文件:

1、首先是<tabhost/> ,定义一个tabhost,他需要两部分组成:

  (1)<FrameLayout  android:id="@android:id/tabcontent"/>

  (2)<TabWidget android:id="@android:id/tabs" >

要注意这个标签单位id,不能修改。能把tab放到footer的地方是因为android:layout_weight="1.0"把他挤下来。

2、(1)<LinearLayout android:id="@+id/first"...

  (2) <LinearLayout android:id="@+id/second" ...

这两标签内是摆放tab选项的内容的。也可单独做一个xml文件然后查找ID,或者使用activity intent的方式写对应类的xml。

2、MainActivity的实现代码

缺省的实现代码:

private void setIndicator(int icon, int title, int view) { 

        String str = getResources().getString(title); 

         

        TabHost.TabSpec localTabSpec=tabhost.newTabSpec(str).setIndicator(str,getResources().getDrawable(icon)).setContent(view); 

        tabhost.addTab(localTabSpec); 

    } 

修改成美化的代码:

private void setIndicator(int icon, int title, int view) {

 

 View localView = LayoutInflater.from(this.tabhost.getContext()).inflate(R.layout.main_activity_tab, null);

 ((ImageView)localView.findViewById(R.id.main_activity_tab_image)).setBackgroundResource(icon);

 ((TextView)localView.findViewById(R.id.main_activity_tab_text)).setText(title);

 

 String str = getResources().getString(title);

 

 TabHost.TabSpec localTabSpec = tabhost.newTabSpec(str).setIndicator(localView).setContent(view);

 tabhost.addTab(localTabSpec);

 

} 

注意到第二句代码的R.layout.main_activity_tab了吧,下面是ayout.main_activity_tab.xml的代码:

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

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

    android:gravity="center"   

    android:orientation="vertical"   

    android:id="@+id/tabsLayout"   

    android:background="@drawable/tab_item_bkg"   <!-- 它是在res/drawable/tab_item_bkg.xml 实现tab Item的样式 -->

    android:padding="3.0dip"   

    android:layout_width="wrap_content"   

    android:layout_height="wrap_content"   

    android:layout_marginTop="3.0dip"   

    android:layout_marginBottom="3.0dip"  

  >  

      

    <FrameLayout   

        android:layout_width="fill_parent"   

        android:layout_height="fill_parent"   

        android:layout_weight="0.6">  

          

        <ImageView   

            android:layout_gravity="center"   

            android:id="@+id/main_activity_tab_image"   <!-- 定义图标ico -->

            android:layout_width="wrap_content"   

            android:layout_height="wrap_content"   

            android:layout_marginTop="2.0dip"   

            android:scaleType="center" />  

          

    </FrameLayout>  

      

    <TextView   

        android:textSize="12.0dip"   

        android:textColor="@drawable/tab_text_selector"   <!-- 在drawable/tab_text_selector.xml 定义文字的样式 -->

        android:id="@+id/main_activity_tab_text"   

        android:layout_width="wrap_content"   

        android:layout_height="wrap_content"   

        android:text="Title" />  

</LinearLayout>

本文参考:http://www.oschina.net/question/54100_32909

你可能感兴趣的:(TabActivity)