How to create Grid of Buttons on iphone.
10/10 matrix...
I found NSMatrix for MAC ... Not for iphone...
any alternative way to create grid of button on my view.
#Thanks in advance.
Manually?
int rows = 10;
int cols = 10;
float gridWidth = 320.0;
float gridHeight = 320.0;
float buttonWidth = 28.0;
float buttonHeight = 28.0;
float gapHorizontal = (gridWidth - (buttonWidth * rows)) / (rows + 1);
float gapVertical = (gridHeight - (buttonHeight * cols)) / (cols + 1);
float offsetX;
float offsetY;
int count = 0;
do {
offsetX = gapHorizontal + ((count % rows) * (buttonWidth + gapHorizontal));
offsetY = gapVertical + ((count / rows) * (buttonHeight + gapVertical));
UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(offsetX, offsetY, buttonWidth, buttonHeight)];
aView.backgroundColor = [UIColor redColor];
[self.view addSubview:aView];
[aView release];
offsetX+= buttonWidth + gapHorizontal;
count++;
} while(count < rows * cols);
Also check out AQGridView. I guess it's pretty much what you are looking for. And more.
As I usually use this to make grid.. Only you have to just replace with your row and column
#define MatrixRow 3
#define MatrixColumn 3
#define GRID_WIDTH 300
#define GRID_HEIGHT 300
UIView *grid = [[UIView alloc] initWithFrame:CGRectMake(10, 50, GRID_WIDTH, GRID_HEIGHT)];
grid.backgroundColor = [UIColor brownColor];
for (int i = 0; i< (MatrixColumn*MatrixRow); i++) {
UIView *view = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 40, 40)];
view.backgroundColor = [UIColor yellowColor];
CGFloat xOrigin = GRID_WIDTH/(MatrixColumn*2) + (GRID_WIDTH/MatrixColumn)*(i%MatrixColumn);
CGFloat yOrigin = GRID_HEIGHT/(MatrixRow*2) + (GRID_HEIGHT/MatrixRow) *(i/MatrixColumn);
NSLog(#" (\"%.2f\" , \"%.2f\")",xOrigin,yOrigin);
view.center = CGPointMake(xOrigin, yOrigin);
[grid addSubview:view];
}
[self.view addSubview:grid];
Related
How can I include this view in a scrollerView?
I have a subview with different textfields ,and I want to have it in a scrollview so that when a user clicks on a field view get scrolled.
- (UIView *)Form
{
if (!_Form) {
CGRect frame = CGRectMake(0.0, Height, Width, 310.0);
UIView *container = [[UIView alloc] initWithFrame:frame];
CGFloat y = 15.0;
frame = CGRectMake(15.0, y, width, height);
UITextField *field = [[UITextField alloc] initWithFrame:frame];
[
field.placeholder = #"text";
CGFloat spacing = 8.0;
y = frame.origin.y + height + spacing;
frame = CGRectMake(15.0, y, kDeviceWidth - 2*15.0, height);
field = [[UITextField alloc] initWithFrame:frame];
field.placeholder = #"text6";
frame.size.height = 200.0;
y = frame.origin.y + height + space;
frame = CGRectMake(15.0, y, width - 2*15.0, height);
field = [[UITextField alloc] initWithFrame:frame];
field.placeholder = #"text1*";
y = frame.origin.y + height + 16.0;
CGFloat w = (kDeviceWidth - 2 * 15.0) / 2;
frame = CGRectMake(15.0, y, w - 2.0, height);
field = [[UITextField alloc] initWithFrame:frame];
field.placeholder = #"text3*";
frame = CGRectMake(15.0 + w + 2.0, y, w - 2.0, height);
field = [[UITextField alloc] initWithFrame:frame];
field.placeholder = #"text4*";
y = frame.origin.y + height + spacevalue;
frame = CGRectMake(15.0, y, w, height);
field = [[UITextField alloc] initWithFrame:frame];
field.placeholder = #"text5";
y = frame.origin.y + height + 20.0;
frame = CGRectMake((frame.size.width - 192.0) / 2, y, 192.0, 34.0);
y = frame.origin.y + height + 8.0;
frame = CGRectMake((frame.size.width - 192.0) / 2, y, 192.0, 34.0);
}
return _Form;
}
Can you help me with code pls.
Thanks
I have this code:
CGPoint puntoInicial;
-(void) textFieldDidBeginEditing:(UITextField *)textField {
CGPoint pt;
CGRect rc = [textField bounds];
rc = [textField convertRect:rc toView:scrollView];
pt = rc.origin;
puntoInicial = pt;
pt.x = 0;
pt.y -= 250;
[scrollView setContentOffset:pt animated:YES];
textField.autocapitalizationType = UITextAutocapitalizationTypeAllCharacters;
}
//Bajar la pantalla cuando se termina de editar
-(void) textFieldDidEndEditing:(UITextField *)textField {
puntoInicial.x = 0;
puntoInicial.y = 0;
[scrollView setContentOffset:puntoInicial animated:YES];
}
Only put this in your code and in the textField -> Connections inspector -> Oulets -> Delegate, put the Files Owner
I need to create Arch shaped UIButtons, on a circle image.(the O/p need to look like Concentric Circles),
At present I am using 5 images, but in future I may add some more Images, Dynamically I need to fil the circle Image with the added images.
I had a sample Piece of code and O/P is the below image
int numberOfSections = 6;
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int j = 0; j < numberOfSections; ++j) {
UIButton *sectionLabel = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 150.0f, 2.0f)];
sectionLabel.backgroundColor = [UIColor redColor];
sectionLabel.layer.anchorPoint = CGPointMake(1.0f, 0.5f);
sectionLabel.layer.position = CGPointMake(container.bounds.size.width/2.0, container.bounds.size.height/2.0); // places anchorPoint of each label directly in the center of the circle.
sectionLabel.transform = CGAffineTransformMakeRotation(angleSize*j);
[container addSubview:sectionLabel];
}
I have tried with this piece of code and the O/P is the below image
int numberOfSections = 5;
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int j = 0; j<numberOfSections; ++j) {
UIImage *imageframe = [imagesArray objectAtIndex:j];
OBShapedButton *button = [[OBShapedButton alloc] initWithFrame:CGRectMake(0.0f, 150.0f, 150.0f, 128.0f)];
button.transform = CGAffineTransformMakeRotation(angleSize*j);
[container addSubview:button];
}
I need my output as the below image
How can i Achieve that
O/P after I Tried with Sarah Zuo's code
same width and height buttons
AnyKind of Help is more Appreciated
I can answer only last part,
If you are able to get images for buttons, then you can refer this tutorial. This might help you. Provided, your image formed is having transparent background.
float radius = container.bounds.size.width / 2;
int numberOfSections = 5;
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int j = 0; j<numberOfSections; ++j) {
UIImage *imageframe = [imagesArray objectAtIndex:j];
OBShapedButton *button = [[OBShapedButton alloc] initWithFrame:CGRectMake(0.0f, 150.0f, 150.0f, 128.0f)];
button.transform = CGAffineTransformMakeRotation(2*M_PI-angleSize*j);
button.center = CGPointMake(radius + radius * sin(angleSize * j) / 2, radius + radius * cos(angleSize * j) / 2);
[container addSubview:button];
}
Try this code.
You can use your UIImageView instead. You can give different tag to image view and add Gesture Recognizer. Now you can get touch events like button click event on image views.
If all buttons' image look like the one (same direction), the transform value may be work.
button.transform = CGAffineTransformMakeRotation(2*M_PI-angleSize*j);
button.center = CGPointMake(radius + radius * sin(angleSize * j) / 2, radius + radius * cos(angleSize * j) / 2);
How can i dynamically arrange icons(UIButtons, with backgroundImages) in circle image.SOmething like it should like concentric circles.
I am using the following code,
UIImageView *container = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0f, 299.0f, 298.0f)];
container.image = [UIImage imageNamed:#"AR_RF004_circle.png"];
container.center = CGPointMake(self.view.bounds.size.width/2.0, self.view.bounds.size.height/2.0);
[self.view addSubview:container];
NSArray *imagesArray = [[NSArray alloc]initWithObjects:[UIImage imageNamed:#"AR1.png"],[UIImage imageNamed:#"AR2.png"],[UIImage imageNamed:#"AR3.png"],[UIImage imageNamed:#"AR4.png"],[UIImage imageNamed:#"AR5.png"], nil];
int numberOfSections = 5;
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int j = 0; j < numberOfSections; ++j) {
UIButton *sectionLabel = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 150.0f, 128.0f)];
[sectionLabel setBackgroundImage:[imagesArray objectAtIndex:j] forState:UIControlStateNormal];
sectionLabel.layer.anchorPoint = CGPointMake(0.9f, 0.1f);
sectionLabel.layer.position = CGPointMake(container.bounds.size.width/2.0, container.bounds.size.height/2.0); // places anchorPoint of each label directly in the center of the circle.
sectionLabel.transform = CGAffineTransformMakeRotation(angleSize*j);
[container addSubview:sectionLabel];
NSLog(#"section label x and y is %f ,%f",sectionLabel.frame.origin.x,sectionLabel.frame.origin.y);
}
[container release];
Thanks in Advance
You can use this piece of code:
UIButton *currentButton;
int buttonCount = 20;
int radius = 200;
float angleBetweenButtons = (2 * M_PI) / buttonCount;
float x = 0;
float y = 0;
CGAffineTransform rotationTransform;
for (int i = 0; i < buttonCount; i++)
{
// get your button from array or something
currentButton = ...
...
x = radius + cosf(i * angleBetweenButtons) * radius;
y = radius + sinf(i * angleBetweenButtons) * radius;
rotationTransform = CGAffineTransformIdentity;
rotationTransform = CGAffineTransformRotate(rotationTransform, (i * angleBetweenButtons));
currentButton.center = CGPointMake(x, y);
currentButton.transform = rotationTransform;
}
I think you can do something like this
sectionLabel.center = container.center;
I have not checked other code.. Simplest way for this
I have used this custom grid view in my code, and I want to create a grid view which looks like this:
How should I do this in the code? Here's the setup method for items:
- (void)setupItemViews {
for (UIView *view in self.itemViews) {
[view removeFromSuperview];
}
for (UIImageView *image in self.images) {
[image removeFromSuperview];
}
[self.images removeAllObjects];
[self.itemViews removeAllObjects];
// now add the new objects
NSUInteger numItems = [self.menuDelegate menuViewNumberOfItems:self];
for (NSUInteger i = 0; i < numItems; i++) {
GridMenuItemView *itemView = [[GridMenuItemView alloc] init];
GridMenuItem *menuItem = [self.menuDelegate menuView:self itemForIndex:i];
itemView.frame = CGRectMake(0, 0, self.itemSize.width, self.itemSize.height);
itemView.label.text = menuItem.title;
//itemView.imageView.image = menuItem.icon;
itemView.tag = i;
[itemView addTarget:self
action:#selector(itemPressed:)
forControlEvents:UIControlEventTouchUpInside];
[itemView setBackgroundImage:[UIImage imageNamed:menuItem.normalImageName]
forState:UIControlStateNormal];
[itemView setBackgroundImage:[UIImage imageNamed:menuItem.highlightedImageName]
forState:UIControlStateHighlighted];
NSUInteger numColumns = self.bounds.size.width > self.bounds.size.height ? self.columnCountLandscape : self.columnCountPortrait;
[self.itemViews addObject:itemView];
[self addSubview:itemView];
}
Thanks to ctrahey, I got what I wanted. But the method used for setting up the cells is -(void) layoutSubviews as follows:
You can find the corresponding code after this line: **//__n__ ...
- (void)layoutSubviews {
[super layoutSubviews];
//[self removeFromSuperview];
NSUInteger numColumns = self.bounds.size.width > self.bounds.size.height ? self.columnCountLandscape : self.columnCountPortrait;
NSUInteger numItems = [self.menuDelegate menuViewNumberOfItems:self];
if (self.itemViews.count != numItems) {
[self setupItemViews];
}
CGFloat padding = roundf((self.bounds.size.width - (self.itemSize.width * numColumns)) / (numColumns + 1));
NSUInteger numRows = numItems % numColumns == 0 ? (numItems / numColumns) : (numItems / numColumns) + 1;
CGFloat yPadding = 0;
CGFloat totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding ;
// get an even y padding if less than the max number of rows
if (totalHeight < self.bounds.size.height) {
CGFloat leftoverHeight = self.bounds.size.height - totalHeight;
CGFloat extraYPadding = roundf(leftoverHeight / (numRows + 1));
yPadding += extraYPadding;
totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding;
}
// get an even x padding if we have less than a single row of items
if (numRows == 1 && numItems < numColumns) {
padding = roundf((self.bounds.size.width - (numItems * self.itemSize.width)) / (numItems + 1));
}
for (int i = 0, j = numColumns; i < numItems; i++) {
j--;
if (j<0) {
j += numColumns;
}
//NSUInteger column = j ;
//NSUInteger row = i / numColumns;
UIView *item = [self.itemViews objectAtIndex:i];
//CGFloat xOffset = (column * (self.itemSize.width + padding)) + padding;
//CGFloat yOffset = (row * (self.itemSize.height + yPadding));// + yPadding;
**//__n__ These three lines of code make set the cell items at different xPositions from right and left.
CGFloat xPosition = (i%2) ? 0.0 : self.bounds.size.width - self.itemSize.width;
CGFloat yPosition = i*self.itemSize.height;
item.frame = CGRectMake(xPosition, yPosition, self.itemSize.width, self.itemSize.height);**
//item.frame = CGRectMake(xOffset, yOffset, self.itemSize.width, self.itemSize.height);
// if ((i%numColumns) == 0) {
// UIImageView *img = [self.images objectAtIndex:i/numColumns];
// img.frame = CGRectMake(0, yOffset+76, self.bounds.size.width, 1);
// }//End If
}
//Scroll size.
UIDeviceOrientation currentOrientation = [[UIDevice currentDevice] orientation];
if (UIDeviceOrientationIsPortrait(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+1.55)));
}
else if (UIDeviceOrientationIsLandscape(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+3)));
}
}
If I understand your intention correctly, the line:
itemView.frame = CGRectMake(0, 0, self.itemSize.width, self.itemSize.height);
Should be using your index i and some simple arithmetic to position the views. One technique I have used in the past is a simple is-odd check using the modulus operator.
CGFloat xPosition = (i%2) ? 0.0 : self.bounds.size.width - self.itemSize.width;
CGFloat yPosition = i*self.itemSize.height;
itemView.frame = CGRectMake(xPosition, yPosition, self.itemSize.width, self.itemSize.height);
just use the uitableview operation.
in that cellforrowatindexpath
set button image and frame based on the odd and even
if(indexpath.orw%2==0)
{
//set your frame here;
}
else
{
// set your frame here;
}
Thanks to ctrahey. The method used for setting up the cells is -(void) layoutSubviews as follows:
You can find the corresponding code after this line: **//__n__ ...
- (void)layoutSubviews {
[super layoutSubviews];
//[self removeFromSuperview];
NSUInteger numColumns = self.bounds.size.width > self.bounds.size.height ? self.columnCountLandscape : self.columnCountPortrait;
NSUInteger numItems = [self.menuDelegate menuViewNumberOfItems:self];
if (self.itemViews.count != numItems) {
[self setupItemViews];
}
CGFloat padding = roundf((self.bounds.size.width - (self.itemSize.width * numColumns)) / (numColumns + 1));
NSUInteger numRows = numItems % numColumns == 0 ? (numItems / numColumns) : (numItems / numColumns) + 1;
CGFloat yPadding = 0;
CGFloat totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding ;
// get an even y padding if less than the max number of rows
if (totalHeight < self.bounds.size.height) {
CGFloat leftoverHeight = self.bounds.size.height - totalHeight;
CGFloat extraYPadding = roundf(leftoverHeight / (numRows + 1));
yPadding += extraYPadding;
totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding;
}
// get an even x padding if we have less than a single row of items
if (numRows == 1 && numItems < numColumns) {
padding = roundf((self.bounds.size.width - (numItems * self.itemSize.width)) / (numItems + 1));
}
for (int i = 0, j = numColumns; i < numItems; i++) {
j--;
if (j<0) {
j += numColumns;
}
//NSUInteger column = j ;
//NSUInteger row = i / numColumns;
UIView *item = [self.itemViews objectAtIndex:i];
//CGFloat xOffset = (column * (self.itemSize.width + padding)) + padding;
//CGFloat yOffset = (row * (self.itemSize.height + yPadding));// + yPadding;
**//__n__ These three lines of code make set the cell items at different xPositions from right and left.
CGFloat xPosition = (i%2) ? 0.0 : self.bounds.size.width - self.itemSize.width;
CGFloat yPosition = i*self.itemSize.height;
item.frame = CGRectMake(xPosition, yPosition, self.itemSize.width, self.itemSize.height);**
//item.frame = CGRectMake(xOffset, yOffset, self.itemSize.width, self.itemSize.height);
// if ((i%numColumns) == 0) {
// UIImageView *img = [self.images objectAtIndex:i/numColumns];
// img.frame = CGRectMake(0, yOffset+76, self.bounds.size.width, 1);
// }//End If
}
//Scroll size.
UIDeviceOrientation currentOrientation = [[UIDevice currentDevice] orientation];
if (UIDeviceOrientationIsPortrait(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+1.55)));
}
else if (UIDeviceOrientationIsLandscape(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+3)));
}
}
The Issue
My PSWSnapshotView's end up exactly snapshotIndex too far to the right inside the _scrollView (40px offset). Yet, they are set with their frame to have the first one at (0, 0), though that first one shows up at (snapshotInset, 0) instead :/.
The Code
- (void)layoutViews
{
CGRect frame = self.frame;
CGFloat pageWidth = frame.size.width - (snapshotInset * 2);
CGRect pageFrame = CGRectMake(0.0f, 0.0f, pageWidth, frame.size.height);
NSInteger pageCount = [applications count];
[pageControl setNumberOfPages:pageCount];
[scrollView setFrame:CGRectMake(snapshotInset, 0.0f, pageWidth, frame.size.height)];
[scrollView setContentSize:CGSizeMake((pageWidth * pageCount) + 1.0f, frame.size.height)];
for (int i = 0; i < pageCount; i++) {
PSWSnapshotView *view;
if ([snapshotViews count] <= i)
{
PSWSnapshotView *view = [[PSWSnapshotView alloc] initWithFrame:pageFrame application:[applications objectAtIndex:i]];
view.delegate = self;
[scrollView addSubview:view];
[snapshotViews addObject:view];
[view release];
}
else
{
view = [snapshotViews objectAtIndex:i];
[view setFrame:pageFrame];
}
pageFrame.origin.x += pageWidth;
}
}
The Values
self.frame.size.width = 320;
self.frame.size.height = 370;
snapshotInset = 40;
[applications count] = 2;
All the sizes and frames are set correctly (I checked w/ NSLog).
Are you possibly setting the scrollView.contentOffset somewhere, independent of this? Also, and this may just be a copy/paste issue, you reference both snapshotInset and _snapshotInset.