En Android, TabLayout es un nuevo elemento introducido en la biblioteca de soporte de diseño. Proporciona un diseño horizontal para mostrar pestañas en la pantalla. Podemos mostrar más pantallas en una sola pantalla usando pestañas. Podemos deslizar rápidamente entre las pestañas. TabLayout es básicamente ViewClass que se debe agregar a nuestro diseño (XML) para crear pestañas deslizantes.
¿Qué vamos a construir en este artículo?
En este artículo, vamos a desarrollar una aplicación que tendrá tres pestañas y los usuarios pueden deslizarse de una pestaña a otra como en WhatsApp. Para esto, usaremos TabLayout . A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo.
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.
Paso 2: Agregar dependencia
Agregue una dependencia para obtener acceso a todos los componentes del material y haga clic en sincronizar .
implementación ‘com.google.android.material:material:1.4.0’
Paso 3: Establecer tema y barra de herramientas
Navegue a res > valores > color.xml, configure algunos colores vibrantes. Agregue el siguiente código de secuencia de comandos para los colores.
XML
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#0F9D58</color> <color name="colorPrimaryDark">#056008</color> <color name="colorAccent">#E39D36</color> <resources>
Ahora, elimine la barra de herramientas predeterminada de la pantalla y crearemos una barra de herramientas personalizada. Vaya a res > valores > estilos.xml (para la última versión de Android Studio, res > valores > temas > tema.xml ) y cambie parentTheme .
XML
<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
Paso 4: trabajar con el diseño de actividad_principal
Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.appbar.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_constraintBottom_toTopOf="@+id/viewPager" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <com.google.android.material.tabs.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@color/colorPrimary" app:tabGravity="fill" app:tabMode="fixed" app:tabTextColor="@android:color/white" /> </com.google.android.material.appbar.AppBarLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/appBarLayout"> </androidx.viewpager.widget.ViewPager> </androidx.constraintlayout.widget.ConstraintLayout>
Paso 5: Establecer tres pestañas
Necesitamos crear tres clases de fragmentos y sus tres diseños respectivos. Aquí está el código para el primer fragmento, es decir , GeeksFragment.kt
Kotlin
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.ViewGroup
class GeeksFragment : Fragment() {
// inflate the layout
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
) =
inflater.inflate(R.layout.fragment_geeks, container, false)!!
}
El diseño correspondiente, fragment_geeks.xml
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="GeeksForGeeks" /> </LinearLayout>
Código para el segundo fragmento, es decir , CodeFragment.kt
Kotlin
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.ViewGroup
class CodeFragment : Fragment() {
// inflate the layout
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
) =
inflater.inflate(R.layout.fragment_code, container, false)!!
}
El diseño correspondiente, fragment_code.xml
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Code Chef" /> </LinearLayout>
Código para el tercer fragmento, es decir , LeetFragment.kt
Kotlin
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.ViewGroup
class LeetFragment : Fragment() {
// inflate the layout
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
) =
inflater.inflate(R.layout.fragment_leet, container, false)!!
}
El diseño correspondiente, fragment_leet.xml
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Leet Code" /> </LinearLayout>
Paso 6: Cree una clase ViewPagerAdapter
Para conectar todos nuestros fragmentos con ViewPager, necesitamos una clase de adaptador. pasaremos la lista de instancias de la clase de fragmento y su título para mostrar en las pestañas. A continuación se muestra el código para ViewPagerAdapter.kt Los comentarios se agregan dentro del código para comprender el código con más detalle.
Kotlin
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
class ViewPagerAdapter(supportFragmentManager: FragmentManager) :
FragmentStatePagerAdapter(supportFragmentManager) {
// declare arrayList to contain fragments and its title
private val mFragmentList = ArrayList<Fragment>()
private val mFragmentTitleList = ArrayList<String>()
override fun getItem(position: Int): Fragment {
// return a particular fragment page
return mFragmentList[position]
}
override fun getCount(): Int {
// return the number of tabs
return mFragmentList.size
}
override fun getPageTitle(position: Int): CharSequence{
// return title of the tab
return mFragmentTitleList[position]
}
fun addFragment(fragment: Fragment, title: String) {
// add each fragment and its title to the array list
mFragmentList.add(fragment)
mFragmentTitleList.add(title)
}
}
Paso 7: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.Toolbar
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout
class MainActivity : AppCompatActivity() {
private lateinit var pager: ViewPager // creating object of ViewPager
private lateinit var tab: TabLayout // creating object of TabLayout
private lateinit var bar: Toolbar // creating object of ToolBar
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// set the references of the declared objects above
pager = findViewById(R.id.viewPager)
tab = findViewById(R.id.tabs)
bar = findViewById(R.id.toolbar)
// To make our toolbar show the application
// we need to give it to the ActionBar
setSupportActionBar(bar)
// Initializing the ViewPagerAdapter
val adapter = ViewPagerAdapter(supportFragmentManager)
// add fragment to the list
adapter.addFragment(GeeksFragment(), "GeeksForGeeks")
adapter.addFragment(CodeFragment(), "Code Chef")
adapter.addFragment(LeetFragment(), "Leet Code")
// Adding the Adapter to the ViewPager
pager.adapter = adapter
// bind the viewPager with the TabLayout.
tab.setupWithViewPager(pager)
}
}
Ahora, ejecuta la aplicación
Producción:
Código fuente: Haga clic aquí