bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


android_fragments

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió
Revisió prèvia
android_fragments [2023/02/13 11:21]
enric_mieza_sanchez [Android Fragments]
android_fragments [2025/01/08 01:19] (actual)
enric_mieza_sanchez [ViewModel]
Línia 16: Línia 16:
 App amb fragments: App amb fragments:
  
-  - Crear app amb el //template// ''Bottom Navigation Activity''+  - Crear app amb el //template// ''Bottom Navigation Activity''.
   - Afegir un nou ''Fragment'' buit. Tria bé el nom (posarem d'exemple ''NewFragment'') <code>Botó dret -> New -> Fragment -> Fragment (Blank)</code>   - Afegir un nou ''Fragment'' buit. Tria bé el nom (posarem d'exemple ''NewFragment'') <code>Botó dret -> New -> Fragment -> Fragment (Blank)</code>
   - Afegir el nou ''Fragment'' a la navegació (via XML):<code>res -> navigation -> mobile_navigation.xml</code>   - Afegir el nou ''Fragment'' a la navegació (via XML):<code>res -> navigation -> mobile_navigation.xml</code>
   - Afegir el nou ''Fragment'' al menú de la ''NavigationBar'':<code>res -> menu -> bottom_nav_menu.xml</code>   - Afegir el nou ''Fragment'' al menú de la ''NavigationBar'':<code>res -> menu -> bottom_nav_menu.xml</code>
-  - ... +  - Anar a ''MainActivity.java'' i afegir ''R.id.navigation_XXX'' al ''onCreate'':<code java>AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder( 
-  - +                R.id.navigation_home, R.id.navigation_dashboard, 
 +                R.id.navigation_notifications, R.id.navigation_XXX) 
 +                .build();</code> 
 +  - Posar una icona adequada pel nou fragment. 
 +  - La plantilla sol tenir un //padding-top// dins el //layout// del ''ActivityMain'' i sol deixar buida la part de dalt. Podeu mirar [[https://stackoverflow.com/questions/65777579/android-studio-bottom-navigation-activity-template-leaves-blank-area-on-the-to|aquest post]] per eliminar-la (simplement eliminant el //padding// o posar-lo a 0).
  
 \\ \\
Línia 27: Línia 31:
 ===== ViewModel ===== ===== ViewModel =====
  
-<WRAP tip>+ 
 +<WRAP tip left twothirds>
 Haureu vist que el ''NewFragment'' té només 1 sol arxiu, mentre que els ''Fragment'' creats a la plantilla (Home, Dashboard i Notifications) en tenen 2. Això és degut a que, acompanyant el ''Fragment'', també tenim un ''ViewModel''. **Aquest objecte ''ViewModel'' ens serveix per facilitar la persistència dels canvis en el GUI** sense haver d'utilitzar accés a fitxers o altres sistemes d'emmagatzemament. Haureu vist que el ''NewFragment'' té només 1 sol arxiu, mentre que els ''Fragment'' creats a la plantilla (Home, Dashboard i Notifications) en tenen 2. Això és degut a que, acompanyant el ''Fragment'', també tenim un ''ViewModel''. **Aquest objecte ''ViewModel'' ens serveix per facilitar la persistència dels canvis en el GUI** sense haver d'utilitzar accés a fitxers o altres sistemes d'emmagatzemament.
  
 No és necessari utilitzar el ''ViewModel'', tot i que **pot facilitar molta gestió, com per exemple quan girem (rotate) el mòbil de format //portrait// a //landscape//, moment en el qual es destrueixen les //views// i es tornen a crear de nou amb les noves mides i, per tant, perdem les dades del GUI**. No és necessari utilitzar el ''ViewModel'', tot i que **pot facilitar molta gestió, com per exemple quan girem (rotate) el mòbil de format //portrait// a //landscape//, moment en el qual es destrueixen les //views// i es tornen a crear de nou amb les noves mides i, per tant, perdem les dades del GUI**.
 </WRAP> </WRAP>
 +
 +{{https://bytes.cat/_media/cicle_de_vida_activitat_android.png?200&direct&float|Cicle de vida d'una aplicació Android}}
 +
 +\\
 +
 +\\
  
 Un [[https://developer.android.com/topic/libraries/architecture/viewmodel|ViewModel]] ens permetrà connectar la View amb el ViewModel mitjançant la sentència ''observe'', que prové d'un patró de disseny Observer. Aquest és el codi que ve per defecte a la plantilla: Un [[https://developer.android.com/topic/libraries/architecture/viewmodel|ViewModel]] ens permetrà connectar la View amb el ViewModel mitjançant la sentència ''observe'', que prové d'un patró de disseny Observer. Aquest és el codi que ve per defecte a la plantilla:
 +<tabbox Versió Kotlin>
 +<code kotlin>
 +        homeViewModel.text.observe(viewLifecycleOwner) {
 +            textView.text = it
 +        }</code>
 +<tabbox Versió Java>
 <code java>homeViewModel.getText().observe(getViewLifecycleOwner(), textView::setText);</code> <code java>homeViewModel.getText().observe(getViewLifecycleOwner(), textView::setText);</code>
 +</tabbox>
 +<WRAP info>
 +Per [[https://learn.microsoft.com/es-es/xamarin/xamarin-forms/enterprise-application-patterns/mvvm|aprendre mes del patró MVVM o Model-View-ViewModel]].
 +
 +{{https://learn.microsoft.com/es-es/xamarin/xamarin-forms/enterprise-application-patterns/mvvm-images/mvvm.png}}
 +</WRAP>
  
  
Línia 45: Línia 68:
  
 Algo així: Algo així:
 +<tabbox Versió Kotlin>
 +<file kotlin HomeFragment.kt>
 +    _binding!!.button.setOnClickListener(View.OnClickListener {
 +        homeViewModel.setText("yeah")
 +    })
 +</file>
 +Cal afegir ''setText'' al ''ViewModel''. Per canviar el valor del model ''_text'' caldrà fer un ''postValue()'', el qual s'encarregarà de notificar els ''observer'' que hi hagi subscrits:
 +<file kotlin HomeViewModel.kt>
 +class HomeViewModel : ViewModel() {
 +
 +    private val _text = MutableLiveData<String>().apply {
 +        value = "This is home Fragment"
 +    }
 +    var text: LiveData<String> = _text
 +
 +    fun setText(newtext: String) {
 +        _text.postValue(newtext)
 +    }
 +}
 +</file>
 +<tabbox Versió Java>
 <code java> <code java>
 homeButton.setOnClickListener(new View.OnClickListener() { homeButton.setOnClickListener(new View.OnClickListener() {
Línia 58: Línia 102:
 }); });
 </code> </code>
 +</tabbox>
  
 Ara posa l'app en marxa, habilita el //autorotate// de l'emulador i observa què passa. Ara posa l'app en marxa, habilita el //autorotate// de l'emulador i observa què passa.
android_fragments.1676287314.txt.gz · Darrera modificació: 2023/02/13 11:21 per enric_mieza_sanchez