Android TV Leanback: HeadersSupportFragment: una guía detallada

Conozca los entresijos de las pantallas de inicio de sus usuarios para crear una experiencia más atractiva y personalizada

Foto de Nabil Saleh en Unsplash Comprender el funcionamiento interno de las API de Leanback a veces es bastante difícil, pero nosotros, como desarrolladores, debemos hacerlo para asegurarnos de poder crear aplicaciones que se vean y se sientan bien para que se comporten nuestros usuarios. En esta publicación, profundizaremos en HeadersSupportFragment, que es parte de BrowseSupportFragment y casi siempre es la primera pieza de contenido que los usuarios ven en una aplicación de Android TV. Aprenderemos cómo crearlo, cómo se comporta y cómo podemos personalizarlo. Como se mencionó en la introducción, HeadersSupportFragment es parte de BrowseSupportFragment. BrowseSupportFragment suele ser la primera pantalla que ve un usuario al abrir una aplicación de Android TV y le permite navegar y descubrir contenido.BrowseSupportFragment con encabezados visibles

Creación y configuración de HeadersSupportFragment

BrowseSupportFragment tiene una función llamada onCreateHeadersSupportFragment() que es responsable de devolver una instancia de HeadersSupportFragment para usar dentro de él. Es una función pública, por lo que es posible anularla si desea proporcionar una implementación personalizada de su propio HeadersSupportFragment.public HeadersSupportFragment onCreateHeadersSupportFragment() {return new HeadersSupportFragment();}todavía dentro de BrowseSupportFragment.onCreateView() después. el HeadersSupportFragment se agrega a su contenedor mediante una FragmentTransaction ejecutada por BrowseSupportFragment. Entonces suceden los siguientes pasos:

• Actualice la visibilidad de HeadersSupportFragment según el estado pasado a BrowseSupportFragment.setHeaderState(estado). Los estados disponibles son:

/** El fragmento de encabezado está habilitado y se muestra de forma predeterminada. */public static final int HEADERS_ENABLED = 1;/** El fragmento de encabezado está habilitado y oculto de forma predeterminada. */public static final int HEADERS_HIDDEN = 2;/** El fragmento de encabezado está deshabilitado y nunca se muestra. */public static final int HEADERS_DISABLED = 3;

• Llama a HeadersSupportFragment.setPresenterSelector() y pasa el PresenterSelector proporcionado a BrowseSupportFragment.setHeaderPresenterSelector(). Este PresenterSelector debe admitir al menos tres tipos de elementos. Estos son DividerRow, SectionRow y Row.

nota: HeadersSupportFragment ya tiene implementaciones listas para usar para estos tipos de fila, pero podemos proporcionar implementaciones personalizadas. Dado que HeaderSupportFragment es una subclase de BaseRowSupportFragment y personaliza sus filas, solo es cuestión de tener un presentador personalizado para sus elementos.

• HeadersSupportFragment tiene su adaptador, OnHeaderViewSelectedListener y OnHeaderClickedListener establecidos. El adaptador es responsable de entregar los artículos. La implementación predeterminada para OnHeaderViewSelectedLister modifica o selecciona el contenido de BrowseSupportFrament. Al igual que con OnHeaderClickedListener, su implementación predeterminada oculta HeaderSupportFragment cuando se hace clic en un elemento.
• El color de fondo del encabezado SupportFragment se establece con el color proporcionado para BrowseSupportFragment.setBrandColor(). Por ejemplo:

