I would like to know the width of the dark grey frame on either side of the inside picker part and the width of the separators between components. This would be at default settings (eg. what's shown in the .xib). Or, how to find such values programmatically. Thank you
To clarify, I'm looking for what the "suggested minimums" might be for those values. I'm putting my UIPickerView in a popover, and the UIPickerView is wider than 320 px (which is what the .xib gives as the "default"). I would like to know these values so I can add them to the popover's width to make sure it doesn't cut off components on the right side of the UIPickerView.
Well this can be a little tricky since the Picker can have a dynamic number of components. So in order to find the widths you have to take into account the number of components. This can be done like so:
NSInteger n = picker.numberOfComponents;
const CGFloat separatorWidth = 8.0f;
const CGFloat sectionExceedWidth = -2.0f;
CGFloat totalWidth = picker.bounds.size.width;
CGFloat panesWidth = totalWidth - separatorWidth * (n - 1);
for (NSInteger i = 0; i < n; i++) {
CGFloat sectionWidth = [picker rowSizeForComponent:i].width + sectionExceedWidth;
panesWidth -= sectionWidth;
}
CGFloat leftPaneWidth = ceilf(panesWidth * 0.5f);
CGFloat rightPaneWidth = panesWidth - leftPaneWidth;
CGFloat totalHeight = picker.bounds.size.height;
CGRect totalRect = CGRectMake(0, 0, totalWidth, totalHeight);
Where the left and right panes widths are found and the separator size is static.
This was pulled from here.
Related
I'm writing a small boardgame for Mac OS X using Cocoa. I the actual grid is drawn as follows:
- (void)drawRect:(NSRect)rect
{
for (int x=0; x < GRIDSIZE; x++) {
for (int y=0; y < GRIDSIZE; y++) {
float ix = x*cellWidth;
float iy = y*cellHeight;
NSColor *color = (x % 2 == y % 2) ? boardColors[0] : boardColors[1];
[color set];
NSRect r = NSMakeRect(ix, iy, cellWidth, cellHeight);
NSBezierPath *path = [NSBezierPath bezierPath];
[path appendBezierPathWithRect:r];
[path fill];
[path stroke];
}
}
}
This works great, except that I see some errors in colors between the tiles. I guess this is due to some antialiasing or similar. See screenshots below (hopefully you can also see the same problems... its some black lines where the tiles overlap):
Therefore I have these questions:
Is there any way I can remove these graphical artefacts while still maintaining a resizable/scalable board?
Should I rather use some other graphical library like Core Graphics or OpenGL?
Update:
const int GRIDSIZE = 16;
cellWidth = (frame.size.width / GRIDSIZE);
cellHeight = (frame.size.height / GRIDSIZE);
If you want crisp rectangles you need to align coordinates so that they match the underlying pixels. NSView has a method for this purpose: - (NSRect)backingAlignedRect:(NSRect)aRect options:(NSAlignmentOptions)options. Here's a complete example for drawing the grid:
const NSInteger GRIDSIZE = 16;
- (void)drawRect:(NSRect)dirtyRect {
for (NSUInteger x = 0; x < GRIDSIZE; x++) {
for (NSUInteger y = 0; y < GRIDSIZE; y++) {
NSColor *color = (x % 2 == y % 2) ? [NSColor greenColor] : [NSColor redColor];
[color set];
[NSBezierPath fillRect:[self rectOfCellAtColumn:x row:y]];
}
}
}
- (NSRect)rectOfCellAtColumn:(NSUInteger)column row:(NSUInteger)row {
NSRect frame = [self frame];
CGFloat cellWidth = frame.size.width / GRIDSIZE;
CGFloat cellHeight = frame.size.height / GRIDSIZE;
CGFloat x = column * cellWidth;
CGFloat y = row * cellHeight;
NSRect rect = NSMakeRect(x, y, cellWidth, cellHeight);
NSAlignmentOptions alignOpts = NSAlignMinXNearest | NSAlignMinYNearest |
NSAlignMaxXNearest | NSAlignMaxYNearest ;
return [self backingAlignedRect:rect options:alignOpts];
}
Note that you don't need stroke to draw a game board. To draw pixel aligned strokes you need to remember that coordinates in Cocoa actually point to lower left corners of pixels. To crisp lines you need to offset coordinates by half a pixel from integral coordinates so that coordinates point to centers of pixels. For example to draw a crisp border for a grid cell you can do this:
NSRect rect = NSInsetRect([self rectOfCellAtColumn:column row:row], 0.5, 0.5);
[NSBezierPath strokeRect:rect];
First, make sure your stroke color is not black or gray. (You're setting color but is that stroke or fill color? I can never remember.)
Second, what happens if you simply fill with green, then draw red squares over it, or vice-versa?
There are other ways to do what you want, too. You can use the CICheckerboardGenerator to make your background instead.
Alternately, you could also use a CGBitmapContext that you filled by hand.
First of all, if you don't actually want your rectangles to have a border, you shouldn't call [path stroke].
Second, creating a bezier path for filling a rectangle is overkill. You can do the same with NSRectFill(r). This function is probably more efficient and I suspect less prone to introduce rounding errors to your floats – I assume you realize that your floats must not have a fractional part if you want pixel-precise rectangles. I believe that if the width and height of your view is a multiple of GRIDSIZE and you use NSRectFill, the artifacts should go away.
Third, there's the obvious question as to how you want your board drawn if the view's width and height are not a multiple of GRIDSIZE. This is of course not an issue if the size of your view is fixed and a multiple of that constant. If it is not, however, you first have to clarify how you want the possible remainder of the width or height handled. Should there be a border? Should the last cell in the row or column take up the remainder? Or should it rather be distributed equally among the cells of the rows or columns? You might have to accept cells of varying width and/or height. What the best solution for your problem is, depends on your exact requirements.
You might also want to look into other ways of drawing a checkerboard, e.g. using CICheckerboardGenerator or creating a pattern color with an image ([NSColor colorWithPatternImage:yourImage]) and then filling the whole view with it.
There's also the possibility of (temporarily) turning off anti-aliasing. To do that, add the following line to the beginning of your drawing method:
[[NSGraphicsContext currentContext] setShouldAntialias:NO];
My last observation is about your general approach. If your game is going to have more complicated graphics and animations, e.g. animated movement of pieces, you might be better off using OpenGL.
As of iOS 6, you can generate a checkerboard pattern using CICheckerboardGenerator.
You'll want to guard against the force unwraps in here, but here's the basic implementation:
var checkerboardImage: UIImage? {
let filter = CIFilter(name: "CICheckerboardGenerator")!
let width = NSNumber(value: Float(viewSize.width/16))
let center = CIVector(cgPoint: .zero)
let darkColor = CIColor.red
let lightColor = CIColor.green
let sharpness = NSNumber(value: 1.0)
filter.setDefaults()
filter.setValue(width, forKey: "inputWidth")
filter.setValue(center, forKey: "inputCenter")
filter.setValue(darkColor, forKey: "inputColor0")
filter.setValue(lightColor, forKey: "inputColor1")
filter.setValue(sharpness, forKey: "inputSharpness")
let context = CIContext(options: nil)
let cgImage = context.createCGImage(filter.outputImage!, from: viewSize)
let uiImage = UIImage(cgImage: cgImage!, scale: UIScreen.main.scale, orientation: UIImage.Orientation.up)
return uiImage
}
Apple Developer Docs
Your squares overlap. ix + CELLWIDTH is the same coordinate as ix in the next iteration of the loop.
You can fix this by setting the stroke color explicitly to transparent, or by not calling stroke.
[color set];
[[NSColor clearColor] setStroke];
or
[path fill];
// not [path stroke];
in my application I have a class name playGrid which contains three objects, an NSArray of images named plays, and two NSUIntegers rowCount and columCount for the amount of rows and columns in the popover that will be used.
For this example, I have 6 images and I am trying to show them over 2 columns and three rows. I am trying to display these views in a popover. Previously I was able to do this with blocks of colors, but now that I am trying to do with images I am unable to generate the popover correctly. Listed below is my drawRect code for the successful popover that shows the colors.
How would I convert this to work with UIImages instead of the colors?
In the example below, rowCount and columnCount are 2 and 3 just like the one we are trying to make, but the array is named colors, and contains six UIColor items.
- (void)drawRect:(CGRect)rect {
CGRect b = self.bounds;
CGContextRef myContext = UIGraphicsGetCurrentContext();
CGFloat columnWidth = b.size.width / columnCount;
CGFloat rowHeight = b.size.height / rowCount;
for (NSUInteger rowIndex = 0; rowIndex < rowCount; rowIndex++) {
for (NSUInteger columnIndex = 0; columnIndex < columnCount; columnIndex++) {
NSUInteger colorIndex = rowIndex * columnCount + columnIndex;
UIColor *color = [self.colors count] > colorIndex ? [self.colors objectAtIndex:colorIndex] : [UIColor whiteColor];
CGRect r = CGRectMake(b.origin.x + columnIndex * columnWidth,
b.origin.y + rowIndex * rowHeight,
columnWidth, rowHeight);
CGContextSetFillColorWithColor(myContext, color.CGColor);
CGContextFillRect(myContext, r);
}
}
}
I know I will not need certain things like the color or the CGContextSetFillColorWithColor line, but how do i replace myContent with the image, it seems like this is what I would have to do, but I have not been able to successfully do this. Thanks again for your help as I am newer to Objective C.
Assuming that you want to continue to do drawing into the view using drawRect:, I think you just want to use the drawInRect: method on UIImage.
So:
UIImage *image = [plays objectAtIndex:rowIndex * columnCount + columnIndex];
[image drawInRect:r];
I've heard the performance of drawInRect is not great - but I haven't measured it myself. Note also that drawInRect: scales the image to fit the rect as needed; so visually, the results may not be what you intend.
An alternative is to compose your popover's view in a nib where you could layout your view statically. If you always want a 2x3 matrix, you could setup your view there with a 2x3 grid of UIImageView instances.
EDIT: (to clarify that you are drawing images in the rects now, no filling blocks of color)
- (void)drawRect:(CGRect)rect {
CGRect b = self.bounds;
CGContextRef myContext = UIGraphicsGetCurrentContext();
CGFloat columnWidth = b.size.width / columnCount;
CGFloat rowHeight = b.size.height / rowCount;
for (NSUInteger rowIndex = 0; rowIndex < rowCount; rowIndex++) {
for (NSUInteger columnIndex = 0; columnIndex < columnCount; columnIndex++) {
CGRect r = CGRectMake(b.origin.x + columnIndex * columnWidth,
b.origin.y + rowIndex * rowHeight,
columnWidth, rowHeight);
UIImage *image = [plays objectAtIndex:rowIndex * columnCount + columnIndex];
[image drawInRect:r];
}
}
}
I am newbie so my question can be really obvious, but I didn't find any solution so far.
I did in IB UIScrollView and connected it with File's Owner.
I would like to set now the frame size of my UIScrollView (named ScrollView).
const CGFloat BoardWidth = 320;
const CGFloat BoardHeight = 400;
//I tried this way but 'Expression is assignable' - said Xcode
ScrollView.frame.size.width = BoardWidth;
ScrollView.frame.size.height = BoardWidth;
So how can I the easiest set own sizes of ScrollView frame?
CGRect scrollFrame = CGRrectMake(x, y, w, h);
ScrollView.frame = scrollFrame;
Or if you need only to change the width and height;
CGRect scrollFrame;
scrollFrame.origin = ScrollView.frame.origin;
scrollFrame.size = CGSizeMake(w, h);
ScrollView.frame = scrollFrame;
Edit keeping the center unchanged:
CGRect scrollFrame;
CGFloat newX = scrollView.frame.origin.x + (scrollView.frame.size.width - w) / 2;
CGFloat newY = scrollView.frame.origin.y + (scrollView.frame.size.height - y) / 2;
scrollFrame.origin = CGPointMake(newX, newY);
scrollFrame.size = CGSizeMake(w, h);
scrollView.frame = scrollFrame;
you need to do this, for example.
ScrollView.frame = CGRectMake(0, 0, BoardWidth, BoardHeight);
Once done you need also to set contentSize property. It's the area that 'extends' behind the frame of your UIScrollView.
If you want to scroll only horizontally:
ScrollView.contentSize = CGSizeMake(w * BoardWidth, BoardHeight);
If you want to scroll only vertically:
ScrollView.contentSize = CGSizeMake(BoardWidth, h * BoardHeight);
If you want to scroll both horizontally and vertically:
ScrollView.contentSize = CGSizeMake(w * BoardWidth, h * BoardHeight);
where w and h are generic values to increment your width and/or your height.
If you want have an horizontal (for example) discrete scroll (e.g. you have some pages with the same dimension of your screen).
ScrollView.pagingEnabled = YES;
ScrollView.contentSize = CGSizeMake(p * BoardWidth, BoardHeight);
where p is the number of pages you want to display.
Hope it helps.
You can do it as below,
scrollView.frame = CGRectMake(xOrigin,yOrigin,width,height);
If you are looking for content size of scrollview then it as below,
scrollView.contentSize = CGSizeMake(width,height);
CGRect Frame = ScrollView.frame
Frame.frame.size.width = BoardWidth;
Frame.frame.size.width = BoardWidth;
ScrollView.frame = Frame;
Since frame is a structure..you can't set the frame of an object directly.. You will have to make a Cgrect and then manipulate it.
using contentSize property
ScrollView.contentSize = CGSizeMake(320, 520);
it needs to be bigger than the frame so it actually scrolls.
-(IBAction)bigger {
must.bounds.size = CGSizeMake(must.bounds.size.width +5.0 , must.bounds.size.height +5.0);
}
This is the code I input but I get the error saying that the expression is not assignable. Must is a uiimageview. I want to make each property (height and width) bigger by 5.0 each time i press the button. How can i do this.
What you probably want is to set the frame instead of the bounds. Do something like:
CGRect frame = must.frame;
frame.size.width += 5;
frame.size.height += 5;
must.frame = frame;
//here u can get the image as bigger without moving its center point
-(IBAction)bigger {
CGRect _bounds = must.bounds;
CGPoint centerPoint=must.center;
_bounds.size = CGSizeMake(must.bounds.size.width + 5.0 , must.bounds.size.height + 5.0);
must.bounds = _bounds;
must.center = centerPoint;
}
Hoping this is fairly simple. Basically, I'm drawing some text onto an NSView and need to know the "physical" height and width of the glyphs being drawn.
The font is fixed-width so I don't need to worry about kerning, all I need to do is ensure each glyph is centred horizontally and vertically within its "space"
This isn't the actual code but I've re-written it in a way that should make it easier to understand what I'm trying to achieve.
CGFontRef myFontRef = CGFontCreateWithDataProvider(myFontDataProvider);
CGContextSetFont(thisContext, myFontRef);
CGFloat fontSize = 1.0; //will be changeable later
CGContextSetFontSize(thisContext, fontSize);
CGRect charBounds = CGRectMake(x, y, widthPerChar, heightPerChar);
//paint charBounds with background colour
CGFloat textX = x + 2;
CGFloat textY = y + 5;
CGContextShowGlyphsAtPoint(thisContext, textX, textY, (CGGlyph *)displayedString, 1);
If I was able to calculate the width of the displayed glyph it would be easy to work out what textX and textY should be.
Thanks in advance to anybody willing to assist.
Partly worked it out from this code - here's what I came up with:
CGContextSetTextDrawingMode(thisContext, kCGTextInvisible);
CGContextShowGlyphsAtPoint(thisContext, 1, 1, (const CGGlyph *)"x", 1);
CGPoint postPosition = CGContextGetTextPosition(thisContext);
CGFloat textOffsetX = ((postPosition.x - 1) / 2);
CGFloat textOffsetY = (fontSize * 5);
CGContextSetTextDrawingMode(thisContext, kCGTextFillStroke);
Not a huge fan of doing it like this but it's working for now. At least it can be calculated once for each window resize which isn't too bad.
Thanks for the help though!
You can calculate the width of single glyph in this way:
CGRect units;
CGFontGetGlyphBBoxes(font, &glyph, 1, &units);
float width = units.size.width/CGFontGetUnitsPerEm(font)*fontSize;