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.
You can download the sample stack from this url: https://tinyurl.com/yamxcq7a
Creating the User Interface - Part 1
The first step is to create the basic UI of the search a bar.
- Create a new stack. I created an iPhone 6 stack.
- 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
- 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
- Add an SVG Icon widget. This will be the search 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 createSearchEntryDeleting 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 closeCardResponding 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.
on inputBeginEditing
// Move the search icon
set the left of widget "searchIcon" to 21
// Resize and move the text entry control
mobileControlSet "searchEntry", "rect", "43,7,364,30"
mobileControlSet "searchEntry", "text", empty
end inputBeginEditing
Stopping editing
When the user stop typing text into the search bar we want to reset the search bar.
Add the inputEndEditing handler to the Card Script.
on inputEndEditing
// Move the search icon
set the left of widget "searchIcon" to 151
// Resize and move the text entry control
mobileControlSet "searchEntry", "rect", the rect of field "searchTerm"
mobileControlSet "searchEntry", "text", "Search"
end inputEndEditingSearching
The last step is to do something when the user has entered a search term. To do this we will handle the inputReturnKey message. This message is sent when the return key is pressed and focus is removed from the mobile text input control.
As an example we will just show a dialog displaying the search term.
on inputReturnKey
// Display a dialog
answer mobileControlGet("searchEntry", "text")
end inputReturnKeyIf you want to search as the user types you can handle the inputTextChanged message.
on inputTextChanged
local tSearchTerm
// Get the search term
put mobileControlGet("searchEntry", "text") into tSearchTerm
searchList tSearchTerm
end inputTextChanged
Russell
I am making an iOS app and need to use the filter code to search a data grid (via a dgtext variable). The lesson above does not seem to have a "engage" button to action the search term. In my desktop version I am testing for Return. How do use filter and confirm the search in iOS? Any help much appreciated.
Russell
Half way there: I had the keyboard pop-up disabled in the simulator. So I can now input the search term and hit return but the filter code is not engaging. So I still need assistance please.
Elanor Buchanan
Hi Russell, it looks like the lesson was missing a couple of steps which I have now added. On mobile you can use inputReturnKey or inputTextChanged to trigger a search.
I hope that helps.
Kind regards
Elanor
Russell
Hi Elanor, Thank you for this. I am on the case! Regards Russell
Russell
Hi Elanor,
I used the inputReturnKey to initiate a filter on my data grid and it worked.
Thank you for your help. It is much appreciated.
Regards
Russell