So when you want to delete an app from the Home Screen, or delete a book from iBooks, when you get into "Edit Mode" there is a little itty bitty X in the upper left hand corner of the app icon/book/whatever.
Is this button part of the SDK?
And... if not (I'm pretty sure it isn't), does anybody know an Apple sample project that might contain the X image?
You could try looking in the Springboard.app. (Springboard is the home screen in iOS.) It should be located somewhere like:
/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator*X.Y.Z*.sdk/System/Library/CoreServices/SpringBoard.app/
EDIT: per the comment below, the location of the images for the 4.1 simulator sdk is:
/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator4.1.sdk/System/Library/CoreServices/SpringBoard.app/closebox.png /Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator4.1.sdk/System/Library/CoreServices/SpringBoard.app/closebox\#2x.png
If you're interested in drawing this using Quartz, the following code is pulled from a CALayer that I created to render this kind of delete button:
#define SPACETOEXPANDDELETELAYERFORSHADOW 4.0f
#define FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES 0.38
- (void)renderAsVectorInContext:(CGContextRef)context;
{
if (strokeColor == NULL)
return;
CGContextSetLineJoin(context, kCGLineJoinBevel);
CGContextSetStrokeColorWithColor(context, strokeColor);
CGContextSetLineWidth(context, strokeWidth);
CGContextSetLineCap(context, kCGLineCapRound);
CGRect currentFrame = self.bounds;
currentFrame = CGRectInset(currentFrame, SPACETOEXPANDDELETELAYERFORSHADOW, SPACETOEXPANDDELETELAYERFORSHADOW);
CGContextSetShadow(context, CGSizeMake(2.0f, 2.0f), 2.0f);
CGContextFillEllipseInRect(context, CGRectMake(currentFrame.origin.x + strokeWidth, currentFrame.origin.y + strokeWidth, currentFrame.size.width - (2.0f * strokeWidth), currentFrame.size.height - (2.0f * strokeWidth)));
CGContextStrokeEllipseInRect(context, CGRectMake(currentFrame.origin.x + strokeWidth, currentFrame.origin.y + strokeWidth, currentFrame.size.width - (2.0f * strokeWidth), currentFrame.size.height - (2.0f * strokeWidth)));
CGContextSetLineWidth(context, 1.3f * strokeWidth);
CGContextBeginPath(context);
CGContextMoveToPoint(context, currentFrame.origin.x + FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES * currentFrame.size.width, currentFrame.origin.y + FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES * currentFrame.size.height);
CGContextAddLineToPoint(context, currentFrame.origin.x + (1.0f - FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES) * currentFrame.size.width, currentFrame.origin.y + (1.0f - FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES) * currentFrame.size.height);
CGContextMoveToPoint(context, currentFrame.origin.x + (1.0f - FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES) * currentFrame.size.width, currentFrame.origin.y + FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES * currentFrame.size.height);
CGContextAddLineToPoint(context, currentFrame.origin.x + FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES * currentFrame.size.width, currentFrame.origin.y + (1.0f - FRACTIONOFVIEWFORSTARTANDSTOPOFCROSSLINES) * currentFrame.size.height);
CGContextStrokePath(context);
}
in this case, strokeColor is a white CGColorRef, the layer is 31 x 31, and the strokeWidth is 2.0.
If you want to use this image, just:
Cut it from somewhere
Make the background transparent with photoshop
Add the image to a custom UIButton.
Sorry I don't remember any project that uses it...
Related
I have made a subclass of UIView and I am trying to draw part of a circle in my drawRect method.
I have tried using bezierPathWithArcCenter and filling it but that only result in a pie shape (image 3) and that's not what i'm after. I want to draw what you see in image 1 and 2.
Maybe I can clip a full circle somehow? The area around the circle needs to be transparent.
TompaLompas answer pointed me in the right direction (with the arc drawing part). However the complete solution and answer is like this:
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180)
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef ctx = UIGraphicsGetCurrentContext();
int radius = self.frame.size.width / 2;
CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
//Image 2
CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
CGContextAddArc(ctx, center.x, center.y, radius, DEGREES_TO_RADIANS(225), DEGREES_TO_RADIANS(315), NO);
CGContextDrawPath(ctx, kCGPathFill);
}
try overriding drawRect with this:
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
float radius = 50.0f;
float x_left = rect.origin.x;
float x_left_center = x_left + radius;
float y_top = rect.origin.y;
float y_top_center = y_top + radius;
/* Begin path */
CGFloat white[4] = {0.0f, 204.0f/255.0f, 1.0f, 0.8f};
CGContextSetFillColor(context, white);
CGContextSetLineWidth(context, 1.0);
CGContextBeginPath(context);
CGContextMoveToPoint(context, x_left, y_top_center);
CGContextAddArcToPoint(context, x_left, y_top, x_left_center, y_top, radius);
CGContextAddLineToPoint(context,x_left, y_top + radius);
CGContextFillPath(context);
}
It will draw a rotated image number 2
I want to make UIView which is originally rectangular to Hexagon shape to be used in my application.
Please help me something on this.
Thanks in advance.
Subclass UView and override drawRect to draw a hexagon like so:
- (void)drawRect:(CGRect)rect
{
float polySize = 60; // change this
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGAffineTransform t0 = CGContextGetCTM(context);
t0 = CGAffineTransformInvert(t0);
CGContextConcatCTM(context, t0);
//Begin drawing setup
CGContextBeginPath(context);
CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);
CGContextSetLineWidth(context, 2.0);
CGPoint center;
//Start drawing polygon
center = CGPointMake(160, 90.0);
CGContextMoveToPoint(context, center.x, center.y + polySize);
for(int i = 1; i < 6; ++i)
{
CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);
CGContextAddLineToPoint(context, center.x + x, center.y + y);
}
//Finish Drawing
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathStroke);
CGContextRestoreGState(context);
}
You can create a subclass of UIView and in it's -(void)drawRect: method draw a hexagon. Or Use UIImageView with image of hexagon
I'm attempting to make guider/tip boxes for the iPhone as part of a tutorial framework i'm making.
I've followed and combined two codes i've found here:
(http://stackoverflow.com/questions/6049682/iphone-how-to-make-a-tip-balloon-programmatically/6052438#6052438 ) and another (cant find the link but pretty sure the code supplier was Brad Larson (cheers dude!)) to make a working but limited framework
The idea:
A developer can import the completed files, instantiate what 'direction' arrow they want, set the co ordinates and text and assign it to whatever layer/array/setup they want
The problems:
1. I can only get the arrow to point upwards but needs to be changeable. I've gone through the code and messed around with it but my fundamental knowledge of CG is quite low.
2. If I try to add additional methods they all need to be called from drawRect so any alternatives called at the same time, which I cant have
3. Probably some general misunderstandings of core graphics is hindering as well.
Code bits so far (I can post the whole code but its a bit long)
In my main view controller i declare an instance of the UIView to draw it when a button is pressed
(in mainViewController.m)
TipBallon *textExample = [[TipBallon alloc] initAtPoint:CGPointMake(50.0f, 50.0f) withText:
#"You are hearing me talk"];
And the TipBallon UIView:
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
CGContextRef contextRef = UIGraphicsGetCurrentContext();
[self drawOutlineInContext:contextRef];
[self drawTextInContext:contextRef];
}
- (id)initAtPoint:(CGPoint)point withText:(NSString *)string {
CGSize size = [string sizeWithFont:[UIFont systemFontOfSize:kFontSize]
constrainedToSize:CGSizeMake(kMaxWidth, kMaxHeight)
lineBreakMode:UILineBreakModeWordWrap];
CGRect rect = CGRectMake(point.x, point.y, size.width+kPaddingWidth*2.0f,
size.height+kPaddingHeight*2.0f+kArrowSize);
if ((self = [super initWithFrame:rect])) {
self.text = string;
UIColor *clearColor = [[UIColor alloc] initWithWhite:0.0f alpha:0.0f];
self.backgroundColor = clearColor;
[clearColor release];
}
return self;
}
- (void)drawOutlineInContext:(CGContextRef)context {
CGFloat HEIGHTOFPOPUPTRIANGLE = 15;
CGFloat WIDTHOFPOPUPTRIANGLE = 30;
CGFloat borderRadius = 7;
CGFloat strokeWidth = 2;
CGRect currentFrame = self.bounds;
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, strokeWidth);
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
// Draw and fill the bubble
CGContextBeginPath(context);
CGContextMoveToPoint(context, borderRadius + strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f - WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f) + 0.5f, strokeWidth + 0.5f);
CGContextAddLineToPoint(context, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, currentFrame.size.width - strokeWidth - 0.5f, currentFrame.size.height - strokeWidth - 0.5f, round(currentFrame.size.width / 2.0f + WIDTHOFPOPUPTRIANGLE / 2.0f) - strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, currentFrame.size.height - strokeWidth - 0.5f, strokeWidth + 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextAddArcToPoint(context, strokeWidth + 0.5f, strokeWidth + HEIGHTOFPOPUPTRIANGLE + 0.5f, currentFrame.size.width - strokeWidth - 0.5f, HEIGHTOFPOPUPTRIANGLE + strokeWidth + 0.5f, borderRadius - strokeWidth);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
- (void)drawTextInContext:(CGContextRef)context {
CGRect rect = self.bounds;
rect.origin.x += kPaddingWidth;
rect.origin.y += kPaddingHeight + kArrowSize;
rect.size.width -= kPaddingWidth*2.0f;
rect.size.height -= kPaddingHeight*2.0f;
CGContextSetGrayFillColor(context, 0.0f, 1.0f); // black text
[text drawInRect:rect withFont:[UIFont systemFontOfSize:kFontSize]
lineBreakMode:UILineBreakModeWordWrap];
}
#end
So as I said earlier, if I make several versions of current method that draws the box with the arrow upwards, i'll have to add it to the drawRect method and then they all get called at the same time.
The only course of action I can see is to make several different classes, one for each arrow direction but thats ridiculously messy.
If anyone has any ideas on how to get around this i'd appreciate it muchly
I would like to create something like this:
The copy, star, reply, details. Is this just a UIPopover with a segmented button on it?
Here's another example of what I want:
Anyone got something like this?
The class you are looking for is UIMenuController
This SO page has a lot of useful information.
No. Ive been trying to recreate that view with a UIPopoverViewcontroller, holding a UIViewController with a UISegment.. and Im not getting that same functionality. The main issue is the UIPopoverVC is giving me a 3d border around my viewcontroller/view.
It does appear that its a custom view. Which, on that note, would not be too difficult to create by the way, and that view can host your SegmentedViewController, just not in a UIPopoverVC.
And.. for your viewing enjoyment... here is the code that creates the CGPath for a "Balloon" view like the Popover creates. this code goes in your drawRect.
float radius=5; //corner radius
CGContextSaveGState(context);
CGContextBeginPath(context);
CGContextSetRGBFillColor(context, backColor.red,backColor.green,backColor.blue,backColor.alpha);
CGContextMoveToPoint(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect));
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMinY(rect) + radius, radius, 3 * M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMaxY(rect) - radius, radius, 0, M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMaxY(rect) - radius, radius, M_PI / 2, M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect) + radius, radius, M_PI, 3 * M_PI / 2, 0);
CGContextMoveToPoint(context, rect.size.width/2, rect.size.height);
CGContextAddLineToPoint(context, rect.size.width/2, rect.size.height+10);
CGContextAddLineToPoint(context, rect.size.width/2+10, rect.size.height);
CGContextClosePath(context);
CGContextFillPath(context);
CGContextRestoreGState(context);
A lot of apps pop up a transparent view with rounded corners and an activityIndicator when running a time consuming operation.
How is this rounding done and is it possible to do it just using Interface Builder (as there are lots of places I'd like to use something like this)? Or, should I use an imageview with a rounded rect or stretchable image? Do I need to draw the background myself?
So far, I have managed to get a basic view with similar transparency by setting the alphaValue in Interface Builder however it doesn't have rounded corners, and also the transparency seems to apply to all subviews (I don't want the text and activityindicator to be transparent, however even though I set the alphaValue on those in IB it seems to get ignored).
As of iPhone SDK 3.0, you can simply use the layer's cornerRadius property. E.g.:
view.layer.cornerRadius = 10.0;
Along the same lines, you can change the view's border color and width:
view.layer.borderColor = [[UIColor grayColor] CGColor];
view.layer.borderWidth = 1;
view.layer.cornerRadius = radius;
The hard way (that used to be required in the first iPhone SDK) is to create your own UIView subclass with drawRect: method:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 0,0,0,0.75);
CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius,
radius, M_PI, M_PI / 2, 1); //STS fixed
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height);
CGContextAddArc(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius,
radius, 0.0f, -M_PI / 2, 1);
CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius,
-M_PI / 2, M_PI, 1);
CGContextFillPath(context);
Note: rect in this code should be taken from [self bounds] (or whatever location you want it in), it won't make sense with rect passed to drawRect: method.
I abstracted out #lostInTransit's response into this function:
static void ContextAddRoundedRect(CGContextRef c, CGRect rect, CGFloat radius) {
CGFloat minX = CGRectGetMinX(rect);
CGFloat maxX = CGRectGetMaxX(rect);
CGFloat minY = CGRectGetMinY(rect);
CGFloat maxY = CGRectGetMaxY(rect);
CGContextMoveToPoint(c, minX + radius, minY);
CGContextAddArcToPoint(c, maxX, minY, maxX, minY + radius, radius);
CGContextAddArcToPoint(c, maxX, maxY, maxX - radius, maxY, radius);
CGContextAddArcToPoint(c, minX, maxY, minX, maxY - radius, radius);
CGContextAddArcToPoint(c, minX, minY, minX + radius, minY, radius);
}
which places the path onto the context for you to do with as you may
slightly different CoreGraphics calls and i didn't close the path, in case you want to add that
CGContextFillPath(c);
In your view do this in the drawRect method
float radius = 5.0f;
CGRect rect = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();
rect = CGRectInset(rect, 1.0f, 1.0f);
CGContextBeginPath(context);
CGContextSetGrayFillColor(context, 0.5, 0.7);
CGContextMoveToPoint(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect));
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMinY(rect) + radius, radius, 3 * M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMaxY(rect) - radius, radius, 0, M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMaxY(rect) - radius, radius, M_PI / 2, M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect) + radius, radius, M_PI, 3 * M_PI / 2, 0);
CGContextClosePath(context);
CGContextFillPath(context);
This will make your rounded rectangle for your view. You can find a complete example in the HeadsUpUI sample provided with the SDK. HTH
MBProgressHUD....
http://www.cocoadev.com/index.pl?MBProgressHUD