android自定义TabWidget样式

时间:2023-03-08 18:09:13

先看看效果图吧,个人觉得图标丑了点,不过还行,自己用PS做的

android自定义TabWidget样式

下面是全部代码和流程,一定要按流程顺序来,不然错误!

1.tabhost.xml

  1. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@android:id/tabhost"
  4. android:layout_width="fill_parent"
  5. android:layout_height="wrap_content" >
  6. <RelativeLayout
  7. android:id="@+id/relativelayout"
  8. android:layout_width="fill_parent"
  9. android:layout_height="fill_parent" >
  10. <FrameLayout
  11. android:id="@android:id/tabcontent"
  12. android:layout_width="fill_parent"
  13. android:layout_height="wrap_content" >
  14. <LinearLayout
  15. android:id="@+id/tab1"
  16. android:layout_width="fill_parent"
  17. android:layout_height="wrap_content"
  18. android:orientation="vertical" >
  19. </LinearLayout>
  20. <LinearLayout
  21. android:id="@+id/tab2"
  22. android:layout_width="fill_parent"
  23. android:layout_height="wrap_content"
  24. android:orientation="vertical" >
  25. </LinearLayout>
  26. <LinearLayout
  27. android:id="@+id/tab3"
  28. android:layout_width="fill_parent"
  29. android:layout_height="wrap_content"
  30. android:orientation="vertical" >
  31. </LinearLayout>
  32. <LinearLayout
  33. android:id="@+id/tab4"
  34. android:layout_width="fill_parent"
  35. android:layout_height="wrap_content"
  36. android:orientation="vertical" >
  37. </LinearLayout>
  38. <LinearLayout
  39. android:id="@+id/tab5"
  40. android:layout_width="fill_parent"
  41. android:layout_height="wrap_content"
  42. android:orientation="vertical" >
  43. </LinearLayout>
  44. </FrameLayout>
  45. <TabWidget
  46. android:id="@android:id/tabs"
  47. android:layout_width="fill_parent"
  48. android:layout_height="wrap_content"
  49. android:layout_alignParentBottom="true"
  50. android:background="@drawable/tabwidget_bj" >
  51. </TabWidget>
  52. </RelativeLayout>
  53. </TabHost>

2.tab_item_view.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:orientation="vertical" >
  6. <ImageView
  7. android:id="@+id/imageview"
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_gravity="center_horizontal|top"
  11. android:padding="3dp" />
  12. <TextView
  13. android:id="@+id/textview"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:layout_gravity="center_horizontal|bottom"
  17. android:textColor="#fff"
  18. android:textSize="13sp"
  19. style="bold"/>
  20. </LinearLayout>

3.样式选择器selector:tab_item_style.xml,新建文件夹drawable,然后将该xml文件放进去

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:drawable="@drawable/unpressed_bj" android:state_selected="false"/>
  4. <item android:drawable="@drawable/pressed_bj" android:state_selected="true"/>
  5. </selector>

4.java代码实现:MyTabHost.java

    1. package com.example.androidtabhost4;
    2. import android.os.Bundle;
    3. import android.app.Activity;
    4. import android.app.TabActivity;
    5. import android.content.Intent;
    6. import android.view.LayoutInflater;
    7. import android.view.Menu;
    8. import android.view.View;
    9. import android.widget.ImageView;
    10. import android.widget.TabHost;
    11. import android.widget.TextView;
    12. import android.widget.TabHost.TabSpec;
    13. public class MyTabHost extends TabActivity {
    14. private TabHost tabHost;
    15. private LayoutInflater layoutInflater;
    16. String[] mTitle = new String[] { "首页", "留言", "评论", "收藏", "更多" };
    17. int[] mIcon = new int[] { R.drawable.home, R.drawable.saying,
    18. R.drawable.zan, R.drawable.collect, R.drawable.more };
    19. int[] mTab = new int[] { R.id.tab1, R.id.tab2, R.id.tab3, R.id.tab4,
    20. R.id.tab5 };
    21. @Override
    22. protected void onCreate(Bundle savedInstanceState) {
    23. super.onCreate(savedInstanceState);
    24. setContentView(R.layout.tabhost);
    25. init();
    26. }
    27. public View getTabItemView(int i) {
    28. // TODO Auto-generated method stub
    29. View view = layoutInflater.inflate(R.layout.tab_item_view, null);
    30. ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
    31. imageView.setImageResource(mIcon[i]);
    32. TextView textView = (TextView) view.findViewById(R.id.textview);
    33. textView.setText(mTitle[i]);
    34. return view;
    35. }
    36. public void init() {
    37. // TODO Auto-generated method stub
    38. tabHost = getTabHost();
    39. layoutInflater = LayoutInflater.from(this);
    40. for (int i = 0; i < mTitle.length; i++) {
    41. TabSpec tabSpec = tabHost.newTabSpec(mTitle[i])
    42. .setIndicator(getTabItemView(i)).setContent(mTab[i]);
    43. tabHost.addTab(tabSpec);
    44. tabHost.getTabWidget().getChildAt(i)
    45. .setBackgroundResource(R.drawable.tab_item_style);
    46. tabHost.setup();
    47. }
    48. }
    49. }