How to draw a circle in UILabel? [closed] - iphone

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to do some thing like this,
How to draw a circle in UILabel which looks similar to this image, i just want to avoid using an image instead.

I'd suggest adding a shape layer to the UILabel. Something like this:
// Create the shape layer
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 50, 50)].CGPath;
circleLayer.fillColor = [UIColor clearColor].CGColor;
circleLayer.strokeColor = [UIColor whiteColor].CGColor;
circleLayer.lineWidth = 1;
// Add it do your label's layer hierarchy
[label.layer addSublayer:circleLayer];
That'll give you the greatest control over its appearance and that of the font for the A.
UPDATE:
It's just occurred to me that you'll struggle to get the "A" vertically offset in order to put a circle around it. There are hacks to get vertical centering in a UILabel, but you'd be much better off using a UITextField instead, since it supports the contentVerticalAlignment property. You just need to set its userInteractionEnabled to NO to prevent user from typing text on it!
Other than that, the principle of adding the CAShapeLayer is the same.

You can achieve this by the way #maddy suggested or, create UILabel with square rect, put text alignment to the middle and use label's layer's cornerRadius with borderWidth. Just set cornerRadiusto the half width (or height) of the label. Good Luck!

Related

Drawing a vector path with a custom style

I was very surprised to not find the answer on Stackoverflow to this one.
I have a vector path in pdf format, like Safari or the Mac App Store apps usually use as image icons.
Now, I'd like to specify the fill-color and a custom shadow in code, rather than making images and exporting them. I didn't figure out how to do this.
The shadow works, however the fill color does not.
Can anyone tell me how to do this?
Current Code
[NSGraphicsContext saveGraphicsState];
{
// Has no effect
[[NSColor colorWithCalibratedRed:0.92f green:0.97f blue:0.98f alpha:1.00f] setFill];
// Neither has this
[[NSColor colorWithCalibratedRed:0.92f green:0.97f blue:0.98f alpha:1.00f] set];
NSShadow *shadow = [NSShadow new];
[shadow setShadowOffset:NSMakeSize(0, -1)];
[shadow setShadowColor:[NSColor blackColor]];
[shadow setShadowBlurRadius:3.0];
[shadow set];
[image drawInRect:imgRect
fromRect:NSZeroRect
operation:NSCompositeXOR
fraction:1.0
respectFlipped:YES
hints:nil];
}
[NSGraphicsContext restoreGraphicsState];
In terms of calling drawInRect:... the image "is what it is". Setting the fill and stroke will effect only primitive operations. A good way to think about this is to realize that all images, vector or raster, have to behave the same way; It would be weird for the current fill color that's set on the context to affect the drawing of a raster-based image, right? Same idea -- the image is the image. The vector image might also have multiple paths in it, each with different fills. It wouldn't make sense for those to be overridden by the fill color set on the context either.
The shadow works regardless because it's effectively a compositing operation; Drawing a given image with a given shadow setting produces the same shadow whether the image was raster-based or the vector equivalent thereof.
In short, if you want to change the contents of the image, you're going to have to write the code to extract the vectors from the image and then draw them as primitives.
Alternately, if all you want is to fill any filled areas with the color, you could use the vector image to create a mask on the context, then you could set the color
on the context, and fill. That might produce the desired effect.

Shadow to a label

I need to add shadow to all side to a label.It will look like this.
How Can I do this?Please help.I am using shadowOffset ,but it is not giving shadow in all side.Please help.
Assuming you're asking how to add the white outline, you can't do that with a plain UILabel. You need to draw the text using Core Graphics (aka Quartz 2D). Something like this:
CGContextRef gc = UIGraphicsGetCurrentContext();
CGContextSaveGState(gc); {
CGContextSetTextDrawingMode(gc, kCGTextFillStroke);
CGContextSetFillColorWithColor(gc, UIColor.blueColor.CGColor);
CGContextSetStrokeColorWithColor(gc, UIColor.whiteColor.CGColor);
CGContextSetLineJoin(gc, kCGLineJoinRound);
CGContextSetLineWidth(gc, 2);
CGContextSetShadowWithColor(gc, CGSizeMake(-1, 2), 2, UIColor.blackColor.CGColor);
[#"Card" drawAtPoint:CGPointMake(0, 20) withFont:[UIFont systemFontOfSize:18]];
} CGContextRestoreGState(gc);
I have come across a project by nicklockwood on gitHub. It improves upon the standard UILabel by providing a subclass that supports soft shadows, inner shadow and gradient fill, and which can easily be used in place of any standard UILabel.Have a look at it.It will be useful to you.

UILabel textRectForBounds has no effect when trying to create margin [duplicate]

This question already has answers here:
UILabel text margin [duplicate]
(38 answers)
Closed 9 years ago.
I'm trying to indent the text in a UILabel to leave some margin around the text showing the background colour. Following the suggestion here I've overriden textRectForBounds:limitedToNumberOfLines: like so:
- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines
{
CGRect intermediate = CGRectMake(bounds.origin.x+MARGIN,bounds.origin.y+MARGIN,bounds.size.width-2*MARGIN,bounds.size.height-2*MARGIN);
return [super textRectForBounds:intermediate limitedToNumberOfLines:numberOfLines];
}
But no matter what I do, the text ends up tight against the left border of the rectangle. It seems as though the drawing is ignoring the origin part of the returned CGRect (although it seems to be respecting the width part, as if I reduce to width of intermediate to eg bounds.size.width-200 the rect that textRectForBounds returns is suitably narrow and the text is drawn in a long skinny column).
So: what else I need to do to the UILabel to make the drawing respect the textForRectBounds-returned-rect's origin.x and origin.y? I'd rather not override UILabel's drawTextInRect if I can help it.
Update: This was a long time ago and I can't remember exactly why the other question didn't work for me. I believe it was because I was trying to have a UILabel with multiple lines, and the solution here didn't work in that case.
I think you should override both textRectForBounds:limitedToNumberOfLines: and drawTextInRect: like this:
- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines
{
return CGRectInset(bounds, MARGIN, MARGIN);
}
- (void)drawTextInRect:(CGRect)rect
{
[super drawTextInRect: CGRectInset(self.bounds, MARGIN, MARGIN)];
}
Check the documentation, it might be of some help. calls to super might not be returning the values you assume.
You should not call this method
directly. This method should only be
overridden by subclasses that want to
change the receiver’s bounding
rectangle before performing any other
computations. Use the value in the
numberOfLines parameter to limit the
height of the returned rectangle to
the specified number of lines of text.
For this method to be called, there
must be a prior call to the sizeToFit
or sizeThatFits: method. Note that
labels in UITableViewCell objects are
sized based on the cell dimensions,
and not a requested size
The default implementation of this
method returns the original bounds
rectangle.
Good luck!

How can i make a Vertical UISlider? [duplicate]

This question already has answers here:
How to Change the UISlider to Vertical?
(4 answers)
Closed 8 years ago.
How can I make a vertical UISlider? I saw it in one of the applications and was trying to duplicate it. But seems difficult, does anyone know how?
The easiest approach is to simply rotate the slider. This can be done by using CGAffineTransformMakeRotation to create a transform and apply that to the slider's transform property. Just remember that the function takes radians.
In case you use auto layout:
In your viewDidLoad, try:
UIView *superView = self.sizeSlider.superview;
[self.sizeSlider removeFromSuperview];
[self.sizeSlider removeConstraints:self.view.constraints];
self.sizeSlider.translatesAutoresizingMaskIntoConstraints = YES;
self.sizeSlider.transform = CGAffineTransformMakeRotation(M_PI_2);
[superView addSubview:self.sizeSlider];
It does not work with constraints, so the trick is to remove the constraints for your uislider.
You might have to resize it manually by setting its frame property.

drawAtPoint: and drawInRect: blurry text

When drawing strings using drawAtPoint:, drawInRect: and even setting the text property of UILabels - the text can sometimes appear slightly blurry.
I tend to use Helvetica in most places, and I notice that specific font sizes cause some level of blurriness to occur, both in the simulator and on the device.
For example:
UIFont *labelFont = [UIFont fontWithName:#"Helvetica-Bold" size:12];
Will cause the resulting label to have slightly blurry text.
UIFont *labelFont = [UIFont fontWithName:#"Helvetica-Bold" size:13];
Results in crisp text.
My question is why does this occur? And is it just a matter of selecting an optimal font size for a typeface? If so, what are the optimal font sizes?
UPDATE: It seems that perhaps it is not the font size that is causing the blurriness. It may be that the center of the rect is a fractional point. Here is a comment I found on the Apple dev forums:
Check the position. It's likely on a
fractional pixel. Change center to be
integer value.
I rounded off the values of all my points, but there are still places where text remains blurry. Has anyone come across this issue before?
I have resolved this.
Just make sure that the point or rect in which you are drawing does not occur on a fractional pixel.
I.e. NSLog(#"%#", NSStringFromCGRect(theRect)) to determine which point is being drawn on a fractional pixel. Then call round() on that point.
You might want to look at NSIntegralRect(), it does what you want.
Pardon my ignorance if this is incorrect, I know nothing about iPhone or Cocoa.
If you're asking for the text to be centered in the rect, you might also need to make sure the width and/or height of the rect is an even number.
I have had this problem too, but my solution is different and may help someone.
My problem was text blur after changing the size of a UIView object thru TouchesBegan
and CGAffineTransformMakeScale, then back to CGAffineTransformIdentity in TouchesEnded.
I tried both the varying text size and rounding of x and y center points but neither worked.
The solution for my problem was to use even sizes for the width and height of my UIView !!
Hope this helps ....
From my experiments, some fonts don't render clearly at certain sizes. e.g. Helvetica-Bold doesn't render "." well at 16.0f, but they're clear at 18.0f. (If you look closely, the top pixel of the "." is blurry.)
After I noticed that, I've been irked every time I see that UIView, since it's rendered dynamically.
In my case, I drew text on a custom CALayer and turned out to be pretty blurry. I solved it by setting contentScale with appropriate value:
Objective-C:
layer.contentsScale = [UIScreen mainScreen].scale;
Swift:
layer.contentsScale = UIScreen.main.scale