Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al...
Transcript of Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al...
![Page 1: Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al nuevo layout. (ListaMateriasFrag y MateriaDetalleFrag) Agrupa de tal manera que](https://reader034.fdocuments.in/reader034/viewer/2022042310/5ed734efd37f9f58ca6a785f/html5/thumbnails/1.jpg)
Proyectos de desarrollo para dispositivos móviles
Fragmentos 2. Android
Diferentes pantallas
Teléfono Tablet
![Page 2: Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al nuevo layout. (ListaMateriasFrag y MateriaDetalleFrag) Agrupa de tal manera que](https://reader034.fdocuments.in/reader034/viewer/2022042310/5ed734efd37f9f58ca6a785f/html5/thumbnails/2.jpg)
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
![Page 3: Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al nuevo layout. (ListaMateriasFrag y MateriaDetalleFrag) Agrupa de tal manera que](https://reader034.fdocuments.in/reader034/viewer/2022042310/5ed734efd37f9f58ca6a785f/html5/thumbnails/3.jpg)
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.
![Page 4: Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al nuevo layout. (ListaMateriasFrag y MateriaDetalleFrag) Agrupa de tal manera que](https://reader034.fdocuments.in/reader034/viewer/2022042310/5ed734efd37f9f58ca6a785f/html5/thumbnails/4.jpg)
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.
![Page 5: Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al nuevo layout. (ListaMateriasFrag y MateriaDetalleFrag) Agrupa de tal manera que](https://reader034.fdocuments.in/reader034/viewer/2022042310/5ed734efd37f9f58ca6a785f/html5/thumbnails/5.jpg)
❖ 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()
![Page 6: Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al nuevo layout. (ListaMateriasFrag y MateriaDetalleFrag) Agrupa de tal manera que](https://reader034.fdocuments.in/reader034/viewer/2022042310/5ed734efd37f9f58ca6a785f/html5/thumbnails/6.jpg)
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()
} } }
![Page 7: Proyectos de desarrollo para dispositivos móvilesAgregando fragmentos Agrega los dos fragmentos al nuevo layout. (ListaMateriasFrag y MateriaDetalleFrag) Agrupa de tal manera que](https://reader034.fdocuments.in/reader034/viewer/2022042310/5ed734efd37f9f58ca6a785f/html5/thumbnails/7.jpg)
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 🤓