TextLabel control

📘
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.

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) 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

Setting properties (via binding or code)

or via code. 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)
		
		label1 = self.page!.getWidgetByName("label1") as! SCDWidgetsLabel
		getTextLabelVariables(label: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 5 days ago