Points vs. Pixels

The iPhone 4 introduced a high resolution display with twice the pixels of previous iPhones. However you don't have to modify your code to support high-res displays; the coordinate system goes by points rather than pixels, and the dimensions in points of the screen and all UI elements remain the same.

iOS 4 supports high resolution displays (like the iPhone 4 display) via the scale property on UIScreen, UIView, UIImage, and CALayer classes. If the object is displaying high-res content, its scale property is set to 2.0. Otherwise it defaults to 1.0.

All you need to do to support high-res displays is to provide @2x versions of the images in your project. See the checklist for updating to iOS4 or Apple documentation for Supporting High Resolution Screens for more info.

Adjusting Sizes

Click here to see how to adjust View Frames and Bounds.

Additional References

• Apple Documentation: Points vs. Pixels
• Apple Documentation: UIBarButtonItem Class Reference says "Typically, the size of a toolbar and navigation bar image is 20 x 20 points."
• Apple Documentation: UITabBarItem Class Reference says "The size of an tab bar image is typically 30 x 30 points."

Top • Home

custom UIImagePickerController camera view

WARNING: While there are many apps (including some of mine) that use this technique, you should know some new apps and updates to existing apps have been rejected recently (april/2009). Please read the comments. So far I don’t know of any instances where the developer successfully argued Apple’s decision if the app was rejected.

With all that said, there’s still an outpour of apps that use this technique… so the decision is your.

Here is some information about inspecting and customizing the UIImagePickerController camera view. You can download the working xcode project with all the source code here: customImagePicker

I wanted to remove the top part of the interface (gray bacground and “Take Photo” label) for  Mean Photo and Nice Photo (version 1.2+). There is also a very annoying image shift between the camera view and the preview that I thought would be nice to fix.

You can download the customImagePicker xcode project with all the source code that demonstrates these techniques. Run it on your iPhone in debug mode and check the log output for information.

CustomImagePicker is a subclass of UIImagePickerController. I override theviewDidLoad: method. When this method is called the view is ready to be customized (this approach was suggested in netsharc’s post here.)

-(void) viewDidAppear: (BOOL)animated {
	// make sure to call the same method on the super class
	[super viewDidAppear:animated];

	/* ... customize view here ... */
}

The inspectView:: method to recursively walks the view hierarchy and prints information about the views to the log: the class descriptions, the position and size and the path (talk about the path in a bit.) If you are interested in other information about the views, you can extend this method to print them. Here’s how this method is invoked:

[self inspectView:self.view depth:0 path:@""];

You can uncomment this line in viewDidLoad:, but it’s also called from previewCheckevery five seconds, so you can monitor the view hierarchy as it changes in the different states. So for example if you are interested what the view hierarchy is like in the preview mode, just take a photo and wait until the next dump appears in the log. The output looks something like this:

 .description: UILayoutContainerView: 0x125b90
 .frame: 0, 0, 320, 460
 .subviews: 2

 --subview-- /0
   .description: UITransitionView: 0x1205a0
   .frame: 0, 0, 320, 460
   .subviews: 1

     --subview-- /0/0
     .description: UIView: 0x125da0
     .frame: 0, 0, 320, 460
     .subviews: 1

     --subview-- /0/0/0
       .description: PLCameraView: 0x125e50
       .frame: 0, 0, 320, 460
         .subviews: 4

       --subview-- /0/0/0/0
         .description: UIView: 0x1264c0
         .frame: 0, 0, 320, 427
         .subviews: 0

       --subview-- /0/0/0/1
         .description: UIImageView: 0x128850
           .class: UIImageView
         .frame: 10000, 10000, 320, 480
         .subviews: 0

       --subview-- /0/0/0/2
         .description: UIView: 0x11b200
         .frame: 0, 0, 320, 33
         .subviews: 0
  
       --subview-- /0/0/0/3
         .description: PLCropOverlay: 0x127dc0
         .frame: 0, 0, 320, 460
         .subviews: 3

         --subview-- /0/0/0/3/0
           .description: UIImageView: 0x12b2f0
             .class: UIImageView
           .frame: 0, 0, 320, 96
           .subviews: 0

         --subview-- /0/0/0/3/1
           .description: PLCropLCDLayer: 0x12b350
           .frame: 0, 0, 320, 96
             .subviews: 0

         --subview-- /0/0/0/3/2
           .description: TPBottomDualButtonBar: 0x12b5b0
           .frame: 0, 0, 320, 96
           .subviews: 2

           --subview-- /0/0/0/3/2/0
               .description: TPPushButton: 0x12ba40
             .frame: 22, 22, 128, 47
             .subviews: 0

           --subview-- /0/0/0/3/2/1
             .description: TPCameraPushButton: 0x12df10
               .frame: 170, 170, 128, 47
             .subviews: 1

             --subview-- /0/0/0/3/2/1/0
               .description: UIImageView: 0x12e960
               .class: UIImageView
               .frame: 51, 51, 26, 19
                 .subviews: 0

 --subview-- /1
   .description: UINavigationBar: 0x125a30
   .frame: 0, 0, 320, 44
   .subviews: 1

   --subview-- /1/0
     .description: UINavigationItemView: 0x11abe0
       .frame: 160, 160, 0, 27
     .subviews: 0

Confusing? It’s actually pretty simple (although not very pretty.)

Next to each subview you can see it’s path. For example /0/0/0/3 means that it is subview #3 of subview #0 of subview #0 of subview #0. To look it up in the view hierarchy, just do this:

    UIView *theView = [[[[[[[[self.view subviews] objectAtIndex:0]
                                        subviews] objectAtIndex:0]
                                        subviews] objectAtIndex:0]
				        subviews] objectAtIndex:3];

See the numbers next to objectAtIndex:? It’s /0/0/0/3… the path… So now you can look up any UIView from the hierarchy and modify it!

Even if the description shows that the class is part of the private iPhone libraries (eg.PLCropLCDLayer), it must be a subclass of UIView to be in the hierarchy. We don’t know (or at least not supposed to know) what methods the private library classes have, but they do have all the methods and properties of UIView. So we can maketheView transparent or hidden like this (this is actually the path for the UI above the camera preview):

    [theView setAlpha:0.5];    // semi transparent
    [theView setHidden:YES];    // hidden

I wanted to get rid of the gray bar and “Take Photo” label on top. The path for the gray background is /0/0/0/3/0, the label is /0/0/0/3/1. I look these up and animate their opacity (alpha) to 0:

    UIImageView *overlay = [[[[[[[[[[self.view subviews] objectAtIndex:0]
                                               subviews] objectAtIndex:0]
                                               subviews] objectAtIndex:0]
                                                 subviews] objectAtIndex:3]
                                               subviews] objectAtIndex:0];

    UIView *label = [[[[[[[[[[self.view subviews] objectAtIndex:0]
                                          subviews] objectAtIndex:0]
                                        subviews] objectAtIndex:0]
                                        subviews] objectAtIndex:3]
                                        subviews] objectAtIndex:1];
  
    // animate their visibility (alpha) to 0 with a simple UIView animation
    //
    [UIView beginAnimations:nil context:nil];
    [overlay setAlpha:0.0];
    [label setAlpha:0.0];
    [UIView commitAnimations];

Here’s what it looks like in Nice Photo. The LOVE graphics is added in a separate view on top of the camera view.

Nice Photo App with Camera UI tweaked

The camera view is /0/0/0/0. To make it semi transparent (not sure why you would do this, but shows how to look it up):

    UIView *cameraView = [[[[[[[[self.view subviews] objectAtIndex:0]
                                           subviews] objectAtIndex:0]
                                           subviews] objectAtIndex:0]
                                             subviews] objectAtIndex:0];
    [cameraView setAlpha:0.5];

You might be interested in button push events. The buttons are subclasses ofUIControl, so you can easily add an action to them. For example to add an action to the camera button (TPCameraPushButton at /0/0/0/3/2/1):

    UIControl *captureButton = [[[[[[[[[[[[self.view subviews] objectAtIndex:0]
                                                     subviews] objectAtIndex:0]
                                                     subviews] objectAtIndex:0]
                                                       subviews] objectAtIndex:3]
                                                     subviews] objectAtIndex:2]
                                                     subviews] objectAtIndex:1];
  
    [captureButton addTarget:self action:@selector(captureButtonAction:)
        forControlEvents:UIControlEventTouchUpInside];

(The captureButtonAction: method prints a message to the log when you tap the camera button in customImagePicker.)

I wanted to fix the shift between the preview and the camera view. To do this, I have a timer calling the previewCheck method (I’m pretty sure there’s more elegant ways… but come ont, timers are cool!). The preview will be added to the UIView at /0/0/0/2. By default this view has no subviews, but subviews are added when in preview mode. Then I modify the transform of /0/0/0/2/0/0/0 like such (btw this only makes sense in portrait mode):

    [previewImage setTransform:CGAffineTransformTranslate(
        CGAffineTransformMakeScale(320.0/1200, 320.0/1200),
                                   -12.0*1200/320,-17.0*1200/320)];

(Now you probably know why I was so interested in the view sizes… the view frames for the preview image are completely bizarre… hence the image shift. Are people allowed to drink on the job at Apple?)

You can experiment with other views. The inspectView method gives you a pretty good map of the hierarchy and it also works for other source types (like picking an image from the photo library.) Please look at the customImagePicker xcode project, I added lots of comments (more than what I retyped here ;).

As always, feel free to contact me… and please check out www.meanvsnice.com for some shots taken with Mean Photo and Nice Photo.

The API and overall approach for working withMPMoviePlayerController has changed just enough in the 3.2 SDK (iPad) and iOS4 SDK to cause working applications in earlier releases to be problematic when running on later SDKs. In this post I’ll walk through a short example of a movie player application that will work with 3.x, 3.2 and 4.0 SDKs.

In the next post, Display iPhone Movies in Portrait Mode, I’ll show how to create a movie player that runs in a view that is not fullscreen as well as how to show a few lines of code to display a movie in portrait mode – the one caveat here is that both of the tips in the second post will apply only to OS versions 3.2 and up.

What’s Changed with MPMoviePlayerController in 3.2 and 4.0?

There are any number of changes in the MPMoviePlayerController, however, a few standout as potential roadblocks to getting a movie to display:

- In 3.1 and earlier versions, MPMoviePlayerController was full-screen only. Playing a movie was straight-forward, create a player, initialize with a file (path or URL) and call a method to start playback – the rest was taken care of for you.

- With 3.2 and later, movies can playback in fullscreen or a custom view, as well as portrait or landscape.

- The notification MPMoviePlayerContentPreloadDidFinishNotification has been deprecated. This notification was used in earlier versions to notify observers that a movie was loaded and ready to play.

The Movie Application

The application in this post is quite simple, it consists of a view controller with nothing more than a button to start playback and a second view controller to manage aMPMoviePlayerController and the NSURL of the movie. The two views are shown in the figures below:

Primary View Controller

The interface definition for the primary view is shown below:

#import <UIKit/UIKit.h>   @class CustomMoviePlayerViewController;   @interface TestViewController : UIViewController {   CustomMoviePlayerViewController  *moviePlayer;   UIButton  *playButton; }   @end

CustomMoviePlayerViewController is the controller for managing the movie, we’ll look at that code in a moment.

In the code below we create the view, add a play button, create a method for processing a button press event and within loadMoviePlayer, we get a reference to the movie file and create an instance of the CustomMoviePlayerViewController, which will load and play the movie.

- (void)loadView {   // Setup the view   [self setView:[[[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]] autorelease]];   [[self view] setBackgroundColor:[UIColor grayColor]];   [[self view] setUserInteractionEnabled:YES];     // Add play button    playButton = [[UIButton alloc] initWithFrame:CGRectMake(53, 212, 214, 36)];       [playButton setBackgroundImage:[UIImage imageNamed:@"playButton.png"] forState:UIControlStateNormal];   [playButton addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];       [[self view] addSubview:playButton];   }   - (void)buttonPressed:(UIButton *)button {   // If pressed, play movie   if (button == playButton)     [self loadMoviePlayer];	 }   - (void)loadMoviePlayer {     // Play movie from the bundle   NSString *path = [[NSBundle mainBundle] pathForResource:@"Movie-1" ofType:@"mp4" inDirectory:nil];     // Create custom movie player      moviePlayer = [[[CustomMoviePlayerViewController alloc] initWithPath:path] autorelease];     // Show the movie player as modal   [self presentModalViewController:moviePlayer animated:YES];     // Prep and play the movie   [moviePlayer readyPlayer];     }

Notice that the movie for this example is loaded from the application bundle. Also, once the custom movie player is created, the view is shown as a modal view.

Custom Movie Player View Controller

The interface definition for the movie view controller is below:

@interface CustomMoviePlayerViewController : UIViewController  {   MPMoviePlayerController *mp;   NSURL  *movieURL; }   - (id)initWithPath:(NSString *)moviePath; - (void)readyPlayer;   @end

The initialization code is where the movie player and associated URL are created. The primary goal of the initialization is to create the NSURL needed by the movie player.

- (id)initWithPath:(NSString *)moviePath {   // Initialize and create movie URL   if (self = [super init])   {     movieURL = [NSURL fileURLWithPath:moviePath];         [movieURL retain];   }   return self; }

The code to create the player and setup the notifications is where we start to deal with the differences in how the movie player works on various OS versions. Notice below the call to respondsToSelector, this is the Apple recommended way to check for feature availability, versus looking for a specific OS version.

For devices running 3.2 and above, the movie player controller has a method namedloadstate, if this exists we can access a few additional methods to set the player to fullscreen as well as request the movie to begin preloading.

Equally important is the distinction of which notification to setup – see lines 16 and 24.

You can read more about managing different OS version in this post Developing iPhone Apps with iOS4 SDK, Deploying to 3.x Devices

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 

- (void) readyPlayer {    mp =  [[MPMoviePlayerController alloc] initWithContentURL:movieURL];     // For 3.2 devices and above   if ([mp respondsToSelector:@selector(loadState)])    {     // Set movie player layout     [mp setControlStyle:MPMovieControlStyleFullscreen];     [mp setFullscreen:YES];       // May help to reduce latency     [mp prepareToPlay];       // Register that the load state changed (movie is ready)     [[NSNotificationCenter defaultCenter] addObserver:self          selector:@selector(moviePlayerLoadStateChanged:)          name:MPMoviePlayerLoadStateDidChangeNotification          object:nil];   }     else   {     // Register to receive a notification when the movie is in memory and ready to play.     [[NSNotificationCenter defaultCenter] addObserver:self          selector:@selector(moviePreloadDidFinish:)          name:MPMoviePlayerContentPreloadDidFinishNotification          object:nil];   }     // Register to receive a notification when the movie has finished playing.    [[NSNotificationCenter defaultCenter] addObserver:self          selector:@selector(moviePlayBackDidFinish:)          name:MPMoviePlayerPlaybackDidFinishNotification          object:nil]; }

The next two chunks of code are for each of the selectors, one for each notification. The code below is for earlier OS versions – nothing more than removing the notification and asking the movie to play.

/*--------------------------------------------------------------------------- * For 3.1.x devices * For 3.2 and 4.x see moviePlayerLoadStateChanged:  *--------------------------------------------------------------------------*/ - (void) moviePreloadDidFinish:(NSNotification*)notification  {   // Remove observer   [[NSNotificationCenter 	defaultCenter]      removeObserver:self     name:MPMoviePlayerContentPreloadDidFinishNotification     object:nil];     // Play the movie    [mp play]; }

For the notification generated in 3.2 and above, there are a few more details to tend to:

/*--------------------------------------------------------------------------- * For 3.2 and 4.x devices * For 3.1.x devices see moviePreloadDidFinish: *--------------------------------------------------------------------------*/ - (void) moviePlayerLoadStateChanged:(NSNotification*)notification  {   // Unless state is unknown, start playback   if ([mp loadState] != MPMovieLoadStateUnknown)   {     // Remove observer     [[NSNotificationCenter defaultCenter]        removeObserver:self       name:MPMoviePlayerLoadStateDidChangeNotification        object:nil];       // When tapping movie, status bar will appear, it shows up     // in portrait mode by default. Set orientation to landscape     [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeRight animated:NO];       // Rotate the view for landscape playback     [[self view] setBounds:CGRectMake(0, 0, 480, 320)];     [[self view] setCenter:CGPointMake(160, 240)];     [[self view] setTransform:CGAffineTransformMakeRotation(M_PI / 2)];        // Set frame of movie player     [[mp view] setFrame:CGRectMake(0, 0, 480, 320)];       // Add movie player as subview     [[self view] addSubview:[mp view]];          // Play the movie     [mp play];   } }

Beyond removing the notification, we also adjust the status bar, rotate the view, set the frame of the movie player, add the movie player as a subview in the view controller and wrap it all up by asking the movie to play.

Note: MPMoviePlayerViewController is also an option over creating your own view controller as I’ve done here.

Source Code

The easiest way to see all this working is to download the source code and step through the code in the debugger.

+ (void)navigationToMapAppFromCurrentToBranch:(BranchInfo *)info {

    NSString* urlString = [NSString stringWithFormat:@"http://maps.google.com/maps?saddr=%@&daddr=%@,%@",[BranchLocatorGlobal currentLocationStringForCurrentLanguage] , info.lat, info.lon];

    NSString* urlString2 = [urlString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

    NSURL* url = [[NSURL alloc]initWithString:urlString2];

    [[UIApplication sharedApplication] openURL:url];

}

关于参数：

在ios下，对于saddr可以指定为"Current%20Location"，这样可以指定Map使用本机的地址。

但是这个功能有个bug，参见：

http://www.martip.net/blog/localized-current-location-string-for-iphone-apps

#import <Foundation/Foundation.h>

#import <UIKit/UIKit.h>

@interface CustomPageControl : UIPageControl {

    UIImage* imageNormal;

    UIImage* imageCurrent;

}

@property (nonatomic, retain) UIImage* imageNormal;

@property (nonatomic, retain) UIImage* imageCurrent;

@end

#import "CustomPageControl.h"

@interface CustomPageControl(Private)

- (void) updateDots;

@end

@implementation CustomPageControl

@synthesize imageNormal,imageCurrent;

/** override to update dots */

- (void) setCurrentPage:(NSInteger)currentPage

{

    [super setCurrentPage:currentPage];

    // update dot views

    [self updateDots];

}

/** override to update dots */

- (void) updateCurrentPageDisplay

{

    [super updateCurrentPageDisplay];

    // update dot views

    [self updateDots];

}

/** Override setImageNormal */

- (void) setImageNormal:(UIImage*)image

{

    [imageNormal release];

    imageNormal = [image retain];

    // update dot views

    [self updateDots];

}

/** Override setImageCurrent */

- (void) setImageCurrent:(UIImage*)image

{

    [imageCurrent release];

    imageCurrent = [image retain];

    // update dot views

    [self updateDots];

}

- (void) endTrackingWithTouch:(UITouch*)touch withEvent:(UIEvent*)event 

{

    [super endTrackingWithTouch:touch withEvent:event];

    [self updateDots];

}

#pragma mark -

#pragma mark updateDots

- (void) updateDots

{

    if(imageNormal || imageCurrent)

    {

        // Get subviews

        NSArray* dotViews = self.subviews;

        for(int i = 0; i < dotViews.count; ++i)

        {

            UIImageView* dot = [dotViews objectAtIndex:i];

            // Set image

            dot.image = (i == self.currentPage) ? imageCurrent : imageNormal;

        }

    }

}

#pragma mark-

#pragma mark dealloc

- (void) dealloc

{

    [imageNormal release];

    imageNormal = nil;

    [imageCurrent release];

    imageCurrent = nil;

[super dealloc];

}

@end

MyModalViewController *targetController = [[[MyModalViewController alloc] init] autorelease];
 targetController.modalPresentationStyle = UIModalPresentationFormSheet;
 targetController.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal; //transition shouldn't matter
 [self presentModalViewController:targetController animated:YES];
 targetController.view.superview.frame = CGRectMake(0, 0, 200, 200);//it's important to do this after presentModalViewController
 targetController.view.superview.center = self.view.center;//self.view assumes the base view is doing the launching, if not you might need self.view.superview.center etc.

＋＋＋＋＋

The Apple docs describe this exception:

On the iPad, if a view controller modally presents its view using the "form sheet" style, the keyboard, once shown, is not hidden until the user taps the dismiss key or the modal view controller is programmatically dismissed. The purpose of this behavior is to avoid excessive animations as a user moves between views that are largely, but not entirely, text fields.

Which happens to apply here (modal form sheet on iPad). It's apparently just not possible to dismiss the keyboard in this case. Super. :\

＋＋＋＋＋

[loadingText setFrame:CGRectIntegral(loadingText.frame)];

＋＋＋＋＋

@implementation UIButton (ContextualAction)

- (void)setContextualActionStyle

{

    UIButton *button = self;

    CGRect oldFrame = button.frame;

    button.frame = CGRectMake(0.0f, 0.0f, 1000.0f, 1000.0f); // width and height must be bigger enough.

    CALayer *layer = button.layer;

    layer.cornerRadius = 5.0f;

    layer.masksToBounds = YES;

    layer.borderWidth = 1.0f;

    layer.borderColor = [UIColor lightGrayColor].CGColor;

    CALayer *shineLayer = [CALayer layer];

    shineLayer.frame = button.layer.bounds;

    UIImage *lightGrayBackgroundImage = [UIImage imageNamed:@"texture_light.png"];    

    shineLayer.backgroundColor =  [UIColor colorWithPatternImage:lightGrayBackgroundImage].CGColor;

    shineLayer.borderWidth = 2.0f; // 1.0f px will be cover by layer.border.

    shineLayer.borderColor = [UIColor whiteColor].CGColor;

    [button.layer addSublayer:shineLayer];

    button.titleLabel.textAlignment = UITextAlignmentCenter;

    button.titleLabel.font = [UIFont boldSystemFontOfSize:10];

    [button setTitleColor:[UIColor colorWithRed:102.0f/255.0f green:102.0f/255.0fblue:102.0f/255.0f alpha:1.0f] forState:UIControlStateNormal];

    [button setTitleShadowColor:[UIColor whiteColor] forState:UIControlStateNormal];

    button.titleLabel.shadowOffset = CGSizeMake(0.0f, 1.0f);

    [button bringSubviewToFront:button.titleLabel]; // must add. otherwise the title won't show.

    button.frame = oldFrame;

}

@end

Enabling Remote Debugging via Private APIs in Mobile Safari

NOV 17TH, 2011

1 2 3 

@interface WebView (WebPrivate) + (void)_enableRemoteInspector; @end 

1 2 3 4 5 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   // ...Snipped...   [NSClassFromString(@"WebView") _enableRemoteInspector];   // ...Snipped... } 

$ sudo lsof -i TCP -a -p $(pidof UIWebViewWebGL) -P COMMAND    PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME UIWebView 3748 nathan    9u  IPv6 0xffffff800fa25d80      0t0  TCP localhost:9999 (LISTEN) UIWebView 3748 nathan   13u  IPv6 0xffffff80111ba340      0t0  TCP localhost:9999->localhost:52483 (ESTABLISHED) 

1 2 3 4 5 6 7 8 9 10 11 12 13 

MobileSafari_PID=$(ps x | grep "MobileSafari" | grep -v grep | awk '{ print $1 }')  if [ "$MobileSafari_PID" == "" ]; then  echo "Mobile Safari.app must be running in the Simulator to enable the remote inspector." else    cat <<EOM | gdb -quiet > /dev/null   attach $MobileSafari_PID   p (void *)[WebView _enableRemoteInspector]   detach EOM  fi 

    UIView *contentView = [cell.subviews objectAtIndex:0];    

    if (UIDeviceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation))

    {

        contentView.frame = CGRectMake(0, 0, 480, cell.frame.size.height);

    }

    else {

        contentView.frame = CGRectMake(0, 0, 320, cell.frame.size.height);        

    } 

第三种：

不使用自定义的cell，而是使用普通的cell，然后使用contentView来进行配置。

注意：这种方法我没有试验过，不知道是否可以，只是猜测而已。因为普通的cell的旋转是没有问题的。