Android 选项卡中的图标未显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10745092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Icon in Tab is not showing up
提问by theholy
I'm starting with Android and when I try to do a TabHost with an icon and a text. Only the text is visible, if I left the text in blank it is possible to see the icon. I want to see both on screen.
我从 Android 开始，当我尝试使用图标和文本执行 TabHost 时。只有文本可见，如果我将文本留空，则可以看到图标。我想在屏幕上看到两者。
Can somebody give me advice?
有人可以给我建议吗？
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Usuario usu = new Usuario();
usu.nombre = "fsdf";
lista.add(usu);
adaptador = new AdaptadorCelda(this,lista);
ListView lstView = (ListView)findViewById(R.id.lista);
lstView.setAdapter(adaptador);
Button btn = (Button)findViewById(R.id.btnSalva);
btn.setOnClickListener(onSave);
Resources res = getResources();
TabHost tabs=(TabHost)findViewById(R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
spec.setContent(R.id.tab1);
spec.setIndicator("",res.getDrawable(android.R.drawable.ic_menu_rotate));
tabs.addTab(spec);
spec=tabs.newTabSpec("mitab2");
spec.setContent(R.id.tab2);
spec.setIndicator("ddd",
res.getDrawable(android.R.drawable.presence_invisible));
tabs.addTab(spec);
tabs.setCurrentTab(0);
spec.setIndicator("",res.getDrawable(android.R.drawable.ic_menu_rotate)) In this case icon appears.
spec.setIndicator("ddd",
res.getDrawable(android.R.drawable.presence_invisible));
and here is the main.xml
这是 main.xml
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/lblNombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="17dp"
android:text="Nombre"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="@+id/txtNombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/lblNombre"
android:layout_marginLeft="35dp"
android:layout_toRightOf="@+id/lblNombre"
android:ems="10" >
<requestFocus />
</EditText>
<EditText
android:id="@+id/txtApellido"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtNombre"
android:layout_below="@+id/txtNombre"
android:ems="10" />
<TextView
android:id="@+id/lblApellido"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/txtApellido"
android:layout_alignParentLeft="true"
android:text="Apellidos"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RadioGroup
android:id="@+id/tipos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txtApellido"
android:layout_marginTop="35dp"
android:layout_toLeftOf="@+id/txtApellido" >
<RadioButton
android:id="@+id/rdbAlta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alta" />
<RadioButton
android:id="@+id/rdbBaja"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="baja" />
<RadioButton
android:id="@+id/rdbTramite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tramite" />
</RadioGroup>
<Button
android:id="@+id/btnSalva"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtApellido"
android:layout_alignTop="@+id/tipos"
android:layout_marginLeft="58dp"
android:layout_marginTop="30dp"
android:text="Button" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/txtApellido"
android:src="@drawable/ic_menu_chart" />
</RelativeLayout>
<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/lista"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/tipos"
android:layout_marginTop="24dp" >
</ListView>
</LinearLayout>
</FrameLayout>
回答by sunadorer
Have you tested your app on a device running Ice Cream Sandwich? I noticed recently, that the default TabHostbehaves differently depending on the target device and the android platform version.
您是否在运行 Ice Cream Sandwich 的设备上测试过您的应用？我最近注意到，默认TabHost行为会因目标设备和 android 平台版本而异。
Running an app that provides an icon and a text to setIndicator(as in the source from the question), had the following test result:
运行一个提供图标和文本的应用程序setIndicator（如问题的来源），得到以下测试结果：
- Phone with Android 2.1: both icon and text where shown (Label below the Icon as expected)
- Phone with 4.0.3: The icons didn't show and only the textwas visible.
- Tablet running ICS: the tabs where shown with icon and text
- 带有 Android 2.1 的手机：显示图标和文本（按预期在图标下方贴上标签）
- 4.0.3 手机：图标不显示，只有文本可见。
- 运行 ICS 的平板电脑：带有图标和文本的选项卡
As you found out too, replacing the label with an empty stringthe icons appearedon the Phone - but then the user would need to guess the meaning of the icons. Apart from that: When running this version of the app on the pre ICS phone: The tabs keep their size and leave an empty area below the image.
当你发现了也有更换标签空字符串的图标出现在电话-但随后用户将需要猜测的图标的含义。除此之外：在预 ICS 手机上运行此版本的应用程序时：选项卡保持其大小并在图像下方留下空白区域。
To change this device driven decision on how much space the tabs should get, I found the solution in this tutorial on how to customize tabs:
要更改此设备驱动的选项卡应获得多少空间的决定，我在本教程中找到了有关如何自定义选项卡的解决方案：
First you need to provide your own tab indicatorlayout ("layout/tab_indicator.xml" in the tutorial) including an ImageViewand a TextView. Then you tell the TabSpecto use this via setIndicator. And voilà: you get the icon and the label on the phone with ICS too.
首先，您需要提供自己的选项卡指示器布局（教程中的“layout/tab_indicator.xml”），包括ImageView和TextView。然后你告诉TabSpec使用这个 via setIndicator。瞧：您也可以通过 ICS 在手机上获得图标和标签。
Here is the important part on how to set up the indicator (this = the current activity):
这是关于如何设置指标的重要部分（这 = 当前活动）：
TabHost.TabSpec spec = this.getTabHost().newTabSpec(tag);
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator, getTabWidget(), false);
((TextView) tabIndicator.findViewById(R.id.title)).setText(label);
((ImageView) tabIndicator.findViewById(R.id.icon)).setImageResource(drawableResourceId);
spec.setIndicator(tabIndicator);
If you like the same look of the tabs on older and newer phones have an additional look here: http://jgilfelt.github.com/android-actionbarstylegenerator/. This page generates images and styles to customize the action bar including the tabs and helped me figure out how the 9-patch background images need to be defined.
如果您喜欢旧手机和新手机上标签的相同外观，请查看此处：http: //jgilfelt.github.com/android-actionbarstylegenerator/。此页面生成图像和样式以自定义包括选项卡在内的操作栏，并帮助我弄清楚需要如何定义 9-patch 背景图像。
回答by Javier Baez
This is a easy way to show the text and icon in ICS. After to setup the Tabhost, I call the next methods:
这是在 ICS 中显示文本和图标的简单方法。设置 Tabhost 后，我调用以下方法：
setTabIcon(mTabHost, 0, R.drawable.ic_tab1); //for Tab 1
setTabIcon(mTabHost, 1, R.drawable.ic_tab2); //for Tab 2
public void setTabIcon(TabHost tabHost, int tabIndex, int iconResource) {
ImageView tabImageView = (ImageView) tabHost.getTabWidget().getChildTabViewAt(tabIndex).findViewById(android.R.id.icon);
tabImageView.setVisibility(View.VISIBLE);
tabImageView.setImageResource(iconResource);
}
If you want a more advanced solution, you need to create a layout like @sunadorerrecommend. My recommendation is that you can create your layout using the holo theme layout, search the file on your sdk_dir/platforms/android-14/data/res/layout/tab_indicator_holo.xml.
如果你想要一个更高级的解决方案，你需要创建一个像@sunadorer推荐的布局。我的建议是您可以使用全息主题布局创建布局，搜索sdk_dir/platforms/android-14/data/res/layout/tab_indicator_holo.xml 上的文件。
My advanced solution is the next, you need to create a layout like this:
我的高级解决方案是下一个，您需要创建这样的布局：
tab_indicator.xml
tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="5dp"
android:paddingBottom="5dp"
style="@android:style/Widget.Holo.Tab">
<ImageView
android:id="@android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:visibility="visible" />
<TextView
android:id="@android:id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
style="@android:style/Widget.Holo.ActionBar.TabText" />
</LinearLayout>
In your activity or fragment, create the next function:
在您的活动或片段中，创建下一个函数：
public View createTabIndicator(LayoutInflater inflater, TabHost tabHost, int textResource, int iconResource) {
View tabIndicator = inflater.inflate(R.layout.tab_indicator, tabHost.getTabWidget(), false);
((TextView) tabIndicator.findViewById(android.R.id.title)).setText(textResource);
((ImageView) tabIndicator.findViewById(android.R.id.icon)).setImageResource(iconResource);
return tabIndicator;
}
And finally when you create your tab in your activity or fragment use the next code:
最后，当您在活动或片段中创建选项卡时，请使用以下代码：
mTabHost.addTab(
mTabHost.newTabSpec("tab1")
.setIndicator(createTabIndicator(inflater, mTabHost, R.string.tab1, R.drawable.ic_tab1))
.setContent(R.id.tab1)
);
I have tested this solution in ICS and works fine.
我已经在 ICS 中测试了这个解决方案并且工作正常。
Good luck :)
祝你好运 ：）
回答by Andrei Buneyeu
There is another very simple solution for this.
对此还有另一个非常简单的解决方案。
It seems that the issue is in new Holo theme and TabWidget. So what you should do is define Holo theme in your values-v11folder but with the old TabWidgetstyle like this:
似乎问题出在新的 Holo 主题和TabWidget. 所以你应该做的是在你的values-v11文件夹中定义 Holo 主题，但使用这样的旧TabWidget样式：
<style name="MyAppTheme" parent="@android:style/Theme.Holo.NoActionBar"> <item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item> </style>
<style name="MyAppTheme" parent="@android:style/Theme.Holo.NoActionBar"> <item name="android:tabWidgetStyle">@android:style/Widget.TabWidget</item> </style>
It works for me, hope it helps someone.
它对我有用，希望它可以帮助某人。
回答by Gino Lin
I try the following way to do it and it works fine:
我尝试以下方法来做到这一点，它工作正常：
- using setIndicator("TAB") to set text only.
- using setBackgroundDrawable(-) to set icon.
- 使用 setIndicator("TAB") 仅设置文本。
- 使用 setBackgroundDrawable(-) 设置图标。
Sample code:
示例代码：
final TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
final Resources res = getResources();
int i;
tabHost.setup(); //Call setup() before adding tabs if loading TabHost using findViewById().
TabHost.TabSpec ts = tabHost.newTabSpec("trackinfo");
//ts.setIndicator("", res.getDrawable(R.drawable.icon_trackinfo));
ts.setIndicator("Track Information");
ts.setContent(R.id.tabTrackInfo);
tabHost.addTab(ts);
TabHost.TabSpec ts2 = tabHost.newTabSpec("collection");
//ts2.setIndicator("", res.getDrawable(R.drawable.icon_collection_gray));
ts2.setIndicator("My Collection");
ts2.setContent(R.id.tabMyCollecton);
tabHost.addTab(ts2);
tabHost.setOnTabChangedListener(new OnTabChangeListener(){
@Override
public void onTabChanged(String tabId)
{
if("trackinfo".equals(tabId)) {
//
TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs);
View tabView = tw.getChildTabViewAt(0);
TextView tv = (TextView)tabView.findViewById(android.R.id.title);
tv.setTextColor(TabColor[0]);
tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_selected));
tabView = tw.getChildTabViewAt(1);
tv = (TextView)tabView.findViewById(android.R.id.title);
tv.setTextColor(TabColor[1]);
tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_gray));
}
if("collection".equals(tabId)) {
//
TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs);
View tabView = tw.getChildTabViewAt(0);
TextView tv = (TextView)tabView.findViewById(android.R.id.title);
tv.setTextColor(TabColor[1]);
tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_gray));
tabView = tw.getChildTabViewAt(1);
tv = (TextView)tabView.findViewById(android.R.id.title);
tv.setTextColor(TabColor[0]);
tabView.setBackgroundDrawable(res.getDrawable(R.drawable.icon_selected));
}
}}); // END OF tabHost.setOnTabChangedListener
// After Tabs being added
// change font settings
TabWidget tw = (TabWidget)tabHost.findViewById(android.R.id.tabs);
for(i=0;i<2;i++)
{
View tabView = tw.getChildTabViewAt(i);
TextView tv = (TextView)tabView.findViewById(android.R.id.title);
tv.setHeight(25);
tv.setTextColor(TabColor[i]);
tv.setTypeface(Typeface.SANS_SERIF, Typeface.BOLD_ITALIC);
tv.setTextSize(20);
tabView.setBackgroundDrawable(res.getDrawable(TabIcon[i]));
}
