Personaliza la barra de herramientas con superposiciones de recursos en tiempo de ejecución

Descripción general del diseño básico

La barra de herramientas car-ui-lib se personaliza mediante el archivo de diseño car_ui_base_layout_toolbar.xml . Se llama barra de herramientas *diseño base* porque este archivo de diseño contiene un FrameLayout con id car_ui_base_layout_content_container , que contendrá todo el contenido de la aplicación poco después de que se infle el diseño. Esta estructura permite al OEM colocar la barra de herramientas en ubicaciones distintas a la parte superior de la pantalla.

Posibles diseños
Diseño de barra de herramientas 1Diseño de barra de herramientas 2Diseño de barra de herramientas 3
Diseño de barra de herramientas 4Diseño de la barra de herramientas 5Diseño de la barra de herramientas 6

Al cambiar los parámetros de diseño en car_ui_base_layout_content_container , la aplicación se puede comprimir en un área más pequeña para dejar espacio para la barra de herramientas. Sin embargo, algunas personalizaciones pueden requerir que la barra de herramientas sea transparente y se superponga sobre la aplicación. En este caso, las vistas se pueden etiquetar con car_ui_top/bottom/left/right_inset . Si car-ui-lib detecta una vista con dicha etiqueta, comunica la posición y las dimensiones de esa vista a la aplicación, para que pueda sangrar su contenido hacia adentro en esa cantidad, pero aún así mantener un fondo razonable en el espacio debajo de la barra de herramientas. . Por ejemplo, la mayoría de las aplicaciones tendrán el primer elemento en su CarUiRecyclerView comenzando debajo de los recuadros especificados, pero aún serán visibles detrás de la barra de herramientas cuando el usuario se desplace hacia abajo.

Soporte giratorio

Para admitir controladores giratorios, el diseño base debe contener un FocusParkingView lo antes posible en el diseño. Esta vista es la que se enfoca cuando no hay ningún foco visible para el usuario. La barra de herramientas también debe estar envuelta en un FocusParkingView , que especifica que es una zona de desplazamiento separada para el controlador giratorio. Si no está incluido en FocusParkingView, entonces el usuario no puede interactuar con la barra de herramientas con el controlador giratorio.

Pestañas

Las pestañas de la barra de herramientas se personalizan mediante los archivos de diseño car_ui_toolbar_tab_item.xml o car_ui_toolbar_tab_item_flexible.xml . No hay diferencia funcional entre los archivos, el recurso booleano car_ui_toolbar_tab_flexible_layout determina cuál se utiliza. Como resultado, se recomienda mantener car_ui_toolbar_tab_flexible_layout configurado en false y personalizar solo el archivo de diseño normal.

El ImageView de la pestaña se teñirá con el color car_ui_toolbar_tab_item_selector en el código Java, por lo que car_ui_toolbar_tab_item_selector se debe personalizar junto con el diseño. Las aplicaciones también pueden solicitar que los íconos de sus pestañas no se tiñan con este color.

TextView de la pestaña tiene su apariencia de texto configurada en TextAppearance.CarUi.Widget.Toolbar.Tab o TextAppearance.CarUi.Widget.Toolbar.Tab.Selected en código Java, por lo que la apariencia de texto configurada en el archivo de diseño no se aplicará. Estos estilos también deben personalizarse.

MenuItems son los botones en la esquina superior derecha de la barra de herramientas predeterminada. Pueden ser texto, íconos, íconos y texto, o interruptores. Todas estas variaciones son parte del archivo de diseño car_ui_toolbar_menu_item , ya que los MenuItems deben poder cambiar entre cada formulario si la aplicación lo solicita.

MenuItems puede ser primario , lo que infla un archivo de diseño diferente: car_ui_toolbar_menu_item_primary . Un elemento de menú principal debe verse visualmente distinto del elemento de menú normal, por ejemplo mediante un botón con o sin bordes. De forma predeterminada, car_ui_toolbar_menu_item_primary simplemente redirige a car_ui_toolbar_menu_item , por lo que tienen el mismo aspecto.

MenuItems se pueden activar , que es otro estado visual que indica que este elemento de menú está alternado. Este estado se implementa llamando setActivated(true) en la vista MenuItem, lo que agrega el estado state_activated a todos los elementos dibujables en las vistas de MenuItem. Se puede responder a este estado dibujable con un selector dibujable en la superposición de recursos en tiempo de ejecución (RRO).

MenuItems pueden tener restricción de UX cuando el vehículo está en movimiento. UX restringido es solo otro estado dibujable como activado , pero esta vez el estado se define en la aplicación en lugar del marco de Android. Esto significa que el atributo state_ux_restricted también debe superponerse con el RRO, de modo que el atributo definido en el RRO coincida con el atributo definido en la aplicación.

La barra de búsqueda está contenida en un archivo de diseño car_ui_toolbar_search_view separado, para mejorar el rendimiento de inflación del diseño para aplicaciones que no necesitan una barra de búsqueda. El FrameLayout con id car_ui_toolbar_search_view_container contendrá la barra de búsqueda cuando esté inflada.