Scott at 22:31, 25 October 2024

2024-10-25T22:31:41Z

← Older revision		Revision as of 22:31, 25 October 2024
Line 4:		Line 4:
	* top status bar is 20px, bottom tab bar is 44px		* top status bar is 20px, bottom tab bar is 44px
	* All images should be png		* All images should be png
	* test

	==Basic Setup==		==Basic Setup==

Scott: /* Facts */

2024-10-25T22:31:22Z

Facts

← Older revision		Revision as of 22:31, 25 October 2024
Line 4:		Line 4:
	* top status bar is 20px, bottom tab bar is 44px		* top status bar is 20px, bottom tab bar is 44px
	* All images should be png		* All images should be png
			* test

	==Basic Setup==		==Basic Setup==

Scott at 00:21, 4 February 2011

2011-02-04T00:21:45Z

New page

{{lowercase title}}
==Facts==
* iPhone Resolution: 320x480
* top status bar is 20px, bottom tab bar is 44px
* All images should be png

==Basic Setup==
* Start by launching <code>/Developer/Applications/Xcode</code>
* <code>File -> New Project -> View-Based Application</code>, choose name (e.g. <code>MyProject</code>)
* Edit Objective-C code in <code>Groups & FIles -> Classes</code> with Xcode
* Edit user interface with <code>Groups & Files -> Resources -> MyProjectViewController.xib</code> with Interface Builder. Drag elements from the Library window to the View window.
* Click Build and Run in Xcode to test.

==Application Icon==
# Create a 57x57 png file
# Drag from Finder to Xcode <code>Resources</code> folder
# Choose "<code>Copy</code>" to create a copy in the project directory
# Click the <code>Resources -> Info.plist</code> file
# Next to "<code>Icon File</code>", enter the name of the png.

==Interface Builder hints==
* The MyProjectViewController.xib window has three "View Mode" buttons. Use the middle one to drill down and select overlapped or hidden View elements.
* When a View element is selected, double click it or use Command-1 to edit attributes. (Command is the clover-shaped button)
* Hold the Option key when mousing over View elements to see more properties.
* If you have an existing element in the View that you want to duplicate, Option-drag it to get a copy.

==Outlet==
* Communicate from code to view with an IBOutlet. In header file:
<source lang="objc">
IBOutlet UILabel *statusText;
</source>
* An outlet must be defined in the header file before it can be accessed in Interface Builder.
* Control-drag from File's Owner to the element and choose the corresponding outlet.

==Action==
* Communicate from view to code with an IBAction. In header file:
<source lang="objc">
- (IBAction)doSomething:(id)sender;
</source>
* Select element and bring up connections inspector (Tools->Connections or Command-2).
* Choose the desired event by clicking the circle to the left of it.
* Drag circle to File's Owner and select the desired action.

==Basic Interaction Sample App==
MyProjectViewController.h:
<source lang="objc">
#import <UIKit/UIKit.h>
@interface MyProjectViewController : UIViewController {
IBOutlet UILabel *statusText;
}
@property (retain, nonatomic) UILabel *statusText;
-(IBAction)buttonPressed:(id)sender;
@end
</source>

MyProjectViewController.m:
<source lang="objc">
#import "MyProjectViewController.h"
@implementation MyProjectViewController
@synthesize statusText;
-(IBAction)buttonPressed:(id)sender {
NSString *title = [sender titleForState:UIControlStateNormal];
NSString *newText = [[NSString alloc] initWithFormat: @"%@ button pressed.", title];
statusText.text = newText;
[newText release];
}
...boilerplate...
-(void)dealloc {
[statusText release];
[super dealloc];
}
@end
</source>
======View:======

# Double-click MyProjectViewController.xib in the Resources directory.
# Create a Label with no text and two RoundRect buttons named "Left" and "Right".
# Control-click on "File's Owner" in the xib window and drag it to the Label object in the view window. Let go of the mouse button and choose "statusText" from the Outlets popup menu.
# Select the Left button by clicking it; then open the Connection Inspector from Tools menu.
# Find Events -> TouchUpInside
# Click the circle next to TouchUpInside and drag to the "File's Owner" icon. Select "buttonPressed" from the popup menu.
# Do the same for the Right button.
# Build and Run

==User Interface Elements==

======Label======

Has a "text" attribute that you can change with an outlet. See the example above.

======Image======

# Drag a png file from Finder to the Resources folder in Xcode to import the image.
# Drag an ImageView element into the View
# Open attributes and tell it which png file to use
# Select "Size to Fit" from the Layout menu so the ImageView object is the same size as the imported image.
# Choose Drawing->Opaque to speed up drawing if there is no background

======Text field======
In MyProjectViewController.h:
<source lang="objc">
#import <UIKit/UIKit.h>
@interface MyProjectViewController : UIViewController {
IBOutlet UITextField *nameField;
}
@property (nonatomic, retain) UITextField *nameField;
- (IBAction)textFieldDoneEditing:(id)sender; // make sure the text field gives up control when done editing
@end
</source>

In MyProjectViewController.m:
<source lang="objc">
...
@implementation MyProjectViewController
@synthesize nameField;
- (IBAction)textFieldDoneEditing:(id)sender { // make sure the text field gives up control when done editing
[sender resignFirstResponder];
}
...
</source>

In Interface Builder

Outlet: Control-drag from File's Owner to the text field and choose the corresponding outlet.

Action: Select text field and bring up connections inspector. Choose the "Did End on Exit" event. Drag circle to File's Owner and select "textFieldDoneEditing" action.

======Number field======

Same as text field but you need a background click action to allow the user to leave the field when done editing. Add the method declaration to both header and implementation file. Here is the implementation:
<source lang="objc">
- (IBAction)backgroundClick:(id)sender {
[numberField resignFirstResponder];
// add the same for any other edit fields that should lose focus
}
</source>

View:
# Use a Round Rect Button in the view and drag its edges to cover the entire screen.
# Use Layout->Send to Back to put it behind everything else.
# Then change its Type to Custom to make it disappear altogether.
# Tie the Touch Up Inside event to File's Owner backgroundClick action.

======Slider======
Use the "Value Changed" event to call the sliderChanged action. Access slider value with slider.value. Sample code:
<source lang="objc">
-(IBAction)sliderChanged:(id)sender {
UISlider *slider = (UISlider *)sender;
int progressAsInt = (int)(slider.value + 0.5f);
NSString *newText = [[NSString alloc] initWithFormat:@"%d", progressAsInt];
sliderLabel.text = newText;
[newText release];
}
</source>

======Switch======
Get value from <code>switch.isOn</code>. Use "Value Changed" event.

======Segmented Control======
Get value from <code>segmentedControl.selectedSegmentIndex</code>

======SubView======
Group elements inside a sub view. Hide all with <code>subview.hidden = YES</code>

======Action Sheet======
Modal dialog to force the user to choose an option. Use UIActionSheetDelegate protocol:
<source lang="objc">
...
@interface MyProjectViewController : UIViewController <UIActionSheetDelegate> {
...
</source>

Create an Action Sheet in an action method:
<source lang="objc">
UIActionSheet *actionSheet = [[UIActionSheet alloc]
initWithTitle:@"Are you sure?"
delegate:self
cancelButtonTitle:@"No way!"
destructiveButtonTitle:@"Yes, I'm sure!"
otherButtonTitles:nil];
[actionSheet showInView:self.view];
[actionSheet release];
</source>

Handle the action sheet response with this method:
<source lang="objc">
-(void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex {
if (buttonIndex == [actionSheet cancelButtonIndex] { /* do cancel action, if any */ }
else { /* do destructive (positive) action */}
}
</source>

======Custom Button======
To get nicer looking buttons, create a Round Rect button and then change its type to Custom. Download a nice looking button template from the web:

http://developer.apple.com/iphone/library/samplecode/UICatalog/index.html

Then implement the viewDidLoad method of UIViewController:
<source lang="objc">
-(void)viewDidLoad {
jmUIImage *buttonImage = [UIImage imageNamed:@"whiteButton.png"];
UIIMage *stretchableButtonImage = [buttonImage stretchableImageWithLeftCapWidth:12 topCapHeight:0];
[doSomethingButton setBackgroundImage:stretchableButtonImage forState:UIControlStateNormal];
}
</source>
Can also make the button change when pressed by using a different background image for state <code>UIControlStateHighlighted</code>

==Autorotation==
Controlled from the
<source lang="objc">
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
</source>

Available orientations:
* UIInterfaceOrientationPortrait
* UIInterfaceOrientationPortraitUpsideDown
* UIInterfaceOrientationLandscapeLeft
* UIInterfaceOrientationLandscapeRight

There are three different approaches to autorotation:

=====Autosize=====
Give elements autosize properties using the size inspector (command-3).

=====Restructure=====
Create outlets for each element; then call something like <code><br /></code>
<source lang="objc">
element.frame = CGRectMake(x1, y1, width, height)
</source>
to resize/relocate each on rotation in the
<source lang="objc">
-(void)willAnimateSecondHalfOfRotationFromInterfaceOrientation
</source>
method using self.interfaceOrientation as the "to" orientation.

======Animating a rotation======
<source lang="objc">
[UIView beginAnimations:@"move buttons" context:nil];
... CGRectMake calls to move stuff around ...
[UIView commitAnimations];
</source>

=====Swap views=====
* Create portrait and landscape outlets in the .h file. Save.
* Delete the default view from the project.
* Drag two or more View elements from the library and give them names like "portrait" and "landscape".
* Use the size inspector to update the geometry (480x300 for landscape with top status bar).
* Control-drag from File's Owner to each view and choose the related outlet.
* Control-drag from File's Owner to portrait and choose the View outlet to choose it as default
* Create this method in the .m file:
<source lang="objc">
-(void)willAnimateFirstHalfOfRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration {
if (toOrientation == UIInterfaceOrientationPortrait){
self.view = self.portrait;
self.view.transform = CGAffineTransformIdentity;
self.view.transform = CGAffineTransformMakeRotation(0); // In radians
self.view.bounds = CGRectMake(0, 0, 300, 480);
...
</source>

* Transform angles are:
** 0 for portrait
** M_PI/2 for landscape right
** M_PI for upside down
** -M_PI/2 for landscape left
* Link in the CoreGraphics framework to support the transform:
** Click Frameworks under the Groups and Files pane
** Project -> Add to Project menu
** /Developer/Platforms/iPhoneSimulator/Developer/SDKs/iPhoneSimulator3.1.sdk/System/Library/Frameworks/CoreGraphics.framework
** uncheck "Copy items to destination..."
** Reference type should be "Relative to current SDK"

IPhone - Revision history

Scott at 22:31, 25 October 2024

Scott: /* Facts */

Scott at 00:21, 4 February 2011