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
Related
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);
I'm simply trying to add a UIView for every object in an array without displaying more than 3 on screen but the views aren't next to each other. There is a big gap (one view width) between each view. Here's what I've got;
int numberOfUsersOnScreen;
if (array.count < 3) {
numberOfViewsOnScreen = array.count;
}else{
numberOfUsersOnScreen = 3;
}
double width = (self.scrollView.frame.size.width/numberOfViewsOnScreen);
CGRect r = CGRectMake(0, 0, width, 1200);
[self.usersScrollView setContentSize:CGSizeMake(width*array.count, 0)];
for (int i = 0; i < users.count; i++) {
r.origin.x = width * i;
UIView * view = [[UIView alloc] initFrame:r];
[self.scrollView addSubview:view];
}
Try this:
int xPosition = 0;
for (int i = 0; i < users.count; i++) {
UIView * view = [[UIView alloc] initFrame:CGRectMake(xPosition, 0, width, 1200)];
[self.scrollView addSubview:view];
xPosition += width;
}
Instead of
[self.scrollView setContentSize:CGSizeMake(width*array.count, 0)];
It should be
[self.scrollView setContentSize:CGSizeMake(width*array.count, self.scrollView.frame.size.height)];
for (int i = 0; i < users.count; i++) {
r.origin.x = width * i;
UIView * view = [[UIView alloc] initFrame:r];
[self.scrollView addSubview:view];
}
In this way you have also a memory leak on view(s) object
for (int i = 0; i < users.count; i++) {
r.origin.x = width * i;
UIView * view = [[UIView alloc] initFrame:r];
[self.scrollView addSubview:view];
[view release];
}
here is what I wanna do http://www.youtube.com/watch?v=rD3MTTPaK98
and here is my code:
-(void) onTimer {
UIImage * image = [UIImage imageNamed:#"abouffer_03.png"];
imageView = [[UIImageView alloc] initWithImage:image];
[imageView setCenter:[self randomPointSquare]];
[imageViewArray addObject:imageView];
[[self view] addSubview:imageView];
[imageView release];
ix=imageView.center.x;
iy=imageView.center.y;
X=(240-ix)/230;
Y=(160-iy)/230;
coteA=(240-ix);
coteB=(160-iy);
angleDeRotation=atan(coteB/coteA);
if(ix>250||0>iy>320){
imageView.transform = CGAffineTransformMakeRotation(angleDeRotation+3.14);
}
else{
imageView.transform = CGAffineTransformMakeRotation(angleDeRotation);
}
}
-(void)onTimer2{
for(int i=0; i< [imageViewArray count];i++){
imageView = [imageViewArray objectAtIndex:i];
imageView.center = CGPointMake(imageView.center.x + X, imageView.center.y + Y);
}
onTimer is called every 2 seconds
but it doesn't work, there is no error but when a "imageView" is created after 2 seconds it sop moving and go to the same direction of the new " imageView" that has been created. How can I solve this ? sorry for my english I'm french :/
You’re adding X and Y to all of your image views, but it’a always the last-computed value. Make an array of X and Y values and use the value that corresponds with your image view.
Where you define imageViewArray, also define xArray and yArray as NSMutableArrays. Then in -onTimer, when you set X and Y, do this:
[xArray addObject:[NSNumber numberWithFloat:X]];
[yArray addObject:[NSNumber numberWithFloat:Y]];
Finally, in -onTimer2, do this:
-(void)onTimer2{
for(int i=0; i< [imageViewArray count];i++) {
float localX = [(NSNumber *)[xArray objectAtIndex:i] floatValue];
float localY = [(NSNumber *)[yArray objectAtIndex:i] floatValue];
imageView = [imageViewArray objectAtIndex:i];
imageView.center = CGPointMake(imageView.center.x + localX, imageView.center.y + localY);
}
That will use the value of X and Y that you set in -onTimer.
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];
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.