Quartz Tutorial -Part II (Introduction to shadow and rounded rect borders )

This tutorial is about how to  have the rounded rect borders and shadows behind your image views.

Following image is the result of 4 experiments codes.

For Image 1:

//Image is with rounded rect borders

//point to be noted: Image itself is not rounded rect here , only borders.

//The shadow is implemented for the view sub class

//This will let you have shadow as well as rounded rect borders.

DrawClass1 *myDrawScreen1=[[DrawClass1 alloc]initWithFrame:CGRectMake(50, 550, 120, 120)];

myDrawScreen1.layer.cornerRadius=5;

myDrawScreen1.layer.borderWidth=5;

myDrawScreen1.layer.borderColor=[UIColor blackColor].CGColor;

myDrawScreen1.layer.shadowColor=[UIColor grayColor].CGColor;

myDrawScreen1.layer.shadowOffset=CGSizeMake(2, 2);

myDrawScreen1.layer.shadowOpacity=1.0;

[self.view addSubview:myDrawScreen1];

For Image 2:

//Simple View with Image and no shadow

//Only rounded rect borders

DrawClass1 *myDrawScreen2=[[DrawClass1 alloc]initWithFrame:CGRectMake(200, 550, 120, 120)];

myDrawScreen2.layer.cornerRadius=5;

myDrawScreen2.layer.borderWidth=5;

[self.view addSubview:myDrawScreen2];

For Image 3:

//ImageView directly implemented on viewcontroller 

//Not through UIView subclassing

//Imp: cornerRadius doesn't seem to work for UIImageView

//if you remove myImageView.layer.masksToBounds=YES;

//But if you do include that line to have rounded rect,

//then shadow doesn't work. :)

UIImage *imgToBeClipped=[UIImage imageNamed:@"pic1.png"];

UIImageView *myImageView=[[UIImageView alloc]initWithFrame:CGRectMake(350, 550, 110 ,110)];

myImageView.layer.cornerRadius=5;

myImageView.layer.masksToBounds=YES;

myImageView.layer.borderWidth=5;

myImageView.layer.borderColor=[UIColor blackColor].CGColor;

myImageView.layer.shadowColor=[UIColor grayColor].CGColor;

myImageView.layer.shadowOffset=CGSizeMake(2, 2);

myImageView.layer.shadowOpacity=1.0;

[myImageView setImage:imgToBeClipped];

[self.view addSubview:myImageView];

For Image 4:

//ImageView with just shadow

//and borders

UIImage *img=[UIImage imageNamed:@"pic1.png"];

UIImageView *myImageView1=[[UIImageView alloc]initWithFrame:CGRectMake(500, 550, 110 ,110)];

myImageView1.layer.borderWidth=5;

myImageView1.layer.borderColor=[UIColor blackColor].CGColor;

myImageView1.layer.shadowColor=[UIColor grayColor].CGColor;

myImageView1.layer.shadowOffset=CGSizeMake(2, 2);

myImageView1.layer.shadowOpacity=1.0;

[myImageView1 setImage:img];

[self.view addSubview:myImageView1];

You can download the code from here