Estilos FireMonkey, Parte 1: Personalización de la plantilla de estilo

Durante mi multi-dispositivo y FireUI CodeRage 9 sesión de esta semana, tengo varias preguntas sobre cómo crear un estilo FireMonkey personalizado. Yo pensaba que iba a seguir con una serie de blogs sobre este tema, el primero que cubre cómo personalizar las plantillas de estilo que nos ofrecen.

Paso 1: Abra el Diseñador Estilo Bitmap

El Diseñador de Estilo de mapa de bits se puede utilizar para crear sus propios estilos FireMonkey personalizado con soporte para diferentes resoluciones, como 1x y 2x para iOS, y 1x, 1.5x, 2x y 3x en Android. Para acceder al diseñador del estilo de mapa de bits, vaya a Herramientas-> Estilo Bitmap Diseñador en el IDE.

Paso 2: Crear un nuevo estilo

Dentro del estilo del diseñador de mapa de bits, seleccione para crear un nuevo estilo de iOS para FireMonkey.

Paso 3: Exportar el estilo de la imagen de la plantilla de iOS en el Diseñador de Estilo de mapa de bits

Paso 4: Modificar el gráfico en un programa de edición de imágenes

Abra el archivo style.png en su software de edición de imágenes, como Photoshop. Después de que haya terminado de hacer cambios, guarde el archivo actualizado como un archivo .png de nuevo.

• Opción a) Realizar cambios en gráfica y en archivo de texto .style (Paso # 8)

Aumentar la altura de la gráfica pestaña seleccionada. Usted tendrá que hacer este cambio, tanto en el 1x y 2x gráfico. Ambos pueden ser exportados desde el Diseñador Estilo de mapa de bits y se nombran 'style.png'.

Al hacer los cambios de estilo de TRectAnimation (tal como se documenta en el paso # 8 a continuación), la altura de la pestaña normal (inactivo) debe ser la misma que la altura de la pestaña activa en su gráfico style.png actualizado.

• Opción b) Hacer cambios en los gráficos y omita el paso # 8

Aumentar la altura de la pestaña activa. Para los (inactivo) gráfico normal de pestaña, dejar el espacio vacío en la parte superior. Esto se refleja en las dos imágenes a continuación. Omita el paso # 8.

Paso 5: Importar el gráfico actualizado en el Diseñador de Estilo de mapa de bits

En el Diseñador de Estilo de mapa de bits, expanda el nodo Imágenes. Seleccione el archivo style.png y haga clic en el botón "Actualizar" en la barra de herramientas. Seleccione su archivo png actualizado.

Paso 6: Mapa del gráfico actualizado de los controles en el Diseñador de Estilo de mapa de bits

Establezca las propiedades de mapa de bits para el gráfico ficha. Para cambiar la selección de mapa de bits, CTRL + clic para redefinir la máscara de imagen.

Para la opción b anterior, establezca la Bitmap (estado normal / inactivo) y BitmapFocused (estados activos) propiedades del objeto de la lengüeta con la misma altura en el Diseñador de Estilo de mapa de bits.

Paso 7: Guarde la plantilla como un archivo .style.

Antes de guardar el archivo como el archivo .style, guardar los cambios en el estilo como un archivo .vsf (Archivo-> Guardar As-> VCL Estilo / FMX plantilla de estilo). .vsf es el formato de plantilla para estilos FireMonkey en el Diseñador de Estilo de mapa de bits, lo que significa que puede volver a abrir su estilo en el estilo del diseñador si desea hacer cambios en el futuro.

A continuación, guarde su estilo como un archivo .style.

Paso 8: Personalizar Estilo de Comportamiento (sólo es necesario con la Opción 4 bis)

Abra el archivo .style en el editor de texto de su elección. Añadir TRectAnimation para la propiedad Relleno para TTabStyleObject dentro de todas las secciones de elementos ficha en el archivo de estilo ("tabitemstyle", "'tabitemcustom'", "tabitemmore" y otros)

objetar TLayout
StyleName = 'tabitemstyle'
objeto TTabStyleObject
objeto TRectAnimation
Duración = 0,000009999999747379
PropertyName = 'padding'
StartValue.Left = 0
StartValue.Top = 5
StartValue.Right = 0
= 0 StartValue.Bottom
StopValue.Top = 0
= 0 StopValue.Left
StopValue .RIGHT = 0
StopValue.Bottom = 0
Activación = 'IsSelected = True'
TriggerInverse = 'IsSelected = False'
extremo
final

Paso 9: Aplicar el estilo

Caída de un TTabControl en su forma y alinearlo al cliente. Haga clic en el control y añadir varios TTabItems a ella. Coloque una TStyleBook en su forma. Cargue el archivo .style personalizado que acaba de editar a ella. En el panel Estructura, seleccione su formulario, establezca la propiedad manual de estilo para StyleBook1 en el Inspector de Objetos. Eso aplicar el estilo personalizado a su aplicación. Despliegue su aplicación en su dispositivo iOS.

Esto es lo que el estilo se parece en tiempo de ejecución: