Monday Hero
Website
V1
V1
  • Overview
  • Workflow Basics
  • Getting Started
    • Installation
    • Login & Create a Project
    • Roles & Manage the Project Team
    • Prepare Design To Get Best Results
    • Import Design File Into Monday Hero
  • WORKING WITH MONDAY HERO
    • Automatically Generated Components
      • Views
      • Texts
      • Images
    • Convert to Components
      • How to Convert to Components
      • Convert to Button
      • Convert to TextField/EditText
      • Convert to Text Area
      • Convert to Status Bar
      • Convert to Search Bar
      • Convert to Lists and Grids
        • Convert to List
        • Convert to Grid
    • Export Code
      • Export All Screens as a New Project
      • Export Only Selected Screen as a New Project
      • Export Only Selected Screen Into an Existing Project
    • 🚧 Configure Code Preferences (WIP)
  • Step-By-Step Tutorials
    • 🏖️Travel App
  • Reach Us
    • Get Support
    • Get Demo
  • Join & Follow Us
    • Slack Community
    • GitHub
    • Twitter
    • LinkedIn
    • Blog
    • Instagram
    • Facebook
    • YouTube
Powered by GitBook
On this page
  • Search Bar Design to Swift/Kotlin Code
  • Component's Property info for iOS/Android
  • Generated iOS/Android Code

Was this helpful?

  1. WORKING WITH MONDAY HERO
  2. Convert to Components

Convert to Search Bar

Convert Search Bar component to iOS/Android code.

PreviousConvert to Status BarNextConvert to Lists and Grids

Last updated 4 years ago

Was this helpful?

Search Bar Design to Swift/Kotlin Code

A search bar allows users to search values by typing text into a field.

Component's Property info for 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.

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

//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"/>