B4A Library [B4X] [XUI] AS Label - CrossPlatform Label

This is a simple label view, in IOS roundings are removed when resizing or colors are not displayed properly. This can be fixed by placing a panel under the label, this view does the work for you.
Just set the properties you want in the designer like in a normal label.

ASLabel
Author: Alexander Stolte
Version: 1.02

  • ASLabel
    • Events:
      • Click
      • LongClick
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getLabel As Label
        gets the native label
      • getxLabel As B4XView
        gets the native label as B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
    • Properties:
      • Label As Label [read only]
        gets the native label
      • xLabel As B4XView [read only]
        gets the native label as B4XView
Simulator Screen Shot - iPhone 12 Pro Max - 2021-05-14 at 21.20.30.png

B4X:
    ASLabel1.IconPosition = ASLabel1.IconPosition_LeftText
    ASLabel1.Icon = ASLabel1.FontToBitmap(Chr(0xE859),True,20,xui.Color_White)
20230729_180148.gif


Changelog
  • 1.00
    • Release
  • 1.01
    • BugFix - ClickEvent is now working on B4A and B4J
  • 1.02
    • Add set and get Enabled - Disabled or Enabled the label click events
  • 1.03
    • Add Icon support
  • 1.04
    • Add get and set Left
    • Add get and set Top
    • Add get and set Widt
    • Add get and set Height
    • Add get and set Text
    • Add get and set TextColor
    • Add SetColorAndBorder
    • Add SetTextAlignment
    • Add get and set Visible
    • Add get and set Font
    • Add get and set TextSize
Have Fun :)
 

Attachments

  • AS Label.zip
    9.4 KB · Views: 253
  • ASLabel.b4xlib
    2.7 KB · Views: 215
Last edited:

dongsool

Member
Licensed User
Longtime User
Thank you for providing the library.
I took a test.
Click event is not triggered.
 

Attachments

  • AS Label Test.zip
    9.9 KB · Views: 126

Lucas Siqueira

Active Member
Licensed User
Longtime User
This is a simple label view, in IOS roundings are removed when resizing or colors are not displayed properly. This can be fixed by placing a panel under the label, this view does the work for you.
Just set the properties you want in the designer like in a normal label.

ASLabel
Author: Alexander Stolte
Version: 1.02

  • ASLabel
    • Events:
      • Click
      • LongClick
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getLabel As Label
        gets the native label
      • getxLabel As B4XView
        gets the native label as B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
    • Properties:
      • Label As Label [read only]
        gets the native label
      • xLabel As B4XView [read only]
        gets the native label as B4XView
View attachment 113412
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFix - ClickEvent is now working on B4A and B4J
  • 1.02
    • Add set and get Enabled - Disabled or Enabled the label click events
Have Fun :)


Congratulations on your libraries, it helps to have unique formatting on b4a, b4i, b4j.
(in B4I, a native label with a background color and a rounded border has a problem not respecting the rounded corner)

Suggestion, add icon to asLabel library.

I took the liberty of modifying your library to have the icon and positioning (Left, Left Text, Center, Right Text, Right),
put 'modified************************** in the part that was modified.


20230729_180148.gif


B4X:
#Event: Click
#If B4A Or B4I
#Event: LongClick
#End If

Sub Class_Globals
    Private mEventName As String 'ignore
    Private mCallBack As Object 'ignore
    Public mBase As B4XView
    Private xpnlBase As B4XView
    Private xui As XUI 'ignore
    Public Tag As Object
    Private mEnabled As Boolean = True
    Private xlbl_main As B4XView
  
'modified**************************
    Private xiv_Icon As B4XView
    Private mIcon As B4XBitmap
    Private mIconHeight As Double = 30dip
    Private mIconGap As Double = 16dip
    Private mIconPosition As String = "Left Text"
End Sub

Public Sub Initialize (Callback As Object, EventName As String)
    mEventName = EventName
    mCallBack = Callback
End Sub

'Base type must be Object
Public Sub DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
    mBase = Base
    #If B4I
    Lbl.UserInteractionEnabled = False
    #End If
    xpnlBase = xui.CreatePanel("base")
    xpnlBase.Color = xui.Color_Transparent
    xlbl_main = Lbl
    mBase.AddView(xpnlBase,0,0,0,0)
    mBase.AddView(xlbl_main,0,0,0,0)
    Tag = mBase.Tag
    mBase.Tag = Me
  
'modified**************************
    xiv_Icon = CreateImageView("")
    mBase.AddView(xiv_Icon,0,0,0,0)

    #If B4A
    Base_Resize(mBase.Width,mBase.Height)
    #End If
  
End Sub

Public Sub Base_Resize (Width As Double, Height As Double)
    xpnlBase.SetLayoutAnimated(0,0,0,Width,Height)
    xlbl_main.SetLayoutAnimated(0,0,0,Width,Height)  
'modified**************************
    setIconPosition(mIconPosition)
End Sub
'gets the native label
Public Sub getLabel As Label
    Return xlbl_main
End Sub
'gets the native label as B4XView
Public Sub getxLabel As B4XView
    Return xlbl_main
End Sub

#If B4J
Private Sub base_MouseClicked (EventData As MouseEvent)
    Click
End Sub
#Else
Private Sub base_Click
    Click
End Sub

Private Sub base_LongClick
    LongClick
End Sub
#End If

'Disabled or Enabled the label click events
Public Sub setEnabled(Enabled As Boolean)
    mEnabled = Enabled
End Sub

Public Sub getEnabled As Boolean
    Return mEnabled
End Sub

'modified**************************
Public Sub setIcon(Icon As B4XBitmap)
    mIcon = Icon
    Dim scale As Float = 1
    #If B4I
    scale = GetDeviceLayoutValues.NonnormalizedScale
    #End If
    xiv_Icon.SetBitmap(mIcon.Resize((mIconHeight*scale),(mIconHeight*scale),True))
End Sub

Public Sub getIcon As B4XBitmap
    Return mIcon
End Sub

Public Sub setIconHeight(Height1 As Double)
    mIconHeight = Height1
    setIconPosition(mIconPosition)
End Sub

Public Sub getIconHeight As Double
    Return mIconHeight
End Sub

Public Sub setIconGap(Gap1 As Double)
    mIconGap = Gap1
    setIconPosition(mIconPosition)
End Sub

Public Sub getIconGap As Double
    Return mIconGap
End Sub

'Position (Left, Left Text, Center, Right Text, Right)
Public Sub setIconPosition(Position1 As String)
    mIconPosition = Position1
  
    Dim Width As Double = xpnlBase.Width
    Dim Height As Double = xpnlBase.Height
  
    Dim Top As Double = ((Height/2)-(mIconHeight/2))
    Dim Left As Double = 0
  
    If mIconPosition.ToLowerCase = "center" Then
        Left = (Width/2) - (mIconHeight/2)
  
    Else If mIconPosition.ToLowerCase = "left text" Then
        Dim widthText As Double = MeasureTextWidth(xlbl_main.Text, xlbl_main.Font)
        Left = (Width/2) - (widthText/2) - mIconGap - mIconHeight
  
    Else If mIconPosition.ToLowerCase = "right text" Then
        Dim widthText As Double = MeasureTextWidth(xlbl_main.Text, xlbl_main.Font)
        Left = (Width/2) + (widthText/2) + mIconGap
      
    Else If mIconPosition.ToLowerCase = "left" Then
        Left = mIconGap
      
    Else If mIconPosition.ToLowerCase = "right" Then
        Left = Width - mIconGap - mIconHeight
      
    Else If mIconPosition.ToLowerCase = "none" Then
        xiv_Icon.Visible = False
      
    End If
  
    If Not(xiv_Icon.Visible) Then
        xiv_Icon.Visible = True
    End If
  
    xiv_Icon.SetLayoutAnimated(0, Left, Top, mIconHeight, mIconHeight)
End Sub

Public Sub getIconPosition As String
    Return mIconPosition
End Sub


'Private Sub base_Touch(Action As Int, X As Float, Y As Float)
'  
'End Sub

#Region Events

Private Sub Click
    If mEnabled = False Then Return
    If xui.SubExists(mCallBack, mEventName & "_Click", 0) Then
        CallSub(mCallBack, mEventName & "_Click")
    End If
End Sub

Private Sub LongClick
    If mEnabled = False Then Return
    If xui.SubExists(mCallBack, mEventName & "_LongClick", 0) Then
        CallSub(mCallBack, mEventName & "_LongClick")
    End If
End Sub

#End Region

'modified**************************
#Region Functions

'https://www.b4x.com/android/forum/threads/fontawesome-to-bitmap.95155/post-603250
Public Sub FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color 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 fnt As B4XFont
    If IsMaterialIcons Then fnt = xui.CreateMaterialIcons(FontSize) Else fnt = xui.CreateFontAwesome(FontSize)
    Dim r As B4XRect = cvs1.MeasureText(text, fnt)
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(text, cvs1.TargetRect.CenterX, BaseLine, fnt, color, "CENTER")
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub

Private Sub CreateImageView(EventName As String) As B4XView 'Ignore
    Dim iv As ImageView
    iv.Initialize(EventName)
    Return iv
End Sub

Private Sub MeasureTextWidth(Text As String, Font1 As B4XFont) As Int
#If B4A
    Private bmp As Bitmap
    bmp.InitializeMutable(2dip, 2dip)
    Private cvs As Canvas
    cvs.Initialize2(bmp)
    Return cvs.MeasureStringWidth(Text, Font1.ToNativeFont, Font1.Size) + 4dip
#Else If B4i
    Return Text.MeasureWidth(Font1.ToNativeFont) + 4dip
#Else If B4J
    Dim jo As JavaObject
    jo.InitializeNewInstance("javafx.scene.text.Text", Array(Text))
    jo.RunMethod("setFont",Array(Font1.ToNativeFont))
    jo.RunMethod("setLineSpacing",Array(0.0))
    jo.RunMethod("setWrappingWidth",Array(0.0))
    Dim Bounds As JavaObject = jo.RunMethod("getLayoutBounds",Null)
    Return Bounds.RunMethod("getWidth",Null) + 4dip
#End If
End Sub

#End Region
 

Attachments

  • ASLabel.bas
    5.9 KB · Views: 123
Last edited:

khandah

Member
This is a simple label view, in IOS roundings are removed when resizing or colors are not displayed properly. This can be fixed by placing a panel under the label, this view does the work for you.
Just set the properties you want in the designer like in a normal label.

ASLabel
Author: Alexander Stolte
Version: 1.02

  • ASLabel
    • Events:
      • Click
      • LongClick
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getLabel As Label
        gets the native label
      • getxLabel As B4XView
        gets the native label as B4XView
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
    • Properties:
      • Label As Label [read only]
        gets the native label
      • xLabel As B4XView [read only]
        gets the native label as B4XView
View attachment 113412
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFix - ClickEvent is now working on B4A and B4J
  • 1.02
    • Add set and get Enabled - Disabled or Enabled the label click events
Have Fun :)
When trying to download ASLabel, I am having this message : You do not have permission to view this page or perform this action. Is it still available ?
 

Lucas Siqueira

Active Member
Licensed User
Longtime User
Congratulations on your libraries, it helps to have unique formatting on b4a, b4i, b4j.
(in B4I, a native label with a background color and a rounded border has a problem not respecting the rounded corner)

Suggestion, add icon to asLabel library.

I took the liberty of modifying your library to have the icon and positioning (Left, Left Text, Center, Right Text, Right),
put 'modified************************** in the part that was modified.


View attachment 144201

B4X:
#Event: Click
#If B4A Or B4I
#Event: LongClick
#End If

Sub Class_Globals
    Private mEventName As String 'ignore
    Private mCallBack As Object 'ignore
    Public mBase As B4XView
    Private xpnlBase As B4XView
    Private xui As XUI 'ignore
    Public Tag As Object
    Private mEnabled As Boolean = True
    Private xlbl_main As B4XView
 
'modified**************************
    Private xiv_Icon As B4XView
    Private mIcon As B4XBitmap
    Private mIconHeight As Double = 30dip
    Private mIconGap As Double = 16dip
    Private mIconPosition As String = "Left Text"
End Sub

Public Sub Initialize (Callback As Object, EventName As String)
    mEventName = EventName
    mCallBack = Callback
End Sub

'Base type must be Object
Public Sub DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
    mBase = Base
    #If B4I
    Lbl.UserInteractionEnabled = False
    #End If
    xpnlBase = xui.CreatePanel("base")
    xpnlBase.Color = xui.Color_Transparent
    xlbl_main = Lbl
    mBase.AddView(xpnlBase,0,0,0,0)
    mBase.AddView(xlbl_main,0,0,0,0)
    Tag = mBase.Tag
    mBase.Tag = Me
 
'modified**************************
    xiv_Icon = CreateImageView("")
    mBase.AddView(xiv_Icon,0,0,0,0)

    #If B4A
    Base_Resize(mBase.Width,mBase.Height)
    #End If
 
End Sub

Public Sub Base_Resize (Width As Double, Height As Double)
    xpnlBase.SetLayoutAnimated(0,0,0,Width,Height)
    xlbl_main.SetLayoutAnimated(0,0,0,Width,Height) 
'modified**************************
    setIconPosition(mIconPosition)
End Sub
'gets the native label
Public Sub getLabel As Label
    Return xlbl_main
End Sub
'gets the native label as B4XView
Public Sub getxLabel As B4XView
    Return xlbl_main
End Sub

#If B4J
Private Sub base_MouseClicked (EventData As MouseEvent)
    Click
End Sub
#Else
Private Sub base_Click
    Click
End Sub

Private Sub base_LongClick
    LongClick
End Sub
#End If

'Disabled or Enabled the label click events
Public Sub setEnabled(Enabled As Boolean)
    mEnabled = Enabled
End Sub

Public Sub getEnabled As Boolean
    Return mEnabled
End Sub

'modified**************************
Public Sub setIcon(Icon As B4XBitmap)
    mIcon = Icon
    Dim scale As Float = 1
    #If B4I
    scale = GetDeviceLayoutValues.NonnormalizedScale
    #End If
    xiv_Icon.SetBitmap(mIcon.Resize((mIconHeight*scale),(mIconHeight*scale),True))
End Sub

Public Sub getIcon As B4XBitmap
    Return mIcon
End Sub

Public Sub setIconHeight(Height1 As Double)
    mIconHeight = Height1
    setIconPosition(mIconPosition)
End Sub

Public Sub getIconHeight As Double
    Return mIconHeight
End Sub

Public Sub setIconGap(Gap1 As Double)
    mIconGap = Gap1
    setIconPosition(mIconPosition)
End Sub

Public Sub getIconGap As Double
    Return mIconGap
End Sub

'Position (Left, Left Text, Center, Right Text, Right)
Public Sub setIconPosition(Position1 As String)
    mIconPosition = Position1
 
    Dim Width As Double = xpnlBase.Width
    Dim Height As Double = xpnlBase.Height
 
    Dim Top As Double = ((Height/2)-(mIconHeight/2))
    Dim Left As Double = 0
 
    If mIconPosition.ToLowerCase = "center" Then
        Left = (Width/2) - (mIconHeight/2)
 
    Else If mIconPosition.ToLowerCase = "left text" Then
        Dim widthText As Double = MeasureTextWidth(xlbl_main.Text, xlbl_main.Font)
        Left = (Width/2) - (widthText/2) - mIconGap - mIconHeight
 
    Else If mIconPosition.ToLowerCase = "right text" Then
        Dim widthText As Double = MeasureTextWidth(xlbl_main.Text, xlbl_main.Font)
        Left = (Width/2) + (widthText/2) + mIconGap
     
    Else If mIconPosition.ToLowerCase = "left" Then
        Left = mIconGap
     
    Else If mIconPosition.ToLowerCase = "right" Then
        Left = Width - mIconGap - mIconHeight
     
    Else If mIconPosition.ToLowerCase = "none" Then
        xiv_Icon.Visible = False
     
    End If
 
    If Not(xiv_Icon.Visible) Then
        xiv_Icon.Visible = True
    End If
 
    xiv_Icon.SetLayoutAnimated(0, Left, Top, mIconHeight, mIconHeight)
End Sub

Public Sub getIconPosition As String
    Return mIconPosition
End Sub


'Private Sub base_Touch(Action As Int, X As Float, Y As Float)
' 
'End Sub

#Region Events

Private Sub Click
    If mEnabled = False Then Return
    If xui.SubExists(mCallBack, mEventName & "_Click", 0) Then
        CallSub(mCallBack, mEventName & "_Click")
    End If
End Sub

Private Sub LongClick
    If mEnabled = False Then Return
    If xui.SubExists(mCallBack, mEventName & "_LongClick", 0) Then
        CallSub(mCallBack, mEventName & "_LongClick")
    End If
End Sub

#End Region

'modified**************************
#Region Functions

'https://www.b4x.com/android/forum/threads/fontawesome-to-bitmap.95155/post-603250
Public Sub FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color 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 fnt As B4XFont
    If IsMaterialIcons Then fnt = xui.CreateMaterialIcons(FontSize) Else fnt = xui.CreateFontAwesome(FontSize)
    Dim r As B4XRect = cvs1.MeasureText(text, fnt)
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(text, cvs1.TargetRect.CenterX, BaseLine, fnt, color, "CENTER")
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub

Private Sub CreateImageView(EventName As String) As B4XView 'Ignore
    Dim iv As ImageView
    iv.Initialize(EventName)
    Return iv
End Sub

Private Sub MeasureTextWidth(Text As String, Font1 As B4XFont) As Int
#If B4A
    Private bmp As Bitmap
    bmp.InitializeMutable(2dip, 2dip)
    Private cvs As Canvas
    cvs.Initialize2(bmp)
    Return cvs.MeasureStringWidth(Text, Font1.ToNativeFont, Font1.Size) + 4dip
#Else If B4i
    Return Text.MeasureWidth(Font1.ToNativeFont) + 4dip
#Else If B4J
    Dim jo As JavaObject
    jo.InitializeNewInstance("javafx.scene.text.Text", Array(Text))
    jo.RunMethod("setFont",Array(Font1.ToNativeFont))
    jo.RunMethod("setLineSpacing",Array(0.0))
    jo.RunMethod("setWrappingWidth",Array(0.0))
    Dim Bounds As JavaObject = jo.RunMethod("getLayoutBounds",Null)
    Return Bounds.RunMethod("getWidth",Null) + 4dip
#End If
End Sub

#End Region


Please implement this tweak when possible.

Their libraries are fantastic.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.03
    • Add Icon support
Special thanks to @Lucas Siqueira
20230729_180148.gif

B4X:
    ASLabel1.IconPosition = ASLabel1.IconPosition_LeftText
    ASLabel1.Icon = ASLabel1.FontToBitmap(Chr(0xE859),True,20,xui.Color_White)
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.04
    • Add get and set Left
    • Add get and set Top
    • Add get and set Width
    • Add get and set Height
    • Add get and set Text
    • Add get and set TextColor
    • Add SetColorAndBorder
    • Add SetTextAlignment
    • Add get and set Visible
    • Add get and set Font
    • Add get and set TextSize
 
Top