B4A Library [B4X] DSE_Layout - Align and Spread Controls

Drawing Inspiration from @Erel's DDD - SpreadControlsHorizontally, I tried to build two function I need very often and sharing here with everyone!

What can you do with this class:
1. Spread controls horizontally or vertically
2. Spread controls without altering their height or width
3. Spread controls with or without space in between
4. Align and spread controls wrt first control

SpreadHorizontally
'Spreads the controls horizontally.
'Parameters: pnl, max, gap, align
'#0 Panel with controls in it
'#1 Maximum size of each control (0 for no maximum, -1 to retain size),
'#2 Minimum gap between controls
'#3 Align with first control ( "top", "bottom", "center")

SpreadVertically
'Spreads the controls Vertically.
'Parameters: pnl, max, gap, align
'#0 Panel with controls in it
'#1 Maximum size of each control (0 for no maximum, -1 to retain size),
'#2 Minimum gap between controls
'#3 Align with first control ( "left", "right", "center")

Usage:
Copy the Library (DSE_Layout.b4xlib) to Additional Library Folder
Refresh Libraries in IDE and Add DSE_Layout
Access the Methods from Designer Script Window ( DSE_Layout ) or declare Class and call Method directly.

Shared as B4xLib, Feel free to modify, Give credit if you like to!
 

Attachments

  • DSE_Layout.b4xlib
    1.4 KB · Views: 191
  • BeforeAlignment.png
    BeforeAlignment.png
    28 KB · Views: 347
  • AfterAlignment.png
    AfterAlignment.png
    15.4 KB · Views: 338
Last edited:

Daica

Active Member
Licensed User
Thank you for the library @epiCode
Works pretty well.

My only question is, how do I control the order that my controls are being aligned?
No matter which order I place my controls in the designer, it seems to only do 1 order.
 

epiCode

Active Member
Licensed User
Thank you for the library @epiCode
Works pretty well.

My only question is, how do I control the order that my controls are being aligned?
No matter which order I place my controls in the designer, it seems to only do 1 order.
Order is determined by the order you see them in "Views Tree" in Designer
 

Mahares

Expert
Licensed User
Longtime User
SpreadHorizontally

Could you please explain how it works. I have attached a layout file for you to look at. I have used the spacing calculations provided by Erel in the past without any problems, but I am not sure how to apply your lib as a substitute.
 

Attachments

  • itemepicode.bal
    2.8 KB · Views: 111

epiCode

Active Member
Licensed User
Could you please explain how it works. I have attached a layout file for you to look at. I have used the spacing calculations provided by Erel in the past without any problems, but I am not sure how to apply your lib as a substitute.
1. It works with panel, not activity. so place target views in a panel and use that panel. (make sure you declare all views and panels)
2. you used "left" in spreadControlsHorizontally which is not an option. see description.
3. your labels are all same color as background with no text, even if they are aligned you will not know

so your code in designer script should be
B4X:
DSE_Layout.SpreadHorizontally(Panel1,100dip,10dip,"center")

this is how it looked after the changes
1674812342336.png
 

Mahares

Expert
Licensed User
Longtime User
It works with panel, not activity.
Yes, of course it works when the views' parent is a panel, but in many cases the layout in question is an xCLV items layout that does not require an additional panel to hold the child views similar to what I posted in my attachment. Well, if there is no way that can be done, it is not a problem because I can use the designer script provided by Erel to evenly spread views.
Thank you
 

epiCode

Active Member
Licensed User
Yes, of course it works when the views' parent is a panel, but in many cases the layout in question is an xCLV items layout that does not require an additional panel to hold the child views similar to what I posted in my attachment. Well, if there is no way that can be done, it is not a problem because I can use the designer script provided by Erel to evenly spread views.
Thank you
Source code is attached. Modify as you like or use what works for you!
 
Top