From Clomosy Docs
(Created page with "<div class="alert alert-ligth border border-3 border-primary-subtle rounded-5 p-4 shadow-sm" role="alert"> function AddNewScaledLayout(AComponent: TCLComponent; xName: string): TclScaledLayout; </div> <span style="color:blue"><b>AComponent</b></span> : Specifies the parent of the object to be defined.<br> <span style="color:blue"><b>xName</b></span> : The name of the defined ScaledLayout should be written.<br> It is used to arrange and proportionally scale other comp...") |
No edit summary |
||
| Line 62: | Line 62: | ||
* [[Components]] | * [[Components]] | ||
* [[Object Properties]] | * [[Object Properties]] | ||
* [[TclLayout]] | * [[TclLayout]] | ||
{{#seo:|title=TclScaledLayout Using in Clomosy - Clomosy Docs}} | {{#seo:|title=TclScaledLayout Using in Clomosy - Clomosy Docs}} | ||
{{#seo:|description= Learn how TclScaledLayout automatically scales and arranges visual components, keeping interface proportions consistent across different resolutions.}} | {{#seo:|description= Learn how TclScaledLayout automatically scales and arranges visual components, keeping interface proportions consistent across different resolutions.}} | ||
Revision as of 13:30, 20 October 2025
function AddNewScaledLayout(AComponent: TCLComponent; xName: string): TclScaledLayout;
AComponent : Specifies the parent of the object to be defined.
xName : The name of the defined ScaledLayout should be written.
It is used to arrange and proportionally scale other components on the form. Simply put, it ensures that buttons, labels, and other visual elements maintain their relative size and position when the form is resized.
This layout automatically scales and adjusts its contents, making the interface consistent and visually balanced across different screen resolutions. TCLScaledLayout is particularly useful when designing responsive or resolution-independent user interfaces.
The features and usage are provided in the table below.
| Feature | Use of | Definition |
|---|---|---|
| TclScaledLayout | ScaledLayout1 : TclScaledLayout; | A variable belonging to the TclScaledLayout class is created. |
| AddNewScaledLayout | ScaledLayout1 = Form1.AddNewScaledLayout(Form1,'ScaledLayout1'); | A new TclScaledLayout is added to the form. |
| OriginalWidth | ScaledLayout1.OriginalWidth = 150; | Defines the reference (unscaled) width of the layout, used as the base for scaling its child components. |
| OriginalHeight | ScaledLayout1.OriginalHeight = 50; | Defines the reference (unscaled) height of the layout, used as the base for scaling its child components. |
| Align | ScaledLayout1.Align = alTop; | With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features. |
| Margins | ScaledLayout1.Margins.Left = 50; // Right, Top, Bottom | With the Margins parameter, you can give margins at any scale from the right, left, bottom, top. |
Example
var
MyForm:TclForm;
ScaledLayout:TclScaledLayout;
Edit1:TclEdit;
I:Integer;
testButton:TCLButton;
{
MyForm=TclForm.Create(self);
ScaledLayout = MyForm.AddNewScaledLayout(MyForm,'ScaledLayout');
ScaledLayout.Align = alClient;
ScaledLayout.OriginalHeight = 900;
ScaledLayout.OriginalWidth = 400; //Approximately the aspect ratio of a phone screen
for (I = 0 to 1) {
testButton = MyForm.AddNewButton(ScaledLayout,'testButton'+IntToStr(I),'Button'+IntToStr(I));
testButton.Align = alTop;
}
MyForm.Run;
}
See Also