参考链接:
http://www.iteye.com/topic/602737
这个写的很不错,我是跟着一步步写下来的,不过到最后也遇到了麻烦,就是不能将Tab标签的文字和图片分开,始终是重合的,而且每个具体的代码,还是搞了许久才出来,故而分享之,希望能给大家带来方便,也谢谢下面的高人,呵呵!
http://www.youmi.net/bbs/thread-102-1-4.html
这个和上面的代码是一样的,不过代码不全,对于初学者来说,考验的时候来了,完善就是提高的过程,不要怕麻烦!
下面就根据上面的参考自己写的,当然大部分是相同的,不过有详细的注释,完整的代码
如果有什么不明白就留言吧!呵呵
首先结果图:
图1:
图2
图3
当然界面没有前面的仁兄好看,我是讲究实用,美化需要自己慢慢做了
呵呵
下面直接代码:
package com.woclub.tabactivitytest; import android.app.TabActivity; import android.content.res.ColorStateList; import android.graphics.Color; import android.os.Bundle; import android.util.Log; import android.view.Gravity; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TabHost; import android.widget.TabWidget; import android.widget.TextView; import android.widget.TabHost.OnTabChangeListener; /** * 总结:在设置Tab的布局的时候首先需要newTabSpec再在其设置setIndicator(Tab名字,Tab的图标), * 尤其需要注意setContent(),它有三种使用方法setContent(int)它是直接在布局文件中设置其布局, * setContent(Intent)可以用Intent指定一个Activity, * setContent(TabContentFactory)可以用一个类来指定其布局的方式 * @author Administrator * */ public class MainActivity extends TabActivity { private static final String Tab1 = "Tab1"; private static final String Tab2 = "Tab2"; private static final String Tab3 = "Tab3"; private static final String Tab4 = "Tab4"; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //1得到TabHost对象,正对TabActivity的操作通常都有这个对象完成 final TabHost tabHost = this.getTabHost(); final TabWidget tabWidget = tabHost.getTabWidget(); //2生成一个Intent对象,该对象指向一个Activity,当然现在例子比较简单就没有绑定其他的Activity故而不用 //3生成一个TabSpec对象,这个对象代表了一个Tab页 TabHost.TabSpec tabSpec = tabHost.newTabSpec(Tab1); //设置该页的indicator(指示器)设置该Tab页的名字和图标,以及布局 tabSpec.setIndicator(composeLayout("爽哉", R.drawable.coke)) .setContent(R.id.view1); //4将设置好的TabSpec对象添加到TabHost当中 tabHost.addTab(tabSpec); //第二个Tab tabHost.addTab(tabHost.newTabSpec(Tab2).setIndicator(composeLayout("安逸", R.drawable.coke)) .setContent(R.id.view2)); //第三个Tab tabHost.addTab(tabHost.newTabSpec(Tab3).setIndicator(composeLayout("开心", R.drawable.coke)) .setContent(R.id.view3)); //第四个Tab tabHost.addTab(tabHost.newTabSpec(Tab4).setIndicator(composeLayout("说明", R.drawable.coke)) .setContent(R.id.view4)); //setContent(TabContentFactory)可以用一个类来指定其布局的方式,前三个都是用的setContent(int)方式 // CustomLayout custom = new CustomLayout(this); // tabHost.addTab(tabHost.newTabSpec(Tab4).setIndicator("Tab4", getResources() // .getDrawable(R.drawable.icon)) // .setContent(custom)); //*****************************这是对Tab标签本身的设置******************************************* int width =45; int height =48; for(int i = 0; i < tabWidget.getChildCount(); i++) { //设置高度、宽度,不过宽度由于设置为fill_parent,在此对它没效果 tabWidget.getChildAt(i).getLayoutParams().height = height; tabWidget.getChildAt(i).getLayoutParams().width = width; /** * 下面是设置Tab的背景,可以是颜色,背景图片等 */ View v = tabWidget.getChildAt(i); if (tabHost.getCurrentTab() == i) { v.setBackgroundColor(Color.GREEN); //在这里最好自己设置一个图片作为背景更好 //v.setBackgroundDrawable(getResources().getDrawable(R.drawable.chat)); } else { v.setBackgroundColor(Color.GRAY); } } //************************************************************************************ //设置Tab变换时的监听事件 tabHost.setOnTabChangedListener(new OnTabChangeListener() { @Override public void onTabChanged(String tabId) { // TODO Auto-generated method stub //当点击tab选项卡的时候,更改当前的背景 for(int i = 0; i < tabWidget.getChildCount(); i++) { View v = tabWidget.getChildAt(i); if (tabHost.getCurrentTab() == i) { v.setBackgroundColor(Color.GREEN); } else { //这里最后需要和上面的设置保持一致,也可以用图片作为背景最好 v.setBackgroundColor(Color.GRAY); } } } }); } //#################################################################这是设置TabWidget的布局 /** * 这个设置Tab标签本身的布局,需要TextView和ImageView不能重合 * s:是文本显示的内容 * i:是ImageView的图片位置 * 将它设置到setIndicator(composeLayout("开心", R.drawable.coke))中 */ public View composeLayout(String s, int i){ Log.e("Error", "composeLayout"); LinearLayout layout = new LinearLayout(this); layout.setOrientation(LinearLayout.VERTICAL); TextView tv = new TextView(this); tv.setGravity(Gravity.CENTER); tv.setSingleLine(true); tv.setText(s); tv.setTextColor(Color.RED); layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)); ImageView iv = new ImageView(this); iv.setImageResource(i); layout.addView(iv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)); return layout; } //################################################################# }
我都有详细的注释,估计大家都能看懂的,有些地方给了提示,扩展的需要就需要自己去完成了
下面是一个两个布局文件
一个是在layout中设置:
还有一个在类中设置,设置都差不多,在此类中设置只是针对每个Tab页面的设置
package com.woclub.tabactivitytest; import android.app.Activity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TabHost; import android.widget.TextView; /** * 此类的功能是设置每个Tab标签的布局方式 * 使用方法 * CustomLayout ct = new CustomLayout(this); * tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab 4").setContent(ct)); * @author Administrator * */ public class CustomLayout implements TabHost.TabContentFactory{ private Activity myActivity; private LayoutInflater layoutHelper;//用于实例化布局 private LinearLayout layout; //构造函数,从外面传递参数Activity public CustomLayout(Activity myActivity) { this.myActivity = myActivity; //通过getLayoutInflater从Activity中得到一个实例化的LayoutInflater layoutHelper = myActivity.getLayoutInflater(); } /** * 根据不同的Tab创建不同的视图 */ @Override public View createTabContent(String tag) { // TODO Auto-generated method stub return addCustomView(tag); } /** * 根据Tab的id设置不同Tab的view * 这是普通的设置方式,设置每个Tab的布局 * @param id * @return */ private View addCustomView(String id) { layout = new LinearLayout(myActivity); layout.setOrientation(LinearLayout.HORIZONTAL); if(id.equals("Tab1")) { ImageView iv = new ImageView(myActivity); iv.setImageResource(R.drawable.chat); //设置layout的布局,将一个ImageView添加到其中,并设置ImageView的布局格式,addView的第二个参数是设置ImageView的width和Height layout.addView(iv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT)); } else if(id.equals("Tab2")) { //第一个控件,注意每添加一个空间都需要用addView添加到layout中 EditText edit = new EditText(myActivity); layout.addView(edit, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)); //第二个控件 Button button = new Button(myActivity); button.setText("确定"); button.setWidth(100); layout.addView(button, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)); //第三个控件 RadioGroup rGroup = new RadioGroup(myActivity); rGroup.setOrientation(LinearLayout.HORIZONTAL); RadioButton radio1 = new RadioButton(myActivity); radio1.setText("Radio A"); rGroup.addView(radio1); RadioButton radio2 = new RadioButton(myActivity); radio2.setText("Radio B"); rGroup.addView(radio2); layout.addView(rGroup, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)); } else if(id.equals("Tab3")) { TextView text = new TextView(myActivity); text.setText("the third TextView"); text.setGravity(Gravity.CENTER); layout.addView(text); } else if(id.equals("Tab4")) { LinearLayout.LayoutParams param3 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT); //在这里面又引用了布局文件来设置控件 layout.addView(layoutHelper.inflate(R.layout.hello, null),param3); } return layout; } }
文章来源: