Página Inicial>Relacionado com a programação>Código fonte JAVA
Baixar

BottomBar (obsoleto)

Não tenho mais tempo para manter isso. Basicamente, escrevi toda a biblioteca às pressas, sem testes, embora fosse um iniciante especialista sério na época. Como resultado, há muitas peças móveis imprevisíveis e os testes provavelmente também não são tão bons. Realmente não sei, já que não toco nisso há anos.

Eu recomendo que você use o BottomNavigationView oficial do Google e incentive-os a implementar os recursos necessários. Ou use outra biblioteca de terceiros.

Versão 2.0 lançada!

A versão mais recente anterior pode ser encontrada na ramificação v1

  • Código mais limpo e APIs melhores
  • Chega de coisas desnecessárias ou bagunça de espaguete
  • Agora a aparência, a sensação e o comportamento são definidos em XML, como deveria ser
  • Chega de regressões desagradáveis, graças aos testes automatizados
  • Tudo está um pouco diferente em relação a antes, mas é para um bem maior!

Como contribuir

Registro de alterações

O que?

Um componente de visualização personalizado que imita o novo padrão de navegação inferior do Material Design.

Funciona no HTC Dream do meu avô Gary?

Não. A versão do minSDK é API de nível 11 (Honeycomb).

Me dê aquela doçura Gradle, por favor? 

compile ' com.roughike:bottom-bar:2.3.1 '

Maven: 

< dependency >
  < groupId >com.roughike</ groupId >
  < artifactId >bottom-bar</ artifactId >
  < version >2.3.1</ version >
  < type >pom</ type >
</ dependency >

Como?

Você pode adicionar itens escrevendo um arquivo de recursos XML .

Criando os ícones

Os ícones devem ser totalmente opacos, de cor preta sólida, 24 dp e sem preenchimento . Por exemplo, com o gerador de ícones genéricos do Android Asset Studio, selecione "TRIM" e certifique-se de que o preenchimento seja 0dp. Esta é a aparência dos seus ícones:

Adicionando itens do recurso XML

Defina suas guias em um arquivo de recursos XML.

res/xml/bottombar_tabs.xml: 

< tabs >
    < tab
        id = " @+id/tab_favorites "
        icon = " @drawable/ic_favorites "
        title = " Favorites " />
    < tab
        id = " @+id/tab_nearby "
        icon = " @drawable/ic_nearby "
        title = " Nearby " />
    < tab
        id = " @+id/tab_friends "
        icon = " @drawable/ic_friends "
        title = " Friends " />
</ tabs >

Em seguida, adicione o BottomBar ao seu layout e forneça a ele um ID de recurso para o arquivo xml das guias.

layout/atividade_main.xml 

< RelativeLayout xmlns : android = " http://schemas.android.com/apk/res/android "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent "
    xmlns : app = " http://schemas.android.com/apk/res-auto " >

    <!-- This could be your fragment container, or something -->
    < FrameLayout
        android : id = " @+id/contentContainer "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent "
        android : layout_above = " @+id/bottomBar " />

    < com .roughike.bottombar.BottomBar
        android : id = " @+id/bottomBar "
        android : layout_width = " match_parent "
        android : layout_height = " 60dp "
        android : layout_alignParentBottom = " true "
        app : bb_tabXmlResource = " @xml/bottombar_tabs " />

</ RelativeLayout >

Configurando ouvintes

Por padrão, as guias não fazem nada, a menos que você ouça os eventos de seleção e faça algo quando as guias são selecionadas.

MainActivity.java: 

 public class MainActivity extends Activity {
    @ Override
    protected void onCreate ( @ Nullable Bundle savedInstanceState ) {
        super . onCreate ( savedInstanceState );
        setContentView ( R . layout . activity_main );

        BottomBar bottomBar = ( BottomBar ) findViewById ( R . id . bottomBar );
        bottomBar . setOnTabSelectListener ( new OnTabSelectListener () {
            @ Override
            public void onTabSelected ( @ IdRes int tabId ) {
                if ( tabId == R . id . tab_favorites ) {
                    // The tab with id R.id.tab_favorites was selected,
                    // change your content accordingly.
                }
            }
        });
    }
}

Se você quiser ouvir eventos de reseleção, veja como fazer isso: 

 bottomBar . setOnTabReselectListener ( new OnTabReselectListener () {
    @ Override
    public void onTabReSelected ( @ IdRes int tabId ) {
        if ( tabId == R . id . tab_favorites ) {
            // The tab with id R.id.tab_favorites was reselected,
            // change your content accordingly.
        }
    }
});

Interceptando seleções de guias

Se quiser cancelar condicionalmente a seleção de qualquer guia, você pode. Basta atribuir um TabSelectionInterceptor ao BottomBar e retornar true do método shouldInterceptTabSelection() . 

 bottomBar . setTabSelectionInterceptor ( new TabSelectionInterceptor () {
    @ Override
    public boolean shouldInterceptTabSelection ( @ IdRes int oldTabId , @ IdRes int newTabId ) {
        if ( newTabId == R . id . tab_pro_feature && ! userHasProVersion ()) {
          startProVersionPurchaseFlow ();
          return true ;
        }
        
        return false ;
    }
});

Alterando ícones com base no estado da seleção

Se você quiser ter um ícone diferente quando uma guia específica for selecionada, basta usar drawables de lista de estados.

res/drawable/my_tab_icon.xml 

< selector xmlns : android = " http://schemas.android.com/apk/res/android " >
    < item android : drawable = " @drawable/ic_myicon_selected " android : state_selected = " true " />
    < item android : drawable = " @drawable/ic_myicon_default " android : state_selected = " false " />
</ selector >

res/xml/bottombar_tabs.xml 

...
< tab
    id = " @+id/tab_favorites "
    icon = " @drawable/my_tab_icon "
    title = " Favorites " />
<!-- You can use @color resources too! -->
...

Essas abas que mudam de cor parecem incríveis. Como fazer isso?

Basta adicionar barColorWhenSelected a cada guia. Quando essa guia é selecionada, toda a cor de fundo do BottomBar é alterada com uma bela animação.

res/xml/bottombar_tabs.xml 

< tabs >
    < tab
        id = " @+id/tab_favorites "
        icon = " @drawable/ic_favorites "
        title = " Favorites "
        barColorWhenSelected = " #5D4037 " />
    <!-- You can use @color resources too! -->
</ tabs >

Como faço para desenhar sob a barra de navegação?

Primeiro, defina um estilo que seja filho do tema principal do seu aplicativo:

res/values-v21/styles.xml 

< style name = " AppTheme.TransNav " parent = " AppTheme " >
    < item name = " android:navigationBarColor " >@android:color/transparent</ item >
    < item name = " android:windowTranslucentNavigation " >true</ item >
    < item name = " android:windowDrawsSystemBarBackgrounds " >true</ item >
</ style >

Você também terá que criar uma versão stub do mesmo tema para evitar travamentos em níveis de API anteriores ao Lollipop:

res/valores/estilos.xml 

< style name = " AppTheme.TransNav " parent = " AppTheme " />

Inclua também o mesmo stub em seu values-land-v21.xml para evitar barra de navegação transparente e comportamento estranho na paisagem.

res/valores-land-v21.xml: 

< style name = " AppTheme.TransNav " parent = " AppTheme " />

Aplique o tema em AndroidManifest.xml para sua atividade.

AndroidManifest.xml: 

< activity android : name = " .MyAwesomeActivity " android : theme = " @style/AppTheme.TransNav " />

Finalmente, defina bb_behavior para incluir o sinalizador underNavbar e pronto!

atividade_my_awesome.xml: 

< com .roughike.bottombar.BottomBar
    android : id = " @+id/bottomBar "
    android : layout_width = " match_parent "
    android : layout_height = " 56dp "
    android : layout_alignParentBottom = " true "
    app : bb_tabXmlResource = " @xml/my_awesome_bottombar_tabs "
    app : bb_behavior = " underNavbar " />

E os comprimidos?

Especifique um layout diferente para sua atividade na pasta res/layout-sw600dp e defina bb_tabletMode como true.

res/layout-sw600dp/activity_main.xml: 

< RelativeLayout
    xmlns : android = " http://schemas.android.com/apk/res/android "
    xmlns : app = " http://schemas.android.com/apk/res-auto "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent " >

    < com .roughike.bottombar.BottomBar
        android : id = " @+id/bottomBar "
        android : layout_width = " wrap_content "
        android : layout_height = " match_parent "
        android : layout_alignParentLeft = " true "
        app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
        app : bb_tabletMode = " true " />

    <!-- This could be your fragment container, or something -->
    < FrameLayout
        android : id = " @+id/contentContainer "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent "
        android : layout_toRightOf = " @+id/bottomBar " />

</ RelativeLayout >

Como faço para ocultá-lo automaticamente na rolagem?

Fácil!

atividade_main.xml: 

< android .support.design.widget.CoordinatorLayout xmlns : android = " http://schemas.android.com/apk/res/android "
    xmlns : app = " http://schemas.android.com/apk/res-auto "
    android : layout_width = " match_parent "
    android : layout_height = " match_parent " >

    < android .support.v4.widget.NestedScrollView
        android : id = " @+id/myScrollingContent "
        android : layout_width = " match_parent "
        android : layout_height = " match_parent " >

        <!-- Your loooooong scrolling content here. -->

    </ android .support.v4.widget.NestedScrollView>

    < com .roughike.bottombar.BottomBar
        android : id = " @+id/bottomBar "
        android : layout_width = " match_parent "
        android : layout_height = " 60dp "
        android : layout_gravity = " bottom "
        app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
        app : bb_behavior = " shy " />

</ android .support.design.widget.CoordinatorLayout>

Emblemas

