Spanish B4X - Uso de custom fonts icons (SliderMenu)

[TILogistic]

Estimados,

Comparto un breve uso de fonts icons personalizados que es una alternativa a las imágenes como iconos.

ADJUNTO EJEMPLO PARA SU REVISIÓN.

Si desea crear sus propios icons fonts utilizar una de estas herramientas.

http://fontello.com/

https://icomoon.io/app/#/select

En este caso voy a usar iconmoon

SELECCION UNA DE TODAS LAS GRATIS:

Selecciono los iconos que deseo de las bibliotecas y cambio el tamaño 64 recuadro rojo. y click en generate fonts

Luego me muestra un preview con los iconos seleccionados y click en download para bajar los fonts generados.

Esto me me genera un archivo comprimido llamado icomoon.zip o bien ustedes seleccione el nombre.

Al descomprimir genera un directorio con el mismo nombre y dentro de este existe demo.html en donde vera el preview de iconos seleccionados, con su codigo y caracter especial.

ejemplo icono cloud es e901 y su carácter especial. en b4X seria 0xe901 anteponer 0x

dentro del directorio esta el archivos de icomoom.ttf (true type), este el archivo que se ocupa en B4X.

copie este archivo al directorio file de su proyecto.

y si desea usarlo en el diseñador agregue este archivo fonts al diseñador como muestra la imagen.

para usar iconos personalizados en el código:

B4A

    'set custom icons fonts
    Dim IconsFont As B4XFont
    IconsFont =  xui.CreateFont(Typeface.LoadFromAssets("icomoon.ttf"),64)

B4J

'custom fonts
    Dim IconsFont As B4XFont
    IconsFont= xui.CreateFont(fx.LoadFont(File.DirAssets,"icomoon.ttf",64),64)

Codigo ejemplo de uso

    'Iniliaze Menu
    B4XSlideMenu1.Initialize(Activity, Me, "SlideMenu", ActionBar.Height, 250)

    'Set imtems menu
    B4XSlideMenu1.AddItem(1,"Chat",     FontToBitmap(Chr(0xe914), IconsFont, 26, xui.Color_Black))
    B4XSlideMenu1.AddItem(2,"Photo",     FontToBitmap(Chr(0xe90b), IconsFont, 26, xui.Color_Black))
    B4XSlideMenu1.AddItem(3,"Map",         FontToBitmap(Chr(0xe912), IconsFont, 26, xui.Color_Black))
    B4XSlideMenu1.AddItem(4,"Routes",    FontToBitmap(Chr(0xe92e), IconsFont, 26, xui.Color_Black))
    B4XSlideMenu1.AddItem(5,"Mail",     FontToBitmap(Chr(0xe919), IconsFont, 26, xui.Color_Black))
    B4XSlideMenu1.AddItem(6,"Note",     FontToBitmap(Chr(0xe91c), IconsFont, 26, xui.Color_Black))
    B4XSlideMenu1.AddItem(7,"Setting",     FontToBitmap(Chr(0xe90a), IconsFont, 26, xui.Color_Black))

Fonts a bitmap

'Convert fonts a icon bitmap
Public Sub FontToBitmap (FontText As String, FontType As B4XFont , FontSize As Int, FontColor As Int) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 32dip, 32dip)
    Dim cvs1 As B4XCanvas
    cvs1.Initialize(p)
    Dim r As B4XRect = cvs1.MeasureText(FontText, xui.CreateFont2(FontType, FontSize))
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(FontText, cvs1.TargetRect.CenterX, BaseLine, xui.CreateFont2(FontType, FontSize), FontColor, "CENTER")
    cvs1.Invalidate
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub

Para mas detalle revise el ejemplo y encontrara otras propiedades.

NOTA la ventaja con esto es que no va tener muchos archivos de imagenes y con icons fonts solo tendra un archivo con los iconos que desea, ademas puede cambiar color y tamaño de los iconos como usted desee.

Ademas el archivo el tamaño del archivo de icons fonts es pequeño.

Y SUS APLICACIONES SE VERÁN MAS HERMOSAS,

Estoy atento a sus comentarios.

Saludos

 

[AnandGupta]

Very very useful. (I translated read it)
It should be in tutorial section to help new members too, hope Erel does it.
Thanks a lot.

Muy muy util. (Traduje lo leí)
Debería estar en la sección tutorial para ayudar a los nuevos miembros también, espero que Erel lo haga.
Muchas gracias.


Regards,

Anand

 

[asales]

Very nice! Thanks. Gracias.

 

[rasaliad]

Gracias por tu colaboración, después de muchos anos de conocer esta herramienta ahora es que la voy a usar y ese ejemplo que hiciste justo lo voy a necesitar.

De nuevo gracias por tu aporte.

 

[Pravee7094]

http://fontello.com/

https://icomoon.io/app/#/select

Hello,

If we download the icons from this website and use for commercial purpose(Playstore App), is there any copyright issues?

 

[TILogistic]

Hello,

If we download the icons from this website and use for commercial purpose(Playstore App), is there any copyright issues?

Fontello:
All font libraries are free SIL license

See:

Icomoon:
Free libraries are licensed under the MIT type, and other libraries are commercial.

 

[TILogistic]

You can upload other free font libraries and create a custom font mix.

Sample:

https://icons8.com/line-awesome

licensed:

 

[M.LAZ]

it will be great if support b4i

 

[TILogistic]

it will be great if support b4i

You can use this for b4x cross platform

[B4X] B4XPages + B4XDrawer

B4XDrawer v1.53 adds support for B4J. This is a good opportunity to create a B4XPages example using B4XDrawer. It does require some configuration so pay attention. The example is based on the three pages example...

www.b4x.com

[B4X] [XUI] xCustomListView - cross platform CustomListView

Update: As several other libraries depend on xCustomListView library, it is no longer recommended to use the code module. Use the library instead. There are several extension classes that add more features to xCLV. They are listed at the end of this post. Video tutorial: xCustomListView is...

www.b4x.com