BottomBar
v2.3.1
Ya no tengo tiempo para mantener esto. Básicamente, escribí toda la biblioteca rápidamente, sin pruebas, siendo un principiante experto en ese momento. Como resultado, hay muchas partes móviles impredecibles y las pruebas probablemente tampoco sean tan buenas. Realmente no lo sé, ya que no he tocado esto en mucho tiempo.
Le recomiendo que utilice el BottomNavigationView oficial de Google y les insto a implementar las funciones que necesita. O utilice otra biblioteca de terceros.
La última versión anterior se puede encontrar en la rama v1.
Como contribuir
Registro de cambios
Un componente de vista personalizado que imita el nuevo patrón de navegación inferior de Material Design.
No. La versión minSDK es API nivel 11 (Honeycomb).
compile ' com.roughike:bottom-bar:2.3.1 'experto:
< dependency >
< groupId >com.roughike</ groupId >
< artifactId >bottom-bar</ artifactId >
< version >2.3.1</ version >
< type >pom</ type >
</ dependency >Puede agregar elementos escribiendo un archivo de recursos XML .
Los íconos deben ser completamente opacos, de color negro sólido, 24 dp y sin relleno . Por ejemplo, con el generador de iconos genéricos de Android Asset Studio, seleccione "RECORTAR" y asegúrese de que el relleno sea 0dp. Así es como deberían verse tus íconos:
Defina sus pestañas en un archivo 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 >Luego, agregue BottomBar a su diseño y asígnele una identificación de recurso para su archivo xml de pestañas.
diseño/actividad_principal.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 >De forma predeterminada, las pestañas no hacen nada a menos que escuche los eventos de selección y haga algo cuando se seleccionan las pestañas.
Actividad principal.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.
}
}
});
}
}Si desea escuchar los eventos de reselección, así es como lo hace:
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.
}
}
}); Si desea cancelar condicionalmente la selección de cualquier pestaña, absolutamente puede hacerlo. Simplemente asigne un TabSelectionInterceptor a BottomBar y devuelva verdadero desde el 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 ;
}
});Si desea tener un ícono diferente cuando se selecciona una pestaña específica, simplemente use los elementos de diseño de la 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! -->
... Simplemente agregue barColorWhenSelected a cada pestaña. Cuando se selecciona esa pestaña, todo el color de fondo de la barra inferior cambia con una bonita animación.
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 >Primero, defina un estilo que sea hijo del tema principal de su aplicación:
res/valores-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 >También tendrás que crear una versión stub del mismo tema para evitar fallas en niveles de API anteriores a Lollipop:
res/valores/estilos.xml
< style name = " AppTheme.TransNav " parent = " AppTheme " /> También incluya el mismo código auxiliar en su values-land-v21.xml para evitar una barra de navegación transparente y un comportamiento extraño en el paisaje.
res/valores-tierra-v21.xml:
< style name = " AppTheme.TransNav " parent = " AppTheme " /> Aplique el tema en AndroidManifest.xml para su actividad.
AndroidManifest.xml:
< activity android : name = " .MyAwesomeActivity " android : theme = " @style/AppTheme.TransNav " /> Finalmente, configura bb_behavior para incluir el indicador underNavbar y ¡listo!
actividad_mi_increíble.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 " /> Especifique un diseño diferente para su actividad en la carpeta res/layout-sw600dp y establezca bb_tabletMode en verdadero.
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 >¡Fácil!
actividad_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>Puede agregar fácilmente insignias para mostrar un recuento de mensajes no leídos o elementos nuevos/lo que quiera.
BottomBarTab nearby = bottomBar . getTabWithId ( R . id . tab_nearby );
nearby . setBadgeCount ( 5 );
// Remove the badge when you're done with it.
nearby . removeBadge /();< 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 " />values/xml/shifting : la pestaña seleccionada es más ancha que el resto. shy : coloque la barra inferior dentro de CoordinatorLayout y se ocultará automáticamente al desplazarse. underNavbar : dibuja la barra inferior debajo de la barra de navegación.fonts/MySuperDuperFont.ttf . En ese caso, la ruta de su fuente se vería así src/main/assets/fonts/MySuperDuperFont.ttf , pero solo necesita proporcionar fonts/MySuperDuperFont.ttf , ya que la carpeta de activos se completará automáticamente.< tab
id = " @+id/tab_recents "
title = " Recents "
icon = " @drawable/empty_icon "
inActiveColor = " #00FF00 "
activeColor = " #FF0000 "
barColorWhenSelected = " #FF0000 "
badgeBackgroundColor = " #FF0000 "
badgeHidesWhenActive = " true " />¡Envíame una solicitud de extracción con README.md modificado para recibir un reconocimiento!
Siéntase libre de crear problemas y realizar solicitudes.
Al crear solicitudes de extracción, más es más: me gustaría ver diez solicitudes de extracción pequeñas separadas por función en lugar de todas combinadas en una enorme.
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.
