Android: onglets en bas


148

J'ai vu des discussions à ce sujet, mais rien de précis. Existe-t-il un moyen de placer les onglets dans un TabWidget en bas de l'écran? Si c'est le cas, comment?

J'ai essayé ce qui suit, mais je n'ai pas fonctionné:

a) réglage du tabwidget sous le framelayout
b) réglage de la gravité du tabwidget sur "bottom"

Merci! llappall


10
Veuillez définir «n'a pas fonctionné».
CommonsWare


3
Regardez ici si vous voulez des hôtes d'onglets semblables à ceux de l'iPhone.
Adil Soomro

Réponses:


272

Voici la solution la plus simple, la plus robuste et la plus évolutive pour obtenir des onglets en bas de l'écran.

  1. Dans votre LinearLayout vertical, placez le FrameLayout au-dessus du TabWidget
  2. Mettre layout_heightà la wrap_contentfois sur FrameLayout et TabWidget
  3. Définir FrameLayout android:layout_weight="1"
  4. Définissez TabWidget android:layout_weight="0"(0 est la valeur par défaut, mais pour l'accentuation, la lisibilité, etc.)
  5. Définir TabWidget android:layout_marginBottom="-4dp"(pour supprimer le séparateur inférieur)

Code complet:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    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">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginBottom="-4dp"/>

    </LinearLayout>

</TabHost>

3
Le diviseur est en fait codé en dur. J'essayais de changer les drawables utilisés pour les onglets et je l'ai trouvé. Total déception.
Jeremy Logan

6
Vous devez sélectionner ceci (ou quelque chose) comme réponse acceptée.
JediPotPie

4
Le seul écart requis ici par rapport à l'exemple TabWidget standard de Google est le réglage layout_weight=1sur FrameLayout. Cela permet au contrôle onglet de "réclamer" sa hauteur hors du LinearLayout en premier.
Nick Farina

19
Afin de se débarrasser du diviseur en bas du TabWidget, ajoutez simplement android:layout_marginBottom="-5px"au TabWidget. Cela déplacera le TabWidget du bas de l'écran de 5 pixels, juste assez pour que vous ne voyiez pas le séparateur. Le FrameLayout compensera en taille pour qu'il fonctionne parfaitement. Je ne sais pas si la taille du diviseur change sur les appareils plus grands ou non. Vous devrez peut-être utiliser à la dpplace de px.
Jake Wilson

1
J'ai incorporé le commentaire remove-divider dans la réponse.
Arne Evertsson

38

Essayez-le;) Il suffit de regarder le contenu du FrameLayout (@ id / tabcontent), car je ne sais pas comment il gérera en cas de défilement ... Dans mon cas, cela fonctionne car j'ai utilisé ListView comme contenu de mes onglets . :) J'espère que ça aide.

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">
        <FrameLayout android:id="@android:id/tabcontent"
             android:layout_width="fill_parent" 
             android:layout_height="fill_parent"
             android:layout_alignParentTop="true" 
             android:layout_above="@android:id/tabs" />
    <TabWidget android:id="@android:id/tabs"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content"
             android:layout_alignParentBottom="true" />
    </RelativeLayout>
</TabHost>

4
+1 Mais avez-vous remarqué la barre noire / grise en haut de l'écran? Comment l'avez-vous supprimé?
ahmet emrah

J'utilise ceci pour publier le widget onglet sur le côté gauche du formulaire.
mr.j05hua

12

Il existe un moyen de supprimer la ligne.

1) Suivez ce tutoriel: android-tabs-with-fragments

2) Ensuite, appliquez le changement RelativeLayout suggéré ci-dessus par Leaudro (appliquez les accessoires de mise en page à tous les FrameLayouts).

Vous pouvez également ajouter un ImageView au tab.xml dans l'élément n ° 1 et obtenir un look très iPhone aux onglets.

