Android supprimer l'espace entre les onglets dans tabwidget

J'ai fait une application qui contient des onglets comme dans HelloTabActivity, il y a aussi de l'espace entre ces onglets, quelqu'un peut-il suggérer comment faire pour supprimer cet espace et il y a aussi une ligne grise sous les onglets comment cela peut-il être retiré?

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>

Activité

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));
}
}

Maintenant, je veux enlever le noir des espaces entre les onglets, et il doit être comme ils sont connectés, et aussi je ne suis pas en mesure de supprimer la ligne grise sous les onglets.

Grâce

merci de partager quelques captures d'écran sur votre problème, et les styles et les thèmes de xml que vous utilisez. Peut arriver, que vous définissez un mondial séparateur de style quelque part (mise en page xml ou code), et c'est ce qui vous dérange maintenant.
Je l'ai mis dans le code de bien vouloir jeter un oeil. 🙂

OriginalL'auteur ReNa | 2011-04-27

Pour la suppression de la ligne grise au bas de votre tabbar, vous pouvez définir

tabHost.getTabWidget().setStripEnabled(false);

Que de la suppression de l'écart entre les onglets.. Le meilleur moyen serait d'utiliser votre propre retirable sans rembourrages. Vous pouvez utiliser des images pour cela, ou vous pouvez créer vos onglets parcours via xml, par exemple à l'intérieur d'un <layer_list> de l'élément racine:

<layer_list>
<item android:top="0dp" android:left="0dp" android:right="0dp" android:bottom="0dp">
<shape android:shape="rectangle">
[..]
</shape>
</item>
[..]
</layer_list>

et de définir cette drawable à l'arrière-plan de votre TabWidget.

Pour voir comment personnaliser vos onglets, il y a beaucoup de tutoriels sur le web. Par exemple ce un par Josh est court et a une belle explication.

Mise à jour

Ici je partage un petit échantillon de tabwidget à l'aide des onglets personnalisés (en fonction de votre code) pour obtenir la sortie suivante:

Android supprimer l'espace entre les onglets dans tabwidget

Ce dont vous avez besoin:

trois nouveaux couche d'un drawable (pour
sélectionné, concentré et non sélectionnés
les états des onglets)
à deux états, un drawable (pour le texte
et le fond de l'différents
les états)
une nouvelle mise en page pour les onglets
mise à jour de votre main.xml
mise à jour de votre classe d'activité
mise à jour de votre androidManifest.xml
(supprimer les déclarations de style)

Les trois couche d'un drawable: 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>

Les deux état un drawable: 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>

La nouvelle mise en page pour les onglets: 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);
}
}

Et ce qu'il est.

Pour créer directement acculé onglets, juste de perdre le coin des spécifications de la couche drawable fichiers xml.

Jouer sur les couleurs, traits, etc., à l'issue fonction de vos préférences.

je n'ai pas obtenu il peut vous donner des précisions
veuillez voir ma mise à jour pour un exemple de travail d'onglets personnalisés. jouer avec les "frontières", les traits, les couleurs, les angles, pour les obtenir look que vous voulez.
Il semble ridicule d'avoir à passer par tout cela pour simplement changer l'arrière-plan dessiné des onglets en fonction de l'état... super code si
salut @rekaszeru comment puis-je appliquer la couleur différente pour chaque onglet? S'il vous plaît aider
Est-il possible? Ou dois-je créer séparé xmls pour chaque onglet?

OriginalL'auteur rekaszeru

utiliser android:showDividers="none" dans le xml de mise en page.

<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:showDividers="none"
android:layout_height="wrap_content"/>

OriginalL'auteur Engin OZTURK

Si votre cible est en Nid d'abeille à partir, vous pouvez utiliser le code suivant.

if (Integer.parseInt(Build.VERSION.SDK) >= Build.VERSION_CODES.HONEYCOMB) {
tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}

OriginalL'auteur bitbybit

Pour enlever l'excès d'écart entre les onglets, on peut measureWithLargestChild attribut sur tabwidget de faux

<TabWidget
android:id="@android:id/tabs"                    
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:measureWithLargestChild="false">
</TabWidget>

OriginalL'auteur Jeevan

0

Une ligne magique.
```
mTabHost.getTabWidget().setDividerDrawable(null);
```
Fait

OriginalL'auteur Hiren Patel

Vous devez vous connecter pour publier un commentaire.