how to draw and scale text in rectangle - iphone

My question is simple. I have a rectangle,e.g. (0.0, 0.0, 300, 45), and need to draw a string, e.g. "Text" in the center of this rectangle. The height of "Text" must be fitted the height of rectangle.
And the hard part is: the rectangle can be scaled. The size of "Text" must be scaled as the size of rectangle.
I can draw string in center of rectangle as the coding below, but the difficult point is I cannot manage the "Text" font size changed as the rectangle size.
[#"Text" drawInRect:textRect withFont:font];
I want to draw text in a rectangle, not label, and the user can scale the rectangle size with his finger, finally, I will draw text on an image in scale, I think the label is not for those functions.
Anyone have good solution?
Thanks!
Update:
Actually, I need to draw text on large image in scale, not just show it on iphone screen, please look at the following code:
UIImageVIew *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320, 320)];
imageView.image = [UIImage imageNamed:#"LargeSizeImage"]; // Image size = 2048 *2048
[self.view addSubview:imageView];
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 300, 45)];
textLabel.text = #"Text";
[self.view addSubviews:textLabel];
// Draw text on image
UIGraphicsBeginImageCurrentContext(imageView.image.size);(2048 * 2048)
[imageView.image drawInRect:CGRectMake(0, 0, 2048, 2048)];
CGRect scaleRect = CGRectMake(10 * scaleFactor, 10 *scaleFactor, textLabel.bounds.size.width * scaleFactor, text.Label.bounds.size.height *scaleFactor);
UIFont *font = [UIFont systemOfSize:**?**];
[textLabel.text drawInRect:scaleRect withFont:font];
...........
...........
...........
My question is how do I determine the font size?

UILabel *text = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 300, 45)];
text.backgroundColor = [UIColor clearColor];
text.font = [UIFont systemFontOfSize:45];
text.textAlignment = UITextAlignmentCenter;
text.text = #"TEXT";
[self.view addSubview:text];
Would probably get the effect you are interested in.
EDIT
Actually you could dynamically size the text if you resize the square. In the method you do the resizes just add these lines of code for the UILabel to trigger a resizing.
text.frame = CGRectMake(0.0, 0.0, rect.frame.size.width, rect.frame.size.height);
text.font = [UIFont systemFontOfSize:rect.frame.size.height];
rect is what I am using to describe the rectangle you are resizing.

Related

uilabel not the same height as uiimage with the same height

Im trying to put an image behind a uilabel and need both to be about the same height (the uiimageview a little bigger to surround uilabel) and I have given both the same height in cgrectmake but yet the uiimageview remains smaller than the uilabel even though they are set to the same height.Please help! Code:
UILabel *labelEntry = [[UILabel alloc]init];
labelEntry.numberOfLines = 0;
labelEntry.text = entry;
CGSize expectedLabelSize = [entry sizeWithFont:[UIFont systemFontOfSize:17.0] constrainedToSize:CGSizeMake(300.f, FLT_MAX) lineBreakMode:NSLineBreakByWordWrapping];
CGRect lblFrame = CGRectMake(13, 30, 320, expectedLabelSize.height);
labelEntry.frame = lblFrame;
labelEntry.lineBreakMode = NSLineBreakByWordWrapping;
labelEntry.font = [UIFont systemFontOfSize: 17.0];
labelEntry.textAlignment = NSTextAlignmentCenter;
labelEntry.backgroundColor = [UIColor clearColor];
UIImageView *backgroundImage = [[UIImageView alloc]initWithFrame:CGRectMake(13, 30, 320, expectedLabelSize.height)];
backgroundImage.image = [UIImage imageNamed:#"postl.png"];
[scrollView addSubview:backgroundImage];
From your image(postl.png) what i can notice is, there is shadow effect applied to the image. Try once by setting background color for the imageview & you can see the shadow of applied image. Later you can adjust the frames accordingly
What is the size of post1.png? If it is not the same size as your CGRect you will need to stretch it. That would include changing your UIImageView's contentMode and possibly creating a stretchable image.

How to remove the saw tooth of UIView when using Quartz?

I want to add a head button to a view with some white space around it. My code is just like this:
// head button
UIButton * btnHead = [UIButton buttonWithType:UIButtonTypeCustom];
btnHead.frame = CGRectMake(0, 0, self.frame.size.width - property.userhead_cell_space / 2, self.frame.size.width - property.userhead_cell_space / 2);
btnHead.clipsToBounds = YES;
btnHead.layer.cornerRadius = btnHead.bounds.size.width / 2;
btnHead.layer.borderColor = [UIColor whiteColor].CGColor;
btnHead.layer.borderWidth = (isPad?4.0f:2.0f);
btnHead.layer.contentsScale = [[UIScreen mainScreen] scale];
btnHead.layer.backgroundColor = [UIColor whiteColor].CGColor;
[btnHead addTarget:self action:#selector(clickHead:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:btnHead];
But alway it has some saw tooth around it . It may only one pixel. But it looks very terrible . Just like this:
Does anybody has some tip to remove the black saw tooth ?
Way late to the party but from past experience this is a bug with corner radius and borders. I've tried using it to create circular borders around views and have noticed similar bleeding.
One workaround is to create a view for the border and then a slightly inset view for the image.
UIView* border = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
border.backgroundColor = UIColor.whiteColor; // border color
border.layer.cornerRadius = border.bounds.size.width / 2;
border.layer.masksToBounds = YES;
// inset by the desired border width
UIImageView* image = [[UIImageView alloc] initWithFrame:CGRectInset(border.bounds, 2, 2)];
image.image = someImage;
image.layer.cornerRadius = image.bounds.size.width / 2;
image.layer.masksToBounds = YES;
[border addSubview:image];
[self addSubview:border];
If you want to avoid multiple views, you could add an additional background layer to the image view's layer for the border. That would need to have it's bounds negatively inset so that it drew around the image.

highlight a part of the cell when selected

I am trying to add a non-standard color to the cell when its highlighted. FOr this i create a view with the background color that i want and set it as the selectedBackgroundView for the cell.
All is fine.
UIView *selectionView = [[UIView alloc] init];
[selectionView setBackgroundColor:[UIColor colorWithRed:(121/255.0) green:(201/255.0) blue:(209/255.0) alpha:1.0]];
[cell setSelectedBackgroundView:selectionView];
My question, can i change the frame of the selectedBackgroundView so that it highlights only a part of the cell (to be precise, i want the selectionBackroundView to have an X-offset of 20 pixels).
is there any easy way of doing this ?
Updated code :
UIView *selectionView = [[UIView alloc] init];
[selectionView setBackgroundColor:[UIColor clearColor]];
UIView *selectionSubView = [[UIView alloc] initWithFrame:(CGRectMake(20.0f, 0.0f, 300.0f, 72.0f))];
[selectionSubView setBackgroundColor:[UIColor colorWithRed:(121/255.0) green:(201/255.0) blue:(209/255.0) alpha:1.0]];
UIView *clearView = [[UIView alloc] initWithFrame:(CGRectMake(0.0f, 0.0f, 20.0f, 72.0f))];
[clearView setBackgroundColor: [UIColor clearColor]];
[selectionView addSubview: selectionSubView];
[selectionView addSubview: clearView];
[cell setSelectedBackgroundView: selectionView];
THis doesn seem to work either. I have added this code in the 'cellForRowAtIndexPath'
Thanks in advance
You could put a smaller UIView as subview of your selectionView and change tha background color of that view.
You can do like this.
You create the separate file for UIView as below.
TestView.m
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
// Initialization code.
[self setBackgroundColor:[UIColor clearColor]];
}
return self;
}
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
/* Draw a circle */
// Get the contextRef
CGContextRef contextRef = UIGraphicsGetCurrentContext();
// Set the border width
CGContextSetLineWidth(contextRef, 1.0);
// Set the circle fill color to GREEN
CGContextSetRGBFillColor(contextRef, 100.0, 255.0, 0.0, 1.0);
// Set the cicle border color to BLUE
CGContextSetRGBStrokeColor(contextRef, 0.0, 0.0, 255.0, 1.0);
// Fill the circle with the fill color
CGContextFillRect(contextRef, CGRectMake(20, 0, rect.size.width, rect.size.height));
// Draw the circle border
//CGContextStrokeRectWithWidth(contextRef, rect, 10);//(contextRef, rect);
}
And this Custom View you can use as a background View for cell selection like this.
TestView *bgView = [[TestView alloc] initWithFrame:cell.frame]; // Creating a view for the background...this seems to be required.
cell.selectedBackgroundView = bgView;
May be this help you.
Thanks,
Minesh Purohit.
Does the cell have fixed size and highlight area ?
If yes, create an image and use image view as the selectedBackgroundView
Try to set frame size for selectionView where x = 20. I am not sure about this but I guess it should work for your given scenario.

Iphone, how to add outline on an image?

I want to add outline on an image, do you have any idea?
Note: I don't need the border of imageview, not imageview.layer.borderColor nor image.layer.borderWidth;
Try this :
- (UIImage*)imageWithBorderFromImage:(UIImage*)source;
{
CGSize size = [source size];
UIGraphicsBeginImageContext(size);
CGRect rect = CGRectMake(0, 0, size.width, size.height);
[source drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 0.5, 1.0, 1.0);
CGContextStrokeRect(context, rect);
UIImage *testImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return testImg;
}
source : http://www.icodesnip.com/snippet/objective-c/add-image-border-to-uiimage
This may not be a very clean way but may work and is simple.
//Make a UIView instance with required coords and size
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(...)];
//Set a backgroundColor, that will be the color of your border
view.backgroundColor = [UIColor ...];
// Make a UIImageView instance with the frame just leaving enough
// space around for the border.
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(...)];
imageView.image = yourImage;
// Add the imageView to the view.
[view addSubview:imageView];
[imageView release];
// Release view accordingly after adding to some other view.
The sizes of the view and imageView will what give your image a border.
eg. (0, 0, 10, 10) -> view frame
(1, 1, 8, 8) -> imageView frame
This will give border of "1" to the image.

How to draw text on image

i have a image. in that image i need to draw text.
pls provide any links or sample code to try it out.
Thanks for any help
Just composite an extra view containing the text on top of the image. If you use a UILabel with [UIColor clearColor] for the background color and set opaque to false you will just see the text on top of the image and none of the image will be obscured.
If you want to get an image from the image in a view with the transparent view containing text on top of it, see this answer:
How to obtain a CGImageRef from the content of an UIView?
Something like this:
UIView* baseView = [[UIView alloc] initWithFrame:frameSize];
UIImage* imageToCaption = [UIImage imageNamed:#"myImage.jpg"];
UIImageView* imageToCaptionView = [[UIImageView alloc] initWithImage:imageToCaption];
imageToCaptionView.frame = frameSize;
[baseView addSubview:imageToCaptionView];
[imageToCaptionView release];
// do stuff with fonts to calculate the size of the label, center it in your image etc. etc.
CGRect labelFrame = ...
UILabel* myLabel = [[UILabel alloc] initWithFrame:labelFrame];
myLabel.backgroundColor = [UIColor clearColor];
myLabel.opaque = NO;
// set the color, font, text etc.
[baseView addSubView:myLabel];
[myLabel release];
Not compiled or complete but you get the idea. If you wanted to get the result as an image you would use do [baseView.layer renderInContext:context];