Spanish B4X - Uso de custom fonts icons (SliderMenu)

TILogistic

Expert
Licensed User
Longtime User
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

1585554647118.png


SELECCION UNA DE TODAS LAS GRATIS:

1585554862385.png


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

1585555089502.png


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

1585555405712.png



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.


1585555937612.png


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

1585556091460.png


para usar iconos personalizados en el código:

B4A


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

B4J

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

Codigo ejemplo de uso

B4X:
    '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

B4X:
'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.

2.jpg
1.jpg



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
 

Attachments

  • 1585554587350.png
    1585554587350.png
    92.9 KB · Views: 455
  • 1585554768179.png
    1585554768179.png
    107.2 KB · Views: 451
  • 1585554812376.png
    1585554812376.png
    107.2 KB · Views: 469
  • 1585555035601.png
    1585555035601.png
    82.2 KB · Views: 436
  • 1585555201088.png
    1585555201088.png
    82.9 KB · Views: 463
  • 1585555250294.png
    1585555250294.png
    82.9 KB · Views: 421
  • 1585556021231.png
    1585556021231.png
    93 KB · Views: 436
  • 2.jpg
    2.jpg
    151.2 KB · Views: 452
  • 1.png
    1.png
    142.2 KB · Views: 449
  • B4XSlideMenu.zip
    24.1 KB · Views: 699
  • icomoon.zip
    253.3 KB · Views: 734
Last edited:

AnandGupta

Expert
Licensed User
Longtime User
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
 

rasaliad

Member
Licensed User
Longtime User
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.
 

TILogistic

Expert
Licensed User
Longtime User
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:
1635025981990.png

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

1635025065592.png
 
Last edited:

TILogistic

Expert
Licensed User
Longtime User
it will be great if support b4i
You can use this for b4x cross platform
 
Top