I need a search control that allows a user to search for something, then if they don't find it they push an add button to add it. I need the add button to display while the user is typing the text to search for, I'm thinking to the right of the text. If I put the button in the navigation bar, it doesn't display while the user is searching.
I want to use a Search Bar and Search Display Controller as I need the functionality of displaying results as the user types. The first answer here -- Adding button to left of UISearchBar -- doesn't seem to work with the Search Display Controller. When the user activates the search field, it disappears.
I have been down several rabbit trails on this:
In the second answer here -- Adding button to left of UISearchBar -- I see it recommended to override the Bookmarks button. That is very clever and works, but I can't figure out how to get the "official" Add button image to override with. The simulator doesn't seem to have the images anymore (?), and I don't like the idea of hardcoding something in my code anyway. I'd rather (re)use Apple's Add button icon, but I can't figure out how to do that.
I played around with creating a subclass of UISearchBar that is loaded from a nib that has the search bar and the button, but I'm realizing if I go down that path I think I have to reimplement the interface for UISearchBar and forward all of the method calls to the "real" UISearchBar that I am managing. That seems gross.
I tried just creating a view that subclasses UISearchBar and just dynamically adds the button at initialization time. But on that path I am very bogged down in the constraints. The constraints for the text field in the search bar are up a couple of levels in the view hierarchy, and I'm pretty sure there is at least one constraint up there that I will need to remove, agreed? (because the text field is currently constrained to extend to the end of the search bar).
I also tried the same subclass and trying to just set the positions of the controls in layoutSubviews, but when I do that I find myself having to position all the child controls in the search bar (including the Cancel button, etc.), and that seems wrong.
I'm still in learning mode, and I'm not on a tight schedule. I would like to do this the "right" way. Meaning I'd like to reuse existing code and functionality and just add an add button. What is the "right" way to approach this?
Thanks!
Related
I'm trying to do something like the following:
As you can see, a popover shows up as you start typing, and updates the results as you type. My question is regarding the UI and how to actually implement it.
How can I show a custom popover when the user starts typing? Is it possible to load a custom view into a popover? Additionally, what would I need to do if I wanted to also include an image view in each typeahead result?
Good question, which most beginners have. Follow my instructions given below.
First create a view controller and design it as you wanted it to be and include a Search Controller and implement it's delegate functions in the view controller.swift file(Hope you know to work with delegates for controllers,else just google it...It's pretty easy).
Then add a Tableview in center of the view for viewing the results like shown in your question & and add a custom cell into the table view and then setup a custom class file for that cell exactly like how you works with tableview controller.Use just the basics of tableview stuffs.
Setup outlets and all for the controls and buttons.
Create an array named 'filteredResults' or name it as you like to reload the tableview data whenever the text is changed in search bar.
To detect and call your function while user changes text in search bar,You can use didTextChanged delegate function of search bar.
Note though that it's better to find everything else by your own so that you feel confident about yourself when you solve the problem at the end.
If you see the screenshot below, its a view from iOS Files app which lets you select tags for a file.
I want to make a similar Tableview which lets user either select existing items or add new items. But I also want the add textfield to be a search field. That is, when the user starts typing there, he also gets search results from the existing items.
The way I am planning to implement this is...
Two table views.
One has a static cell to 'Add' and is not vertically scrollable.
Right underneath is the second table view with existing itmes, which is vertically scrollable.
when the user taps and starts typing in the textfield, there is a search side by side, in the second table view and the user can select an item from it as well.
When there are no matching results, an add button is highlighted and the user can add a new entry.
I want to know what is the best way one can implement such behaviour?
Also,
(In terms of UI Design)
Should one make use of the UISearchBar instead of a textfield?
Or, is it better to simply use the UISearchController?
It's the first time I'm creating a keyboard for iOS. I've created the first page with all the buttons but I don't understand how to add the second page.
For example: first page QWERTY, second page 123.
Is here anyone that can explain all the passages and functions/classes that I have to add on my codes and where precisely?
Thanks a lot
Well I haven't built a custom keyboard personally but I would make seperate views for the "pages" of keyboards and just hide away and unhide the view of the keyboard you want to show when the user presses the "alt" button. You could have as many keyboards as you like with this method and have it pre-built in the backround so that it would function very quickly to swap between them. Or animate them as you like really as views are easy to slide around. Actually sounds like a lot of fun as I have often thought about building a keyboard that has alpha-numeric values all in one, which would make filling in details on a login screen much quicker/more convenient.
Both Instagram and Facebook allow their users to comment on news feeds. In the comment scene, they basically have a UITableView with all the comments and a “footer” where user may enter comments and post them. So the “footer” is a UIView or UIToolBar with a UITextField/UITextView and a UIButton. Truly simple stuff from the look of it. Well I have been trying to implement it and the keyboard is not cooperating. I need the keyboard to not hide the “footer”. Especially now in iOS 8 the keyboard comes with a suggestions tool bar that a user may choose to show or hide. All these interactions make it difficult to keep my “footer” right above the keyboard while user is entering text. Every time I think I nail the solution, I find a multitude of bugs.
In one implementation, I use keyboard notification to listen for when the keyboard is up or going down (partly based on iPhone Keyboard Covers UITextField). The problem with this implementation is that there is a lag of about 1 to 2 seconds for when the keyboard shows up and for the “footer” to climb to the top of the keyboard from the bottom of the screen. A second issue is when user drags the suggestion toolbar to either show or hide it while typing, it causes my “footer” to move in unpredictable manners: which means I will need some static variables to meticulously track cumulative interactions with the suggestion toolbar just to fix that bug. Also notice that I put “footer” within quotation marks. That’s because I am not referring to a UITableView footer. But rather a view that I create beneath the table view as suggested by UITableView, make footer stay at bottom of screen?
Another implementation I tried was to use a “footer” and a keyboard ToolBar. When user clicks on the UITextField of the footer, that would cause the keyboard to show up with a replica of the footer as inputAccessoryView. This is basically to visually fool the user into thinking it’s the same footer that seamlessly climbs with the keyboard. But in reality I am using two compound Views: a “footer” and a keyboard toolbar. The first problem I encounter with this one is that I cannot seem to make the tool bar text field the first responder programmatically. This actually used to work in ios-7. But since I updated to iOS-8 it does not work. So if I do footerTextField.inputAccessoryView=keyboardToolBar and then in the textfield delegate method check if(textField==footerTextField){[tooBarTextField becomeFirstResponder];}, iOS-8 just ignores the whole thing or, worse, dismiss the keyboard and the toolbar altogether, so that in fact the keyboard never shows up when I click on footerTextField since the showing and dismissing happen so quickly.So again this used to work in iOS-7, but in iOS-8 it does not work.
a third approach was to make the parent view a TPKeyboardAvoidingScrollView such that I would have parent, and children UITableView and “footer”. Here while TPKeyboardAvoiding have worked for me on other scenes in the app, for whatever reason it’s not working here. My guess is because I am using a UITableView as one of the children of a UIScrollView.
a forth approach was to make my “footer” an actual UITableView section footer; section footer because I want it to float at the bottom. The problem with section footer is that they don’t stick to the bottom, which gives a visually erratic user experience as you scroll the table.
Ok, so I have said a lot. So finally, has anyone implemented a scene similar to Facebook’s/Instagram’s NewsFeed Comment scene? If so, will you please help me?
To recap: the Facebook/Instagram input textfield grows with text; sticks to the top of the keyboard whether the keyboard's suggestion toolbar is showing or hidden; sticks to the bottom of the screen when the keyboard is gone.
SlackTextViewController seems to fit all your requirements and is very well-written.
My iPad app uses a popover to perform some searching. The search results are handled using a UISearchDisplayController, and I am having some trouble removing some little graphical artefacts.
My popover starts out looking like this:
When you click inside the search bar, the popover expands (animated) to:
All good so far... typing in the search field overlays a new table view showing the results of your search term.
But if you don't type anything into the search field, the overlay stays translucent, as above. The problem then comes when you click the cancel button next to the search field. A visual artefact appears at the bottom of the table view: an area the same height as one of the table view cells goes completely clear immediately, while the rest of the overlay animates to 0 alpha. The screenshot below is as close to the start of the animation I could get:
The popover also resizes to the original size in my case, although the artefact remains even if there is no resizing.
Given that all the important functionality of the search is handled by the UISearchDisplayController, I'm not sure what to change to solve this problem. Any ideas?
This might be a bug worth reporting. There are actually a surprising number of bugs in UIPopoverController. At least 3 that I know about separate from this, none of which are planned to be fixed anytime soon (I asked several engineers at WWDC this year). One of my bugs was actually related to the UISearchDisplayController in a popover, specifically how it handles filter buttons if the Popover is in the detail view (it renders them in the worst possible way, on the same line as the text view and completely unusable).