Sunday, May 22, 2011

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 

1 comment: