B4A Library Tiles_JE

I created a new custom view where the user continues to run the application based on the information displayed in the tiles. There are three types of information that can be displayed:

• label
• image
• layout

The tiles are scrollable. The width of the tiles can be fixed or flexible. Each tile is assigned a unique tag, which is passed in the Click event when clicked. Examine the example.

Tiles_JE
Author: Jerryk
Version: 1.6

Important! it is necessary to declare and initialize a DDD variable in B4XMainPage!

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI

    Public dd As DDD
End sub

Private Sub B4XPage_Created (Root1 As B4XView)
    dd.Initialize
    xui.RegisterDesignerClass(dd)
   ...

Methods:

• SelectedItem As String

Sets or gets the selected tile. The tag name is used.

Events:

• Click (pId As String, pTag As Object)

Raised when tile is cliked.

Properties:

• TilesType As String

FilledWidth - TileWidth is ignored, width is calculated based on Tiles Per Row
FixedWidth -Tiles per row is ignored, actual width is used

• TileHeight As Int

Tile height

• TileWidth As Int

Tile width

• CornerRadius As Int

Tile radius

• Gap Between Tiles As Int

Gap distance

• TilesPerRow As Int

Number of tiles per row

• BackgroundColor As Int

Background Color for tiles

• ShowSelected As String

"border" - if the tile is selected, border is drawn in color SelectedColor
"tile" - if the tile is selected, background is drawn in color SelectedColor
"off" - the tile is not redrawn

• SelectedColor As Int

Borded Color

• SelectedBorderWidth As Int

Borded width

• ShowDefaultBorder As Boolean

Draw default border for tiles

• BorderColor As Int

Color for default border for tiles

• BorderWidth As Int

Width of default border


Functions:

• AddLabel (pId As String, pText As String, pSize As Int, pBackgroundColor As Int, pTag As Object) As Label

Add tile with label

• AddImage (pId As String, pBitmap As String, pBackgroundColor As Int, pTag As Object) As ImageView

Add tile with image as-is

• AddImageResize (pId As String, pBitmap As String, pBackgroundColor As Int, pWidth As Int, pHeight As Int, pTag As Object) As ImageView

Add tile with image nad resize

• AddLayout (pId As String, pLayout As String, pBackgroundColor As Int, pTag As Object) As Panel

Add tile with layout

• FindTile (search As String) As Panel

Find a tile with a specific tag

• DefaultColor (pTag As String, pCol As Int)

Change default tile color for tile with a specific tag

• AddToParent (Parent As B4XView, Left As Int, Top As Int, Width As Int, Height As Int)

Add class programmatically

• GetBase

Gets Base of the object

• RedrawTiles

redraws tiles after changing a property

• DeleteTile (pTag As String)

delete tile

• SetMaxHeight

sets the view height according to the total height of the tiles

• CenterHorizontally

center view horrizontally

 

[Jerryk]

v. 1.1

added

• Show Selected As String

"border" - if the tile is selected, border is drawn in color SelectedColor
"tile" - if the tile is selected, background is drawn in color SelectedColor
"off" - the tile is not redrawn

 

[Jerryk]

v. 1.2

added

• FindTile (search As String) As Panel

Find a tile with a specific tag

• DefaultColor (pTag As String, pCol As Int)

Change default tile color for tile with a specific tag

 

[Mehrzad238]

hello @Jerryk


I want to try your library, and the example has 2 issues:


1-There is a dependency that you did not mention in the description that needs the Throwables library, which can be downloaded from this link
2-The example has a ROBOCOPY error. Please replace the example. For more guidance, you can visit this link:

[B4X] Tip - ROBOCOPY error related to shared files folder

Thank you for creating this library. That will come in handy in the future.

 

[Jerryk]

v. 1.3

fixed: tiles are now automatically scalable - like AutoScaleAll

 

[Theera]

Your library is perfectly, but is there way created to be as the button which can be as container includes panel, ImageView, label, CustomView in it? I think it useful in the future.(look at progress example)

 

