TextLabel control
SCADE 2.0 - Working with Labels
Sourcecode
Please see the UgTextLabelDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples.
Introduction
The text label control is used to display text. We support a variety of functionality. Some important aspects in respect to text label are:
- We support TTF (true type fonts) for the label's font only. This make sure that the look and feel across platforms is identical
- Our text label control wraps the respective iOS (UILabe) and Android (TextView) controls
General properties
Basic properties of TextLabel control are displayed in the General section
| Property | Explanation_ | Comment |
|---|---|---|
| Name | Name/ID of the text label | Use standard naming scheme for any control. We use camelCase starting with lb, i.e. lbLastName |
| Accessibility | Provides Accessibility shortcut | Specify the word that should be read out if VoiceOver is enabled See [Accessibility] |
| Text | The text that is displayed on the screen | |
| Baseline | Type SCDWidgetsBaselineAlignment Vertical arrangement of text line. Supported values are middle alphabetic * hanging | More information can be found here https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline |
| Text alignment | Type SCDLayoutHorizontalAlignment left, left aligned with the area covered by the label control center, centered within the area covered by the label control * right, right aligned within the area covered by the label control | If the wrap text option is used, these settings will have no affect as the area covered by the label will wrap around the text and the alignment value will make no visible difference |
| Enable | If control is enabled or not | |
| Visible | If control is visible or not | |
| Wrap Text | If Wrap Text is enabled, the text label's size shrinks to the minimal size so that it tightly wraps the text | |
| Multiline | If enabled, text is displayed across multiple lines depending on the value of the text | For iOS, we use NSLineBreakMode.byWordWrapping For Android, we use WordWrapping |
API
Here we set the text alignment and baseline programmatically.
import ScadeKit
class MainPageAdapter: SCDLatticePageAdapter {
var label1 : SCDWidgetsLabel!
// page adapter initialization
override func load(_ path: String) {
super.load(path)
// Print label properties
getTextLabelVariables(label:self.label1)
// A little bit more complicated API to set the style. We will simplify it shortly
let style = SCDWidgetsTextStyle()
let textstyle = label1.getStyle(style.eClass()) as! SCDWidgetsTextStyle
// Align text center
textstyle.horizontalAlignment = SCDLayoutHorizontalAlignment.center
textstyle.baselineAlignment = SCDWidgetsBaselineAlignment.alphabetic
}
override init() {
self.horizontalAlignment = SCDLayoutHorizontalAlignment.left
}
func getTextLabelVariables(label:SCDWidgetsLabel) {
print("name \(label.name)")
print("text \(label.text)")
print("isEnabled : \(label.isEnable)")
print("isVisible : \(label.isVisible)")
print("isMultiline : \(label.isMultiline)")
print("isWrapText : \(label.isWrapText)")
print("label.drawing.accessibilityLabel : \(label.drawing.accessibilityLabel)")
}
...
}
Font Properties
The font is selected through the IDE and then copied into the mobile app project. The font properties are pretty self explanatory: You can set some font properties dynamically:
func setFontProperties() {
let style = SCDWidgetsFontStyle()
let fontstyle = label1.getStyle(style.eClass()) as! SCDWidgetsFontStyle
fontstyle.isBold = true
fontstyle.isItalic = true
fontstyle.isLineThrough = true
}
Updated almost 3 years ago