Proyectos de desarrollo para dispositivos móviles

Fragmentos 2. Android

Diferentes pantallas

Teléfono Tablet

Objetivo❖ Requerimos que la actividad principal tenga una vista

con dos fragmentos. La segunda actividad ya no es requerida (cuando corre en tablet).

❖ Agrega un Layout Resource File a la carpeta res/layout.

Agregando un layout

Agregando fragmentos❖ Agrega los dos fragmentos al nuevo layout.

(ListaMateriasFrag y MateriaDetalleFrag)

❖ Agrupa de tal manera que la lista ocupe una tercera parte del ancho y el detalle el espacio restante.

Corre la app❖ Corre la app en teléfono y observa que el comportamiento es

como antes.

❖ En la tablet ya muestra los dos fragmentos, pero al hacer click sobre una materia, cambia a la segunda actividad.

Corre la app❖ Necesitamos saber si la app corre en un teléfono o en

una tablet.

❖ Si corre en un teléfono iniciamos la segunda actividad, pero si corre en tablet, solo reemplazamos el segundo fragmento.

Agrega un contenedor para el segundo fragmento

❖ Quita el segundo fragmento y en su lugar coloca un FrameLayout. Este será el contenedor del fragmento que se agregará posteriormente con programación.

❖ Preguntamos si el contenedor del fragmento existe o no. Si corre en teléfono, no existe porque carga el layout original. Si corre en tablet, entonces sí existe porque carga el layout-large.

¿Cómo saber en que dispositivo corre?

if (contFragmentos == null) { // Está en teléfono, hacemos lo mismo que antes val intDetalle = Intent(this, DetalleActiv::class.java) intDetalle.putExtra("POSICION", indice) startActivity(intDetalle) } else { // Está en tablet, hacemos algo diferente }

Agregando el fragmento❖ Para agregar un fragmento, necesitamos una

transacción.➡ Inicia la transacción.

➡ Especifica los cambios.

➡ Ejecuta la transacción

❖ El objeto que representa la transacción lo obtenemos a través del administrador de fragmentos.supportFragmentManager.beginTransaction()

Cambiando el fragmento

override fun itemClicked(indice: Int) { if (contFragmentos == null) { // Está en teléfono val intDetalle = Intent(this, DetalleActiv::class.java) intDetalle.putExtra("POSICION", indice) startActivity(intDetalle) } else { // Está en tablet val fragDetalle = MateriaDetalleFrag() fragDetalle.indice = indice

supportFragmentManager.beginTransaction() .replace(R.id.contenedorFrag, fragDetalle) .addToBackStack(fragDetalle.toString()) .commit() } }

Fragmento inicial❖ Puedes hacer que al iniciar la aplicación, se muestre la

primera materia del lado derecho.

❖ Agrega en el método onCreate el código:override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main)

val contFrag = findViewById<View>(R.id.contenedorFrag) if (contFrag!=null) { // ¿Corre por primera vez? // Poner fragmento inicial if (savedInstanceState==null) { val fragDetalle = MateriaDetalleFrag() // indice en cero supportFragmentManager.beginTransaction() .replace(R.id.contenedorFrag, fragDetalle) .commit()

} } }

Rotando la tablet❖ Cuando rotas la tablet, se pierde la información que

muestra el detalle. 😒

❖ Es necesario salvar y recuperar el estado cuando hay un cambio de configuración.

Salvando y recuperando el estado de los fragmentos

override fun onSaveInstanceState(outState: Bundle) { outState.putInt("POSICION", indice) super.onSaveInstanceState(outState) }

override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState)

if (savedInstanceState != null) { indice = savedInstanceState.getInt("POSICION", 0) } }

Fin de la práctica 🤓