• Hi Guest!

    We are extremely excited to announce the release of our first Beta1.1 and the first release of our Public AddonKit!
    To participate in the Beta, a subscription to the Entertainer or Creator Tier is required. For access to the Public AddonKit you must be a Creator tier member. Once subscribed, download instructions can be found here.

    Click here for information and guides regarding the VaM2 beta. Join our Discord server for more announcements and community discussion about VaM2.
  • Hi Guest!

    VaM2 Resource Categories have now been added to the Hub! For information on posting VaM2 resources and details about VaM2 related changes to our Community Forums, please see our official announcement here.
CustomLayoutUI

Plugins + Scripts CustomLayoutUI

Download [<1 MB]
※ Reporting bugs or issues will help me improve the plugin and help others.
CustomLayoutUI
● This .cs for new style Layout UI implementation for developer.
● Easily generates Grid-Based UI panels with dynamic sizing, alignment.
● It supports flexible grid configurations with adjustable row/column weights and merge options for precise UI placement.
● It Includes intuitive drag handles and resizers for real-time layout adjustments, enhancing user control and interactivity.
● It is also fully compatible with the library provided by default UIDynamic or MacGruberUtils.
● All configurable functions of the UI component are implemented using the Builder-Pattern.


CustomLayoutUIExample4.gif

C#:
using CustomUI14mhz;
CustomLayoutUI a = CustomLayoutUI.create(this, CreateUIElement, "a", 0, 200).newFullLineUI().setBackgroundColor(new Color(0.8f, 0.2f, 0.2f, 0.8f));
CustomLayoutUI b = CustomLayoutUI.create(this, CreateUIElement, "b", 0, 200).newHalfLineUI(true).setBackgroundColor(Color.gray);
CustomLayoutUI c = CustomLayoutUI.create(this, CreateUIElement, "c", 0, 200).newHalfLineUI(false).setBackgroundColor(new Color(0.2f, 0.2f, 0.8f, 0.8f));
CustomLayoutUI d = CustomLayoutUI.create(this, CreateUIElement, "d", 525f - 225f, 200).newHalfLineUI(true);
CustomLayoutUI e = CustomLayoutUI.create(this, CreateUIElement, "e", 525f + 225f, 200, -225f, 0).newHalfLineUI(false);
CustomLayoutUI f = CustomLayoutUI.create(this, CreateUIElement, "f", 525f + 300f, 200, 0, 0).newHalfLineUI(true);
CustomLayoutUI g = CustomLayoutUI.create(this, CreateUIElement, "g", 525f - 300f, 200, +300f, 0).newHalfLineUI(false);
CustomLayoutUIExample1.jpg
C#:
using CustomUI14mhz;
CustomLayoutUI a = CustomLayoutUI.create(this, CreateUIElement, "a", 0, 200).newFullLineUI().setBackgroundColor(new Color(0.8f, 0.2f, 0.2f, 0.8f));
CustomLayoutUI b = CustomLayoutUI.create(this, CreateUIElement, "b", 0, 200).newHalfLineUI(true).setBackgroundColor(Color.gray);
CustomLayoutUI c = CustomLayoutUI.create(this, CreateUIElement, "c", 0, 200).newHalfLineUI(false).setBackgroundColor(new Color(0.2f, 0.2f, 0.8f, 0.8f));
CustomLayoutUI d = CustomLayoutUI.create(this, CreateUIElement, "d", 525f - 225f, 200).newHalfLineUI(true);
CustomLayoutUI e = CustomLayoutUI.create(this, CreateUIElement, "e", 525f + 225f, 200, -225f, 0).newHalfLineUI(false);
CustomLayoutUI f = CustomLayoutUI.create(this, CreateUIElement, "f", 525f + 300f, 200, 0, 0).newHalfLineUI(true);
CustomLayoutUI g = CustomLayoutUI.create(this, CreateUIElement, "g", 525f - 300f, 200, +300f, 0).newHalfLineUI(false);

a.setLayout(8, 5).enableLayoutMode(true);
b.setLayout(4, 4).enableLayoutMode(true);
c.setLayout(5, 5).enableLayoutMode(true);
d.setLayout(3, 3).enableLayoutMode(true);
e.setLayout(7, 4).enableLayoutMode(true);
f.setLayout(7, 5).enableLayoutMode(true);
g.setLayout(3, 3).enableLayoutMode(true);
It also performs dynamic resizing of the scrollbar in the PluginUI window.
CustomLayoutUIExample2.jpg

