TabActivity中的Tab标签详细设置

2023-08-22 12:00:10

参考链接：

http://www.iteye.com/topic/602737

这个写的很不错，我是跟着一步步写下来的，不过到最后也遇到了麻烦，就是不能将Tab标签的文字和图片分开，始终是重合的，而且每个具体的代码，还是搞了许久才出来，故而分享之，希望能给大家带来方便，也谢谢下面的高人，呵呵！

http://www.youmi.net/bbs/thread-102-1-4.html

这个和上面的代码是一样的，不过代码不全，对于初学者来说，考验的时候来了，完善就是提高的过程，不要怕麻烦！

下面就根据上面的参考自己写的，当然大部分是相同的，不过有详细的注释，完整的代码

如果有什么不明白就留言吧！呵呵

首先结果图：

图1：

TabActivity中的Tab标签详细设置

图2：

TabActivity中的Tab标签详细设置

图3：

TabActivity中的Tab标签详细设置

当然界面没有前面的仁兄好看，我是讲究实用，美化需要自己慢慢做了

呵呵

下面直接代码：

  1. package com.woclub.tabactivitytest;
  2. import android.app.TabActivity;
  3. import android.content.res.ColorStateList;
  4. import android.graphics.Color;
  5. import android.os.Bundle;
  6. import android.util.Log;
  7. import android.view.Gravity;
  8. import android.view.View;
  9. import android.widget.ImageView;
  10. import android.widget.LinearLayout;
  11. import android.widget.TabHost;
  12. import android.widget.TabWidget;
  13. import android.widget.TextView;
  14. import android.widget.TabHost.OnTabChangeListener;
  15. /**
  16. * 总结：在设置Tab的布局的时候首先需要newTabSpec再在其设置setIndicator(Tab名字，Tab的图标)，
  17. * 尤其需要注意setContent()，它有三种使用方法setContent(int)它是直接在布局文件中设置其布局,
  18. * setContent(Intent)可以用Intent指定一个Activity,
  19. * setContent(TabContentFactory)可以用一个类来指定其布局的方式
  20. * @author Administrator
  21. *
  22. */
  23. public class MainActivity
    extends TabActivity {
  24. private static
    final String Tab1 = "Tab1";
  25. private static
    final String Tab2 = "Tab2";
  26. private static
    final String Tab3 = "Tab3";
  27. private static
    final String Tab4 = "Tab4";
  28. /** Called when the activity is first created. */
  29. @Override
  30. public void onCreate(Bundle savedInstanceState) {
  31. super.onCreate(savedInstanceState);
  32. setContentView(R.layout.main);
  33. //1得到TabHost对象，正对TabActivity的操作通常都有这个对象完成
  34. final TabHost tabHost = this.getTabHost();
  35. final TabWidget tabWidget = tabHost.getTabWidget();
  36. //2生成一个Intent对象，该对象指向一个Activity,当然现在例子比较简单就没有绑定其他的Activity故而不用
  37. //3生成一个TabSpec对象，这个对象代表了一个Tab页
  38. TabHost.TabSpec tabSpec = tabHost.newTabSpec(Tab1);
  39. //设置该页的indicator(指示器)设置该Tab页的名字和图标,以及布局
  40. tabSpec.setIndicator(composeLayout("爽哉", R.drawable.coke))
  41. .setContent(R.id.view1);
  42. //4将设置好的TabSpec对象添加到TabHost当中
  43. tabHost.addTab(tabSpec);
  44. //第二个Tab
  45. tabHost.addTab(tabHost.newTabSpec(Tab2).setIndicator(composeLayout("安逸", R.drawable.coke))
  46. .setContent(R.id.view2));
  47. //第三个Tab
  48. tabHost.addTab(tabHost.newTabSpec(Tab3).setIndicator(composeLayout("开心", R.drawable.coke))
  49. .setContent(R.id.view3));
  50. //第四个Tab
  51. tabHost.addTab(tabHost.newTabSpec(Tab4).setIndicator(composeLayout("说明", R.drawable.coke))
  52. .setContent(R.id.view4));
  53. //setContent(TabContentFactory)可以用一个类来指定其布局的方式,前三个都是用的setContent(int)方式
  54. // CustomLayout custom = new CustomLayout(this);
  55. // tabHost.addTab(tabHost.newTabSpec(Tab4).setIndicator("Tab4", getResources()
  56. // .getDrawable(R.drawable.icon))
  57. // .setContent(custom));
  58. //*****************************这是对Tab标签本身的设置*******************************************
  59. int width =45;
  60. int height =48;
  61. for(int i =
    0; i < tabWidget.getChildCount(); i++)
  62. {
  63. //设置高度、宽度，不过宽度由于设置为fill_parent，在此对它没效果
  64. tabWidget.getChildAt(i).getLayoutParams().height = height;
  65. tabWidget.getChildAt(i).getLayoutParams().width = width;
  66. /**
  67. * 下面是设置Tab的背景，可以是颜色，背景图片等
  68. */
  69. View v = tabWidget.getChildAt(i);
  70. if (tabHost.getCurrentTab() == i) {
  71. v.setBackgroundColor(Color.GREEN);
  72. //在这里最好自己设置一个图片作为背景更好
  73. //v.setBackgroundDrawable(getResources().getDrawable(R.drawable.chat));
  74. } else {
  75. v.setBackgroundColor(Color.GRAY);
  76. }
  77. }
  78. //************************************************************************************
  79. //设置Tab变换时的监听事件
  80. tabHost.setOnTabChangedListener(new OnTabChangeListener() {
  81. @Override
  82. public void onTabChanged(String tabId) {
  83. // TODO Auto-generated method stub
  84. //当点击tab选项卡的时候，更改当前的背景
  85. for(int i =
    0; i < tabWidget.getChildCount(); i++)
  86. {
  87. View v = tabWidget.getChildAt(i);
  88. if (tabHost.getCurrentTab() == i) {
  89. v.setBackgroundColor(Color.GREEN);
  90. } else {
  91. //这里最后需要和上面的设置保持一致,也可以用图片作为背景最好
  92. v.setBackgroundColor(Color.GRAY);
  93. }
  94. }
  95. }
  96. });
  97. }
  98. //#################################################################这是设置TabWidget的布局
  99. /**
  100. * 这个设置Tab标签本身的布局，需要TextView和ImageView不能重合
  101. * s:是文本显示的内容
  102. * i:是ImageView的图片位置
  103. * 将它设置到setIndicator(composeLayout("开心", R.drawable.coke))中
  104. */
  105. public View
    composeLayout(String s, int i){
  106. Log.e("Error", "composeLayout");
  107. LinearLayout layout = new LinearLayout(this);
  108. layout.setOrientation(LinearLayout.VERTICAL);
  109. TextView tv = new TextView(this);
  110. tv.setGravity(Gravity.CENTER);
  111. tv.setSingleLine(true);
  112. tv.setText(s);
  113. tv.setTextColor(Color.RED);
  114. layout.addView(tv,
  115. new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
  116. ImageView iv = new ImageView(this);
  117. iv.setImageResource(i);
  118. layout.addView(iv,
  119. new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
  120. return layout;
  121. }
  122. //#################################################################
  123. }

我都有详细的注释，估计大家都能看懂的，有些地方给了提示，扩展的需要就需要自己去完成了

下面是一个两个布局文件

一个是在layout中设置：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!--
  3. 一个典型的标签Activity 是由2 部分构成的 且其id都有规定 即：
  4. * TabWidget 用于展示标签页 id=tabs
  5. * FrameLayout 用于展示隶属于各个标签的具体布局 id=tabconten
  6. * TabHost 用于整个Tab布局 id=TabHost
  7. 还需注意要将Tab显示在最下面就需要这只LinearLayout时用Bottom
  8. -->
  9. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  10. android:id="@android:id/tabhost"
  11. android:layout_width="fill_parent"
  12. android:layout_height="fill_parent"
  13. >
  14. <LinearLayout
  15. android:orientation="vertical"
  16. android:gravity="bottom"
  17. android:layout_width="fill_parent"
  18. android:layout_height="fill_parent">
  19. <FrameLayout
  20. android:id="@android:id/tabcontent"
  21. android:layout_width="fill_parent"
  22. android:layout_height="200dip" >
  23. <RelativeLayout
  24. android:id="@+id/view1"
  25. android:orientation="vertical"
  26. android:layout_width="fill_parent"
  27. android:layout_height="fill_parent">
  28. <TextView
  29. android:id="@+id/text1"
  30. android:layout_width="wrap_content"
  31. android:layout_height="wrap_content"
  32. android:text="需要光临第一个Tab"/>
  33. <ImageView
  34. android:id="@+id/image1"
  35. android:layout_height="wrap_content"
  36. android:layout_below="@id/text1"
  37. android:layout_width="wrap_content"
  38. android:src="@drawable/icon"
  39. />
  40. </RelativeLayout>
  41. <TextView
  42. android:id="@+id/view2"
  43. android:layout_width="fill_parent"
  44. android:layout_height="fill_parent"
  45. android:text="需要光临第二个Tab"/>
  46. <TextView
  47. android:id="@+id/view3"
  48. android:layout_width="fill_parent"
  49. android:layout_height="fill_parent"
  50. android:text="需要光临第三个Tab"/>
  51. <TextView
  52. android:id="@+id/view4"
  53. android:layout_width="fill_parent"
  54. android:layout_height="fill_parent"
  55. />
  56. </FrameLayout>
  57. <TabWidget
  58. android:id="@android:id/tabs"
  59. android:layout_width="fill_parent"
  60. android:layout_height="wrap_content">
  61. </TabWidget>
  62. </LinearLayout>
  63. </TabHost>

还有一个在类中设置，设置都差不多，在此类中设置只是针对每个Tab页面的设置

  1. package com.woclub.tabactivitytest;
  2. import android.app.Activity;
  3. import android.view.Gravity;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.widget.Button;
  7. import android.widget.EditText;
  8. import android.widget.ImageView;
  9. import android.widget.LinearLayout;
  10. import android.widget.RadioButton;
  11. import android.widget.RadioGroup;
  12. import android.widget.TabHost;
  13. import android.widget.TextView;
  14. /**
  15. * 此类的功能是设置每个Tab标签的布局方式
  16. * 使用方法
  17. * CustomLayout ct = new CustomLayout(this);
  18. * tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab 4").setContent(ct));
  19. * @author Administrator
  20. *
  21. */
  22. public class CustomLayout
    implements TabHost.TabContentFactory{
  23. private Activity myActivity;
  24. private LayoutInflater layoutHelper;//用于实例化布局
  25. private LinearLayout layout;
  26. //构造函数，从外面传递参数Activity
  27. public CustomLayout(Activity myActivity)
  28. {
  29. this.myActivity = myActivity;
  30. //通过getLayoutInflater从Activity中得到一个实例化的LayoutInflater
  31. layoutHelper = myActivity.getLayoutInflater();
  32. }
  33. /**
  34. * 根据不同的Tab创建不同的视图
  35. */
  36. @Override
  37. public View createTabContent(String tag) {
  38. // TODO Auto-generated method stub
  39. return addCustomView(tag);
  40. }
  41. /**
  42. * 根据Tab的id设置不同Tab的view
  43. * 这是普通的设置方式，设置每个Tab的布局
  44. * @param id
  45. * @return
  46. */
  47. private View addCustomView(String id)
  48. {
  49. layout = new LinearLayout(myActivity);
  50. layout.setOrientation(LinearLayout.HORIZONTAL);
  51. if(id.equals("Tab1"))
  52. {
  53. ImageView iv = new ImageView(myActivity);
  54. iv.setImageResource(R.drawable.chat);
  55. //设置layout的布局，将一个ImageView添加到其中，并设置ImageView的布局格式,addView的第二个参数是设置ImageView的width和Height
  56. layout.addView(iv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));
  57. }
  58. else if(id.equals("Tab2"))
  59. {
  60. //第一个控件，注意每添加一个空间都需要用addView添加到layout中
  61. EditText edit = new EditText(myActivity);
  62. layout.addView(edit, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
  63. //第二个控件
  64. Button button = new Button(myActivity);
  65. button.setText("确定");
  66. button.setWidth(100);
  67. layout.addView(button, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
  68. //第三个控件
  69. RadioGroup rGroup = new RadioGroup(myActivity);
  70. rGroup.setOrientation(LinearLayout.HORIZONTAL);
  71. RadioButton radio1 = new RadioButton(myActivity);
  72. radio1.setText("Radio A");
  73. rGroup.addView(radio1);
  74. RadioButton radio2 = new RadioButton(myActivity);
  75. radio2.setText("Radio B");
  76. rGroup.addView(radio2);
  77. layout.addView(rGroup,
  78. new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
  79. }
  80. else if(id.equals("Tab3"))
  81. {
  82. TextView text = new TextView(myActivity);
  83. text.setText("the third TextView");
  84. text.setGravity(Gravity.CENTER);
  85. layout.addView(text);
  86. }
  87. else if(id.equals("Tab4"))
  88. {
  89. LinearLayout.LayoutParams param3 =
  90. new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);
  91. //在这里面又引用了布局文件来设置控件
  92. layout.addView(layoutHelper.inflate(R.layout.hello,
    null),param3);
  93. }
  94. return layout;
  95. }
  96. }

好了，该说的都在代码中说明了

希望大家喜欢，做的粗糙，就由大家去改进吧！

呵呵！

欢迎大家的讨论

转：http://hao3100590.iteye.com/blog/974343

上一篇：TabSpec和TabHost实例


下一篇：零散Linux命令