bytes.cat

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
====== Android Fragments ======

Els ''Fragment'' ens permetran disposar de diverses Activity alhora en la mateixa pantalla, a mode de pestanyes. Podrem navegar amb una ''NavigationBar'' que acostuma a tenir disposicions diferents segons la grandària i orientació de la pantalla, o del tipus de dispositiu.

Referències:
  * [[Android]] a la pròpia wiki bytes.cat
  * ...

{{tag> #Dam #DamMp08 #DamMp08Uf1 #DamMp08Uf01 #DamMp08Uf2 Android mobile java }}


{{ https://developer.android.com/static/images/guide/fragments/fragment-screen-sizes.png?500 }}


===== App amb fragments =====
App amb fragments:

  - 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 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>
  - 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).

\\

===== ViewModel =====


<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.

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>

{{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:
<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>
</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>


<WRAP todo>
Afegeix un ''Button'' i un ''TextView'' al ''HomeFragment''. Hauriem de tenir 2 ''TextView'', un AMB ViewModel (el què ja existia) i un sense.

Implementa aquesta funcionalitat simple: quan premem el botó, canvia el text dels dos ''TextView'', però cal fer-ho diferent en l'un i l'altre:
  * En el ''TextView'' AMB ''ViewModel'' cal modificar el ''ViewModel''.
  * En el ''TextView'' SENSE ''ViewModel'' el modifiquem directament.

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>
homeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // Modifiquem objecte sense ViewModel directament
        TextView directTextView = root.findViewById(R.id.directTextView);
        directTextView.setText("[NOT ViewModel] canvi de text");

        // Modifiquem contingut ViewModel (es reflaxarà a la View)
        homeViewModel.setText("[WITH ViewModel] canvi de text");
    }
});
</code>
</tabbox>

Ara posa l'app en marxa, habilita el //autorotate// de l'emulador i observa què passa.

Com expliques aquest comportament?
</WRAP>
bytes.cat

Eines de l'usuari

Eines del lloc

Eines de la pàgina
