I would like to create a UIView which would show a colored circle with a number or character in it. I have seen examples to create a circle, but how would I accomplish this?
I would want to place multiple of these views on the screen and connect them with lines.
Any suggestions?
// Swift, iOS8
var letterLabel = UILabel(frame: CGRect(x: 50, y: 0, width: 100, height: 100))
letterLabel.layer.cornerRadius = 50
letterLabel.textAlignment = NSTextAlignment.Center
letterLabel.layer.borderWidth = 10
letterLabel.layer.backgroundColor = UIColor.blueColor().CGColor
letterLabel.font = UIFont(name: "Hoefler Text", size:75.0)
letterLabel.text = "A"
If you already know how to draw a circle, then you've got half of it solved :) Let's say the circle is drawn in a UIView called circleView.
Now you want to create a UILabel to draw the letter in.
UILabel* circleLabel = [[UILabel alloc] init];
[circleLabel setText:#"letter goes here"];
And now you want to put the label on top of the circleView, so you add it as a subview:
[circleView addSubview:circleLabel];
At this point, depending on the size of circleView and the font size of circleLabel, the label may or may not be in the center of the circle. Use the setFrame function on the circleLabel to adjust its position within the circleView.
Related
How am I able to create an SKLabelNode and set the width and height of it. I have thought about just making a sprite image with the word on and then position that sprite but I don't believe that this is the best way of doing this.
Image:
http://i.imgur.com/dAP6yeT.png
Thanks!
I think that the best way of doing what you are asking is doing what you said. Just make an image of the word. This makes it to where you can also use it as a button. It might subtract some fps, but only if you have about 50+ nodes in your scene. Which is not likely since most people put a label on the menus. But if you do want to resize the SKLabelNode just resize the tex like this. label.fontsize = 20
The following code will add a node with the text you supply with a box around it. The border will be a rectangle that corresponds to the size of the text. If you want it square, just adjust the borderPath points to only use the labelNode.frame.size.width/2 for both horizontal and vertical spacing. Adjust the +/- 10 to the amount of spacing around the text you want.
//create the wrapper node
float initialWidth = 50;
float initialHeight = 50;
SKSpriteNode *parentNode = [SKSpriteNode spriteNodeWithColor:[UIColor whiteColor] size:CGSizeMake(initialWidth, initialHeight)];
//create the label node
NSString *FontName = [UIFont boldSystemFontOfSize:10].fontName;
SKLabelNode *labelNode = [SKLabelNode labelNodeWithFontNamed:FontName];
labelNode.text = #"some text";
labelNode.fontColor = [UIColor blackColor];
labelNode.position = CGPointMake(0, -labelNode.frame.size.height/4);
//create the border node
SKShapeNode *borderNode = [SKShapeNode new];
UIBezierPath* borderPath = [[UIBezierPath alloc] init];
[borderPath moveToPoint:CGPointMake(-labelNode.frame.size.width/2 -10, -labelNode.frame.size.height/2 -10)];
[borderPath addLineToPoint:CGPointMake(labelNode.frame.size.width/2 +10, -labelNode.frame.size.height/2 -10)];
[borderPath addLineToPoint:CGPointMake(labelNode.frame.size.width/2 +10, labelNode.frame.size.height/2 +10)];
[borderPath addLineToPoint:CGPointMake(-labelNode.frame.size.width/2 -10, labelNode.frame.size.height/2 +10)];
[borderPath addLineToPoint:CGPointMake(-labelNode.frame.size.width/2 -10, -labelNode.frame.size.height/2 -10)];
borderNode.path = borderPath.CGPath;
borderNode.lineWidth = 10.0;
[borderNode setStrokeColor:[UIColor blackColor]];
//add it all together and present it
[parentNode addChild:borderNode];
[parentNode addChild:labelNode];
parentNode.position = newShapeScenePoint;
parentNode.size = CGSizeMake(labelNode.frame.size.width +10, labelNode.frame.size.height +10);
[myScene addChild:parentNode];
You can move the entire thing with
parentNode.position = CGPointMake(someNewX, someNewY)
You can resize the entire thing (including the text) with
float bigger = 3.0; //or whatever size you want
parentNode.xScale = bigger;
parentNode.yScale = bigger;
I create a SKShapeNode rectangle with a fixed size using the following code
SKShapeNode *rect = [SKShapeNode shapeNodeWithRect: CGRectMake(0, 0, 100, 200)];
CGRect accumulatedFrame = rect.calculateAccumulatedFrame;
Debugging the code above, the accumulatedFrame holds the values below:
origin=(x=-0.5, y=-0.5) size=(width=101, height=201)
Why is the calculated, accumulated frame bigger than the intended 100x200 ?
Thanks in advance for any hint :)
Code sample:
SKShapeNode *rect = [SKShapeNode shapeNodeWithRect: CGRectMake(0, 0, 200, 100)];
CGRect accumulatedFrame = rect.calculateAccumulatedFrame;
CGRect frame = rect.frame;
debugger returns origin=(x=-0.5, y=-0.5) size=(width=201, height=101) for the accumulated frame property
debugger returns origin=(x=-0.5, y=-0.5) size=(width=201, height=101) for the frame propery
Using an origin > (0,0) adds only 0,5 to width and height; seems, that sprite-kit returns an accumulated frame, which really contains the node(s) and adds 0.5, so none of the node borders intersects the border of the accumulated frame. Didn't find anything about it in the api reference...
I believe the issue you are dealing with is that if you have a strokeColor defined, that border stroke adds to size of the rectangle.
Try this code :
SKShapeNode *rect = [SKShapeNode shapeNodeWithRect: CGRectMake(0, 0, 200, 100)];
rect.strokeColor = nil;
You have to look at the stroke as being additive, and adding to the dimensions of your shape.
So I am dynamically adding UILabels to a view along a "timeline". What I would like to do is figure out how to put the starting coordinates of the next UILabel a couple of pixels past where the last one was. I'm having a hard time figuring out where the last one ended. I've looked at a few similar questions and I can't seem to grasp how to do it. Everything is taking place in a for loop so I can update the xcoordinate variable each loop, but I need to know how to get the label size. Anyone have any ideas? I tried this but it didn't seem to work:
UILabel *title = [[UILabel alloc]initWithFrame:CGRectMake(labelsXpoint,
topLabelYpoint,
labelWidth,
20)];
CGSize labelSize = [title.text sizeWithFont:title.font constrainedToSize:title.frame.size
lineBreakMode:title.lineBreakMode];
labelsXpoint += labelSize.width;
This is how you would get the top right & bottom right coordinates of the title label:
CGPoint topRight = CGPointMake(title.frame.origin.x + title.frame.size.width, title.frame.origin.y);
CGPoint bottomRight = CGPointMake(title.frame.origin.x + title.frame.size.width, title.frame.origin.y + title.frame.size.height);
I would set the frame after you alter labelsXpoint. Something like:
UILabel *title = [[UILabel alloc]init];
CGSize labelSize = [title.text sizeWithFont:title.font constrainedToSize:title.frame.size lineBreakMode:title.lineBreakMode];
labelsXpoint += labelSize.width;
title.frame = CGRectMake(labelsXpoint, topLabelYpoint, labelWidth, 20);
You can use the functions: CGRectGetMaxX and CGRectGetMaxY:
CGPoint topRight = CGPointMake(CGRectGetMaxX(title.frame), title.frame.origin.y);
CGPoint bottomRight = CGPointMake(CGRectGetMaxX(title.frame), CGRectGetMaxY(title.frame));
I have moving sprites in my game and have added labels on it (CCLabelTTF). The labels have characters like A, B, C etc. I want to give a shadow effect to the contents of labels so that they are properly visible.
in .h file i have
CCLabelTTF *label;
and in .m i have set its position and color. "target" is the sprite on which there are labels.
target=[CCSprite spriteWithFile:[NSString stringWithFormat:#"balloon%d.png",enType] rect:CGRectMake(0, 0, 100, 119)];
label = [[CCLabelTTF alloc] initWithString:alphabetValue dimensions:CGSizeMake([target contentSize].width, [target contentSize].height)
alignment:UITextAlignmentCenter fontName:#"verdana" fontSize:30.0f];
//LABEL POSITION HERE
label.position = ccp(55,30);
label.color = ccc3(60,60,60);
[target addChild:label z: 10];
Now i want to give a shadow effect...how can i do so?
Add the same label twice, one time slightly bigger. The shadow label should be created first to make it appear behind the actual label, or use the z property.
CGSize size = CGSizeMake([target contentSize].width, [target contentSize].height);
labelShadow = [[CCLabelTTF alloc] initWithString:alphabetValue
dimensions:size
alignment:UITextAlignmentCenter
fontName:#"verdana" fontSize:30.0f];
labelShadow.position = ccp(55+2,30+2); // slightly offset
labelShadow.color = ccc3(10,10,10);
[target addChild:labelShadow z:10];
label = [[CCLabelTTF alloc] initWithString:alphabetValue
dimensions:size
alignment:UITextAlignmentCenter
fontName:#"verdana" fontSize:30.0f];
label.position = ccp(55,30);
label.color = ccc3(60,60,60);
[target addChild:label z:10];
You can also experiment with slightly scaling the labelShadow up, or increasing its fontSize.
Note: it's not going to create a soft (blurred) shadow. For that you could use the texture filter methods available here.
How do I get a UITextView to wrap its text around a UIImage like in this image?
The image size is not necessarily previously known.
IOS 7 and above:
UIBezierPath * imgRect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)];
self.textView.textContainer.exclusionPaths = #[imgRect];
Swift (credit to Bart van Kuik):
let exclusionPath = UIBezierPath(rect: CGRectMake(0, 0, 100, 100))
self.textView.textContainer.exclusionPaths = [exclusionPath]
Gil's answer in Swift:
let exclusionPath = UIBezierPath(rect: CGRectMake(0, 0, 100, 100))
self.textView.textContainer.exclusionPaths = [exclusionPath]
If somebody has a better solution, please bring it on, but i usually had to revert to html to do this kind of trick.
You could use two textViews and one imageView to achieve this programmatically, but i'll be a couple of LOC to write. You would have to figure out the size of the image, set the first table view to fit nicely next to, than figure out where the string is longer than visible, cut it off an go on on the next textView.
The same could be achieved by a simple local UIWebView