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);
Related
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
Say for example I have 20 buttons. How can I add a subView of the UIView of this button in a circular format?
This will place the buttons around a circle of a given radius at a given center.
It will also rotate each button using the transform property of UIView.
Hope it helps. :)
- (void)viewDidLoad
{
[super viewDidLoad];
NSArray *buttons = /* you buttons here */
float curAngle = 0;
float incAngle = ( 360.0/(buttons.count) )*PI/180.0;
CGPoint circleCenter = CGPointMake(160, 200); /* given center */
float circleRadius = 100; /* given radius */
for (UIButton *button in buttons)
{
CGPoint buttonCenter;
buttonCenter.x = circleCenter.x + cos(curAngle)*circleRadius;
buttonCenter.y = circleCenter.y + sin(curAngle)*circleRadius;
button.transform = CGAffineTransformRotate(button.transform, curAngle);
button.center = buttonCenter;
[self.view addSubview:button];
curAngle += incAngle;
}
}
Result:
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];
In iphone application can we set number of columns in UIAlertView as if I have six buttons in UIAlertView then how can I show it in 2 columns and 3 rows. If any one done it kindly share it how it will done ..
Any sample code will be extra help
A UIAlertView is just a UIView. So you can manually add the buttons to the UIAlertView in a two column configuration. There is an example here that demonstrates adding UITextFields, but I'm sure you can adapt it.
Note that having two many buttons in the UIAlertView might get Apple's back up ;-)
I have done it like this
NSArray *subViewArray = Topicdialog.subviews;
float y = 60.0f;
for(int x=2;x<[subViewArray count];x += 2){
UIView *button = [subViewArray objectAtIndex:x];
CGRect frame = button.frame;
frame.size.width = 120.0f;
frame.size.height = 42.0f;
frame.origin.x = 20.0f;
frame.origin.y = y;
button.frame = frame;
UIView *button1 = [subViewArray objectAtIndex:x + 1];
frame = button1.frame;
frame.size.width = 120.0f;
frame.size.height = 42.0f;
frame.origin.x = 152.0f;
frame.origin.y = y;
button1.frame = frame;
y = y + 48.0f;
}
I'm trying to set an imageviews origin to offset from another imaeviews origin but am having no luck a all.. I wanna be able to offset the other imageview so it doesn't appear directly ontop of it but a little to the left or right of the images center and up a little bit.
here's my code.
imageView1.center = CGPointMake(imageView2.center.x + 20, imageView2.center.y + 35);
probably easier to deal with origins...
kOffset = 5;
kWidth = 50
kHeight = 50;
CGRect frame = CGRectMake(0,0, kWidth, kHeight);
UIImageView *theImage;
for(int i = 0; i<numberOfImages; i++){
theImage = [[UIImageView alloc] initWithFrame:frame];
frame.origin.x += (kWidth + kOffset);
}