Android: Tabs unten


148

Ich habe ein Geschwätz darüber gesehen, aber nichts Bestimmtes. Gibt es eine Möglichkeit, die Registerkarten in einem TabWidget am unteren Bildschirmrand zu platzieren? Wenn das so ist, wie?

Ich habe Folgendes versucht, aber nicht funktioniert:

a) Setzen des Tabwidgets unterhalb des Framelayouts
b) Setzen der Schwerkraft des Tabwidgets auf "unten"

Vielen Dank! llappall


10
Bitte definieren Sie "hat nicht funktioniert".
CommonsWare

Ich benutze eine von der unten stehenden Seite. es funktioniert http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html
Juliousraj

3
Schauen Sie hier, wenn Sie iPhone-ähnliche Tab-Hosts möchten.
Adil Soomro

Antworten:


272

Hier ist die einfachste, robusteste und skalierbarste Lösung, um Registerkarten am unteren Bildschirmrand anzuzeigen.

  1. Platzieren Sie in Ihrem vertikalen LinearLayout das FrameLayout über dem TabWidget
  2. Set layout_heightzu wrap_contentsowohl FrameLayout und TabWidget
  3. Stellen Sie FrameLayouts ein android:layout_weight="1"
  4. Legen Sie die TabWidget-Werte fest android:layout_weight="0"(0 ist die Standardeinstellung, jedoch zur Hervorhebung, Lesbarkeit usw.).
  5. Stellen Sie TabWidgets ein android:layout_marginBottom="-4dp"(um den unteren Teiler zu entfernen)

Vollständiger Code:

<?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
Der Teiler ist tatsächlich fest codiert. Ich habe versucht, die für die Registerkarten verwendeten Zeichen zu ändern, und habe sie gefunden. Total Mist.
Jeremy Logan

6
Sie sollten dies (oder etwas) als akzeptierte Antwort auswählen.
JediPotPie

4
Die einzige erforderliche Abweichung vom Standard-TabWidget-Beispiel von Google ist die Einstellung layout_weight=1im FrameLayout. Auf diese Weise kann das Registerkartensteuerelement zuerst seine Höhe aus dem LinearLayout "beanspruchen".
Nick Farina

19
Um den Teiler am unteren Rand des TabWidget zu entfernen, fügen Sie ihn einfach android:layout_marginBottom="-5px"dem TabWidget hinzu. Dadurch wird das TabWidget 5 Pixel vom unteren Bildschirmrand entfernt, gerade genug, damit Sie den Teiler nicht sehen. Das FrameLayout gleicht die Größe aus, sodass es perfekt funktioniert. Ich bin mir nicht sicher, ob sich die Größe des Teilers bei größeren Geräten ändert oder nicht. Möglicherweise müssen Sie dpanstelle von verwenden px.
Jake Wilson

1
Ich habe den Kommentar zum Entfernen des Teilers in die Antwort aufgenommen.
Arne Evertsson

38

Probieren Sie es aus;) Sehen Sie sich einfach den Inhalt des FrameLayout (@ id / tabcontent) an, da ich nicht weiß, wie es beim Scrollen funktioniert ... In meinem Fall funktioniert es, weil ich ListView als Inhalt meiner Registerkarten verwendet habe . :) Ich hoffe es hilft.

<?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 Aber haben Sie den schwarz / grauen Balken oben auf dem Bildschirm bemerkt? Wie haben Sie es entfernt?
ahmet emrah

Ich verwende dies, um das Tab-Widget auf der linken Seite des Formulars zu veröffentlichen.
mr.j05hua

12

Es gibt eine Möglichkeit, die Linie zu entfernen.

1) Folgen Sie diesem Tutorial: Android-Tabs-mit-Fragmenten

2) Wenden Sie dann die oben von Leaudro vorgeschlagene RelativeLayout-Änderung an (wenden Sie die Layout-Requisiten auf alle FrameLayouts an).

Sie können der tab.xml in Element 1 auch eine ImageView hinzufügen und den Registerkarten ein iPhone-ähnliches Aussehen verleihen.

Hier ist ein Screenshot von dem, woran ich gerade arbeite. Ich habe noch einige Arbeiten zu erledigen, hauptsächlich eine Auswahl für die Symbole zu treffen und eine gleichmäßige horizontale Verteilung sicherzustellen, aber Sie haben die Idee. In meinem Fall verwende ich Fragmente, aber für eine Standard-Registerkartenansicht sollten dieselben Prinzipien gelten.

Geben Sie hier die Bildbeschreibung ein


Es ist schon eine Weile her, seit du dies gepostet hast, aber dein Link sagt jetzt Willkommen bei nginx! und nichts anderes ist dort auf Seite.
DroidDev

1
Es war nicht meine Seite, sop ich habe leider keine Kontrolle darüber. Nach dieser Zeit haben sich die Systeme jedoch so weit verändert, dass Sie diese Art von Benutzeroberfläche für Ihre Android-Benutzer wahrscheinlich nicht implementieren sollten. Sie würden erwarten, dass die Dinge jetzt etwas anders funktionieren.
Brill Pappin

3

Ich bin mir nicht sicher, ob es für alle Android-Versionen funktioniert (insbesondere für Versionen mit benutzerdefinierten Benutzeroberflächen), aber ich konnte den grauen Balken unten durch Hinzufügen entfernen

 android:layout_marginBottom="-3dp"

zum TabWidget XML ...


3

Für alle unter Ihnen, die versuchen, die Trennlinie des tabWidget zu entfernen, ist hier ein Beispielprojekt (und das entsprechende Tutorial), das sich hervorragend zum Anpassen der Registerkarten und damit zum Entfernen von Problemen eignet, wenn sich die Registerkarten unten befinden. Eclipse-Projekt: Android-Custom-Tabs ; Ursprüngliche Erklärung: Blog ; Hoffe das hat geholfen.


3

Es gibt zwei Möglichkeiten, Registerkarten am unteren Rand einer Registerkartenaktivität anzuzeigen.

  1. Relatives Layout verwenden
  2. Verwenden des Attributs Layout_weight

Bitte überprüfen Sie den Link für weitere Details .


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

Dies ist möglicherweise nicht genau das, wonach Sie suchen (es ist keine "einfache" Lösung, Ihre Tabs an den unteren Bildschirmrand zu senden), aber dennoch eine interessante alternative Lösung, die ich Ihnen mitteilen möchte:

ScrollableTabHost verhält sich wie TabHost, verfügt jedoch über eine zusätzliche Bildlaufansicht, um mehr Elemente aufzunehmen ...

Vielleicht finden Sie in diesem Open-Source-Projekt eine Antwort auf Ihre Frage. Wenn ich etwas leichter sehe, komme ich zu Ihnen zurück.


1

Ich hatte das gleiche Problem mit Android-Registerkarten, als ich versuchte, sie am unteren Bildschirmrand zu platzieren. Mein Szenario bestand darin, keine Layoutdatei zu verwenden und die Registerkarten im Code zu erstellen. Ich wollte auch Aktivitäten von jeder Registerkarte auslösen, die mit anderen Ansätzen etwas zu komplex erschienen. Hier ist der Beispielcode, um das Problem zu lösen:

Hinzufügen von Tabs in Android und Platzieren


1

Ja, siehe: Link , aber er hat XML-Layouts verwendet, keine Aktivitäten, um eine neue Registerkarte zu erstellen. Geben Sie also seinen XML-Code ein (setzen Sie paddingTop für FrameLayout - 0px) und schreiben Sie den 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);      


}

}}


Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.