Voici une capture d'écran de ce sur quoi je travaille actuellement. J'ai encore du travail à faire, principalement faire un sélecteur pour les icônes et assurer une répartition horizontale égale, mais vous voyez l'idée. Dans mon cas, j'utilise des fragments, mais les mêmes principes devraient s'appliquer à un onglet standard.

entrez la description de l'image ici


Cela fait un moment que vous n'avez pas publié ceci, mais votre lien indique maintenant Bienvenue sur nginx! et rien d'autre n'est là sur la page.
DroidDev

1
Ce n'était pas mon site, mais je n'ai malheureusement pas de contrôle dessus. Après ce laps de temps cependant, les systèmes ont suffisamment changé pour que vous ne devriez probablement pas implémenter ce type d'interface pour vos utilisateurs Android, ils s'attendent à ce que les choses fonctionnent un peu différemment maintenant.
Brill Pappin le

3

Je ne sais pas si cela fonctionnera pour toutes les versions d'Android (en particulier celles avec des éléments d'interface utilisateur personnalisés), mais j'ai pu supprimer la barre grise en bas en ajoutant

 android:layout_marginBottom="-3dp"

au XML TabWidget ...


3

Pour tous ceux d'entre vous qui essaient de supprimer la ligne de séparation du tabWidget, voici un exemple de projet (et son tutoriel respectif), qui fonctionne très bien pour personnaliser les onglets et ainsi supprimer les problèmes lorsque les onglets sont en bas. Projet Eclipse: onglets personnalisés android ; Explication originale: blog ; J'espère que cela a aidé.


3

Il existe deux façons d'afficher les onglets au bas d'une activité d'onglet.

  1. Utilisation de la disposition relative
  2. Utilisation de l'attribut Layout_weight

Veuillez consulter le lien pour plus de détails .


3
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android: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" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:background="#252a31"
            android:tabStripEnabled="false" >
        </TabWidget>
    </LinearLayout>

</TabHost>

1

Ce n'est peut-être pas exactement ce que vous recherchez (ce n'est pas une solution "facile" d'envoyer vos onglets en bas de l'écran) mais c'est néanmoins une solution alternative intéressante que je voudrais vous signaler:

ScrollableTabHost est conçu pour se comporter comme TabHost, mais avec une vue de défilement supplémentaire pour s'adapter à plus d'éléments ...

peut-être qu'en creusant dans ce projet open source, vous trouverez une réponse à votre question. Si je vois quelque chose de plus facile, je reviendrai vers vous.


1

J'avais le même problème avec les onglets Android en essayant de les placer en bas de l'écran. Mon scénario était de ne pas utiliser de fichier de mise en page et de créer les onglets dans le code, je cherchais également à déclencher des activités de chaque onglet qui semblaient un peu trop complexes en utilisant d'autres approches, voici l'exemple de code pour surmonter le problème:

ajouter des onglets dans Android et les placer


1

Oui, voir: link , mais il a utilisé des mises en page xml, pas des activités pour créer un nouvel onglet, alors mettez son code xml (set paddingTop pour FrameLayout - 0px), puis écrivez le code:

public class SomeActivity extends ActivityGroup {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

    TabHost tab_host = (TabHost) findViewById(R.id.edit_item_tab_host); 

    tab_host.setup(this.getLocalActivityManager());

    TabSpec ts1 = tab_host.newTabSpec("TAB_DATE"); 
    ts1.setIndicator("tab1"); 
    ts1.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts1); 

    TabSpec ts2 = tab_host.newTabSpec("TAB_GEO"); 
    ts2.setIndicator("tab2"); 
    ts2.setContent(new Intent(this, Login.class)); 
    tab_host.addTab(ts2); 

    TabSpec ts3 = tab_host.newTabSpec("TAB_TEXT"); 
    ts3.setIndicator("tab3"); 
    ts3.setContent(new Intent(this, Registration.class)); 
    tab_host.addTab(ts3); 

    tab_host.setCurrentTab(0);      


}

}


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.