※ Reporting bugs or issues will help me improve the plugin and help others.
CustomLayoutUI
● This .cs for new style Layout UI implementation for developer.
● This implementation offers robust flexibility for crafting a custom UI tailored to your needs !
● This is licensed under CC-BY, so you are free to incorporate it into your own code and use it as you wish.
● 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.
※ Here is an example of a UI building task using CustomLayout. To enter layout mode, call enableLayoutMode(true) in your code. Then, press the Alt key to retrieve grid information, apply it to your code, and finally call enableLayoutMode(false) to exit layout mode. The completed code is shown below.
----------------------------------------
● It also performs dynamic resizing of the scrollbar in the PluginUI window.
CustomLayoutUI
● This .cs for new style Layout UI implementation for developer.
● This implementation offers robust flexibility for crafting a custom UI tailored to your needs !
● This is licensed under CC-BY, so you are free to incorporate it into your own code and use it as you wish.
● 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.
※ Here is an example of a UI building task using CustomLayout. To enter layout mode, call enableLayoutMode(true) in your code. Then, press the Alt key to retrieve grid information, apply it to your code, and finally call enableLayoutMode(false) to exit layout mode. The completed code is shown below.
C#:
CustomLayoutUI ui = CustomLayoutUI.create(this, CreateUIElement, "ui", 0, 180).newFullLineUI().setBackgroundColor(new Color(0.8f, 0.2f, 0.2f, 0.8f));
ui.setLayout(6, 5).enableLayoutMode(false); // to edit the layout, first call enableLayoutMode(true) to activate layout mode.
ui.setColWeight(0.00f, 0.01f, 0.33f, 0.78f, 0.79f, 0.99f, 1.00f);
ui.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");
ui.addUIComponent(W, 1, 1, 2, 3); // expand col span to 2 and row span to 3.
ui.addUIComponent(X, 4, 1);
ui.addUIComponent(Y, 4, 2);
ui.addUIComponent(Z, 4, 3);● fix : some minor bug-fix
● fix : refactor UI elements reparenting logic.
● fix : update the FullLineUI implementation.
● fix : refactor UI elements reparenting logic.
● fix : update the FullLineUI implementation.
● some minor bug-fix, support in non-standard extended UI like CustomUI-PanelResizer
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);