override fun onCreateHeadersSupportFragment(): HeadersSupportFragment { // Esto también se puede hacer a través de onViewCreated(). brandColor = Color.REDreturn super.onCreateHeadersSupportFragment()}

• En este punto, BrowseSupportFragment.onViewCreated() está completo y se llama a BrowseSupportFragment.onStart(). Dentro de onStart(), la alineación de HeadersSupportFragment se determina en función de una propiedad de diseño Leanback llamada browserRowsMarginTop. Como sugiere el nombre, BrowseSupportFragment también utiliza esta propiedad para establecer el margen superior de la primera fila.
• Si desea cambiar la alineación de los elementos HeadersSupportFragment, debe hacerlo después de llamar a super.onCreate().

anulación divertida onStart() {super.onStart()headersSupportFragment.setAlignment(400)}Nota: La idea de que tanto HeadersSupportFragment como BrowseSupportFragment usen el mismo valor de browserRowsMarginTop para establecer su margen superior les ayuda a alinear mejor la fila seleccionada en el encabezado con la fila seleccionada en BrowseSupportFragment cuando se usa BrowseSupportFragment para mostrar solo ListRows. Si BrowseSupportFragment muestra un PageRow, esta alineación no importa, ya que el contenido de PageRow llena todo el fragmento. Cubriremos PageRows y los detalles de BrowseSupportFragment en otra publicación. ¡Sígueme para recibir una notificación cuando se publique!

• Puede habilitar o deshabilitar los encabezados de un BrowseSupportFragment llamando a BrowseSupportFragment.setHeaderState(state) y pasando el estado deseado.
• Cambie el color de fondo de HeadersSupportFragment llamando a HeadersSupportFragment.setBrandColor(color).
• Modifique o proporcione nuevos tipos de presentadores para su HeadersSupportFragment.
• Cambie las implementaciones OnHeaderViewSelectedListener y OnHeaderClickListener de su HeadersSupportFragment.

Como ya hemos visto, HeadersSupportFragment debe admitir tres tipos diferentes de elementos: DividerRow, SectionRow y Row. Observe cómo se muestran estos elementos con sus implementaciones predeterminadas de Presenter.BrowseSupportFragment con tres tipos de elementos en HeadersSupportFragment

IconSectionRow e IconSectionPresenter

Para mostrar cómo podemos personalizar los elementos de un HeadersSupportFragment, creemos un IconSectionPresenter que representa un SectionRow con una imagen a la izquierda de su texto. Comencemos por crear una subclase de SectionRow que contenga la ID de un Drawable para usar en la fila. clase IconSectionRow(@DrawableRes val icon: Int,headerItem: HeaderItem) : SectionRow(headerItem)Después de eso, necesitamos crear un presentador que será in puede realizar la creación y vinculación de un IconSectionRow. Para hacer esto, extendemos RowHeaderPresenter y solo agregamos algunas filas. Y aquí está el R.layout.icon_section_row.Nota: Al diseñar filas no enfocables, como divisores y secciones, deshabilite el enfoque en la vista raíz. De lo contrario, pueden obtener el foco y, a veces, esto puede conducir a una ClassCastException según el tipo de su elemento y el ViewHolder utilizado para él, ya que HeadersSupportFragment intenta convertir los ViewHolders de los elementos seleccionados en RowHeaderPresenter.ViewHolder.

DividerRow y SpaceDividerPresenter

De manera similar a cómo creamos un presentador personalizado para theSectionRow, creemos uno para DividerRow. Crearemos un presentador que muestre la línea divisoria como un espacio en lugar de una línea de 1dp. En este caso, solo necesitamos un presentador personalizado porque el elemento, DividerRow, no necesita contener ninguna información adicional (como el icono de IconSectionRow).

Agregar moderadores personalizados

Por último, debemos agregar los dos presentadores recién creados al selector de presentadores HeadersSupportFragment. Asegúrese de hacer esto solo después de que se complete la llamada BrowseSupportFragment.onCreateView(), ya que HeadersSupportFragment solo se instancia dentro de él. En su BrowseSupportFragment o en su implementación personalizada de HeadersSupportFragment, haga lo siguiente:

Atributos administrados por temas

El tema de su aplicación proporciona algunos atributos de HeadersSupportFragment. Al crear un tema para una aplicación de Android TV, debe comenzar con Theme.Leanback. Este tema base tiene todas las propiedades que usan los componentes de Leanback para establecer tamaños, bordes, relleno, colores y más. A continuación se muestra una lista de atributos utilizados por HeadersSupportFragment.

• lb_browse_headers_width: el ancho del HeadersSupportFragment.
• lb_browse_headers_padding_end: final del relleno HeadersSupportFragment.
• lb_browse_headers_z: elevación de la vista raíz de HeadersSupportFragment.
• lb_browse_header_fading_length: ancho del borde de desvanecimiento. El borde difuminado cubre el final del texto del encabezado si el texto es demasiado largo.
• lb_headers_right_fading: fondo dibujable utilizado por el borde de desvanecimiento.
• headersVerticalGridStyle: estilo para VerticalGridView del fragmento HeadersSupport. El tema predeterminado está configurado como se muestra a continuación:

• lb_section_header & lb_header: archivo de diseño predeterminado para las vistas SectionRow y Row respectivamente.

Nota: En la aplicación de muestra, ninguna de estas propiedades de tema ha cambiado.¡Gracias por leer esta publicación! Asegúrese de revisar la aplicación de muestra creada específicamente para este artículo. Eche un vistazo a la documentación oficial de HeadersSupportFragment. Consulte también esta lista que hice usando mis artículos de la serie Android TV Leanback:

📺 Guía de recuperación de Android TV

También puedes contactarme Gorjeo.