I've been playing around with JTGestureBasedTableView, but this library only deals with pulling and swiping gesture handling.
I am trying to figure out how the overlay text field input (with translucent background) is implemented in Clear iPhone app (screenshot below). This is the point when you pull down a new cell and it turns into a text field, and once you finish typing in, the content gets filled into the top-most cell, which is presumably hidden behind the textfield.
What is the simplest way to do this?
Here is an excellent tutorial on clear app by Colin Eberhardt .It explains well how the implementation is done
Related
I recently came across this app, tinder, which has a really cool functionality.
You start off with X images. User can swipe left or right to go through each image to signal whether the user likes or dislikes something.
An image can be seen here:
I have been looking at UICollectionView to do this, but I am a little confused about the custom layout I should be using.
I have been thinking of generating a bunch of cells and then setting different z-index and stacking them on top of one another with the same frame.x.
Any tutorial/advise/help available?
This is simple UIImageviews. and tinder only showing two top images and set a background frame just like facebook image gallery.
When you swipe top image current thread fire next image and it replace current image with new image. And you can add like, comment views as you want.
This sounded like fun, so I built an open-source library that mimics the interface you described.
https://github.com/modocache/MDCSwipeToChoose
The sample app included in the project is nearly identical to the UI in your screenshot.
How do you setup in your application to show little bubbles with text and block the rest of the screen from being used and only allow a small section / button to be pressed. I am wanting to create a walkthrough to show users how to use the application and where to find things within the application when it is opened for the first time.
I would like to dim the rest of the application except for the part I want them to click on. Is there a framework already with these features?
There's no frameworks that provide this functionality, as far as I know.
One way you could do this though is to have a set of overlay images which you overlay over the whole screen the first time the user goes to that screen. To determine if the user has already been to a screen, I suggest you look at NSUserDefaults. To create the overlay images, I'd make the image the full size of the screen (i.e. 460x320 if you are showing the status bar) and then have transparent sections where you want to "see through" to the element below. Add a gesture recogniser to the overlaid image view to detect a tap and then hide the image and set the flag in NSUserDefaults to make it not happen the next time the user goes to that screen.
If you don't get a better answer, you could look at MAAttachedWindow on the page at this link. It's written for Cocoa, not Cocoa Touch, so you would have to convert it. I am considering doing this myself. You might find it to be worth the trouble, but I haven't looked at every detail, yet, so I couldn't say for sure. There are only tow files that are involved (.m and .h).
So, in an iPhone app I am working on, I've decided that the best way to display all the contents to the user is to have the top part of the screen show some information, and the bottom of the screen show different information. However, the bottom part will change sometimes, so I was working on implementing that.
Another app that does this is the MTGLife app, here are some pictures:
http://picasaweb.google.com/lh/photo/HILMaJPnbLxP6hQRkn_6XA?feat=directlink
http://picasaweb.google.com/lh/photo/d5wpS8x_aRyAEOBpYYIxwQ?feat=directlink
http://picasaweb.google.com/lh/photo/RW-BQfqx-VytRim3BxeRZQ?feat=directlink
You see that upon hitting a button, the picker switches over and displays the log. Hitting the same button switches them back, with a pretty animation. I would like to do the same thing in my application. I'm not sure the best way to go about it though...
I was thinking that I would make 2 UIViews, and then would simply flip between them, but I want to get some opinions first on how to do this, and then a push in the right direction.
Thank you!
The 2 UIViews is a good approach. By using the UIView animations functions, you can switch between the Log and the Picker with the desired transition.
In the UICatalog sample application (see TransitionViewController), there an example on how to animation two subviews
I am having a terrible time trying to get an input box like the one in the SMS app.
Can anyone offer some guidance on how to build one of these and make it look good? I need an input box that is shaped nicely like the UITextfield but will stretch vertically when typing.
I assume that I need to calculate width of the text and stretch the overlay image frame vertically when the text word wraps. The closest I have come does stretch but the cursor bounces all around when nearing the boundaries.
UPDATE:
I have worked on this everyday for a week and I have about given up on the UITextView. I can get it to stretch properly but when backspacing, the Textview height shrinks too much when going up a line. As I continue backspacing it corrects itself. For example, it displays this behavior when I am on line 4 and backspace up to line 3. Then as I continue backspacing, it corrects until I get to the end of line 2. Then it corrects itself,.... etc.
I decided to try to subclass UITextField but I can't even get it to display in the Frame size that I specify. 150,150,150,150.
Try Chat Input Sample. It has the similar look and functionality of SMS app.
Three20 project has a control that should do this for you.
From the Three20 README:
TTTextEditor is a UITextView which can
grow in height automatically as you
type. I use this for entering messages
in Facebook Chat, and it behaves
similarly to the editor in Apple's SMS
app.
You get to do this yourself. Luckily, the UITextField can notify you whenever its text changes using UITextFieldTextDidChangeNotification, and luckily NSString has methods (under the UIKit Additions) that let you get the height of the string given a certain width using boundingRectWithSize:options:attributes:context:, and luckily you can resize a UITextField yourself using frame.
I know this is old but for the people that still look at this answer there is now a nice control from Slack that does that called SlackTextViewController.
When I've learned that I have to write some code to make the iphone keyboard go away. I was quite surprised. I was surprised even more when it become apperent that it is just the top of the iceberg.
What are the expected UI behaviors that aren't provided by system OOTB?
Is the list below complete?
The expected UI behaviors:
Focusing next text field when [done] is hit
Hiding the keyboard when background is hit
Using Touch Up Inside to fire a button action. (To give user opportunity to change his/her mind)
Supporting the screen rotation.
Some of that is silly, but some of it has uses as well.
Focusing next text field when [done] is hit
Which field is "next"? If you have a large form with fields both next to and above/below each other, next might not be so obvious. Even if they are in some linear layout, the iPhone would have to work to figure out which one is next. Do you want to wrap around at the end of the form, or dismiss the keyboard, or submit the form?
Hiding the keyboard when background is hit
I mostly agree with you here, though there are a few cases where this is useless. For example, adding a new phone number in the contact app.
Using Touch Up Inside to fire a button action
This one I really don't get. I can only guess that it's designed to allow you to use buttons instead of the touchesBegan/Moved/Ended methods. I guess it could be useful, but I've never used anything but Touch Up Inside.
Supporting the screen rotation
Many apps just don't work in any other orientation, such as games. If you want to use rotation, you only have to add two lines of code assuming you've done your layout well.
I hope this helps explain some of the strangeness. Aside from the keyboard dismissal, I've never really found anything too annoying. The one thing I wish they supported was using the highlight state of UIButtons for the set state. It would be a quick and easy toggle button, but I've taken to screenshotting a highlighted button and using that for the background image of a selected button.
Want a rounded rectangular button that isn't white? Since that one uses a background image, you can't just click something somewhere that makes it the color of your choice. You have to create your own image or you could even use CSS (WTF!?) to do it.
Unfortunately, the iPhone SDK lacks a lot of helpful things one would think would just be there. However, many people have taken the time to write wrappers for many of these kinds of things to help facilitate development - a quick google search into the functionality you are expecting may turn up a lot of useful answers!
For example, you could make the keyboard go away when you tap outside of it by creating a new view when it appears, and placing that view behind any user-interactable views on the screen. When that new view is tapped, it will become first responder and cause the keyboard to slide away (because the UITextField is no longer first responder).
Such a thing could be easily implemented as a drop-in fix for pretty much anything you'd need it for with very little code.
Still should have been included in the SDK in the first place, though!