Drawing on iOS

Drawing with Quartz and UIKit:

Quartz is the native drawing technology in iOS. Core Graphics framework is at the heart of Quartz and is the primary interface use for drawing content. Quartz 2D is a two-dimensional drawing engine which is use of such as path based drawing,  painting with transparency, shading, drawing shadows, transparency layers, color management, anti aliased rendering, PDF documents generation, and PDF metadata access.

Configuring the Graphics Context:
View object create a graphics context and sets it as the current context. This context exists only for the the lifetime of the drawRect: call. For retrieve a pointer to this graphics context we can call UIGraphicsGetCurrentContext function. This function returns a reference to a CGContextRef type, which pass to core graphics function to modify the current graphics state. The graphics context contains a stack for save graphics states. When Quartz creates a graphics context, the stack is empty. Using CGContextSaveState function pushes a copy of the current graphics state onto the stack. Modification make to graphics state affect subsequent drawing operations but do not affect the copy stored on the slack.with done of modification we can return to the previous graphics state by popping the saved state off the top of the stack using the CGContextRestoreGState function. Pushing and popping graphics states in this manner is a fast way to return to a previous state.For Details Click here


Drawing:
//Draw a line
In order to draw graphics on the view it is necessary to subclass to create a subclass of UIView and override the drawRect: method.

Lets subclass a UIView(named LineView)

Now override drawRect: method

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext(); //Get current graphics context
    CGContextSaveGState(context); //Save current context
    CGContextSetLineWidth(context, lineWidth); // set stroke width of line
    CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]); //set stroke color
    CGContextMoveToPoint(context, 10,  10); // It is the first point of line
    CGContextAddLineToPoint(context, self.bounds.size.width - 10, 10); // set another point of line
    CGContextStrokePath(context); // stroke line
    CGContextRestoreGState(context);
}
Import newly added subclass to ViewController and add as a subview to the ViewController's view.


//Draw a Rectangle
subclass a UIView(named LineView)
and override drawRect: method

- (void)drawRect:(CGRect)rect {
    // Drawing code
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSaveGState(context);
    CGContextSetLineWidth(context, lineWidth);
    CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
    CGContextMoveToPoint(context, 10,  10); // start point
    CGContextAddLineToPoint(context, self.bounds.size.width - 10, 10);
    CGContextAddLineToPoint(context, self.bounds.size.width - 10, self.bounds.size.height - 10);
    CGContextAddLineToPoint(context,  10, self.bounds.size.height - 10);
    CGContextAddLineToPoint(context, 10, 10);
    CGContextStrokePath(context);
   CGContextRestoreGState(context);
}

View Animation

A constraint defines a relationship between two user interface objects that must be satisfied by the constraint-based layout system.

For presenting a view with constraint if little bit different.
We can use frame property for animating a view object.
We can change size and origin by setting new value inside animation block.

Here an example for animating 2 UIView object with constraint.

1) Add one UIView object on XIB file.
set following constraint
  a) Leading constraint(Margin from left)  = 0
  b)Tailing constraint(margin from right) = 0
  c) Top constraint(from super view) = 0
  d) Height constraint = 0

2) Add one more UIView object.(for differentiate set different-2 background color)
 set following constraint on newly added UIView object
  a) Leading constraint(Margin from left)  = 0
  b)Tailing constraint(margin from right) = 0
  c) Top constraint (From first UIView object not from super view)= 0
  d)Bottom constraint = 0

Now, define a IBOutlet property for NSLayoutConstraint
@property (nonatomic, weak) IBOutlet NSLayoutConstraint *topHeightConstraint;

On XIB connect topHeightConstraint with Height Constraint of Top or first UIView object.

Add a button for animating both view.
Here action of button

-(void) animationButtonAction:(UIBarButtonItem *)barButton{
    if (self.topHeightConstraint.constant == 0) {
        NSLog(@"Increase height");
        self.topHeightConstraint.constant = 300;
    }
    else{
        NSLog(@"Decrease height");
        self.topHeightConstraint.constant = 0;
    }
    [UIView animateWithDuration:1 animations:^{
        [self.view layoutIfNeeded];
    }];
}

Now, Its all set for animating UIView objects with NSLayoutConstraint.=