El arsenal de Android - Navegación


Frágula es una extensión de biblioteca de componentes de navegación deslizar para descartar para Android.
Es una adaptación de una versión anterior creada por @shikleev y ahora se mantiene en este repositorio.


  1. dependencia gradle
  2. Los basicos
  3. Mas opciones
    1. argumentos de destino
    2. Múltiples backstacks
    3. dirección de deslizamiento
  4. transiciones de página
  5. tematización

Índice del contenido

dependencia gradle

Agrega esto a tu módulo build.gradle Archivo:

dependencies {
  ...
  implementation 'com.fragula2:fragula-core:2.1'
}

Ese fragula-core El módulo contiene todo lo que necesita para comenzar con la biblioteca. Incluye todas las funciones y funciones básicas para un uso normal.


Los basicos

Primero, debes reemplazar NavHostFragment Con FragulaNavHostFragment en su diseño:

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    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:name="com.fragula2.FragulaNavHostFragment" 
    android:id="@+id/nav_host"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

Segundo, Necesitas reemplazar el tuyo <fragment> Destinos en gráfico con <swipeable> Como se muestra abajo:

<!-- nav_graph.xml -->
<navigation 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:id="@+id/nav_graph"
    app:startDestination="@id/detailFragment">

    <swipeable
        android:id="@+id/detailFragment"
        android:name="com.example.fragula.DetailFragment"
        android:label="DetailFragment"
        tools:layout="@layout/fragment_detail" />

    ...
    
</navigation>

Por findebe configurar el fondo opaco y la bandera de dirección del diseño en el diseño raíz de su fragmento para evitar problemas de animación de deslizamiento.

<!-- fragment_detail.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:colorBackground"
    android:layoutDirection="local">
    
    ...
    
</androidx.constraintlayout.widget.ConstraintLayout>

Ahora, cuando abra la aplicación, verá que puede deslizar fragmentos como en Telegram, Slack y muchas otras aplicaciones de mensajería.


Mas opciones

argumentos de destino

En general, deberías trabajar con Fragula como lo harías con fragmentos normales. Definitivamente debería preferir transferir solo la cantidad mínima de datos entre objetivos, ya que el espacio de almacenamiento total para todos los estados guardados está limitado en Android.

Primeroagregue un argumento al objetivo:

<swipeable 
    android:id="@+id/detailFragment"
    android:name="com.example.fragula.DetailFragment">
     <argument
         android:name="itemId"
         app:argType="string" />
 </swipeable>

Segundocrea un objeto Bundle y pásalo junto con el objetivo navigate() Como se muestra abajo:

val bundle = bundleOf("itemId" to "123")
findNavController().navigate(R.id.detailFragment, bundle)

Por finen su código de destino de recepción, use el getArguments() Método para obtener el paquete y usar su contenido:

val textView = view.findViewById<TextView>(R.id.textViewItemId)
textView.text = arguments?.getString("itemId")

Se recomienda encarecidamente utilizar el complemento Safe Args para navegar y pasar datos, ya que garantiza la seguridad de los tipos.

Múltiples backstacks

Actualmente, no se admiten múltiples backstacks, lo que significa que extensiones como BottomNavigationView.setupWithNavController(...) sin perder su backstack actual.

dirección de deslizamiento

Si desea cambiar la dirección del gesto de deslizamiento, puede hacerlo desde la configuración app:swipeDirection="..." manualmente en su contenedor de navegación. Este ejemplo a continuación configura la dirección de deslizamiento vertical.

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    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:name="com.fragula2.FragulaNavHostFragment" 
    android:id="@+id/nav_host" 
    app:swipeDirection="top_to_bottom"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

Puedes usar ambos left_to_right (Predeterminado) o right_to_left para dirección horizontal. Para la dirección vertical, solo puede usar top_to_bottomella inclinar usar bottom_to_top ya que no es compatible debido a las limitaciones internas de ViewPager2.


transiciones de página

Es posible que desee saber cuándo cambia el desplazamiento de desplazamiento para lograr transiciones suaves en su vista de fragmento. Para comenzar a escuchar eventos de desplazamiento, debe sondear SwipeController y ajustar OnSwipeListener Como se muestra abajo:

Nota: Actualmente, las transiciones de elementos compartidos entre objetivos no se admiten de ninguna forma.

class DetailFragment : Fragment(R.layout.fragment_detail) {
   
    private lateinit var swipeController: SwipeController
    private lateinit var listener: OnSwipeListener
    
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        ...
        swipeController = findSwipeController()
        listener = OnSwipeListener { position, positionOffset, positionOffsetPixels ->
            // TODO animate views using `positionOffset` or `positionOffsetPixels`.
            //  the `position` points to the position of the fragment in backstack
        }
        swipeController.addOnSwipeListener(listener)
    }
   
    override fun onDestroyView() {
        super.onDestroyView()
        swipeController.removeOnSwipeListener(listener)
    }
}

Recuerdo: Debe eliminar el oyente cuando se destruye la vista de fragmento.


tematización

En la mayoría de los casos, no es necesario cambiar los valores, pero si desea anularlos, los atributos están disponibles:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">...</item>
    <item name="colorPrimaryDark">...</item>
    <item name="colorAccent">...</item>

    <!--
        This overrides the color used for the dimming when fragment is being dragged.
        The default value is #121212 for both light and dark themes.
    -->
    <item name="fgl_dim_color">#121212</item>

    <!--
        This overrides the amount of dimming when fragment is being dragged.
        Think of it as a `fgl_dim_color` alpha multiplier.
    -->
    <item name="fgl_dim_amount">0.15</item>
   
    <!--
        This overrides the duration of swipe animation using `navController.navigate(...)` 
        and `navController.popBackStack()` methods.
    -->
    <item name="fgl_anim_duration">300</item>
   
</style>

Si quieres conocer otros artículos parecidos a El arsenal de Android - Navegación puedes visitar la categoría Android.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir