Jayr Parro

Adding Drop Shadow Effect in a View

A simple implementation of adding a drop shadow effect in a view instead of using “extra” shadow images.

.h file:

1
\#import <QuartzCore/QuartzCore.h>;

.m file:

1
2
3
4
5
6
7
 // add drop shadow
  self.tempView.layer.masksToBounds = NO;
  self.tempView.layer.shadowOffset = CGSizeMake(-10, 10);
  self.tempView.layer.cornerRadius = 10; // round corner
  self.tempView.layer.shadowRadius = 5;
  self.tempView.layer.shadowOpacity = 0.5;
  self.tempView.layer.shadowPath = [UIBezierPath bezierPathWithRect:self.tempView.bounds].CGPath; // drawing optimization

Initial View:

Output View:

You can download the code here.

Happy Coding! :)

Stretchable Images in iOS 5

In iOS 5, working with UIImage stretchableImageWithLeftCapWidth:topCapHeight: is deprecated; in which I’ve used it heavily to reduced app size, dynamic variable-width buttons, and less image files added in the project.

stretchableImageWithLeftCapWidth:topCapHeight:

1
2
3
4
5
6
// Creates and returns a new image object with the specified cap values   
// (Deprecated in iOS 5.0. Deprecated.   
// Use the resizableImageWithCapInsets: instead,   
// specifying cap insets such that the interior is a 1x1 area.)

-(UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

So, looking forward to support stretchable images in iOS 5, we’ll have to use this new method

resizableImageWithCapInsets:

1
2
3

// Creates and returns a new image object with the specified cap insets.  
-(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

Parameters
capInsets - The values to use for the cap insets.

Return Value - A new image object with the specified cap insets.

Discussion -
You use this method to add cap insets to an image or to change the existing cap insets of an image. In both cases, you get back a new image and the original image remains untouched.

During scaling or resizing of the image, areas covered by a cap are not scaled or resized. Instead, the pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom, to resize the image. This technique is often used to create variable-width buttons, which retain the same rounded corners but whose center region grows or shrinks as needed. For best performance, use a tiled area that is a 1x1 pixel area in size.

As noted in the documentation, cap insets of the image are pixel area that are not affected when the image is scaled or resized dynamically. The pixels beyond the cap area are being tiled.

In this example, I’ve use this image with dimension of 12 (width) x 43 (height) pixels. You need to check in Photoshop the actual cap pixels area (or should ask your designer). The sample image I’ve use has rounded corner in the top, which is specifically, 6 pixels width, and that’s the cap area that I don’t want to be scaled/resized.

In pre-iOS 5, we’ve use the stretchableImageWithLeftCapWidth:topCapHeight:

1
2
3
4
5
6
// note- stretchableImageWithLeftCapWidth deprecated in iOS 5
UIImage* image1 = [[UIImage imageNamed: FILE_IMG_BLUE_HEADER] stretchableImageWithLeftCapWidth:6.0 topCapHeight:0.0];

UIImageView* imageView1 = [[UIImageView alloc] initWithImage:image1];
imageView1.frame = CGRectMake(20, 115, 100.0, image1.size.height);
[self.view addSubview:imageView1];

The value parameter stretchableImageWithLeftCapWidth:6.0 is the left cap width pixel (6 pixels width as noted in our sample image).

In iOS 5+ onwards, we use resizableImageWithCapInsets:

1
2
// note- resizableImageWithCapInsets use in iOS 5+
self.imageView3.image = [[UIImage imageNamed: FILE_IMG_BLUE_HEADER] resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 6.0, 0.0, 6.0)];

I’ve put a value for UIEdgeInsetsMake for both left and right which is 6-pixels cap width. Then, UIEdgeInsetsMake returns a UIEdgeInsets data struct-

1
2
3
4

typedef struct {
    CGFloat top, left, bottom, right;
} UIEdgeInsets;

Output:

  1. An imageView in which the image is just stretch and nocap/tiled being applied. It looks ugly.
  2. An imageView in which the image is stretch and cap/tiled pixels are applied. The imageView is added in the view programmatically.
  3. The image is stretch and cap/tiled pixels are applied. The imageView is added via an outlet.

Screenshot:

You can download the sample code here.

Happy Coding! :)

iPad as Second Monitor Display

DIY Set-up using iPad as second monitor display.

Tools used:

  1. iPad side - Install Mocha VNC
  2. Mac OSX - Install ScreenRecycler

A full guide here.

Screenshots:

DLog – an NSLog Replacement

It’s more convenient and will add to app performance to log some statements only in Debug mode and avoiding them in release mode.

Plus, we can see in debug console the function & line numbers being logged.

1
2
3
4
5
6
7
\#ifdef DEBUG

\#define DLog(fmt, ...) NSLog((@"%s [Line %d] " fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__);
\#else
\#define DLog(...)
\#endif
\#define ALog(...) NSLog(__VA_ARGS__)

First add the following to the _Prefix.pch file in your Xcode project:
In the project’s Debug build configuration, set preprocessor macro DEBUG=1

Note:
DLog – log only in debug mode
ALog – log for both configurations (debug & release)

More info here:
http://kuoi.com/~kamikaze/read.php?topic=Cocoa&id=158 http://www.cimgf.com/2009/01/24/dropping-nslog-in-release-builds/

Simulators in Xcode 4.2

In XCode 4.2, now you can install pre iOS 5 Simulators which is very flexible for debugging previous versions of iOS 5.

See the screenshots.

Invoke Facetime In-app

Currently, Facetime API is not yet opened as of this writing…
For the time being, you can invoke Facetime initiating calls through URL:

1
2
3

NSURL *url = [NSURL URLWithString:@"facetime://+123456789"];
[[UIApplication sharedApplication] openURL:url];
  • +123456789 - is the Facetime phone number

Hope Facetime API will be open soon… ;)

Localize the Default Splash Screen Image in iOS

Apple Official Documentation:

An iOS application should be internationalized and have a language.lproj directory for each language it supports. In addition to providing localized versions of your application’s custom resources, you can also localize your application icon, launch images, and Settings icon by placing files with the same name in your language-specific project directories. Even if you provide localized versions, however, include a default version of these files at the top level of your application bundle. The default version is used when a specific localization is not available.

Procedures:
(note: “X” stands for either Landscape, Portrait, iPhone, iPad suffixes)

  1. Add the Default-X.png image on your Xcode project. I’ve put this file under the “Supporting Files” group. It should be on the top level of the application bundle
  2. Click Default-X.png. Then, select the Identity inspector.
  3. Select the drop down Localization tab. From there, you can select which language to localized for this image.
  4. First, I’ve select English. Then, browse to the en.lproj folder put the correct English Default splash screen image
  5. In my case I’ve localized it to Russian. Select again the localization tab and click “+”, add the Russian language. Then, browse to the rus.lproj folder to put the correct Russian default spash screen image.

Pls. do note Localized resources are placed in subdirectories with an ISO 639-1 language abbreviation for a name plus an .lproj suffix. (For example, the en.lproj, fr.lproj, and es.lproj directories contain resources localized for English, French, and Spanish.) For more information, see Internationalizing Your Application.

Screenshots:


From there, you can find your way! :)