Texts
Monday Hero can automatically understand the texts, and convert design to Swift/Kotlin code.
Texts are automatically detected and their code is generated by Monday Hero. With texts, you can describe an interface element or provide messages. Texts display static text with no editing features.
Monday Hero names texts on the design as Labels. However, it's also possible to convert label into components like buttons or create Custom Labels to reuse elements on the page like HeaderLabel below:
​
Automatically detected labels(Text) and components

Automatically Detected Texts

In the image above, there is a Welcome to Travel App label. It's code is autogenerated like below.
iOS
Android

Label

Texts are called as Label in the Swift language. Let's see the generated code and its attributes.
1
//Signup Page, Welcome Label
2
import UIKit
3
​
4
class SignUpViewController: UIViewController {
5
​
6
// MARK: - Properties
7
@IBOutlet private weak var welcomeLabel: UILabel!
8
​
9
override func viewDidLoad() {
10
super.viewDidLoad()
11
setupViews()
12
setupLayout()
13
}
14
​
15
}
16
​
17
extension SignUpViewController {
18
private func setupViews() {
19
​
20
welcomeLabel.textColor = UIColor.black
21
welcomeLabel.numberOfLines = 0
22
welcomeLabel.font = UIFont.textStyle7
23
welcomeLabel.textAlignment = .center
24
welcomeLabel.text = NSLocalizedString("welcome.to.travel.app", comment: "")
25
​
26
}
27
​
28
private func setupLayout() {
29
//Constraints are defined in Storyboard file.
30
}
31
​
32
}
Copied!

TextView

Texts are called as TextView in the Android Kotlin/Java XML. Let's see the already generated code and its attributes.
1
<!--activityExample.xml-->
2
​
3
<TextView
4
android:id="@+id/titleTextView"
5
android:layout_width="0dp"
6
android:layout_height="wrap_content"
7
android:text="@string/title_text"
8
style="@style/textStyle13"
9
android:textAlignment="center"
10
android:textColor="?attr/black"
11
android:layout_marginStart="39dp"
12
android:layout_marginEnd="39dp"
13
android:layout_marginBottom="12dp"
14
app:layout_constraintStart_toStartOf="parent"
15
app:layout_constraintEnd_toEndOf="parent"
16
app:layout_constraintTop_toBottomOf="@+id/mondayHeroLogoImageView"
17
app:layout_constraintBottom_toTopOf="@+id/descriptionTextView"/>
18
Copied!
1
<!--strings.xml-->
2
<string name="title_text">"SimpleText"</string>
3
<string name="description_text">"This is a textView example and textViews are better while it kept short and legible."</string>
Copied!

Custom Texts

In order to reuse the same styled labels like header1, header2, create custom texts. Here is how to do it:
Create a reusable label
The code will be generated like below for custom texts:
HeaderLabel.swift - iOS
SignupPage.swift - iOS
Android
1
//HeaderLabel.swift
2
​
3
import UIKit
4
​
5
class HeaderLabel: UILabel {
6
​
7
// MARK: - Initializers
8
override init(frame: CGRect) {
9
super.init(frame: frame)
10
initialize()
11
}
12
​
13
required init?(coder aDecoder: NSCoder) {
14
super.init(coder: aDecoder)
15
initialize()
16
}
17
​
18
func initialize() {
19
applyDefaultStyle()
20
}
21
​
22
// MARK: - Styling
23
func applyDefaultStyle() {
24
self.textColor = UIColor.pebble
25
self.numberOfLines = 0
26
self.font = UIFont.textStyle18
27
self.textAlignment = .left
28
}
29
​
30
func set(text: String){
31
self.text = text
32
}
33
​
34
}
Copied!
1
import UIKit
2
​
3
class SignupPage: UIViewController {
4
​
5
// MARK: - Properties
6
@IBOutlet private weak var welcomeLabel: HeaderLabel!
7
​
8
override func viewDidLoad() {
9
super.viewDidLoad()
10
setupViews()
11
setupLayout()
12
}
13
​
14
}
15
​
16
extension SignupPage {
17
private func setupViews() {
18
​
19
welcomeLabel.set(text: NSLocalizedString("welcome.to.travel.app", comment: ""))
20
​
21
}
22
​
23
private func setupLayout() {
24
//Constraints are defined in Storyboard file.
25
}
26
​
27
}
28
​
Copied!
Coming soon.
​
Last modified 1yr ago