How to make a "squares" and " circles" click on button in iphone? - iphone

Question

I have a project in which I have to make a square and circles on a button clcik.
there are textfileds before button , on textfiled we give the value such as 45, on click on uibutton the action perform and 45 square will automatically adjust with the iphone scfreen itself.
suppose the screen size is 320 * 480 , so the square automatically adjust with the screen.
and if we give the value 300 on the Textfiled the 300 squares will create and adjust automatically on the screen.
It will Show like graph paper at one stage if we give value like 1500.
I dont have any idea how to do it and how to start and where to start.
I am just thinking that it will use Quartcore Framework , but I dont have any Idea from where I start the project what I search.
I want suggestions and idea from experts.
Any Idea or suggestions from experts would be highly welcome.

Answer 1

// Step 1 : Add QuartzCore.framework in your project
// Step 2 : Create following two files .h and .m
// Step 3 : How to Use
// Import your custom file
#import "myDrawingView.h"
// Create object and add to your viewcontroller
myDrawingView *obj = [[myDrawingView alloc] initWithFrame:self.view.frame];
[obj drawSquaresWithNumber:17 andSize:self.view.frame.size];
[self.view addSubview:obj];
//------------------------------------------------------
// filename : myDrawingView.h
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#interface myDrawingView : UIView
{
int nSquares;
CGSize mazeSize;
}
- (void)drawSquaresWithNumber:(int)numberOfSquares andSize:(CGSize)screenSize;
#end
//------------------------------------------------------
// filename : myDrawingView.m
#import "myDrawingView.h"
#implementation myDrawingView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
// Calculate height and width for each sqaure.
float area = mazeSize.height*mazeSize.width;
float squareSize = (area/nSquares)/100;
NSLog(#"row : %f %f",mazeSize.width/squareSize,mazeSize.height/squareSize);
int row, col;
row = ceil(mazeSize.width/squareSize);
col = ceil(mazeSize.height/squareSize);
float height = mazeSize.height/row;
float width = mazeSize.width/col;
NSLog(#"%d %d",row,col);
NSLog(#"h %f w %f",height,width);
NSLog(#"square size : %f",squareSize);
// Create Current Context To Draw
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw Line
CGContextSetLineWidth(context, 0.5f);
CGContextSetFillColorWithColor(context, [myDrawingView randomColor].CGColor);
CGContextSetStrokeColorWithColor(context, [myDrawingView randomColor].CGColor);
int x ,y, cnt;
x = y = 0;
cnt = 1;
// A loop for number of squares
for(int i=0;i<row;i++)
{
for(int j=0;j<col;j++)
{
if(cnt<=nSquares)
{
CGRect rect = CGRectMake(x, y, width, height);
// Draws Squares
UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];
// To draw Oval uncomment
// UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:rect];
[path fill];
[path stroke];
}
x += width;
cnt++;
}
x = 0;
y += height;
}
}
+ (UIColor *) randomColor {
CGFloat red = arc4random()%256;
CGFloat blue = arc4random()%256;
CGFloat green = arc4random()%256;
return [UIColor colorWithRed:abs(red)/255.0f green:abs(green)/255.0f blue:abs(blue)/255.0f alpha:1.0];
}
- (void)drawSquaresWithNumber:(int)numberOfSquares andSize:(CGSize)screenSize
{
nSquares = numberOfSquares;
mazeSize = screenSize;
[self setNeedsDisplay];
}
#end

Answer 2

Create a button, a label and 2 textfield's (one for height, one for width). Set a 1pixel border on the label and set the width and height of the label to the screen size. Create an IBAction for the button and assign the width and height of the label based on the content inside the textfield's. This will create the square. To create the circle you can either use QuartzCore and set the corner radius to half of the height/width or you can draw this programatically. This is the quickest way to achieve what you are asking without getting too far into drawing on screen with GL and would be a good start for understanding how actions and inputs work.