ExpandableBottomBar BottomNavigationView BottomNavigationView ,,
ventajas:
- Se trata de destinos de nivel superior a los que se puede acceder desde cualquier lugar de la aplicación.
- Es una extensión del componente Material Design (BottomNavigationView).
- Fácil de usar.
Desventajas:
- Se usa solo cuando solo hay de tres a cinco destinos.
- Solo se puede utilizar con móviles y tabletas.
- La longitud de las etiquetas de texto debe ser menor.
- Debe usarse cuando el usuario pasará más del 90% del tiempo en una aplicación en la misma ventana.
Acercarse:
Paso 1: agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias. Permite a los desarrolladores usar directamente ExpandableBottomBar directamente en archivos XML.
XML
dependencies { implementation 'com.github.st235:expandablebottombar:1.1.8' }
Paso 2: ahora agregue el siguiente código en el archivo string.xml . En este archivo, agregue todos los nombres de los campos que se mostrarán en ExpandableBottomBar .
XML
<resources> <string name="algo">Algorithm</string> <string name="course">Course</string> <string name="profile">Profile</string> </resources>
Paso 3: Cree un AlgorithmFragment haciendo clic con el botón derecho en el paquete Java, seleccione nuevo -> Fragmento (en blanco).
Paso 4: siga el paso anterior para CourseFragment y LoginFragment .
Paso 5: ahora agregue el siguiente código en el archivo fragment_algorithm.xml . Aquí se agrega un TextView en el diseño.
fragment_algorithm.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_algo" tools:context=".AlgorithmFragment"> <TextView android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Algorithm" /> </FrameLayout>
Paso 6: ahora agregue el siguiente código en el archivo fragment_course.xml . Aquí se agrega un TextView en el diseño.
fragment_course.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_course" tools:context=".CourseFragment"> <TextView android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Course" /> </FrameLayout>
Paso 7: ahora agregue el siguiente código en el archivo fragment_profile.xml . Aquí se agrega un TextView en el diseño.
fragment_profile.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_profile" tools:context=".ProfileFragment"> <TextView android:textSize="30sp" android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Profile" /> </FrameLayout>
Paso 8: ahora agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregue ExpandableBottomBar a nuestro diseño.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/layout"/> <github.com.st235.lib_expandablebottombar.ExpandableBottomBar android:id="@+id/expandable_bottom_bar" android:layout_width="match_parent" android:layout_height="50dp" app:exb_backgroundColor="#2e2e2e" app:exb_backgroundCornerRadius="25dp" app:exb_itemInactiveColor="#fff" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.991" /> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 9: ahora agregue el siguiente código en el archivo MainActivity.kt . En este archivo, agregue onItemSelectedListener que ayuda a navegar entre los fragmentos. Cambiará el fragmento cuando el usuario toque el icono. Aquí el método addItem se usa explícitamente para agregar elementos a ExpandableBottomBar , pero también se puede hacer agregando elementos en la carpeta del menú .
MainActivity.kt
package org.geeksforgeeks.expandablebottombar import android.graphics.Color import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import github.com.st235.lib_expandablebottomba .ExpandableBottomBar import github.com.st235.lib_expandablebottombar .ExpandableBottomBarMenuItem class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val bottomBar: ExpandableBottomBar = findViewById(R.id.expandable_bottom_bar) //set up the base fragment supportFragmentManager.beginTransaction() .add(R.id.layout, AlgorithmFragment()) .commit() //addItem function is used to set items in ExpandableBottomBar bottomBar.addItems( ExpandableBottomBarMenuItem.Builder(context = this) .addItem(R.id.fragment_algo, R.drawable.ic_algorithm, R.string.algo, Color.GREEN) .addItem(R.id.fragment_course, R.drawable.ic_course, R.string.course, Color.YELLOW) .addItem(R.id.fragment_profile, R.drawable.ic_account, R.string.profile, Color.MAGENTA) .build() ) //It will help the user to switch between different fragment. bottomBar.onItemSelectedListener = { view, menuItem -> when(menuItem.itemId){ R.id.fragment_algo -> supportFragmentManager.beginTransaction() .replace(R.id.layout, AlgorithmFragment()) .commit() R.id.fragment_course -> supportFragmentManager.beginTransaction() .replace(R.id.layout, CourseFragment()) .commit() R.id.fragment_profile -> supportFragmentManager.beginTransaction() .replace(R.id.layout, ProfileFragment()) .commit() } } } }
Producción:
Enlace de referencia: https://github.com/st235/ExpandableBottomBar
Publicación traducida automáticamente
Artículo escrito por madhavmaheshwarimm20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA