I am using UISearchDisplayController to implement the search feature on a table view. My table view cell uses custom background image.
When you first type a letter into the search textfield, the search results start appearing. However, when I click cancel at this point, the screen flashes white. This is not as noticeable if everything uses the standard white, but since my table view cell uses custom background, the white flashing is quite noticeable.
Where is this flashing coming from? Is there anything I can do to remove this flashing? (You can see this flashing on standard Apple apps too but it may not be very obvious if the table view uses white background)
Another SO post mentioned this very problem too - Customize UISearchDisplayController (search for the word "Flash")
Found a good work around for this here at Apple's Dev Forums.
Basically, the flash is by design and there isn't any way to customize/disable it. However, the poster in the link came up with a simple work around -- remove the search display table view all together (removeFromSuperView). Works absolutely fine for me.
Related
Short version: I have a working solution using a UISegmentedControl but I don't like how it looks. When I use Safari, it "dims" either previous or next when it's at the beginning or end of the list of input fields. I can't convince a UISegmentedControl to do that, so how did they do it?
Long version:
I have a UITableView with cells that have text fields. The text fields take numeric inputs (floating point numbers, generally). That means I present the keyboard with keyboardType = UIKeyboardTypeDecimalPad. That also means no return button, so I need a good method to move between cells OTHER THAN touching the cells. I'd like to do it the same way as, say, iOS Safari does it - with a little toolbar that says "previous | next ... done."
I have code that does all of that (sets the textField.inputAccessoryView to be an instance of a UIToolbar with the appropriate buttons), using a UISegmentedControl for the previous and next button. I have that working so that next moves to the next cell and previous moves to the previous cell.
So why am I here? I can't get the dimmed previous/next behavior seen in iOS Safari to work with a UISegmentedController and I don't really want to implement all of that myself if I don't have to (at that point, my CCB will invoke one of the two rules it uses to reject changes: Rule 1) If I don't think it's a good idea, then I won't implement it; Rule 2) If it's easy, I'll probably do it).
(I would have posted pictures, but I'm too new to SO - sorry)
When I try to do the same thing it looks and acts like a Safari middle text field, but I can't seem to get it to look like the Safari version of first or last text field.
I've tried enabling, selecting, even changing the bar background color, but none of them seemed to work. The background color seemed to get closest, but I had to have 3 different toolbars based on when it was first, last, or middle, and even then it wasn't great.
Solved. The issue was that the "enabled" setting of the various segments as set in IB does not make it to the executable. I have to programmatically disable the previous or next segment in the view controller. Once I did this, it now appears as I want it.
When I set up the UISegmentedControl in IB, I set one segment to enabled and the other to disabled (== not enabled). In the debugger I started trolling through the settings of the various segments and found that actually setting the segment to disabled makes it work in the way I wanted.
For example, in the "nextToolbar" that contains a UISegmentedControl that is attached to "nextControl," only the Next button should be shown as active. That means I have to set the Previous button to disabled. The Previous button is at index 0, so disabling it means to do this somewhere before it's used (I put this in viewDidLoad:):
[self.nextControl setEnabled:NO forSegmentAtIndex:0]
Similarly, for the prevControl, where only the Previous button should be active, I use:
[self.previousControl setEnabled:NO forSegmentAtIndex:1]
I am trying to build an app similar to USAToday i.e. each "article" is a mix of images and text that the user scrolls vertically to read if it covers more than than the size of the screen. Scrolling horizontally brings up the next article and so on.
Each article should have "paging enabled" so that the content moves as if you are turning a page in a book whether you are moving vertically or horizontally.
I must have looked at every tutorial for Scroll and Page navigation, but I am drawing a blank. Any help is much appreciated.
BTW: I have down loaded this tutorial....
http://www.edumobile.org/iphone/iphone-programming-tutorials/pagecontrol-example-in-iphone/
... but (a) it builds ok but simulator only shows a featureless black screen, and I cannot work out how to correct it, and (b) it only scrolls horizontally.
The sample code that you reference is old so I think something has changed in the SDK since then. I was able to at least get the code to run by changing the MainWindow.xib file. I opened that file in Interface Builder and then selected the Window and then in the Window Attributes Inspector I ticked "Visible at Launch". Then the tutorial would at least run and show the colors. I think you might find that there are more issues with it though.
When you are wanting to page something, the real trick is setting the content size of the scroll view.
This StackOverflow question has some good information that might help you get going.
I have a problem. Part of my app requires text to be shown in a table. The text needs to be selectable/copyable (but not editable) and any URLs within the text need to be highlighted and and when tapped allow me to take that URL and open my embedded browser.
I have seen a couple of solutions that solve one of either of these problems, but not both.
Solution 1: Icon Factory's IFTweetLabel
The first solution I tried was to use the IFTweetLabel class made possible by Icon Factory and used in Twitterrific.
While this solution allows for links (or anything you can find with a regex) to be detected to be handled on a case by case basis, it doesn't allow for selecting and copying.
There is also an issue where if a URL is long enough to be wrapped, the button that the class overlays above the URL to make it interactive cannot wrap and draws off screen, looking very odd.
Solution 2: Use IFTweetLabel and handle copy manually
The second thing I tried was to keep IFTweetLabel in place to handle the links, but to implement the copying using a long-tap gesture, like how the SMS app handles it. This was just about working, but it doesn't allow for arbitrary selection of text, the whole text is copied, or none is copied at all... Pretty black and white.
Solution 3: UITextView
My third attempt was to add a UITextView as a subview of the table cell.
The only thing that this doesn't solve is the fact that detected URLs cannot be handled by me. The text view uses UIApplication's openURL: method which quits my app and launched Safari.
Also, as the table view can get quite large, the number of UITextViews added as subviews cause a noticeable performance drag on scrolling throughout the table, especially on iPhone 3G era devices (because of the creation, layout, compositing whenever a cell is scrolled on screen, etc).
So my question to all you knowledgeable folk out there is: What can I do?
Would a UIWebView be the best option? Aside from a performance drag, I think a webview would solve all the above issues, and if I remember correctly, back in the 2.0 days, the Apple documentation actually recommended web views where text formatting / hyperlinks were required.
Can anyone think of a way to achieve this without a performance drag?
Many thanks in advance to everyone who can help.
As soon as I hit the submit button, a new idea hit me.
I was so preoccupied with having URLs inline with text and interactive that I didn't consider that maybe it's not the best solution.
I'm certain that to achieve that kind of behaviour, a UIWebView is the best choice, regardless of the performance issues.
However, maybe a better user experience / interaction is to not highlight the URLs inline, but to gather them into an array behind the scenes, and present a disclosure button as the cell's accessory view?
Then for selection and copying text, I could just use the UITextView with data detectors turned off and not worry about the links being sent off to safari and closing my app.
When the disclosure button is tapped, the user could be whisked off to the URL found in the text, or if more than one URL is found, present the user with a picker view to choose which to go to.
Any thoughts/criticisms of this idea are welcome.
You can prevent a textfield from being edited by overriding the UITextField Delegate methods such that they do not apply any edits. That leaves the field selectable and copyable but prevents alteration.
A better question to ask is: do you actually have to display the actual URL itself? Can you get away with just a page/location name, just the server.host.domain prefix or some other condensed representation of the url? I don't think anyone whats to try to read a long url on a mobile's restricted screen.
If you do need to display the entire url then I think that a detail view is the way to go.
I want to introduce a custom pencil accessory image in a tabel cell and in the standard accessory righthand UITableViewCell position. The pencil image will be used to indicate that the text in the table cell can be edited via a popup modal full screen view.
Will Apple penalize this innovation during the app review process?
My justification is that the standard disclosure indicators do not convey the right meaning. According to the Apple HIG doc the ">" disclosure should present another more detailed list view and the the blue "+" disclosure button should reveal extra details about the selected table row.
I feel that opening a text edit view falls between the ">" and "+" usage, hence my pencil image idea.
Edit: Just to complete the picture, the table view has two fat rows. The upper row poses a multiline question and the lower row shows a text answer.
I don't think that Apple would penalize you for creating a custom button/icon. This is not something to concern. The problem here is to make you user understand what is the function of you custom icon, since they are used with the standard iPhone UI.
I my opinion for the functionality that you want to put on your icon, it would be better if you use the custom UI for editing table cell, that is presented on this image that I could find Googling (http://adeem.me/blog/wp-content/uploads/2009/UITableView/AddDeleteReorderUITableView/Picture%202.png).
So, people are used to edit the content of table cells by using the edit button and after pick the current cell...than you can show the modal view, so the user can edit the content.
To have a better picture, compare your table cell with, for example, the Clock app.
Try to avoid custom controls as much as you can. if something exists on the standard UI, go for it it is easy for people to look and understand.
Imagine that in your browser the load icon, instead of this circular arrow, it was changed by "L" in the latest update, would be something tricky to us to understand a non-standard symbol.
Think about it and chose the most appropriated approach for your purpose.
Cheers,
VFN
Does anyone have any examples or resources where i might find information on scrolling text which is too long to display in a button control? I'm thinking something along these lines.
Display as much text will fit within the current rect with a '...' at the end to signify overflow.
Pause for say 1 second then slowly scroll the text to the right edge displaying the right part of the string.
Display as much text will fit within the current rect with a '...' at the beginning to signify overflow.
Start the whole thing over in reverse.
Is there an easy way to do this using the "core" or built in "animation" frameworks on a certain mobile device?
[edit]
Iwanted to add some more details as i think people are more focused on wether or not what i'm trying to accomplish is appropriate. The button is for the answers on a trivia game. It does not perform any speciffic UI function but is for displaying the answer. Apple themselves is doing this in their iQuiz trivia game on the iPod Nano and i think its a pretty elegant solution to answers that are longer than the width of my button.
In case its the '...' that is the difficult part of this. Lets say i removed this requirement. Could i have the label for the button be full sized but clipped to the client rect of the button and use some animation methods to scroll it within the clipping rect? This would give me almost the same effect minus the ellipses.
Here's an idea: instead of ellipses (...), use a gradient on each side, so the extra text fades away into the background color. Then you could do this with three CALayers: one for the text and two for fade effect.
The fade masks would just be rectangles with a gradient that goes from transparent to the background color. They should be positioned above the text layer. The text would be drawn on the text layer, and then you just animate it sliding back and forth in the manner you describe. You can create a CGPath object describing the path and add it to a CAKeyframeAnimation object which you add to the text layer.
As for whether you think this is "easy" depends on how well you know Core Animation, but I think once you learn the API you'll find this isn't too bad and would be worth the trouble.
Without wishing to be obtuse, maybe you should rethink your problem. A button should have a clear and predictable function. It's not a place to store and display text. Perhaps you could have a description show on screen with a nice standard button below?
Update with source code example:
Here is some ready to use source code example (actually a full zipped Xcode project with image and nib files and some source code), not for the iPhone, not using Core Animation, just using a couple of simple NSImages and a NSImageView. It is just a cheap hack, it does not implement the full functionality you requested (sorry, but I don't feel like writing your source code for you :-P), horrible code layout (hey, I just hacked this together within a couple of minutes, so you can't expect any better ;-)) and it's just a demonstration how this can be done. It can be done with Core Animation, too, but this approach is simpler. Composing the button animation into a NSImageView is not as nice as subclassing a NSView and directly paint to its context, but it's much simpler (I just wanted to hack together the simplest solution possible). It will also not scroll back once it scrolled all the way to the right. Therefor you just need another method to scroll back and start another NSTimer that fires 2 seconds after you drew the dots to the left.
Just open the project in Xcode and hit run, that's all there is to do. Then have a look at the source code. It's really not that complicated (however, you may have to reformat it first, the layout sucks).
Update because of comment to my answer:
If you don't use Apple UI elements at all, I fail to see the problem. In that case your button is not even a button, it's just a clickable View (NSView if you use Cocoa). You can just sub-class NSView as MyAnswerView and overwrite the paint method to paint into the view whatever you wish. Multiline text, scrolling text, 3D text animated, it's completely up to your imagination.
Here's an example, showing how someone subclassed NSView to create a complete custom control that does not exist by default. The control looks like this:
See the funny thing in the upper left corner? That is a control. Here's how it works:
I hate to say that, as it is no answer to your question, but "Don't do that!". Apple has guidelines how to implement a user interface. While you are free to ignore them, Apple users are used to have UIs following these guidelines and not following them will create applications that Apple users find ugly and little appealing.
Here are Apple's Human Interface Guidelines
Let me quote from there
Push Button Contents and Labeling
A push button always contains text, it
does not contain an image. If you need
to display an icon or other image on a
button, use instead a bevel button,
described in “Bevel Buttons.”
The label on a push button should be a
verb or verb phrase that describes the
action it performs—Save, Close, Print,
Delete, Change Password, and so on. If
a push button acts on a single
setting, label the button as
specifically as possible; “Choose
Picture…,” for example, is more
helpful than “Choose…” Because buttons
initiate an immediate action, it
shouldn’t be necessary to use “now”
(Scan Now, for example) in the label.
Push button labels should have
title-style capitalization, as
described in “Capitalization of
Interface Element Labels and Text.” If
the push button immediately opens
another window, dialog, or application
to perform its action, you can use an
ellipsis in the label. For example,
Mail preferences displays a push
button that includes an ellipsis
because it opens .Mac system
preferences, as shown in Figure 15-8.
Buttons should contain a single verb or a verb phrase, not answers to trivia game! If you have between 2 and 5 answers, you should use Radio Buttons to have the user select the answer and an OK button to have the user accept the answer. For more than 5 answers, you should consider a Pop-up Selector instead according to guidelines, though I guess that would be rather ugly in this case.
You could consider using a table with just one column, one row per answer and each cell being multiline if the answer is very long and needs to break. So the user selects a table row by clicking on it, which highlights the table cell and then clicks on an OK button to finish. Alternatively, you can directly continue, as soon as the user selects any table cell (but that way you take the user any chance to correct an accidental click). On the other hand, tables with multiline cells are rather rare on MacOS X. The iPhone uses some, but usually with very little text (at most two lines).
Pretty sure you can't do that using the standard API, certainly not with UILineBreakMode. In addition, the style guide says that an ellipsis indicates that the button when pressed will ask you for more information -for example Open File... will ask for the name of a file. Your proposed use of ellipsis violates this guideline.
You'd need some custom logic to implement the behaviour you describe, but I don't think it's the way to go anyway.
This is not a very good UI practice, but if you still want to do it, your best bet is to do so via a clickable div styled to look like a button.
Set the width of the div to an explicit value, and its overflow to hidden, then use a script executing on an interval to adjust the scrollLeft property of this div.