Tabhost选项卡上图片和文字不能同时显示的解决方案

尽管当前谷歌已经不推荐使用tabhost了,但是作为初学者,掌握这个经典的控件还是非常有必要的,在上手这个控件以后我们会发现一个问题,添加选项卡时同时添加了文字和图片但是Tabhost却只显示出了文字,针对这个问题我们可以对tabhost的选项卡即tabSpec自定义来进行解决,布局文件比较简单就不多说了,直接看MainActivity.java中的实现吧。

自定义方法如下:

          public View composeLayout(String s, int i) {		 
		LinearLayout layout = new LinearLayout(this);		 
		layout.setOrientation(LinearLayout.VERTICAL);
		ImageView iv = new ImageView(this);
		iv.setImageResource(i);
		LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
		LinearLayout.LayoutParams.WRAP_CONTENT,
		LinearLayout.LayoutParams.WRAP_CONTENT); 
		lp.setMargins(60,10, 0, 0);		
		layout.addView(iv, lp);
		TextView tv = new TextView(this);
		tv.setGravity(Gravity.LEFT);
		tv.setSingleLine(true);
		tv.setText(s);
		tv.setTextColor(Color.WHITE);
		tv.setTextSize(14);
		tv.setPadding(40, 5, 0, 0);;
		layout.addView(tv, new LinearLayout.LayoutParams(
		LinearLayout.LayoutParams.WRAP_CONTENT,
		LinearLayout.LayoutParams.WRAP_CONTENT));
		return layout;
	}
自定义的方法ok以后就可以在onCreate()上进行添加了:

                TabHost tab = (TabHost) findViewById(R.id.tabhost);
		tab.setup(this.getLocalActivityManager());

		TabHost.TabSpec specOne = tab.newTabSpec("选项卡一");
		specOne.setIndicator(composeLayout("精品推荐", R.drawable.pic1));
		specOne.setContent(R.id.tab1);
		tab.addTab(specOne);  
		
		TabHost.TabSpec specTwo = tab.newTabSpec("选项卡二");
		specTwo.setIndicator(composeLayout("专题分类", R.drawable.pic2));
		specTwo.setContent(R.id.tab2);
		tab.addTab(specTwo);
		
		TabHost.TabSpec specThree = tab.newTabSpec("选项卡三");
		specThree.setIndicator(composeLayout("  排行榜", R.drawable.pic3));
		specThree.setContent(R.id.tab3);
		tab.addTab(specThree);
		
		TabHost.TabSpec specFour = tab.newTabSpec("选项卡四");
		specFour.setIndicator(composeLayout("下载管理", R.drawable.pic4));
		specFour.setContent(R.id.tab4);
		tab.addTab(specFour);
这里添加了四个,可以根据自己的需求进行调整。

最终实现的效果如下,注意底部:

Tabhost选项卡上图片和文字不能同时显示的解决方案_第1张图片

此处为实现底部点选的效果我将tabhost的选项卡设置到了底部,下一篇文章,将简述一下这项设置的具体操作。

你可能感兴趣的:(原创)