Android: guias na parte inferior


148

Eu já vi algumas conversas sobre isso, mas nada definitivo. Existe uma maneira de colocar as guias em um TabWidget na parte inferior da tela? Se sim, como?

Eu tentei o seguinte, mas não funcionou:

a) definindo a guia da guia abaixo do layout da moldura
b) definindo a gravidade da guia da guia como "inferior"

Obrigado! llappall


10
Por favor, defina "não funcionou".
CommonsWare


3
Veja aqui se você quer um iPhone como hosts de guias.
Adil Soomro 21/03

Respostas:


272

Aqui está a solução mais simples, robusta e escalável para obter guias na parte inferior da tela.

  1. No seu LinearLayout vertical, coloque o FrameLayout acima do TabWidget
  2. Defina layout_heightcomo wrap_contentem FrameLayout e TabWidget
  3. Definir o FrameLayout's android:layout_weight="1"
  4. Definir TabWidget android:layout_weight="0"(0 é o padrão, mas para ênfase, legibilidade, etc.)
  5. Defina TabWidget android:layout_marginBottom="-4dp"(para remover o divisor inferior)

Código completo:

<?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
O divisor é realmente codificado. Eu estava tentando alterar os drawables usados ​​para as guias e o encontrei. Que chatice total.
logan.

6
Você deve selecionar isso (ou algo assim) como a resposta aceita.
JediPotPie

4
O único desvio necessário aqui do exemplo padrão do TabWidget do Google é a configuração layout_weight=1no FrameLayout. Isso permite que o controle da guia "reivindique" sua altura do LinearLayout primeiro.
Nick Farina

19
Para se livrar do divisor na parte inferior do TabWidget, basta adicionar android:layout_marginBottom="-5px"ao TabWidget. Isso moverá o TabWidget da parte inferior da tela 5 pixels, apenas o suficiente para que você não veja o divisor. O FrameLayout compensará o tamanho para que funcione perfeitamente. Não tenho certeza se o tamanho do divisor muda em dispositivos maiores ou não. Você pode ter que usar em dpvez de px.
Jake Wilson

1
Incorporei o comentário remover-divisor na resposta.
Arne Evertsson

38

Experimente;) Assista ao conteúdo do FrameLayout (@ id / tabcontent), porque não sei como ele irá lidar em caso de rolagem ... No meu caso, funciona porque usei o ListView como o conteúdo das minhas guias . :) Espero que ajude.

<?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 Mas você notou a barra preta / cinza na parte superior da tela? Como você o removeu?
ahmet emrah

Estou usando isso para postar o widget da guia no lado esquerdo do formulário.
mr.j05hua

12

Existe uma maneira de remover a linha.

1) Siga este tutorial: abas-android-com-fragmentos

2) Aplique a alteração RelativeLayout sugerida por Leaudro acima (aplique os adereços de layout a todos os FrameLayouts).

Você também pode adicionar um ImageView ao tab.xml no item 1 e obter uma aparência muito parecida com o iPhone nas guias.

Aqui está uma captura de tela do que estou trabalhando no momento. Ainda tenho trabalho a fazer, principalmente fazer um seletor para os ícones e garantir uma distribuição horizontal igual, mas você entendeu. No meu caso, estou usando fragmentos, mas os mesmos princípios devem ser aplicados a uma visualização de guia padrão.

insira a descrição da imagem aqui


Já faz um tempo desde que você postou isso, mas seu link agora diz Bem-vindo ao nginx! e nada mais existe na página.
DroidDev 9/09/14

1
Não era o meu site, infelizmente não tenho controle sobre ele. Após esse período de tempo, os sistemas mudaram o suficiente para que você provavelmente não devesse implementar esse tipo de interface para seus usuários do Android; eles esperariam que as coisas funcionassem um pouco diferente agora.
Brill Pappin

3

Não tenho certeza se ele funcionará para todas as versões do Android (especialmente aquelas com itens de interface do usuário personalizados), mas consegui remover a barra cinza na parte inferior adicionando

 android:layout_marginBottom="-3dp"

para o XML do TabWidget ...


3

Para todos aqueles que tentam remover a linha de separação do tabWidget, aqui está um projeto de exemplo (e seu respectivo tutorial), que funciona muito bem para personalizar as guias e, assim, remover problemas quando as guias estão na parte inferior. Projeto Eclipse: android-custom-tabs ; Explicação original: blog ; Espero que isso tenha ajudado.


3

Existem duas maneiras de exibir guias na parte inferior de uma atividade da guia.

  1. Usando layout relativo
  2. Usando o atributo Layout_weight

Por favor, verifique o link para mais detalhes .


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

Isso pode não ser exatamente o que você está procurando (não é uma solução "fácil" enviar suas guias para a parte inferior da tela), mas é uma solução alternativa interessante que eu gostaria de sinalizar para você:

O ScrollableTabHost foi projetado para se comportar como o TabHost, mas com uma visualização de rolagem adicional para acomodar mais itens ...

talvez, se você se aprofundar neste projeto de código aberto, encontrará uma resposta para sua pergunta. Se eu vir algo mais fácil, voltarei para você.


1

Eu estava tendo o mesmo problema com as guias do Android ao tentar colocá-las na parte inferior da tela. Meu cenário era não usar um arquivo de layout e criar as guias no código, eu também estava procurando disparar atividades de cada guia que pareciam um pouco complexas usando outras abordagens, então, aqui está o código de exemplo para solucionar o problema:

adicionando-guias-no-android-e-colocando-os


1

Sim, veja: link , mas ele usou layouts xml, não atividades para criar uma nova guia, então coloque seu código xml (defina paddingTop para FrameLayout - 0px) e escreva o código:

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


}

}


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.