What I'm trying to do is replicate the NSTokenField like UITextField seen in the Mail app and Messages app (type a contact and it comes up with suggestions).
I've got the autocompleting working perfectly, when you type in a UITextField, a UITableView pops up showing any matches that it can find in an array, when you click one it adds it to the UITextField. I'm really happy with this so far.
The problem I've run into now is making the controls look like those in the native apps. Afterall, design is everything!
My first question is how can I add that shadow look to the UITableView? Looks like it's sunk down behind the UITextField.
Secondly, I know I'm going to have to subclass the UITextField to make it look the way I'd like it to, but I've got no idea where to start with that. Some pointers or a sample would be great!
Lastly, I think I need to create a custom UIButton with space for text and the blue gradient then add it to the UITextField. Same problem as with the UITextField, not really sure how to subclass the UIButton (what methods it needs to draw and stuff) or how to add it to the UITextField in such a way that when you click backspace on in the UITextField, the button will be highlighted, then deleted if backspace is clicked again (exactly how the NSTokenField works).
I've included an image just so you can see what I'm talking about:
http://www.thermoglobalnuclearwar.com/stuff/mail.jpg
I have taken a look at Joe Hewitts Three20 project but I couldn't make heads or tails of it.
I'd like to start very simply and understand everything that's going on rather than just dragging his code into mine and not having any idea what's going on!
Any help is greatly appreciated!
Thanks,
Tom.
Have you considered using the Three20 library? It contains a control which I think does what you want (TTPickerTextView).
As the website description states
TTPickerTextField is a type-ahead UITextField. As you type it searches a data source, and it
adds bubbles into the flow of text when you choose a type-ahead option. I use this in
TTMessageController for selecting the names of message recipients.
At a minimum the source code might give you some pointers on how to achieve the various visual effects.
Okay, I've got the shadow working underneath the UITextField, and I've added the "To:" label to it. It looks great!
So the final thing is the blue NSToken like control. I've started to think the easiest thing is just to subclass a UIView and draw the blue gradient and label inside it. Which brings me to some more questions:
I found this: http://github.com/leonho/iphone-libs/tree/master which draws a nice rounded view and I've adapted it to add some text to it rather than a number, what I don't know how to do is draw a gradient instead of a solid block of colour.
After that there's just the matter of adding the rounded views to the UITextField, moving the cursor and working out how to delete the views when the cursor reaches them, but I'll tackle that when I need to.
Related
I'd like to use the text correction ui element in my own UIView.
Is this allowed & possible? If so, how can I use the element?
Clarification: I don't want to use it as a text correction feature.
I want to use it as UI elements to show multiple (dismissable) tags on a UIView to show & modify predicate settings.
You can use UIMenuController, which might be close to what you want (it's the thing that shows the Cut/Copy/Paste/Replace menu in text fields). See the CopyPasteTile and Touches sample code for details.
If you actually mean the thing that pops up with spelling completion suggestions, then no, you can't easily use it. You'll have to create custom buttons as you mentioned above. But, try downloading and running UIKit Artwork Extractor to help with getting UIKit artwork to match the look of your custom buttons.
Text correction? Do you meant the auto-complete / correct features you get when you type text on iOS? If so, you get that for free as part of UITextField or UITextView, so the answer would be yes. You can define exactly what you want corrected as part of the properties of those two classes.
I have a problem with the text shadow of the UIActionSheet buttons. At iOS 4.0.2 long string were truncated automatically. No at iOS 4.2 these texts are presented with a smaller font. But now the offset of the shadow is corrupted and to big.
Is there a possibility to change/remove the text shadow of the UIActionSheet.
EDIT: I'm building the UIActionSheet not with initWithTitle:, but with the normal init and sets all needed properties afterwards because the number of possible buttons is dynamic and the texts cannot be change. I've tested it with initWithTitle: and got the same results.
You can refer this to truncate your string before displaying it in a UIActionSheet.
I can think there are two workarounds for this (although I would not them myself in my application, reason listed below the workarounds):
In the first case you access the sublayers of UIActionSheet, get the labels, change the shadowOffset and shadowColor before presenting the actionsheet.
Secondly you can initialize the actionsheet with blank titles and add your own labels as subviews on the actionsheet at right places. (More tricky then the first approach).
Now the first approach is very risky as the layer structure of UIActionSheet can be changed by apple in future updates, hence your application may break and would not give good results.
Continuing with second approach is good only when you can calculate the exact frames where you should put your lebels so that they look good. But in your case the number of buttons would also vary, so this approach will take a lot of time initially to get the things working.
Hence, I would go for truncating the strings before I set them as the title of buttons.
Not sure how much would this help. But I am sure that truncating strings before setting them as titles is the best option.
are you doing anything non default for displaying the text?
If you only use UIActionSheet-initWithTitle:… you should write a bug report to Apple.
OR shorten the text to "Frankfurt International (FRA), DE" ;)
This appears to be fixed in 4.30. I found no way of fixing it in 4.2x.
What I am trying to do is create tooltip functionality so that certain words in my instructional app can be tapped and the definition pops up. For the popup part I plan on using code from “AFInformationView” which provides bubbles on the iPhone.
The part I'm struggling with is how to associate A particular word's location with the bubble. Currently I have the text on a UILabel that is on a custom UITableCell. Since I calculate the row height on the fly with:
[textToUse sizeWithFont:[UIFont systemFontOfSize:FONT_SIZE] constrainedToSize:CGSizeMake(stop-start, 500)];
I'm not sure what the coordinates for a specific word will be. I was thinking that if I created a custom DataDetectorType that could be the fix.
If anyone knows how to do this or has any other ideas I would be happy to hear them.
Thanks,
Andrew
I didn't create a custom UIDataDetectorTypes but Craig Hockenberry did something like it with his TwitterrificTouch.
He uses regular expressions to detect links and other things. I provide it with my keywords and then they become tappable. He places buttons on top of the matching text from the underlying labels. You can google a lot of posts that talk about "putting transparent buttons on top" of various things but Craig's code is the only example/working code I could find.
Here is the link:
http://furbo.org/2008/10/07/fancy-uilabels/
I don't think this is possible. The (few) Data Detector types that the iPhone currently supports are hard-coded with a integer type id. There does not seem to be a mechanism to extends that list of types.
File a feature request in their bug tracker. I will do the same.
AFAIK, you can't create custom data detectors.
The best approach for this sort of thing seems to be using UIWebViews. At least that's what I did. However, you shouldn't use a UIWebView inside a UITableViewCell. In fact, no subview of a UITableViewCell should respond to user input. So I think the best approach would be to display a UIWebView when the cell is tapped.
UIWebViews could be a possible approach but on scrolling you should consider that the whole text should be parsed to detect the words.You could use HTMl tags to make them blue and provide the links.But how could i then assign a custom behavior then opening in safari?
If you want custom data detector you could write an extractor method to primarly patch the links with help of NSregularExpression. For example
NSString regex = #"(http|https|fb)://((\w)|([0-9]*)|([-|_]))+(\.|/)"; to patch alll the links including Facebook URLs inside text like fb://friends.
Then you could use NSattributedString yo mark the links with different colors etc.
ThreeTwenty has a great library called TTTAttributedLabel where you could assign links to certain parts of a text. I also scrolls quite fast if you use it in tableviews
https://github.com/mattt/TTTAttributedLabel
I have spent a few days trying to get around the limitations with UITextField, namely no text wrap and number of lines. I have created a UILabel, which is used to display the text entered in UITextField and does all the formatting stuff properly. The UITextField is hidden and the user sees all the text entered only in UILabel as it's being entered.
Everything is working perfectly except for the lack of a cursor on the UILabel to show the user where the next character typed into the field will show up.
I have experimented with using various characters as cursors on the label. But there is no getting around the fact that it is not the standard blinking cursor indicator on the iPhone and so the whole thing just looks wrong.
Before I abandon ship and go for a UITextView (with its own set of issues) I was wondering if anyone has any ideas as to how a blinking cursor can be added to the text field on a label text.
Thanks in advance.
Your approach has other issues which make it worth rethinking the strategy.
How does selection look like?
copy + paste?
Do you handle right to left languages?
Auto correction?
The list is certainly longer, but I think it's enough to consider other solutions. But I agree that all of UIKit's text handling is a bit poor.
If you don't need to support selection, copy and paste, and only need multiline input, you could use a | character and animate it as if it were blinking... either that or perhaps a custom overlay view on top of the label, that would implement the cursor drawing, animation and positioning based on the length of the string and the font used.
– sizeWithFont:forWidth:lineBreakMode:
– sizeWithFont:constrainedToSize:
– sizeWithFont:constrainedToSize:lineBreakMode:
– sizeWithFont:minFontSize:actualFontSize:forWidth:lineBreakMode:
may help to achieve just that.
So what are the issues preventing you from going to a UITextView? It seems possibly easier to address those.
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.