https://github.com/gitfrandu4/android-tab-layout
TabLayout & ViewPager2
https://github.com/gitfrandu4/android-tab-layout
Last synced: 12 months ago
JSON representation
TabLayout & ViewPager2
- Host: GitHub
- URL: https://github.com/gitfrandu4/android-tab-layout
- Owner: gitfrandu4
- Created: 2022-10-16T23:18:01.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-10-17T16:20:08.000Z (almost 4 years ago)
- Last Synced: 2025-05-22T21:16:57.852Z (about 1 year ago)
- Language: Kotlin
- Size: 853 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TabLayout & ViewPager2
El ViewPager2 es una versión mejorada del viewpager normal y lo han creado para hacer más simple de
implementar.
## Inplementación:
### Implementación 1/3
El siguiente código corresponde al componente en sí, habría que añadirlo a un fragmento o bien a un
activity.
Para nuestro ejemplo lo ponemos en el `activity_main.xml`
```xml
```
### Implementación 2/3
El siguiente paso es crear un adapter para decir que fragments queremos utilizar en nuestra vista,
en este caso lo podemos hacer directamente en el Activity, yo lo pondré en el `onCreate()`. También
asignamos el apdapter al viewpager2.
```kotlin
// val myViewPager2 = findViewById(R.id.viewpager2)
// val myTabLayout = findViewById(R.id.tablayout)
val myViewPager2: ViewPager2 = binding.viewpager2
val myTabLayout: TabLayout = binding.tablayout
val adapter = object : FragmentStateAdapter(this) {
override fun getItemCount(): Int {
return 3
}
// Aquí es donde abriremos un fragment cuando se pulse en uno de los tabs
override fun createFragment(position: Int): Fragment {
if (position == 0) {
return BlueFragment()
}
if (position == 1) {
return RedFragment()
}
return GreenFragment()
}
}
myViewPager2.adapter = adapter
```
### Implementación 3/3
Por último faltaría asignar los nombres de los tabs, que con el ViewPager2 se hace de la siguiente
forma:
```kotlin
myViewPager2.adapter = adapter
// Cont. paso 3:
TabLayoutMediator(myTabLayout, myViewPager2) { tab, position ->
when(position) {
0 -> {
tab.text = "Inicio"
tab.icon = ContextCompat.getDrawable(this, R.drawable.ic_baseline_book_24)
}
1 -> {
tab.text = "Rojo"
tab.icon = ContextCompat.getDrawable(this, R.drawable.ic_baseline_book_24)
}
2 -> {
tab.text = "verde"
tab.icon = ContextCompat.getDrawable(this, R.drawable.ic_baseline_book_24)
}
}
}.attach()
```
## Práctica
Replicar el Tab Layout de la aplicación móvil de Facebook: https://github.com/gitfrandu4/android-ex-tabs-facebook