creating instruction screen in iOS - iphone

I often time see in an iOS apps when you first launch the app there will be a one time instruction with arrows and such to show a first time user guide. It's usually a black transparant colored screen with arrows. I was trying to find a few app that does this, but I couldn't. Was wondering if someone knew the terms for these and how to create it?

Create a UIView and place it above the view you're wishing to guide the user through. Set up the UIView as a IBOutlet in your classes header file, set the background to black and set the alpha to 0.3 or something similar (test to see how it looks).
In header:
IBOutlet UIView *overlayView;
In main:
overlayView.alpha = 0.3f;
You may want to make sure that the overlay shows the first time the users opens the app or maybe store a value in a database for when the user dismisses the screen so that you don't show it again. To do this you can hide the UIView or simply set the alpha to 0.
Then simply add images or annotations to the UIView. As "bentford" said it's quite broad but this should get you on your way. You can also use multiple UIView's or even transformations to animate the screens.

I use Skitch. You can find it in the Mac App Store.
Skitch can take the screenshot in the simulator and overlay the arrows and notes. Then when you launch the app, you show the image created with Skitch in a UIImageView on top of the actual view. Then just hide the UIImageView.

Related

UIButton images look fine in IB but get stretched when displayed on app

I'm developing an Enterprise app for tracking mileage and maintenance for company vehicles. I've added graphic buttons to snazz it up a bit. The buttons look the way they're supposed to look on the XIB in IB, and on the iPhone all other UIViews look correct, but on one particular UIView the graphic images are stretched way out of proportion vertically.
The first image below shows how it's supposed to look, with the three graphics buttons at the bottom. The second image shows how it's showing on the phone. The Help button on this screen cap shows normally, but it can't be counted on to stay that way.
It also is not consistent. Calling this view at any time may show the image stretched or it may not show an image at all. It rarely shows the image normally, like the Help button looks below.
The development phone is a 4S running 6.1.3. The views are set for the Retina 3.5 screen. XCode is the latest (whatever it is).
Again, it's only on this one view that the problem shows up. There is another UIView on the same view controller that is hidden when this UIView is shown. The button graphics on the other view look fine. All of the other views and view controllers use the same graphics on the UIButton, without any problem.
In Interface Builder (Xcode) you created the view using a 4.5-inch screen height.
But the device where you are seeing the problem is a 5-inch screen. So the view is resized to fit.
And when it does that, the autolayout constraints that Interface Builder put on those subviews take over to determine what they do. Those constraints are causing the heights to change.
No need to turn Autolayout off. Autolayout can be very useful, but it seems to enjoy randomly assigning the constraint "Align Baseline to:" to UIButtons after repositioning them.
Just select the UIButton/UIImageView in question inside Storyboard, locate the constraint "Align Baseline to:", tap the gear icon and select "Promote to User Constraint", and tap once more and select "Delete". This should solve your issue.
In response to the comments here, I will answer my own question: I turned Autolayout off for this view controller, and that fixed everything. This is the first app I have written since XCode has begun development for the iPhone 5, so I wasn't aware of the Autolayout feature. I'll need to understand how it works and why it did what it did.
Thanks for all your help!

How does Facebook iPhone app implement the pop-over window for notifications?

How does Facebook iPhone app (4.1) implement the pop-over window for notifications (see below for screenshot)? I thought this was only capable on the iPad. Is this a lookalike that they have custom built?
Check out this library which can implement pop over menus like facebook app: https://github.com/50pixels/FPPopover
I think it is far more complicated (and cleaner) than either of answers (guesses) so far. It is likely a completely separate view controller with it's own content view that is being added as a subview of the container view.
There are some libraries that so a similar thing, here is one for example:
https://github.com/KJoyner/SeaGlass/wiki/SGPopoverController-Documentation
http://www.facebook.com/note.php?note_id=107632999326583
https://github.com/chrismiles/CMPopTipView
My first guess would be that the "popover" is just a subview within the mainview.
First you create the subview, then hide it mySubView.hidden = TRUE; . When the user taps on the Globe button just "unhide" mySubView.hidden = FALSE; the subview with a nice 1 second animation (which will make it fade in).
I imagine that the edges with the rounded corners, subtle inner glow, and outer shadow are part of a resizable 9 part image. From there, it just about placing it on screen stretching it out and drawing the arrow at the appropriate location to line up with the bar button item.

UIPickerView Causing Crash in iOS4

I have a simple tabbar app. Built directly from the tabbar template. As I test the app, I notice that the app sometimes crash. After pinpointing the right sequence, I found out that the app will crash if I do this:
Run app. Open the view that has a UIPickerView on it.
Open another view.
Tap home button (this will send the app to background).
Tap the app icon again to bring it at the front.
Tap the view that has the UIPickerView in it.
Crash!
Checking the console shows:
-[UIPickerView setFrame:]: invalid height value 130.0 pinned to 162.0
The UIPickerView I use is a custom size. I use transform of scale 0.8f on the height. So if you calculate 0.8*162.0 is indeed 129.9f (130 as mentioned by the console).
I have no idea how to fix this. Any ideas?
The problem is solved. It seems when the app goes to the background, UIPickerView needs to find its components resources again. It is not about sizing of UIPickerView at all.
I used images for the UIPickerView components, so after I populate the UIPickerView with these images, I released all the images that were allocated earlier. These images must not be released if it were to work in iOS4.
Only release them when the app ends.
Your problem has been fixed by another guy with a radical approach. See this post'sanswer provided by a guy named bhavinb.

Customized Camera Toolbar on iPhone

I've created a camera application for iPhone and now I sit and polish the last of it. My application is a collage application where the user can take multiple pictures in a row.
As it is today I have a customized camera view that contains one UIButton for taking the pictures and one UIButton for getting back to the main view.
The problem is that my application is design for landscape mode and the camera control can only show in portrait mode. This makes the design of the GUI a little bit tricky and I now want to move away from having the buttons in the view to having the placed in a toolbar. When you initialize the camera you can set a bunch of different parameters and one of them is UIImagePickerController.toolbarHidden. If I set the value to NO it will show an empty toolbar and my question here is, how do I add items to this toolbar?
I've tried different solutions without any luck.
Thanks,
drisse
Does the standard UIViewController method -setToolBarItems:animated: method not work?

UIButton Game character selection to UIImageView animation

I am almost at the end of coding my kids educational application, woohoo!.
But... Im stuck on something.
When app loads i have my main view. It has 4 buttons for flipviews(each with ten views of content) and 4 buttons for character selection(an image that will follow you through every screen of content).
Problem is im unsure on how to link UIButton selection to UIImage display in multiple views. I want the user to choose a character button and then continue to the flipviews and in the views the image displayed should be the one that they have selected on the main view. So everytime they return to the main view they can change the character that will follow them around the app.
Any thoughts, help or code would be much appreciated!
Thank You
Alex
Make a new object, a subclass of UIImageView, which has a -setImage method. Once you set the image, then where ever you embed that object, it will display the same image. You could even have that subclass view have a score displayed next to it, or a name or other stats, so as you go from one screen to another, you have all that info follow you around with the image. No need to create labels in all the screens for global info like that.
In summary:
make a new subclass of UIView or UIImageView in Xcode using the New File... menu. You would do new UIView if you will have other items than just an image.
add methods that allow you to set the image, update text stats etc.
BONUS: you can make the class handle taps, so if a user taps the image, you could do something like provide help or run a cute little animation
embed that object in any screens you wish. Keep in mind that you can have that view be sized differently in each screen using transforms. Cool, no?
that's pretty much it!
Good luck!