Android: karty na dole

148

Widziałem trochę gadaniny o tym, ale nic konkretnego. Czy istnieje sposób, aby umieścić karty w TabWidget u dołu ekranu? Jeśli tak to jak?

Próbowałem następujących rzeczy, ale nie zadziałało:

a) ustawienie tabwidget poniżej framelayout
b) ustawienie grawitacji tabwidget na „bottom”

Dzięki! llappall

llappall
źródło
10
Określ „nie działa”.
CommonsWare,
Używam jednego z poniższej witryny. to działa http://kpbird.blogspot.com/2011/05/androidbottom-tabbar-control.html
Juliousraj
3
Zajrzyj tutaj, jeśli chcesz, aby hosty kart przypominały iPhone'a.
Adil Soomro,

Odpowiedzi:

272

Oto najprostsze, najbardziej niezawodne i skalowalne rozwiązanie umożliwiające wyświetlanie zakładek u dołu ekranu.

  1. W swoim pionowym LinearLayout umieść FrameLayout powyżej TabWidget
  2. Ustaw layout_heightsię wrap_contentzarówno FrameLayout i TabWidget
  3. Ustaw FrameLayout android:layout_weight="1"
  4. Ustaw TabWidget's android:layout_weight="0"(0 jest domyślne, ale dla podkreślenia, czytelności itp.)
  5. Ustaw TabWidget's android:layout_marginBottom="-4dp"(aby usunąć dolną przegrodę)

Pełny kod:

<?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>
burza 986
źródło
3
Przegroda jest w rzeczywistości zakodowana na stałe. Próbowałem zmienić elementy rysunkowe używane w kartach i znalazłem to. Całkowity bummer.
Jeremy Logan
6
Powinieneś wybrać to (lub coś) jako zaakceptowaną odpowiedź.
JediPotPie
4
Jedynym wymaganym odstępstwem od standardowego przykładu Google TabWidget jest ustawienie layout_weight=1w FrameLayout. Dzięki temu formant karty może najpierw „odebrać” swoją wysokość poza LinearLayout.
Nick Farina
19
Aby pozbyć się separatora na dole TabWidget, po prostu dodaj android:layout_marginBottom="-5px"do TabWidget. Spowoduje to przeniesienie TabWidget z dołu ekranu o 5 pikseli, na tyle, aby nie było widać podziału. FrameLayout zrekompensuje rozmiar, więc działa idealnie. Nie jestem pewien, czy rozmiar separatora zmienia się na większych urządzeniach, czy nie. Być może będziesz musiał użyć dpzamiast px.
Jake Wilson
1
Uwzględniłem komentarz usuń-separator do odpowiedzi.
Arne Evertsson
38

Wypróbuj;) Po prostu obserwuj zawartość FrameLayout (@ id / tabcontent), bo nie wiem, jak sobie poradzi w przypadku przewijania ... W moim przypadku działa, ponieważ jako zawartość moich zakładek użyłem ListView . :) Mam nadzieję, że to pomoże.

<?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>
Leaudro
źródło
4
+1 Ale czy zauważyłeś czarny / szary pasek u góry ekranu? Jak to usunąłeś?
ahmet emrah
Używam tego do umieszczenia widżetu karty po lewej stronie formularza.
mr.j05hua
12

Jest sposób na usunięcie tej linii.

1) Postępuj zgodnie z tym samouczkiem: android-tabs-with-fragments

2) Następnie zastosuj zmianę RelativeLayout, którą Leaudro zasugerował powyżej (zastosuj rekwizyty układu do wszystkich FrameLayoutów).

Możesz także dodać ImageView do tab.xml w elemencie nr 1 i uzyskać wygląd bardzo podobny do iPhone'a dla zakładek.

Oto zrzut ekranu tego, nad czym teraz pracuję. Nadal mam trochę do zrobienia, głównie wybranie selektora ikon i zapewnienie równego rozmieszczenia w poziomie, ale masz pomysł. W moim przypadku używam fragmentów, ale te same zasady powinny mieć zastosowanie do standardowego widoku karty.

wprowadź opis obrazu tutaj

Brill Pappin
źródło
Minęło trochę czasu, odkąd to opublikowałeś, ale twój link mówi teraz Witamy w nginx! i nic więcej nie ma na stronie.
DroidDev
1
To nie była moja witryna, więc niestety nie mam nad nią kontroli. Jednak po tym czasie systemy zmieniły się na tyle, że prawdopodobnie nie powinieneś wdrażać tego rodzaju interfejsu dla użytkowników Androida, spodziewaliby się, że teraz będzie działać trochę inaczej.
Brill Pappin
3

Nie jestem pewien, czy będzie działać dla wszystkich wersji Androida (szczególnie tych z niestandardowymi elementami interfejsu użytkownika), ale udało mi się usunąć szary pasek na dole, dodając

 android:layout_marginBottom="-3dp"

do pliku XML TabWidget ...

Justin
źródło
3

Dla wszystkich z was, którzy próbują usunąć linię oddzielającą tabWidget, oto przykładowy projekt (i odpowiedni samouczek), który świetnie sprawdza się przy dostosowywaniu kart, a tym samym usuwaniu problemów, gdy karty są na dole. Projekt Eclipse: android-custom-tabs ; Oryginalne wyjaśnienie: blog ; Mam nadzieję, że to pomogło.

Djumaka
źródło
3

Istnieją dwa sposoby wyświetlania kart u dołu działania karty.

  1. Korzystanie z układu względnego
  2. Korzystanie z atrybutu Layout_weight

Sprawdź łącze, aby uzyskać więcej informacji .

MduSenthil
źródło
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>
Sanjay Mangaroliya
źródło
1

To może nie być dokładnie to, czego szukasz (nie jest to „łatwe” rozwiązanie, aby wysłać swoje karty na dół ekranu), ale mimo to jest to interesujące alternatywne rozwiązanie, które chciałbym Ci oznaczyć:

ScrollableTabHost został zaprojektowany tak, aby zachowywał się jak TabHost, ale z dodatkowym widokiem przewijania, aby zmieścić więcej elementów ...

może zagłębiając się w ten projekt open source, znajdziesz odpowiedź na swoje pytanie. Jeśli zobaczę coś łatwiejszego, wrócę do Ciebie.

Hubert
źródło
1

Miałem ten sam problem z kartami Androida, gdy próbowałem umieścić je na dole ekranu. Mój scenariusz polegał na tym, aby nie używać pliku układu i tworzyć zakładki w kodzie, chciałem również uruchomić działania z każdej karty, które wydawały się nieco zbyt złożone przy użyciu innych podejść, więc oto przykładowy kod, aby rozwiązać problem:

dodawanie-zakładek-w-android-i-umieszczanie-ich

Zeeshan
źródło
1

Tak, zobacz: link , ale użył układów xml, a nie działań, aby utworzyć nową kartę, więc umieść jego kod xml (ustaw paddingTop dla FrameLayout - 0px), a następnie napisz kod:

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


}

}

Pavel
źródło
0

Polecam używać tego kodu do stabilnej pracy, został zoptymalizowany pod kątem zagnieżdżonych fragmentów w zakładce (na przykład zagnieżdżony MapFragment) i przetestowany na "nie zachowuj działań": https://stackoverflow.com/a/23150258/2765497

Flinbor
źródło