Android 在 tabwidget 中删除选项卡之间的空间 [英] Android remove space between tabs in tabwidget
本文介绍了Android 在 tabwidget 中删除选项卡之间的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我制作了一个应用程序，它有像 HelloTabActivity 这样的选项卡，这些选项卡之间也有空间，有人能建议如何删除这个空间，而且选项卡下方有一条灰线，如何删除?
I have made an application which has tabs like in HelloTabActivity, there is also space between these tabs, can anyone suggest how to remove this space and also there is a grey line beneath the tabs how can that be removed?
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</HorizontalScrollView>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
</LinearLayout>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="@android:style/Theme">
<item name="android:tabWidgetStyle">@style/CustomTabWidget</item>
</style>
<style name="CustomTabWidget" parent="@android:style/Widget.TabWidget">
<item name="android:textAppearance">@style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText"
parent="@android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">10sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#1589FF</item>
<item name="android:padding">3dip</item>
</style>
</resources>
活动
public class InfralineTabWidget extends TabActivity{
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = (TabHost)getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Resusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, TopNewsActivity.class);
// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("topNews").setIndicator("Top News", res.getDrawable(R.drawable.tab_news)).setContent(intent);
tabHost.addTab(spec);
// Do the same for the other tabs
intent = new Intent().setClass(this, PowerActivity.class);
spec = tabHost.newTabSpec("power").setIndicator("Power", res.getDrawable(R.drawable.tab_power)).setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, EnergyActivity.class);
spec = tabHost.newTabSpec("energy").setIndicator("Renewable Energy", res.getDrawable(R.drawable.tab_energy)).setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, CoalActivity.class);
spec = tabHost.newTabSpec("coal").setIndicator("Coal", res.getDrawable(R.drawable.tab_coal)).setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, OilnGasActivity.class);
spec = tabHost.newTabSpec("oilnGas").setIndicator("Oil & Gas", res.getDrawable(R.drawable.tab_oilngas)).setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(0);
tabHost.getTabWidget().getChildAt(0).setLayoutParams(new LinearLayout.LayoutParams(100,25));
tabHost.getTabWidget().getChildAt(1).setLayoutParams(new LinearLayout.LayoutParams(100,25));
tabHost.getTabWidget().getChildAt(2).setLayoutParams(new LinearLayout.LayoutParams(100,25));
tabHost.getTabWidget().getChildAt(3).setLayoutParams(new LinearLayout.LayoutParams(100,25));
tabHost.getTabWidget().getChildAt(4).setLayoutParams(new LinearLayout.LayoutParams(100,25));
}
}
现在我想删除选项卡之间的黑色空间，它们应该是连接的，而且我无法删除选项卡下方的灰线.
Now i want to remove the black spaces between the tabs and it should be like they are connected and also i'm not able to remove the grey line below the tabs.
谢谢
推荐答案
要去除标签栏底部的灰线，您可以设置
For removing the grey line at the bottom of your tabbar, you can set
tabHost.getTabWidget().setStripEnabled(false);
至于消除选项卡之间的间隙.. 最好的方法是使用您自己的 drawable 而没有任何填充.您可以为此使用图像，或者您可以通过 xml 创建标签的背景，例如在
As of removing the gap between the tabs.. The best way would be to use your own drawable without any paddings. You can use images for this, or you can create your tabs' backgrounds via xml's, say inside a <layer_list> root element:
<layer_list>
<item android:top="0dp" android:left="0dp" android:right="0dp" android:bottom="0dp">
<shape android:shape="rectangle">
[..]
</shape>
</item>
[..]
</layer_list>
并将此 drawable 设置为 TabWidget 的背景.
and set this drawable to be the background of your TabWidget.
要了解如何自定义标签，网上有很多教程.例如，Josh 的这篇文章 很短，而且有很好的解释.
To see how to customize your tabs, there are a lot of tutorials on the web. For example this one by Josh is short and has a nice explanation.
更新
在这里，我分享了一个使用自定义选项卡(基于您的代码)来实现以下输出的 tabwidget 小示例:
Here I share a small sample of tabwidget using custom tabs (based on your code) to achieve the following output:
你需要什么:
- 三个新的图层可绘制对象(用于选中、聚焦和未选中标签的状态)
- 两个状态可绘制对象(用于文本以及不同的背景状态)
- 标签的新布局
- 更新你的
main.xml - 更新您的活动课程
- 更新你的 androidManifest.xml(删除样式声明)
三层可绘制对象:tab_normal.xml、tab_focused.xml、tab_selected.xml
drawable/tab_normal.xml:
The three layer drawables: tab_normal.xml, tab_focused.xml, tab_selected.xml
drawable/tab_normal.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/default_back_color" />
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle">
<gradient android:startColor="#AAAAAA" android:centerColor="#888888"
android:endColor="#666666" android:angle="90" />
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item android:top="4dp" android:left="1dp" android:right="1dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<solid android:color="@color/default_back_color" />
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
</item>
</layer-list>
drawable/tab_focused.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/default_back_color" />
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle">
<gradient android:startColor="#AAAAAA" android:centerColor="#888888"
android:endColor="#666666" android:angle="90" />
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item android:top="4dp" android:left="1dp" android:right="1dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<gradient android:startColor="#8F8F8F" android:centerColor="#656565"
android:endColor="#3F3F3F" android:angle="90" />
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
</item>
</layer-list>
drawable/tab_selected.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/default_back_color" />
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle">
<gradient android:startColor="#EEEEEE" android:centerColor="#CCCCCC"
android:endColor="#AAAAAA" android:angle="-90" />
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
</item>
<item android:top="4dp" android:left="1dp" android:right="1dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<gradient android:startColor="#EAEAEA" android:centerColor="#9F9F9F"
android:endColor="#696969" android:angle="90" />
<corners android:bottomRightRadius="0dp"
android:bottomLeftRadius="0dp" android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
</shape>
</item>
</layer-list>
两个状态drawable:tab_background_selector.xml、tab_text_selector.xml
drawable/tab_background_selector.xml:
The two state drawables: tab_background_selector.xml, tab_text_selector.xml
drawable/tab_background_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_focused="false"
android:state_pressed="false" android:drawable="@drawable/tab_selected"/>
<item android:state_selected="false" android:state_focused="false"
android:state_pressed="false" android:drawable="@drawable/tab_normal" />
<item android:state_pressed="true" android:drawable="@drawable/tab_focused"/>
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false" android:drawable="@drawable/tab_selected"/>
</selector>
drawable/tab_text_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#1589FF" />
<item android:state_focused="true" android:color="#1589FF" />
<item android:state_pressed="true" android:color="@android:color/white" />
<item android:color="#F0F0F0" />
</selector>
标签的新布局:tab.xml
layout/tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="@drawable/tab_background_selector" android:gravity="center"
android:orientation="vertical" android:padding="5dp">
<ImageView android:id="@+id/tab_icon" android:layout_width="30dp"
android:layout_height="30dp" android:scaleType="fitCenter" />
<TextView android:id="@+id/tab_text" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:singleLine="true"
android:textStyle="bold" android:gravity="center_horizontal"
android:textSize="10sp" android:padding="3dip" android:ellipsize="marquee"
android:textColor="@drawable/tab_text_selector" />
</LinearLayout>
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<HorizontalScrollView android:scrollbars="none"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent" android:layout_height="wrap_content" />
</HorizontalScrollView>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
</LinearLayout>
InfralineTabWidget.java:
public class InfralineTabWidget extends TabActivity
{
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final TabHost tabHost = (TabHost) getTabHost();
tabHost.addTab(createTab(TopNewsActivity.class,
"topNews", "Top News", R.drawable.tab_news));
tabHost.addTab(createTab(PowerActivity.class,
"power", "Power", R.drawable.tab_power));
tabHost.addTab(createTab(EnergyActivity.class,
"energy", "Renewable Energy", R.drawable.tab_energy));
tabHost.addTab(createTab(CoalActivity.class,
"coal", "Coal", R.drawable.tab_coal));
tabHost.addTab(createTab(OilnGasActivity.class,
"oilnGas", "Oil & Gas", R.drawable.tab_oilngas));
tabHost.setCurrentTab(0);
tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 140;
tabHost.getTabWidget().getChildAt(1).getLayoutParams().width = 140;
tabHost.getTabWidget().getChildAt(2).getLayoutParams().width = 140;
tabHost.getTabWidget().getChildAt(3).getLayoutParams().width = 140;
tabHost.getTabWidget().getChildAt(4).getLayoutParams().width = 140;
}
private TabSpec createTab(final Class<?> intentClass, final String tag,
final String title, final int drawable)
{
final Intent intent = new Intent().setClass(this, intentClass);
final View tab = LayoutInflater.from(getTabHost().getContext()).
inflate(R.layout.tab, null);
((TextView)tab.findViewById(R.id.tab_text)).setText(title);
((ImageView)tab.findViewById(R.id.tab_icon)).setImageResource(drawable);
return getTabHost().newTabSpec(tag).setIndicator(tab).setContent(intent);
}
}
就是这样.
要创建直角选项卡，只需从图层可绘制 xml 文件中丢失角规格即可.
还可以使用颜色、笔触等，使结果符合您的喜好.
And this is it.
To create straight cornered tabs, just lose the corner specifications from the layer drawable xml files.
Also play around the colors, strokes, etc., to make the outcome fit your preferences.
这篇关于Android 在 tabwidget 中删除选项卡之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
