UI框架
阅读
2023-11-30更新
最新编辑:Lu_23333
阅读：
更新日期：2023-11-30
最新编辑：Lu_23333
CS has it's own UI framework that extends the Unity UI framework. When creating custom UI elements for your mod you should be using this. It can be found in the ColossalFramework assembly under the UI namespace.
UIView
The main UI container is the UI view which holds all UI elements. This is where you will add your mod UI too.
You can simply use the static GetAView() method to get the current UIView.
UIView view = UIView.GetAView();
UIComponent
All UI elements are UIComponents such as UILabel, UISprite, UIPanel & UIButton.
Adding components to the UIView is pretty straightforward and you can of course add components within components to add them as children.
UIPanel panel = view.AddUIComponent(typeof(UIPanel)) as UIPanel;
panel.name = "MyModPanel"; // Please give UI components you add to the view a name!
UILabel title = panel.AddUIComponent<UILabel>();
title.text = "My Mod Panel";
Sprites
Sprites are referenced by name based on the selected sprite atlas.
You can subscribe to a mod that dumps all the sprites in the game to see what you can use.
DumpIcons Mod
Custom sprites are quite hard to do but it's possible.
Have a look at the source of TM:PE if you're interested.
Basically you have to include them in your assembly and then load them out of your assembly during runtime by reading the bytes of the image and converting it in to a texture.
This is how you can then use the texture.
Mod Tools
If you use ModTools (which you should) you can browse through the UIView to see all the components in the game.
You can use this to copy properties, see how components are structured, modify components at runtime to see what the properties do and much more.
TIP: If you press CTRL+R and then hover over a component and then press CTRL+F it'll open that component in the inspector.
UI Components API Reference
Below are most components described and their most useful properties. There are a ton of other components and properties not listed here so if you're making something first do a search if there is a component for it.
UIComponent
This is the base class of all UI components.
- isInteractive - Whether or not this UI element can be interacted with
- color - Main color of the UI component, some components have their own color values such as UILabel has textColor.
- width - The width of the element
- height - The height of the element
- tooltip - Tooltip text which will display when you hover over the UI element for a bit.
- playAudioEvents - When set to true certain UI elements will play audio events when interacted with.
- opacity - Change the transparancy of the UI element.
eventClick- delegate (MouseEventHandler) when UI element is clicked on. (there are like 20 other events you can listen to)Show()- Show the UI elementHide()- Hide the UI element
UIPanel
Panel is a container where you usually put other components in. By default the elements in the panel are automatically positioned but this can be disabled.
- backgroundSprite - Sprite for the panel background
- autoLayout - Disable automatic layout to handle the layout manually.
- verticalSpacing - Vertical spacing between UI elements within the panel for dynamic layouts.
- autoFitChildrenHorizontally - Ensures that components fit horizontally.
- autoFitChildrenVertically - Ensures that components fit vertically.
- autoLayoutDirection - This can be changed to horizontal or vertical if auto layout is enabled.
UIScrollablePanel
Panel which can be scrollable through mouse and keyboard events and you can attach a scrollbar.
I believe it automatically calls FitToContents() when you add contents to this panel if not you should call that after you add content.
- backgroundSprite - Sprite for the panel background
UIScrollbar
Interactive scrollbar which can be used for a scrollable panel or other scrollable content.
It's a bit complex to use this but if you need a scrollbar you should look into this.
Basically it needs a separate object for decrement, increment, thumb and track and you have to specify a lot of values such as min/max value, orientation, stepSize.
UISprite
Sprite image display.
- spriteName - The name of the sprite to use.
UILabel
Text label to display text.
- text - The text to display
- textColor - The color of the text
- textScale - The relative scale of the text.
- autoSize - Automatically size the text to fit the rect
- prefix - Text prefix
- suffix - Text suffix
- backgroundSprite - Sprite for the background of the label rect
- padding - Text padding around the rect
- textAlignment - Alignment of the text
- verticalAlignment - Vertical alignment of the text
- wordWrap - Wrap words if autoSize is disabled to new lines if they go outside the bounds.
UITextComponent
Text display which is used for all interactive elements.
This text has a lot more options such as font, shadows, outlines, gradients, markupk etc.
Because of this it's better for performance to use the UILabel.
- text - The text to display
- textColor - The color of the text
- textScale - The relative scale of the text.
- useDropShadow, useGradient, useOutline, outlineColor, outlineSize, dropShadowColor
UIInteractiveComponent (Input)
All input components are interactive components and all interactive components are also UITextComponents.
Please note that ALL components can be interacted with not just UIInteractive components.
- normalBgSprite/normalFgSprite - The back/foreground sprite of the component.
- hoveredBgSprite/hoveredFgSprite - The back/foreground sprite of the component when the mouse is hovered over it.
- disabledBgSprite/disabledFgSprite - The back/foreground sprite of the component when the input is disabled.
- focusedBgSprite/focusedFgSprite - The back/foreground sprite of the component when the component is focused.
- canFocus - Determines if the user can focus the input or not.
UIButton
Button which can be clicked.
- autoSize - Automatically size the button based on the content.
- pressedBgSprite/pressedFgSprite - Sprite when pressing the button
- pressedBgSprite/pressedFgSprite - Sprite when pressing the button
UICheckBox
Checkbox which can be either on or off.
- label - The label for the checkbox
- isChecked - Checked state
- readOnly - Checkbox can't be changed by the user.
eventCheckChanged- event (PropertyChangedEventHandler<bool>) when the checked status changes.
UIColorField
Input field where a color can be chosen with a UIColorPicker.
- selectedColor - The current selected color.
eventSelectedColorChanged- event (PropertyChangedEventHandler<Color>) when the user changed the color.
UIDropDown
Input field where an item can be chosen from a dropdown list.
- items - The items in the dropdown list (use AddItem)
- selectedValue - The current selected value.
AddItem(string)- Add an item to the dropdown listeventSelectedIndexChanged- event (PropertyChangedEventHandler<int>) when the user selected an option. (the index is the array index of the items)
UITextField
Input field where a user can write text.
- text - The text value
- isPasswordField - Password field displays *** instead of characters.
- maxLength - Maximum amount of characters allowed.
- multiline - Multi line text field.
- numericalOnly - User can only enter numbers no other characters.
- padding - Padding between the outside rect and the text field.
- readOnly - User can not edit the text if set true
- selectOnFocus - All text is automatically selected when the textfield is focused.
eventTextCancelled- event (PropertyChangedEventHandler<string>) when the user cancels editing the text (I believe on escape).eventTextChanged- event (PropertyChangedEventHandler<string>) when the user changes the text.eventTextSubmitted- event (PropertyChangedEventHandler<string>) when the user submits the text (enter or focus loss).
UISlider
Adjustable slider which can be used to slide between numbers. (like volume slider etc)
- backgroundSprite - Sprite for the slider background
- minValue - The minimum value of the slider
- maxValue - The maximum value of the slider
- maxValue - The maximum value of the slider
- scrollWheelAmount - Amount the value changes when you scroll on a focused slider.
- stepSize - The value of each step (for example min=1, max=3, step=0.5 then you can do 1,1.5,2,2.5,3)
- value - The current value of the slider
eventValueChanged- event (PropertyChangedEventHandler<float>) when the user moves the slider and the value is changed.
UIDragHandle
This can be attached to any UI element to make it drag-able. Make sure to specify the width & height as it does not automatically cover the parent component.
UIResizeHandle
This can be attached to any UI element to make it resizable.
- backgroundSprite - The sprite of the handle for resizing.
See also
本页内容最初译自官方Wiki:UI_Framework，经双方编辑后内容可能与来源不同。
沪公网安备 31011002002714 号