Monday Hero
v2-Web-Desktop-App
Search…
⌃K
Links

Search Bar

Convert Search Bar component to iOS/Android code.
A search bar allows users to search values by typing text into a field.

Component's Property info for iOS/Android

iOS
Android
It's calledSearchBar in Swift language. It can have 2 properties on Monday Hero:
Text: The initial text displayed by the text field. You can specify the text as a plain string or as an attributed string. Placeholder: A placeholder is a text displayed by the SearchBar when the string is empty. Typing any text into the text field hides this string.
Searchbar is calledsearchViewin Android and has hintproperty on Monday Hero.
⚠️This feature is available in only Mac App. Web App support for Android is coming soon. If you need to install the desktop app, click here.
Hint: A hint is a text displayed by the searchView when the string is empty. Typing any text into the text field hides this string. It's called the placeholder in iOS.

Generated iOS/Android Code

Let's see the generated code. Monday Hero will generate it even the rectangle's cornerRadius value included.
iOS
Android
//HomePageViewController.swift
import UIKit
class HomePageViewController: UIViewController {
//Connection from an Interface Builder to a UI component
@IBOutlet private weak var searchSongSearchBar: UISearchBar!
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
}
}
extension HomePageViewController {
private func setupViews() {
//SearchBar properties
searchSongSearchBar.layer.cornerRadius = 10
searchSongSearchBar.layer.masksToBounds = true
searchSongSearchBar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
searchSongSearchBar.placeholder = NSLocalizedString("search", comment: "")
if let placeholderInsidesearchSongSearchBar = searchSongSearchBar.value(forKey: "searchField") as? UITextField {
placeholderInsidesearchSongSearchBar.textColor = UIColor.flint
placeholderInsidesearchSongSearchBar.font = UIFont.textStyle
placeholderInsidesearchSongSearchBar.textAlignment = .left
}
}
}
<!--activitySongList.xml-->
<SearchView
android:id="@+id/songSearchView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:iconifiedByDefault="false"
android:queryBackground="@android:color/transparent"
android:queryHint="@string/search"
android:textAlignment="textStart"
android:textColor="?attr/flint"
android:layout_marginStart="20dp"
android:layout_marginEnd="19dp"
android:layout_marginBottom="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/descriptionTextView"
app:layout_constraintBottom_toTopOf="@+id/itemBackgroundView"/>
Last modified 1yr ago