C#:
using CustomUI14mhz;
CustomUI.addSpacer(this, true, 120f).setValue("▼ GridLayout is composed of columns and rows ...").setBackgroundColor(new Color(0.3f, 0, 0, 0.3f));
CustomUI.addSpacer(this, false, 120f).setValue("▼ Click any cell while holding the Alt-Key to briefly hide the Layout Form and preview the final output ...").setBackgroundColor(new Color(0.3f, 0, 0, 0.3f));
{
    CustomLayoutUI a = CustomLayoutUI.create(this, CreateUIElement, "a", 0, 450).newFullLineUI().setBackgroundColor(new Color(0.8f, 0.2f, 0.2f, 0.6f));
    a.setLayout(5, 5).enableLayoutMode(true);
    for (int i = 0; i < a.col; i++)
    for (int j = 0; j < a.row; j++)
    {
        a.addUIComponent(CustomUI.addLabel(this, true, $"label{i}_{j}").setValue($"(col, row)\n<color=#A00><b>({i}, {j})</b></color>"), i, j);
    }
}
CustomUI.addSpacer(this, true, 140f).setValue("▼ Dragging the Grid-Line allows you to adjust the size of columns and rows. Dragging a component handle lets you change its size and position. ...").setBackgroundColor(new Color(0.3f, 0, 0, 0.3f));
CustomUI.addSpacer(this, false, 140f).setValue("▼ Also, Click any cell while holding the Alt-Key will display the Layout code ...").setBackgroundColor(new Color(0.3f, 0, 0, 0.3f));
{
    CustomLayoutUI b = CustomLayoutUI.create(this, CreateUIElement, "a", 0, 450).newFullLineUI().setBackgroundColor(new Color(0.2f, 0.2f, 0.6f, 0.6f));
    b.setLayout(5, 5).enableLayoutMode(true);
    b.addUIComponent(CustomUI.addLabel(this, true, $"Move or Drag"), 2, 2);
}
CustomLayoutUIExample3.jpg

C#:
using CustomUI14mhz;
{
    CustomLayoutUI a = CustomLayoutUI.create(this, CreateUIElement, "a", 0, 180).newFullLineUI().setBackgroundColor(new Color(0.8f, 0.2f, 0.2f, 0.8f));
    a.setLayout(6, 5).enableLayoutMode(true);

    var W = CustomUI.addInfoText(this, true, "W", "This plugin is used to quickly and easily arrange UI elements using a Grid-Layout.");
    var X = CustomUI.addButton(this, true, "X");
    var Y = CustomUI.addButton(this, true, "Y");
    var Z = CustomUI.addButton(this, true, "Z");

    a.addUIComponent(W, 0, 3);
    a.addUIComponent(X, 0, 0);
    a.addUIComponent(Y, 0, 1);
    a.addUIComponent(Z, 0, 2);
}
CustomUI.addSpacerAuto(this, CreateUIElement, 100f).setValue("▼ Applied the above as follows...").setBackgroundColor(new Color(0.3f, 0, 0, 0.3f));
{
    CustomLayoutUI a = CustomLayoutUI.create(this, CreateUIElement, "a", 0, 180).newFullLineUI().setBackgroundColor(new Color(0.8f, 0.2f, 0.2f, 0.8f));
    a.setLayout(6, 5).enableLayoutMode(false);
    a.setColWeight(0.00f, 0.01f, 0.33f, 0.78f, 0.79f, 0.99f, 1.00f);
    a.setRowWeight(0.00f, 0.05f, 0.35f, 0.65f, 0.95f, 1.00f);

    var W = CustomUI.addInfoText(this, true, "W+", "This plugin is used to quickly and easily arrange UI elements using a Grid-Layout.");
    var X = CustomUI.addButton(this, true, "X+");
    var Y = CustomUI.addButton(this, true, "Y+");
    var Z = CustomUI.addButton(this, true, "Z+");

    a.addUIComponent(W, 1, 1, 2, 3);
    a.addUIComponent(X, 4, 1);
    a.addUIComponent(Y, 4, 2);
    a.addUIComponent(Z, 4, 3);
}
CustomLayoutUIExample4.jpg

C#:
using CustomUI14mhz;
CustomUI.addSpacer(this, true, 150f).setValue("▼ Additionally, a GridLayout can contain other GridLayouts within it ...").setBackgroundColor(new Color(0.3f, 0, 0, 0.3f));
CustomUI.addSpacer(this, false, 150f).setValue("▼ If you encounter any issues or have suggestions for improvement when using this component, please feel free to share your feedback. Thank you!").setBackgroundColor(new Color(0.3f, 0, 0, 0.3f));
CustomLayoutUI a = CustomLayoutUI.create(this, CreateUIElement, "a", 0, 800).newFullLineUI().setBackgroundColor(new Color(0.2f, 0.8f, 0.2f, 0.4f));
a.setLayout(5, 4).enableLayoutMode(true);
a.setColWeight(0.00f, 0.01f, 0.82f, 0.83f, 0.99f, 1.00f);
a.setRowWeight(0.00f, 0.01f, 0.50f, 0.99f, 1.00f);

CustomLayoutUI b = CustomLayoutUI.create(this, CreateUIElement, "b", 0, 800).newHalfLineUI(true).setBackgroundColor(new Color(0.8f, 0.2f, 0.2f, 0.6f));
b.setLayout(3, 14).enableLayoutMode(true);
b.setColWeight(0.00f, 0.06f, 0.94f, 1.00f);
b.setRowWeight(0.00f, 0.07f, 0.14f, 0.21f, 0.29f, 0.36f, 0.43f, 0.50f, 0.57f, 0.64f, 0.71f, 0.79f, 0.86f, 0.93f, 1.00f);

a.addUIComponent(b, 3, 1, 1, 2);
CustomLayoutUIExample5.jpg
React to this content...

More resources from 14mhz

Share this resource

Back
Top Bottom