2

I want to achieve an affect similar to a round html form with a transparent background similar to the image below (not the mouseover text, just the rectangle in the background, and have it have an opacity).

I do not know how to do this and I've toyed around with CGRect but I can't even get them to come up. I'm using the tab navigation based template for the iPad.

Could you please point me to some resources that could get me started with CGRect?

enter image description here

8
  • 1
    round html form means what? .... did u mean rounded corner ?
    – Arun
    Sep 13, 2012 at 7:18
  • something like this: tylergaw.com/articles/assets/… obviously without the mouseover text, and the white background needs to have some opacity. Sep 13, 2012 at 7:31
  • 1
    hey that is UIPopupController.... do u want that ?.... dropbox.com/…
    – Arun
    Sep 13, 2012 at 8:37
  • error creating link! Do I really need a UIPopupController? Because it doesn't need to "pop-up"... I was just thinking UIButtons superimposed on a cgrect or in worse case scenario a png...but I'd love to try your method!.... Sep 13, 2012 at 23:19
  • 1
    hi sorry man... please see that link : dropbox.com/s/8ro0d1fd8odio99/img.png any doubt means feel free to ask man...
    – Arun
    Sep 14, 2012 at 3:16

2 Answers 2

6
+50

Note I'm going to make the assumption you're after the grey background rectangle behind the two form fields. Not the blue border around the email field. I'm assuming you want to achieve something similar to this:

iPad Screenshot

You need to create custom UIView subclass that either contains or sits directly behind your form fields and buttons. Depending on the complexity of your gradient and corner radius you can achieve a similar effect one of two ways.

1. Using CALayer's cornerRadius and borderColor and borderWidth

A simple implementation of this view could be:

#import "RoundedView.h"
#import <QuartzCore/QuartzCore.h>

@implementation RoundedView

- (id)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    self.backgroundColor = [UIColor grayColor];
    self.layer.borderColor = [[UIColor lightGrayColor] CGColor];
    self.layer.cornerRadius = 10;
  }
  return self;
}

@end

2. Overriding drawRect: to draw rounded corners

You'll be using UIBezierPath to draw a rect with rounded corners, fill it and stroke it.

@implementation DrawnBackgroundView

- (id)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    self.backgroundColor = [UIColor clearColor];
  }
  return self;
}


- (void)drawRect:(CGRect)rect
{
  CGFloat lineWidth = 2;
  CGFloat selfWidth = self.bounds.size.width - (lineWidth * 2);
  CGFloat selfHeight = self.bounds.size.height - (lineWidth * 2);

  UIColor* lightGray = [UIColor colorWithRed: 0.84 green: 0.84 blue: 0.84 alpha: 1];

  UIBezierPath* roundedRectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(lineWidth, lineWidth, selfWidth, selfHeight) cornerRadius: 10];
  [lightGray setFill];
  [roundedRectanglePath fill];

  [lightGray setStroke];
  roundedRectanglePath.lineWidth = lineWidth;
  [roundedRectanglePath stroke];
}

@end

The screen shot above is taken from a quick demo project that is available on GitHub.

1
  • wow... I'm speechless. thx so much! I'll implement it when I'm at my computer. Sep 18, 2012 at 19:20
1

Starting with a View-based template, create a project named Drawer. Add a UIView class to your project. Name it SquareView (.h and .m).

Double-click DrawerViewController.xib to open it in Interface Builder. Change the generic view there to SquareView in the Identity Inspector (command-4) using the Class popup menu. Save and go back to Xcode.

Put this code in the drawRect: method of your SquareView.m file to draw a large, crooked, empty yellow rectangle and a small, green, transparent square:

- (void)drawRect:(CGRect)rect;
{   
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0.0, 1.0); // yellow line

    CGContextBeginPath(context);

    CGContextMoveToPoint(context, 50.0, 50.0); //start point
    CGContextAddLineToPoint(context, 250.0, 100.0);
    CGContextAddLineToPoint(context, 250.0, 350.0);
    CGContextAddLineToPoint(context, 50.0, 350.0); // end path

    CGContextClosePath(context); // close path

    CGContextSetLineWidth(context, 8.0); // this is set from now on until you explicitly change it

    CGContextStrokePath(context); // do actual stroking

CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 0.5); // green color, half transparent
CGContextFillRect(context, CGRectMake(20.0, 250.0, 128.0, 128.0)); // a square at the bottom left-hand corner
}

You don't have to call this method for the drawing to happen. Your view controller will tell the view to draw itself at least once when the program launches and the NIB files are activated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.