[Jerryk]

To add anything, create your own layout where you will place your visual components. Then add it with AddLayout("your tag", "your layout", color). In my example, in the eighth position, a layout with two labels and a progressbar is used.

 

[Theera]

To add anything, create your own layout where you will place your visual components. Then add it with AddLayout("your tag", "your layout", color). In my example, in the eighth position, a layout with two labels and a progressbar is used.

If I needn't to set tiles, I can do it, can't I? ( I think it has auto setting tiles) please to see my project https://www.facebook.com/share/v/17FjUoZnPV/

The rooms are not arrange.

 

[Jerryk]

Honestly, I don't know, I don't understand what you're getting at? In your app, I see the layout of houses, when you click on a specific house, you can view photos of the interior.

 

[Theera]

Honestly, I don't know, I don't understand what you're getting at? In your app, I see the layout of houses, when you click on a specific house, you can view photos of the interior.

My app's layout of houses is not arrange like the tiles ,If I need to use your tiles library,is there way strategy done it,or not? I'm looking for how to set the status of house be not ready used. when I see your library,I think it may be done.

 

[stp]

hi, what is the syntax to assign a png picture ?

i use now

Dim img As ImageView = Tiles_JE1.AddImageResize("Im2", "b4j.png", xui.Color_DarkGray, 70dip, 70dip)

want to use:

Dim img As ImageView = Tiles_JE1.AddImageResize("Im2", "https://www.mysite.com/my.png", xui.Color_DarkGray, 70dip, 70dip)

 

[Jerryk]

v 1.4

all features are now available programmatically
new features added:

• AddToParent (Parent As B4XView, Left As Int, Top As Int, Width As Int, Height As Int)

Add class programmatically

• GetBase

Gets Base of the object

    Tiles_JE2.Initialize(Me, "Tiles_JE2")
    Tiles_JE2.AddToParent(Root, 0dip, 0dip, Root.Width, 400dip)
    Do While Not(Tiles_JE2.IsInitialized)
        Sleep(100)
    Loop
    Dim pnl As Panel = Tiles_JE2.AddLayout("P1", "l1", xui.Color_White)
    dd.GetViewByName(pnl, "Label1").Text = "Title1"
    Dim prog As ProgressBar = dd.GetViewByName(pnl, "ProgressBar1")
    prog.Progress = 66

    Dim img As ImageView = Tiles_JE2.AddImageResize("Im3", "android.png", xui.Color_LightGray, 90dip, 90dip)

    Dim lbl As Label = Tiles_JE2.AddLabel("L1", "Label123", 20, xui.Color_Blue)
    lbl.TextSize = 30

 

[Jerryk]

v 1.5

added

• Show Default Border As Boolean

Draw default border for tiles

• Border Color As Int

Color for default border for tiles

• Border Width As Int

Width of default border

 

[Jerryk]

v 1.6

significant change: a pTag AS Object was added to the tile creation function, which can then be obtained from the Click event

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Public dd As DDD
   
    Type myTag(P1 As Int, P2 As String)
    ...

    'in code
    Dim mTag As myTag
    mTag.P1 = 123
    mTag.P2 = "ABC"
    Dim lbl As Label = Tiles_JE1.AddLabel("L1", "Label1", 20, xui.Color_Blue, mTag)
    'if you don't need to use pTag, specify Null
    ...
   
Private Sub Tiles_JE1_Click(pId As String, pTag As Object)
    Log("ID: " & pId)
    If pTag <> Null Then
        If  GetType(pTag).Contains("mytag") Then
            Log(pTag.As(myTag).P1)
            Log(pTag.As(myTag).P2)
        End If
    End If
End Sub

added

• RedrawTiles

redraws tiles after changing a property

• DeleteTile (pTag As String)

delete tile

• SetMaxHeight

sets the view height according to the total height of the tiles

• CenterHorizontally

center view horrizontally