El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Components Avançats de la Interfície d'Usuari

Següent ►
►

En aquest tema, explorarem components avançats de la interfície d'usuari (UI) en Android. Aquests components permeten crear aplicacions més interactives i atractives visualment. Aprendrem a utilitzar components com el ViewPager, TabLayout, CoordinatorLayout i CollapsingToolbarLayout.

Objectius del Tema

  • Comprendre l'ús del ViewPager per a la navegació entre fragments.
  • Implementar un TabLayout per a la navegació amb pestanyes.
  • Utilitzar el CoordinatorLayout per a la coordinació de moviments entre vistes.
  • Crear una barra d'eines que es col·lapsa amb el CollapsingToolbarLayout.

  1. ViewPager

Què és el ViewPager?

El ViewPager és un component que permet als usuaris navegar entre diferents fragments lliscant amb el dit. És útil per a crear interfícies d'usuari que necessiten mostrar múltiples pantalles de contingut.

Implementació del ViewPager

Pas 1: Afegir les dependències necessàries

Assegura't d'afegir la dependència del ViewPager al teu build.gradle:

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

Pas 2: Crear el disseny XML

Afegeix el ViewPager al teu fitxer de disseny XML:

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Pas 3: Configurar l'adaptador del ViewPager

Crea una classe d'adaptador per al ViewPager:

public class ViewPagerAdapter extends FragmentStateAdapter {
    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new FirstFragment();
            case 1:
                return new SecondFragment();
            default:
                return new ThirdFragment();
        }
    }

    @Override
    public int getItemCount() {
        return 3; // Nombre de fragments
    }
}

Pas 4: Configurar el ViewPager en l'activitat

ViewPager2 viewPager = findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(this);
viewPager.setAdapter(adapter);

  1. TabLayout

Què és el TabLayout?

El TabLayout és un component que permet als usuaris navegar entre diferents vistes mitjançant pestanyes. Sovint s'utilitza en combinació amb el ViewPager.

Implementació del TabLayout

Pas 1: Afegir les dependències necessàries

Assegura't d'afegir la dependència del TabLayout al teu build.gradle:

dependencies {
    implementation 'com.google.android.material:material:1.3.0'
}

Pas 2: Crear el disseny XML

Afegeix el TabLayout i el ViewPager al teu fitxer de disseny XML:

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Pas 3: Configurar el TabLayout amb el ViewPager

TabLayout tabLayout = findViewById(R.id.tabLayout);
ViewPager2 viewPager = findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(this);
viewPager.setAdapter(adapter);

new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
    switch (position) {
        case 0:
            tab.setText("Tab 1");
            break;
        case 1:
            tab.setText("Tab 2");
            break;
        case 2:
            tab.setText("Tab 3");
            break;
    }
}).attach();

  1. CoordinatorLayout i CollapsingToolbarLayout

Què és el CoordinatorLayout?

El CoordinatorLayout és un layout avançat que permet coordinar moviments entre vistes. És especialment útil per a crear efectes de desplaçament complexos.

Què és el CollapsingToolbarLayout?

El CollapsingToolbarLayout és un layout que permet crear una barra d'eines que es col·lapsa quan l'usuari desplaça la vista cap amunt.

Implementació del CoordinatorLayout i CollapsingToolbarLayout

Pas 1: Crear el disseny XML

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@drawable/your_image" />

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Exercicis Pràctics

Exercici 1: Implementar un ViewPager amb tres fragments

  1. Crea tres fragments diferents.
  2. Configura un ViewPager per a navegar entre aquests fragments.

Exercici 2: Afegir un TabLayout al ViewPager

  1. Afegeix un TabLayout al disseny XML.
  2. Configura el TabLayout per a treballar amb el ViewPager.

Exercici 3: Crear una barra d'eines que es col·lapsa

  1. Utilitza el CoordinatorLayout i el CollapsingToolbarLayout per a crear una barra d'eines que es col·lapsa quan l'usuari desplaça la vista cap amunt.

Solucions

Solució a l'Exercici 1

public class ViewPagerAdapter extends FragmentStateAdapter {
    public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        switch (position) {
            case 0:
                return new FirstFragment();
            case 1:
                return new SecondFragment();
            default:
                return new ThirdFragment();
        }
    }

    @Override
    public int getItemCount() {
        return 3;
    }
}

Solució a l'Exercici 2

TabLayout tabLayout = findViewById(R.id.tabLayout);
ViewPager2 viewPager = findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(this);
viewPager.setAdapter(adapter);

new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
    switch (position) {
        case 0:
            tab.setText("Tab 1");
            break;
        case 1:
            tab.setText("Tab 2");
            break;
        case 2:
            tab.setText("Tab 3");
            break;
    }
}).attach();

Solució a l'Exercici 3

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@drawable/your_image" />

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Conclusió

En aquest tema, hem après a utilitzar components avançats de la interfície d'usuari en Android, com el ViewPager, TabLayout, CoordinatorLayout i CollapsingToolbarLayout. Aquests components ens permeten crear aplicacions més interactives i atractives visualment. En el proper tema, explorarem com treballar amb tasques en segon pla.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats