Label

API Reference: UI.Label

Label is a view that displays read-only text on the screen.

Old label

With the release of sf-core 3.0.0 following changes has occurred:

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const Label = require('sf-core/ui/label');
const TextAlignment = require('sf-core/ui/textalignment');
const System = require('sf-core/device/system');
const Font = require('sf-core/ui/font')
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onLoad: function() {
this.headerBar.backgroundColor = Color.create("#ffffff");
this.headerBar.title = "Label";
this.headerBar.titleColor = Color.BLACK;
this.headerBar.borderVisibility = true;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
var myLabel = new Label({
width: 200,
height: 20,
text: "About Phone",
textAlignment: TextAlignment.MIDLEFT,
left: 35
});
myLabel.font = Font.create("Arial", 16, Font.BOLD);
var myLabel1 = new Label({
width: 200,
height: 30,
left: 35,
text: System.OS,
textAlignment: TextAlignment.MIDLEFT
});
myLabel1.font = Font.create("Arial", 10, Font.NORMAL);
var textLabel = new Label({
width: 200,
height: 100,
text: "Software Upload",
textAlignment: TextAlignment.MIDCENTER
});
textLabel.font = Font.create("Arial", 16, Font.BOLD);
textLabel.onTouch = () => {
alert("Upload Operation System")
};
var myLabel2 = new Label({
width: 200,
height: 100,
left: 35,
multiline: true,
text: "General Settings",
textAlignment: TextAlignment.MIDLEFT
});
var flexLayoutOptions = {
backgroundColor: Color.BLACK,
height: 1,
width: 320,
marginLeft : 20,
textAlignment: TextAlignment.MIDCENTER
}
var myFlexLayout = new FlexLayout(flexLayoutOptions);
var myFlexLayout1 = new FlexLayout(flexLayoutOptions);
var myFlexLayout2 = new FlexLayout(flexLayoutOptions);
this.layout.addChild(myLabel);
this.layout.addChild(myLabel1);
this.layout.addChild(myFlexLayout);
this.layout.addChild(textLabel);
this.layout.addChild(myFlexLayout1);
this.layout.addChild(myLabel2);
this.layout.addChild(myFlexLayout2);
},
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = true;
}
});
});
module.exports = Page1;

Auto Content Size

In a column-flexlayout : If no height and flexgrow set for a label object, it automatically resizes according to text content.

In a row-flexlayout : If no width and flexgrow set for a label object, it automatically resizes according to text content.

Label vs TextView

  • Label is a light-weight version of TextView

  • Label performs better than TextView. This is mostly observable within ListView

  • Label does not support AttributedText

  • Label does not support all of TextAlignment. Only MIDLEFT, MIDCENTER, MIDRIGHT is supported.

  • Label supports multi-line, but scrolling of the lines are not supported