Share
Lo que vas a crearEl equipo de diseño de materiales en Google simplemente define la funcionalidad de las pestañas en Android de la siguiente manera:
Las pestañas facilitan la exploración y el cambio entre diferentes vistas.
En esta publicación aprenderás cómo mostrar pestañas usando la TabLayout y ViewPager API. En este práctico tutorial, cubriremos lo siguiente:
Accentsconagua
TabLayout y ViewPager componentes. Puede encontrar un proyecto de ejemplo para este tutorial en nuestro repositorio de GitHub para que pueda seguirlo fácilmente..
Para poder seguir este tutorial, necesitarás:
También puedes aprender todos los entresijos del lenguaje Kotlin en mi serie Kotlin From Scratch.
Según la documentación oficial de Android en TabLayout, dice:
TabLayoutproporciona un diseño horizontal para mostrar pestañas.
los TabLayout componente es uno de los componentes introducidos como parte de los artefactos de diseño del material. Además, también se incluye en la biblioteca de soporte de diseño. en un TabLayout, cuando se selecciona o pulsa una pestaña, se muestra una página (o fragmento) diferente al usuario.
los TabLayout el componente puede tener su función de pestañas mostradas de una de dos maneras: fija y desplazable. Si las pestañas son fijas, todas las pestañas se mostrarán en la pantalla al mismo tiempo.
La captura de pantalla a continuación es la última aplicación oficial de WhatsApp para Android (a partir de este escrito), que utiliza un TabLayout con una configuración de modo fijo.
En las pestañas desplazables, si el número de pestañas se vuelve demasiado grande para la pantalla, el usuario puede deslizar el dedo hacia la izquierda o hacia la derecha para ver más pestañas.
Aquí hay un ejemplo de TabLayout con el modo de pestaña desplazable, que se muestra en la última versión de la aplicación para Android News & Weather de Google.
Además, la información que se muestra en una pestaña puede ser texto, un icono o una combinación de texto y un icono. Por ejemplo, la última aplicación de Twitter para Android utiliza iconos en lugar de texto en cada pestaña.
En las siguientes secciones, analizaremos una aplicación sencilla que hace uso de TabLayout con un ViewPager. Comencemos!
El diseño no es solo lo que parece y se siente. El diseño es como funciona. - Steve Jobs
Inicie Android Studio 3 y cree un nuevo proyecto (puede nombrarlo TabLayoutDemo) con una actividad vacía llamada Actividad principal.
Vamos a crear un TabLayout con solo tres pestañas Cuando se selecciona cada una de las pestañas, muestra un fragmento o página de Android diferente. Así que ahora vamos a crear los tres fragmentos de Android para cada una de las pestañas. Comenzaremos con la primera clase de fragmentos, y debe seguir un proceso similar para las dos clases de fragmentos restantes-FragmentTwo.kt y FragmentThree.kt.
Aquí está mi FragmentOne.kt:
import android.os.Bundle import android.support.v4.app.Fragment import android.view.LayoutInflater import android.view.View import android.view.ViewGroup class FragmentOne: Fragment () anulación fun onCreateView (inflater: LayoutInflater? contenedor: ViewGroup ?, savedInstanceState: Bundle?): ¿Ver? = inflater !!. inflate (R.layout.fragment_one, container, false) objeto complementario fun newInstance (): FragmentOne = FragmentOne ()
Aquí también está mi R.layout.fragment_one:
Comenzar a usar TabLayout y ViewPager en su proyecto, asegúrese de importar el soporte de diseño y también el artefacto de soporte de Android, así que agréguelos a los módulos. construir.gradle archivo para importarlos.
dependencias implementación 'com.android.support:design:26.1.0' implementación 'com.android.support:support-v4:26.1.0'
Además, visite su res / layout / activlty_main.xml archivo para incluir tanto la TabLayout widget y el ViewPager ver.
Aquí creamos un sencillo TabLayout con identificación tab_layout. En nuestro TabLayout Widget XML, puede ver que incluimos algunos atributos, como aplicación: tabMode ser fijo y también aplicación: tabGravity ser llenar. los aplicación: tabGravity La propiedad se utiliza para configurar cómo se mostrarán los elementos de la pestaña para ocupar el espacio disponible. Establecimos esto a llenar, que distribuirá los artículos uniformemente en todo el ancho del TabLayout. Tenga en cuenta que esto será más visible en pantallas más anchas, como tabletas.
También incluí un atributo de estilo personalizado (@ style / CustomTabLayout) en nuestro TabLayout widget.
Comenzamos a personalizar nuestro TabLayout estableciendo los valores de los atributos que se aplicarán en el TabLayout. Aquí están los detalles de algunos de los atributos aplicados:
tabIndicatorColor: establece el color del indicador de pestaña para la pestaña seleccionada actualmente. Esto también se puede configurar mediante programación llamando setSelectedTabIndicatorColor () en un TabLayout ejemplo. tabIndicatorHeight: establece la altura del indicador de pestaña para la pestaña seleccionada actualmente. Esto también se puede establecer programáticamente llamando al setSelectedTabIndicatorHeight () en un TabLayout ejemplo. tabSelectedTextColor: establece los colores del texto para los diferentes estados (normal, seleccionado) utilizados para las pestañas. El equivalente de este atributo en Java es setTabTextColors (). Inmediatamente después de crear nuestro TabLayout widget en XML, la siguiente vista fue una ViewPager. La documentación oficial dice lo siguiente acerca de ViewPager:
Administrador de diseño que permite al usuario voltear hacia la izquierda y hacia la derecha a través de las páginas de datos ...
Necesitamos crear una subclase en SampleAdapter.kt que extiende el FragmentPagerAdapter. Esta clase es responsable de administrar los diferentes fragmentos que se mostrarán en las pestañas..
importar android.support.v4.app.Fragment importar android.support.v4.app.FragmentManager importar android.support.v4.app.FragmentPagerAdapter clase SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) override fun getItem (position: Int ): ¿Fragmento? = cuándo (posición) 0 -> FragmentOne.newInstance () 1 -> FragmentTwo.newInstance () 2 -> FragmentThree.newInstance () else -> null invalide fun getPageTitle (position: Int): CharSequence = when (position) 0 -> "Elemento de Tab 1" 1 -> "Elemento de Tab 2" 2 -> "Elemento de Tab 3" else -> "" anular la diversión getCount (): Int = 3
Aquí anulamos tres métodos de la clase padre: obtiene el objeto(), getCount (), y getPageTitle (). Aquí están las explicaciones de los métodos:
obtiene el objeto(): devuelve un Fragmento para una posición particular dentro de la ViewPager. getCount (): Indica cuantas páginas habrá en el ViewPager. getPageTitle (): este método es llamado por el ViewPager para obtener una cadena de título para describir la pestaña especificada.Por ejemplo, si la pestaña seleccionada es la primera pestaña con título "Elemento de la pestaña 1", una FragmentOne La página se mostrará al usuario inmediatamente..
A continuación, vamos a inicializar instancias de nuestro TabLayout, ViewPager, y SampleAdapter. La inicialización va a suceder dentro onCreate () en MainActivity.kt.
import android.os.Bundle import android.support.design.widget.TabLayout import android.support.v4.view.ViewPager import android.support.v7.app.AppCompatActivity import android.support.v7.widget.Toolbar class MainActivity: AppCompatActivity () override fun onCreate (savedInstanceState: Bundle?) super.onCreate (savedInstanceState) setContentView (R.layout.activity_main) initToolbar () val tabLayout Observe las imágenes. R.id.view_pager) val adapter = SampleAdapter (supportFragmentManager) viewPager.adapter = adaptador tabLayout.setupWithViewPager (viewPager) tabLayout.addOnTraspelraLoCatComPraCatRP.P.P.P.R.P. pestaña: TabLayout.Tab) anular la diversión onTabReselected (tab: TabLayout.Tab) ) diversión privada initToolbar () val toolbar: Toolbar = findViewById (R.id.toolbar) setSupportActionBar (toolbar) supportActionBar! title = "TabLa tu demo "
Tenemos referencias a nuestra TabLayout y ViewPager desde R.layout.activity_main Y los inicializo. También creamos una instancia de nuestro SampleAdapter-pasando una instancia de Gestor de fragmentos como un argumento Necesitamos suministrar las vistas para nuestros ViewPager, así que llamamos setAdapter () Y le pasamos en nuestro adaptador creado para ello. Finalmente, llamamos setupWithViewPager () en una instancia de TabLayout para hacer un trabajo
Cuando el usuario toca una pestaña, cambia las páginas del ViewPager y muestra la página requerida (o Fragmento). Además, al deslizar entre páginas se actualiza la pestaña seleccionada. En otras palabras, este método nos ayuda a cuidar el cambio de estado de desplazamiento y hacer clic en las pestañas.
los onTabSelectedListener () se utiliza para incluir un escucha que se invocará cuando cambie la selección de la pestaña. Hemos anulado las siguientes devoluciones de llamada:
onTabSelected (): se activa cuando una pestaña ingresa al estado seleccionado.onTabUnselected (): se invoca cuando una pestaña sale del estado seleccionado.onTabReselected (): se invoca cuando el usuario elige nuevamente una pestaña que ya está seleccionada.Tenga en cuenta que también podemos establecer el modo de pestaña mediante programación, en lugar de a través del diseño XML, usando setTabMode () en una instancia de TabLayout. Pasamos el modo (fijo o desplazable) a este método como argumentos. Por ejemplo, podemos pasar TabLayout.MODE_FIXED para un modo fijo o TabLayout.MODE_SCROLLABLE para un modo de desplazamiento.
tabLayout.tabMode = TabLayout.MODE_FIXED tabLayout.tabMode = TabLayout.MODE_SCROLLABLE
Tenga en cuenta que si desea crear explícitamente las pestañas en lugar de utilizar el método auxiliar setUpWithViewPager (), en su lugar puedes usar nueva pestaña() en un TabLayout ejemplo.
val tabLayout: TabLayout = findViewById (R.id.tab_layout) tabLayout.addTab (tabLayout.newTab (). setText ("Songs")) tabLayout.addTab (tabLayout.newTab (). setText ("Albums") (tabLayout.newTab (). setText ("Artists")) Tenga en cuenta también que podríamos crear explícitamente las pestañas a través de XML en lugar de programáticamente.
Finalmente, puedes ejecutar la aplicación.!
Intente interactuar con la aplicación deslizando hacia la izquierda o hacia la derecha y tocando las pestañas.
Las pautas oficiales de diseño de materiales en las pestañas dicen lo siguiente acerca de las pestañas desplazables:
Las pestañas desplazables muestran un subconjunto de pestañas en un momento dado. Pueden contener etiquetas de pestañas más largas y un número mayor de pestañas que las pestañas fijas. Las pestañas desplazables se utilizan mejor para explorar contextos en interfaces táctiles cuando los usuarios no necesitan comparar directamente las etiquetas de las pestañas.
Veamos cómo crear pestañas con configuración de modo desplazable. Hice el título para cada una de las pestañas más largas que antes. Aquí está el resultado en modo fijo:
Puedes ver eso TabLayout ha utilizado múltiples líneas para mostrar cada uno de los títulos de la pestaña. ¡En algunas situaciones, incluso se truncarán los títulos! Esto crea una mala experiencia de usuario, por lo que si los títulos de las pestañas deben ser muy largos, debe considerar el uso del modo de desplazamiento. Tenga en cuenta también que si va a tener más de cuatro pestañas, se recomienda hacer que el modo de pestaña sea desplazable.
Vamos a cambiar el aplicación: tabMode propiedad de fijo a desplazable.
app: tabMode = "desplazable" />
Recuerde, también puede configurar el modo de pestaña mediante programación, como se explicó anteriormente.
Ahora vamos a sumergirnos en cómo reemplazar el texto del elemento de la pestaña con iconos.
clase MainActivity: AppCompatActivity () override fun onCreate (savedInstanceState: Bundle?) // ... tabLayout.setupWithViewPager (viewPager) tabLayout.getTabAt (0) !! ) !!. setIcon (android.R.drawable.ic_dialog_info) tabLayout.getTabAt (2) !!. setIcon (android.R.drawable.ic_dialog_alert) // ... // ...
Aquí llamamos al getTabAt () en una instancia de TabLayout. Al llamar a este método se devolverá la pestaña en el índice especificado. A continuación, llamamos setIcon (). Al llamar a este método se establecerá el icono que se muestra en esta pestaña..
También configuro el modo de pestaña para ser fijo.
Todavía anulo el getPageTitle () dentro de SampleAdapter.
clase SampleAdapter (fm: FragmentManager): FragmentPagerAdapter (fm) //… sobrescribe fun getPageTitle (position: Int): CharSequence = when (position) 0 -> "TAB 1" 1 -> "TAB 2" 2 -> " TAB 3 "else ->" " //…
Aquí está el resultado:
Ahora, si solo quieres los íconos, simplemente no anulas getPageTitle ().
En lugar de escribir tanto código solo para crear una interfaz o actividad con pestañas desde cero, Android Studio 3.0 tiene algunas plantillas de código preexistentes (disponibles en Java y Kotlin) para ayudar a poner en marcha su proyecto. Una de estas plantillas puede usarse para crear una actividad con pestañas.
Te mostraré cómo usar esta característica útil en Android Studio 3.
Para un nuevo proyecto, inicia Android Studio 3.
Ingrese el nombre de la aplicación y haga clic en Siguiente botón.
Puede dejar los valores por defecto como están en el Dispositivos Android objetivo diálogo. Haga clic en el Siguiente botón de nuevo.
En el Añadir Una Actividad para Móvil diálogo, desplácese hacia abajo y seleccione Actividad tabulada. Haga clic en el Siguiente botón después de eso.
En el último diálogo, desplácese hasta la Estilo de navegación menú desplegable y seleccione Pestañas de la barra de acción (con ViewPager). Finalmente, haga clic en Terminar botón para aceptar todas las configuraciones.
Android Studio ahora nos ha ayudado a crear un proyecto con una actividad de pestañas. Realmente genial!
Se recomienda encarecidamente explorar el código generado..
En un proyecto de Android Studio ya existente, para usar esta plantilla, simplemente vaya a Archivo> Actividad> Actividad tabulada. Y siga los pasos similares que fueron descritos previamente..
Las plantillas que vienen incluidas con Android Studio son buenas para diseños simples y para crear aplicaciones básicas, pero si desea poner en marcha su aplicación aún más, podría considerar algunas de las plantillas disponibles en Envato Market..
Son un gran ahorro de tiempo para los desarrolladores experimentados, ya que les ayudan a superar el problema de crear una aplicación desde cero y centran sus talentos en lugar de las partes únicas y personalizadas de crear una nueva aplicación..
En este tutorial, aprendió cómo crear una interfaz con pestañas en Android usando el TabLayout y ViewPager API desde cero. También exploramos la forma fácil y rápida de usar las plantillas de Android Studio para crear una interfaz con pestañas.
Recomiendo encarecidamente consultar las pautas de diseño de material oficial de las pestañas para obtener más información sobre cómo diseñar y usar correctamente las pestañas en Android.
Para obtener más información sobre la codificación para Android, consulte algunos de nuestros otros cursos y tutoriales aquí en Envato Tuts+!