Você pode facilmente adicionar emblemas para mostrar uma contagem de mensagens não lidas ou novos itens/o que quiser. 

 BottomBarTab nearby = bottomBar . getTabWithId ( R . id . tab_nearby );
nearby . setBadgeCount ( 5 );

// Remove the badge when you're done with it.
nearby . removeBadge /();

Todas as opções de personalização

Para a barra inferior 

< com .roughike.bottombar.BottomBar
    android : id = " @+id/bottomBar "
    android : layout_width = " match_parent "
    android : layout_height = " 60dp "
    android : layout_alignParentBottom = " true "
    app : bb_tabXmlResource = " @xml/bottombar_tabs_three "
    app : bb_tabletMode = " true "
    app : bb_behavior = " shifting|shy|underNavbar "
    app : bb_inActiveTabAlpha = " 0.6 "
    app : bb_activeTabAlpha = " 1 "
    app : bb_inActiveTabColor = " #222222 "
    app : bb_activeTabColor = " @color/colorPrimary "
    app : bb_badgesHideWhenActive = " true "
    app : bb_titleTextAppearance = " @style/MyTextAppearance "
    app : bb_titleTypeFace = " fonts/MySuperDuperFont.ttf "
    app : bb_showShadow = " true " />
bb_tabXmlResource
o ID do recurso XML para suas guias, que reside em values/xml/
bb_tabletMode
se você deseja que o BottomBar se comporte de maneira diferente para tablets. Há um exemplo disso no projeto de amostra!
bb_comportamento
shifting : a guia selecionada é mais larga que as demais. shy : coloque o BottomBar dentro de um CoordinatorLayout e ele será ocultado automaticamente na rolagem! underNavbar : desenhe o BottomBar sob o navBar!
bb_inActiveTabAlpha
o valor alfa para guias inativas, usado nos ícones e títulos das guias.
bb_activeTabAlpha
o valor alfa para guias ativas, usado nos ícones e títulos das guias.
bb_inActiveTabColor
a cor das guias inativas, usada nos ícones e títulos das guias.
bb_activeTabColor
a cor das guias ativas, usada nos ícones e títulos das guias.
bb_badgeBackgroundColor
a cor de fundo de qualquer emblema neste BottomBar.
bb_badgesHideWhenActive
se os emblemas devem ser ocultados para guias ativas, o padrão é verdadeiro.
bb_titleTextAppearance
textAppearance personalizado para os títulos
bb_titleTypeFace
caminho para seu arquivo de fonte personalizado, como fonts/MySuperDuperFont.ttf . Nesse caso, o caminho da fonte seria semelhante a src/main/assets/fonts/MySuperDuperFont.ttf , mas você só precisa fornecer fonts/MySuperDuperFont.ttf , pois a pasta de ativos será preenchida automaticamente para você.
bb_showShadow
controla se a sombra é mostrada ou oculta, o padrão é verdadeiro.

Para as guias 

< tab
    id = " @+id/tab_recents "
    title = " Recents "
    icon = " @drawable/empty_icon "
    inActiveColor = " #00FF00 "
    activeColor = " #FF0000 "
    barColorWhenSelected = " #FF0000 "
    badgeBackgroundColor = " #FF0000 "
    badgeHidesWhenActive = " true " />
inActiveColor
a cor das guias inativas, usada nos ícones e títulos das guias.
cor ativa
a cor das guias ativas, usada nos ícones e títulos das guias.
barColorWhenSelected
a cor que todo o BottomBar deve ter quando selecionada nesta guia.
cracháBackgroundColor
a cor de fundo de qualquer emblema nesta guia.
emblemaHidesWhenActive
se o emblema deve ou não ser ocultado quando esta guia é selecionada, o padrão é verdadeiro.

Aplicativos usando BottomBar

  • Perto: um aplicativo de rede social baseado em localização com mais de 5 milhões de usuários.
  • FragNav: uma biblioteca Android para gerenciar várias pilhas de fragmentos. BottomBar é usado no aplicativo de exemplo.
  • BottomNavigationBar: BottomBar portado para C# para desenvolvedores Xamarin
  • KyudoScoreBookTeam: BottomBar é usado no aplicativo KyudoScoreBookTeam.
  • memeham: BottomBar é usado no aplicativo memeham.
  • NewsCatchr: um aplicativo leitor de notícias que usa esta biblioteca BottomBar.
  • GitSkarios: um aplicativo Github para Android, para visitar seus repositórios, essências e muito mais!
    • Código

Envie-me uma solicitação pull com README.md modificado para receber uma mensagem!

Contribuições

Sinta-se à vontade para criar problemas e receber solicitações.

Ao criar solicitações pull, mais é mais: eu gostaria de ver dez pequenas solicitações pull separadas por recurso, em vez de todas elas combinadas em uma enorme.

Licença 

 BottomBar library for Android
Copyright (c) 2016 Iiro Krankka (http://github.com/roughike).

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos