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

Alexander Stolte · May 14, 2021

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

B4X:

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

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

Github: github.com/StolteX/AS_Label

Have Fun

Alexander Stolte · Jul 30, 2021

The best thing about this view is that you still have the preview in the designer, even if it is a customview.

dongsool · Nov 7, 2021

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

Alexander Stolte · Nov 7, 2021

Update

1.01
- BugFix - ClickEvent is now working on B4A and B4J

Alexander Stolte · Dec 8, 2021

Update

1.02
- Add set and get Enabled - Disabled or Enabled the label click events

MarcoRome · Mar 26, 2023

Very helpful ? ?

MarcoRome · May 18, 2023

Hi dear.
How can i insert the text inside the label from code ?

Alexander Stolte · May 18, 2023

MarcoRome said:
How can i insert the text inside the label from code ?

B4X:

ASLabel1.xLabel.Text = "Test"

Lucas Siqueira · Jul 29, 2023

Alexander Stolte said:
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.

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

Lucas Siqueira · Aug 2, 2023

Tthis change would help resolve the request for @Daica in https://www.b4x.com/android/forum/t...fix-suffix-icons-multiline.141337/post-944085

khandah · Aug 21, 2023

Alexander Stolte said:
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 ?

Alexander Stolte · Aug 21, 2023

khandah said:
Is it still available ?

Yes it is.

khandah said:
You do not have permission to view this page or perform this action

You must be a verified user to download these

khandah · Aug 21, 2023

And how to be verified ? I just bought your AS LoginRegistry and need ASLabel.
Regards.

Alexander Stolte · Aug 21, 2023

I sent you the library via private message.

Lucas Siqueira · Aug 22, 2023

Lucas Siqueira said:

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 · Aug 22, 2023

Update

1.03
- Add Icon support

Special thanks to @Lucas Siqueira

B4X:

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

Alexander Stolte · Feb 16, 2024

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

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

Attachments

Alexander Stolte

Expert

dongsool

Member

Attachments

Alexander Stolte

Expert

Alexander Stolte

Expert

MarcoRome

Expert

MarcoRome

Expert

Alexander Stolte

Expert

Lucas Siqueira

Active Member

Attachments

Lucas Siqueira

Active Member

khandah

Member

Alexander Stolte

Expert

khandah

Member

Alexander Stolte

Expert

Lucas Siqueira

Active Member

Alexander Stolte

Expert

Alexander Stolte

Expert

Similar Threads

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

Attachments

Expert

Member

Attachments

Expert

Expert

Expert

Expert

Expert

Active Member

Attachments

Active Member

Member

Expert

Member

Expert

Active Member

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency