相当郁闷的问题，TabHost选项卡标签图标始终不出现？

Love The Way You Lie 2022-04-10 08:17 163阅读 0赞

在学习Android TabHost布局过程中，很多教程告诉我，这样来显示选项卡标签的图标和文字：

TapSpec spec1 = tabHost.newTabSpec("tab 1");
    spec1.setIndicator("选项卡一", getResources().getDrawable(R.drawable.tab_icon));
    spec1.setContent(R.id.tab1);
    tabHost.addTab(spec1);

折腾来折腾去，setIndicator(label, drawable)这个方法始终不能将标题文字与图标一起显示出来，只有文字标题。

在没将电脑砸了之前，通过万能的stackoverflow.com终于知道确切答案以及相应方法了：  
[http://stackoverflow.com/questions/10745092/icon-in-tab-is-not-showing-up][http_stackoverflow.com_questions_10745092_icon-in-tab-is-not-showing-up]

其实就是SDK 4.03（冰激凌）下：只有文字标题显示，图标是不显示的。如果将文字标题设置为空字符串，则此时图标可显示。

对于冰激凌下两全其美的方法，只能是自定义标签卡布局，创建一个包含ImageView和TextView组件的界面布局文件 **tab\_indicator.xml（**layout/tab\_indicator.xml**），**然后用setIndicator(View view)方法来设置TabSpec的界面布局。

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="64dip"
    android:layout_weight="1"
    android:orientation="vertical"
    android:background="@drawable/tab_indicator"
    android:padding="5dp">
    
    <ImageView android:id="@+id/icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    />
    
    <TextView android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    style="?android:attr/tabWidgetStyle"
    />
    </RelativeLayout>

接着我们可以在drawable图片资源目录下创建一个**tab\_info.xml**文件，用来指示Tab图标的各状态。

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_info_dark"
    android:state_selected="true" />
    <item android:drawable="@drawable/tab_info_light" />
    </selector>

现在就可以通过下面的代码将我们自定义的视图作为一个indicator配置给TapSpec对象。

private void addTab(String label, int drawableId) {
    Intent intent = new Intent(this, MockActivity.class);
    TabHost.TabSpec spec = tabHost.newTabSpec(label);
    
    View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
    TextView title = (TextView) tabIndicator.findViewById(R.id.title);
    title.setText(label);
    ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon);
    icon.setImageResource(drawableId);
    
    spec.setIndicator(tabIndicator);
    spec.setContent(intent);
    tabHost.addTab(spec);
    }

像以下方式那样调用上面那自定义addTab方法

tabHost = getTabHost(); //tabHost is a private field
    
    addTab("First", R.drawable.tab_info);
    addTab("Second", R.drawable.tab_info);
    addTab("Third", R.drawable.tab_info);

注意：当用自定义视图的indicator来添加Tab时，要将strip\_enabled属性设置为false。若要兼顾底部strip，那在添加最后一个Tab后设置getTabWidget().setStripEnabled(true);

[http_stackoverflow.com_questions_10745092_icon-in-tab-is-not-showing-up]: http://stackoverflow.com/questions/10745092/icon-in-tab-is-not-showing-up