※ 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.
● It also performs dynamic resizing of the scrollbar in the PluginUI window.
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.
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);
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);
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);
}
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);
}
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);