Creating an iOS Search Bar

The iOS Search Bar is a common feature of iOS apps. This lesson will show you how to create a search bar using LiveCode controls and a iOS input field.

Creating the User Interface - Part 1

The first step is to create the basic UI of the search a bar.

  1. Create a new stack. I created an iPhone 6 stack.
  2. Add a rectangle graphic. This will be the background the search bar.
    • Set the name to "searchbarBackground"
    • Set the width to 375
    • Set the height to 40
    • Set the line thickness to 0
    • Set the background color to 201,201,206
    • Set the top to 0
    • Set the left to 0
  3. Add a round rectangle graphic. This will be the background for the text entry area.
    • Set the name to "searchtextBackground"
    • Set the width to 359
    • Set the height to 30
    • Set the line thickness to 0
    • Set the background color to 255,255,255
    • Set the top to 4
    • Set the left to 8
  4. Add an SVG Icon widget. This will be the seach icon.
    • Set the name to "searchIcon"
    • Set the width to 14
    • Set the height to 14
    • Set the preset to the search icon
    • Set the normal color to 182,182,182
    • Set the top to 11
    • Set the left to 151

You should now have something that looks like this

Creating the User Interface - Part 2

The next step to to add a field. This field will allow you to see how the seach bar looks in the IDE and can be used to place the text entry control when it is created.

Add a label field.

  • Set the name to "searchTerm"
  • Set the width to 85
  • Set the height to 23
  • Set the line thickness to 0
  • Set the text size to 14
  • Set the text align to left
  • Set the text fill to 182,182,182
  • Set the contents to "Search"
  • Set the top to 7
  • Set the left to 173

You should now have something that looks like this

Creating the Text Input Control

When a card containing a search bar is opened we create a native text input control to allow the user to type search terms.

Add the preOpenCard and createSearchEntry handlers to the Card Script.

on preOpenCard
   if the environment is "mobile" then
		hide field "searchTerm"
      createSearchEntry
   end if
end preOpenCard

command createSearchEntry
   // Create a text entry control
   mobileControlCreate "input", "searchEntry"
   // Set the properties of the search entry control
   mobileControlSet "searchEntry", "rect", the rect of field "searchTerm"
   mobileControlSet "searchEntry", "visible", true
   mobileControlSet "searchEntry", "fontSize", 14
   mobileControlSet "searchEntry", "textColor", 182,182,182
end createSearchEntry

Deleting the Text Input Control

When a card containing native mobile controls is closed it is important to delete them. This is because native controls float above all other controls, inlcluding cards so will persist unless they are explicitly removed.

Add the closeCard handler to the Card Script.

on closeCard
   if the environment is "mobile" then
      mobileControlDelete "searchEntry"
   end if
end closeCard

Responding to touches

When the search bar is in its initial state and the user taps it the icon and text are move to the left and the cursor is placed into the text box.

We can implement this by handing the inputBeginEditing message. This message is sent when a mobile text input control has become focused and editing has commenced.

Add the inputBeginEditing handler to the card script.

0 Comments

Add your comment

E-Mail me when someone replies to this comment