iPad Size and Coordinates scale to iPhone - ios

I'm working on this objective c game app where the screen is populated with pictures of animals.
The problem is that the size and x/y of the animal is hard coded in the app and works with the iPad Air screen dimensions. My question is how can I scale it to show up in the same position and size on an iPhone 7 plus? Is there a formula to scale the size and x/y coordinates?
I looked for answers on stackoverflow with an answer saying to divide the dimensions but when i tried that the x/y coordinates were off.
Here is the code
-(void)viewDidLoad{
[super viewDidLoad];
NSString *sonidoPathBell1 = [[NSBundle mainBundle] pathForResource:#"bellTransition" ofType:#"aif"];
NSURL *sonidoUrlBell1 = [[NSURL alloc] initFileURLWithPath:sonidoPathBell1];
AudioServicesCreateSystemSoundID((CFURLRef)sonidoUrlBell1, &sonTrans);
btnAnimales = [[NSMutableArray alloc] initWithCapacity:0];
for(int i = 0; i < 20; i++){
OBShapedButton *tempbtn = [[OBShapedButton alloc] init];
[tempbtn setTag:i+1];
opcion = [[NSUserDefaults standardUserDefaults] integerForKey:[NSString stringWithFormat:#"bluebaymobAmazingMixAndMatchObjeto%i",i + 1]];
if (opcion == 0) {
[tempbtn setImage:[UIImage imageNamed:[NSString stringWithFormat:#"btnAni%i.png",i+1]] forState:UIControlStateNormal];
}else{
[tempbtn setImage:[UIImage imageNamed:[NSString stringWithFormat:#"btnAni%iColor.png",i+1]] forState:UIControlStateNormal];
}
[tempbtn addTarget:self action:#selector(startPuzzle:) forControlEvents:UIControlEventTouchUpInside];
CGRect cuadro = CGRectMake(0, 0, 0, 0);
switch(i+1){
case 1:
cuadro = CGRectMake(131, 85, 95, 120);
//cuadro = CGRectMake(94, 48, 65, 60);
//37, 37, 30, 60
break;
case 2:
cuadro = CGRectMake(52, 246, 147, 157);
//cuadro = CGRectMake(15, 209, 117, 97);
break;
case 3:
cuadro = CGRectMake(-5, 418, 166, 158);
break;
case 4:
cuadro = CGRectMake(301, 64, 156, 151);
break;
case 5:
cuadro = CGRectMake(214, 213, 129, 190);
break;
case 6:
cuadro = CGRectMake(165, 384, 162, 169);
break;
case 7:
cuadro = CGRectMake(204, 615, 139, 153);
break;
case 8:
cuadro = CGRectMake(458, 115, 109, 90);
break;
case 9:
cuadro = CGRectMake(367, 222, 207, 130);
break;
case 10:
cuadro = CGRectMake(361, 344, 408, 276);
break;
case 11:
cuadro = CGRectMake(387, 591, 234, 173);
break;
case 12:
cuadro = CGRectMake(605, 104, 92, 131);
break;
case 13:
cuadro = CGRectMake(671, 220, 152, 155);
break;
case 14:
cuadro = CGRectMake(760, 450, 137, 174);
break;
case 15:
cuadro = CGRectMake(701, 613, 101, 161);
break;
case 16:
cuadro = CGRectMake(660, 26, 132, 88);
break;
case 17:
cuadro = CGRectMake(828, 36, 112, 107);
break;
case 18:
cuadro = CGRectMake(820, 288, 153, 157);
break;
case 19:
cuadro = CGRectMake(909, 441, 115, 162);
break;
case 20:
cuadro = CGRectMake(862, 629, 151, 135);
break;
}
//1920 x1080 iphone 7plus
//2048 x 1536 ipad
//.9375
//cuadro.origin.x = cuadro.origin.x * .9375;
//cuadro.origin.y = cuadro.origin.y * .703125;
//cuadro.origin.x = cuadro.origin.x - 37;
//cuadro.origin.y = cuadro.origin.y - 37;
//cuadro.size.width = cuadro.size.width - 30;
//cuadro.size.height = cuadro.size.height - 60;
tempbtn.frame = cuadro;
[btnAnimales addObject:tempbtn];
[self.view addSubview:[btnAnimales objectAtIndex:i]];
tempbtn = nil;
}
}

Related

IOS drawing App, change buttoncolor

i made a simple drawing App, with a toolpanel which contains a pencil, a paint brush and an eraser. There a 12 different colors to draw with.
Now, i would like the pencil and the paint brush image, change in the color of the active color from the colorpanel. How do I do that?
Something like;
When toolbutton:pencil is pressed, color pencil (image) is color:changecolor.
How to translate this in code?
This is my code for the buttons.
- (IBAction)colorChange:(id)sender
{
UIButton *PressedButton = (UIButton*)sender;
switch (PressedButton.tag) {
case 0:
self.drawingView.lineColor = RGB(32, 152, 188);
break;
case 1:
self.drawingView.lineColor = RGB(33, 114, 177);
break;
case 2:
self.drawingView.lineColor = RGB(65, 79, 155);
break;
case 3:
self.drawingView.lineColor = RGB(110, 58, 141);
break;
case 4:
self.drawingView.lineColor = RGB(195, 26, 126);
break;
case 5:
self.drawingView.lineColor = RGB(228, 36, 40);
break;
case 6:
self.drawingView.lineColor = RGB(234, 98, 36);
break;
case 7:
self.drawingView.lineColor = RGB(241, 141, 33);
break;
case 8:
self.drawingView.lineColor = RGB(252, 199, 19);
break;
case 9:
self.drawingView.lineColor = RGB(255, 240, 79);
break;
case 10:
self.drawingView.lineColor = RGB(139, 188, 63);
break;
case 11:
self.drawingView.lineColor = RGB(0, 144, 92);
break;
}
}
- (IBAction)toolChange:(id)sender
{
UIButton *toolButton = (UIButton*)sender;
switch (toolButton.tag){
case 0:
self.drawingView.drawTool = ToolTypePen;
self.drawingView.lineWidth = 7;
self.drawingView.lineAlpha = 1.0;
self.potlood02.hidden=NO;
self.kwast02.hidden=YES;
self.gum02.hidden=YES;
break;
case 1:
self.drawingView.drawTool = ToolTypePen;
self.drawingView.lineWidth = 20;
self.drawingView.lineAlpha = 0.67;
self.potlood02.hidden=YES;
self.kwast02.hidden=NO;
self.gum02.hidden=YES;
break;
case 6:
self.drawingView.drawTool = ToolTypeEraser;
self.drawingView.lineWidth = 20;
self.potlood02.hidden=YES;
self.kwast02.hidden=YES;
self.gum02.hidden=NO;
break;
}
}
To change the colour of your pencil image you could do something like this
UIImage *originalImage = [UIImage imageNamed:#"PencilImage.png"];
UIImage *newImage = [originalImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,50,50)]; // your pencil image size
imageView.tintColor = [UIColor redColor]; // or whatever color that has been selected
imageView.image = newImage;
Hope this helps.

Table Cell not selectable after rotation

I have a view which should have a different layout in portrait and Landscape mode. I implement a method to redraw my UI elements with Autosizing (no AutoLayout):
-(void)buildViewElements:(UIInterfaceOrientationMask)interfaceOrientation duration:(NSTimeInterval)duration {
if (interfaceOrientation == UIInterfaceOrientationMaskPortrait) {
NSLog(#"Portrait");
[UIView animateWithDuration:duration animations:^{
CGRect newImageFrame = CGRectMake(20, 15, 100, 100);
_personImage.frame = newImageFrame;
CGRect newNameLabelFrame = CGRectMake(128, 20, 172, 21);
_nameLabel.frame = newNameLabelFrame;
CGRect newNameDescFrame = CGRectMake(128, 41, 172, 21);
_nameDescriptionLabel.frame = newNameDescFrame;
CGRect newBorrowedFrame = CGRectMake(128, 64, 75, 21);
_borrowedLabel.frame = newBorrowedFrame;
CGRect newBorrowedValueFrame = CGRectMake(211, 64, 42, 21);
_borrowedValueLabel.frame = newBorrowedValueFrame;
CGRect newLendFrame = CGRectMake(128, 93, 75, 21);
_lendLabel.frame = newLendFrame;
CGRect newLendValueFrame = CGRectMake(211, 93, 42, 21);
_lendValueLabel.frame = newLendValueFrame;
CGRect newcontainerFrame = CGRectMake(0, 130, 320, [CNX_Tools getLargestAttributeOfSize:[[UIScreen mainScreen] bounds].size] - 194);
_tableContainerView.frame = newcontainerFrame;
CGRect newDetailFrame = CGRectMake(20, 0, 280, 29);
_detailSelector.frame = newDetailFrame;
CGRect newTableFrame = CGRectMake(0, 36, 320, newcontainerFrame.size.height - 39);
_tableView.frame = newTableFrame;
}];
}
else if (interfaceOrientation == UIInterfaceOrientationMaskLandscape) {
NSLog(#"Landscape");
[UIView animateWithDuration:duration animations:^{
CGFloat factor = 1.0f;
CGFloat diff = 0.0f;
if ([CNX_Tools getLargestAttributeOfSize:[[UIScreen mainScreen] bounds].size] <= 480) {
// iPhone4 size
factor = 0.8f;
diff = 10.0f;
}
CGRect newImageFrame = CGRectMake(75*factor-diff, 20, 100, 100);
_personImage.frame = newImageFrame;
NSLog(#"Bild Frame %f", newImageFrame.origin.x);
CGRect newNameLabelFrame = CGRectMake(20, 140, 210*factor, 21);
_nameLabel.frame = newNameLabelFrame;
CGRect newNameDescFrame = CGRectMake(20, 161, 210*factor, 21);
_nameDescriptionLabel.frame = newNameDescFrame;
CGRect newBorrowedFrame = CGRectMake(20, 184, 75, 21);
_borrowedLabel.frame = newBorrowedFrame;
CGRect newBorrowedValueFrame = CGRectMake(103, 184, 42, 21);
_borrowedValueLabel.frame = newBorrowedValueFrame;
CGRect newLendFrame = CGRectMake(20, 213, 75, 21);
_lendLabel.frame = newLendFrame;
CGRect newLendValueFrame = CGRectMake(103, 213, 42, 21);
_lendValueLabel.frame = newLendValueFrame;
CGRect newContainerFrame = CGRectMake(250*factor, 0, [CNX_Tools getLargestAttributeOfSize:[[UIScreen mainScreen] bounds].size] - 250*factor, 268);
_tableContainerView.frame = newContainerFrame;
CGRect newDetailFrame = CGRectMake(20, 10, newContainerFrame.size.width - 40 , 29);
_detailSelector.frame = newDetailFrame;
CGRect newTableFrame = CGRectMake(0, 49, newContainerFrame.size.width, 219);
_tableView.frame = newTableFrame;
}];
}
}
This method is called from method:
-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
switch (toInterfaceOrientation) {
case UIInterfaceOrientationPortrait:
[self buildViewElements:UIInterfaceOrientationMaskPortrait duration:duration];
break;
case UIInterfaceOrientationPortraitUpsideDown:
[self buildViewElements:UIInterfaceOrientationMaskPortrait duration:duration];
break;
case UIInterfaceOrientationLandscapeLeft:
[self buildViewElements:UIInterfaceOrientationMaskLandscape duration:duration];
break;
case UIInterfaceOrientationLandscapeRight:
[self buildViewElements:UIInterfaceOrientationMaskLandscape duration:duration];
break;
default:
break;
}
}
The method getLargestAttributeOfSize: returns the largest size attribute (height or width).
If I start the view in portrait I can tapp an the table cells and method tableView: didSelectRowAtIndexPath: is called. After a rotation to landscape mode all cells are not selectable and I cannot scroll in the table. But, if I leaf this screen and call ist again (in landscape mode), the same table cells are selectable, the method is called and I can stroll trough the table. If I rotate the device to portrait, I have the same faulty behavior. After a rotation of my device I can not interact with my table and its cells.
Can someone help me please or have an idea what's my issue here?
Thanks!
My guess is that a superview of your UITableView is not adjusted correctly. The input can than never reach your UITableView, but when it is started fresh all is well. Probably the view of your UIViewController.
Try setting clipsToBounds:YES to the superviews to see if your tableView is actually out of the views bounds.

Animating a UISlider

I'm animating a UIView, UIText, UILabel and UIImage element in my app to transition into position on button click which works perfectly. However the code I am using doesn't work on a UISlider and I can't figure out way. Can anyone help me out. My code is:
[UIView animateWithDuration:0.8f delay:0.0f options:UIViewAnimationOptionTransitionNone animations: ^{
if (!viewExpanded) { //x y width height
viewExpanded = YES; //going down
_blueMove.frame = CGRectMake(0, 0, 500, 150); //slide down panel
_titleLabel.frame = CGRectMake(30, 30, 247, 44); // player title
_timeElapsed.frame = CGRectMake(40, 95, 34, 21); //time counter
_duration.frame = CGRectMake(230, 95, 35, 21); //duration
_playerBg.frame = CGRectMake(0, 84, 320, 45); //player bg colour box
}else{ //going up
viewExpanded = NO;
_blueMove.frame = CGRectMake(0, 0, 500, 0);//slide down panel
_titleLabel.frame = CGRectMake(30, -40, 274, 44);// player title
_timeElapsed.frame = CGRectMake(40, -20, 34, 21); //time counter
_duration.frame = CGRectMake(230, -20, 35, 21); //duration
//_currentTimeSlider = CGRectMake(40, 0, 175, 34); //time slider
_playerBg.frame = CGRectMake(0, -45, 320, 45); //player bg colour box
}
You can see I've commented out an example of what I'm using in the else statement to animate my UISlider but this throws up an error.
Thanks for any help.
The code you have posted has the slider commented out
//_currentTimeSlider = CGRectMake(40, 0, 175, 34); //time slider
And it's also missing .frame

Detect device type & orientation to adjust view

I'm pretty certain I'm going about this in the completely wrong way now - but before I abandon ship & start again I thought I'd ask... I basically need to be able to detect the device that is using the app (iPhone 4 or iPhone 5) & the orientation the device is in & then adjust the output of my viewcontroller based on these - here is what I have:
To detect device (ok it doesn't detect device it's just if it's a bigger screen but thats OK for me!):
#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )
Using the macro to detect device, along with code to detect orientation & then adjust view:
- (void)doLayoutForOrientation:(UIInterfaceOrientation)orientation {
if (UIInterfaceOrientationIsPortrait(orientation)) {
_Logo.frame = CGRectMake(97, 50, 127, 150);
_timeLabel.frame = CGRectMake(17, 248, 286, 21);
_years.frame = CGRectMake(70, 277, 35, 50);
_yearsLabel.frame = CGRectMake(64, 335, 42, 21);
_months.frame = CGRectMake(145, 277, 35, 50);
_monthsLabel.frame = CGRectMake(131, 335, 58, 21);
_days.frame = CGRectMake(220, 277, 35, 50);
_daysLabel.frame = CGRectMake(216, 335, 39, 21);
_hours.frame = CGRectMake(70, 393, 35, 50);
_hoursLabel.frame = CGRectMake(62, 451, 46, 21);
_minutes.frame = CGRectMake(145, 393, 35, 50);
_minutesLabel.frame = CGRectMake(132, 451, 61, 21);
_seconds.frame = CGRectMake(220, 393, 35, 50);
_secondsLabel.frame = CGRectMake(203, 451, 68, 21);
} if (UIInterfaceOrientationIsLandscape(orientation) && IS_IPHONE_5) {
_Logo.frame = CGRectMake(221, 20, 127, 150);
_timeLabel.frame = CGRectMake(141, 178, 286, 21);
_years.frame = CGRectMake(87, 221, 35, 50);
_yearsLabel.frame = CGRectMake(83, 279, 42, 21);
_months.frame = CGRectMake(162, 221, 35, 50);
_monthsLabel.frame = CGRectMake(150, 279, 58, 21);
_days.frame = CGRectMake(234, 221, 35, 50);
_daysLabel.frame = CGRectMake(232, 279, 39, 21);
_hours.frame = CGRectMake(308, 221, 35, 50);
_hoursLabel.frame = CGRectMake(302, 279, 46, 21);
_minutes.frame = CGRectMake(385, 221, 35, 50);
_minutesLabel.frame = CGRectMake(372, 279, 61, 21);
_seconds.frame = CGRectMake(466, 221, 35, 50);
_secondsLabel.frame = CGRectMake(449, 279, 68, 21);
} else {
_Logo.frame = CGRectMake(177, 20, 127, 150);
_timeLabel.frame = CGRectMake(97, 178, 286, 21);
_years.frame = CGRectMake(27, 221, 35, 50);
_yearsLabel.frame = CGRectMake(23, 279, 42, 21);
_months.frame = CGRectMake(102, 221, 35, 50);
_monthsLabel.frame = CGRectMake(90, 279, 58, 21);
_days.frame = CGRectMake(174, 221, 35, 50);
_daysLabel.frame = CGRectMake(172, 279, 39, 21);
_hours.frame = CGRectMake(248, 221, 35, 50);
_hoursLabel.frame = CGRectMake(242, 279, 46, 21);
_minutes.frame = CGRectMake(325, 221, 35, 50);
_minutesLabel.frame = CGRectMake(312, 279, 61, 21);
_seconds.frame = CGRectMake(406, 221, 35, 50);
_secondsLabel.frame = CGRectMake(389, 279, 68, 21);
}
}
If I comment out the middle bit the app runs fine on the iPhone 5 simulator, but when I use the iPhone 4 simulator & rotate the device the labels go off the screen - this is my reason for needing to detect the device (its fine in portrait mode on both devices as the bottom set of labels dont go to the bottom of the screen).
If I run it as is - the labels & logo display in landscape view even if the device (any device) is in portrait mode/view.
I'm guessing the problem is some form of 'fall through' or logic error with my setup/plan but I cannot think of another way to word/program this at this point.
Thanks
I think you want the code in the else block to run only for 3.5 inches devices in landscape mode right?
In that case you need to add an else before the second if, otherwise the third block of code after the else statement will always run and if I understood correctly, it will create a landscape layout, regardless of the orientation you are passing in.

How to build a launcher for my iOS app?

I'm trying to build an homepage launcher for my app...
Something like the one from Three20.
I don't want to reinvent the wheel, but solutions like Three20 are not what I'm searching for: they are not updated to the latest iOS systems or devices (retina, ARC, iOS5/6) and they do much more than what I need (I basically need a set of buttons with a label that rotate on device rotation).
Right now I'm trying to build a 2x3 buttons grid that rotates on device rotation, but the code looks pretty crappy and I steel need to add iPhone5 support...
- (void) updateLayoutForNewOrientation: (UIInterfaceOrientation) orientation {
if (UIInterfaceOrientationIsPortrait(orientation)) {
button1.frame = CGRectMake(20, 59, 130, 80);
button2.frame = CGRectMake(170, 59, 130, 80);
button3.frame = CGRectMake(20, 176, 130, 80);
button4.frame = CGRectMake(170, 176, 130, 80);
button5.frame = CGRectMake(20, 293, 130, 80);
button6.frame = CGRectMake(170, 293, 130, 80);
label1.frame = CGRectMake(20, 147, 130, 21);
label2.frame = CGRectMake(170, 147, 130, 21);
label3.frame = CGRectMake(20, 264, 130, 21);
label4.frame = CGRectMake(170, 264, 130, 21);
label5.frame = CGRectMake(20, 381, 130, 21);
label6.frame = CGRectMake(170, 381, 130, 21);
} else {
button1.frame = CGRectMake(20, 59, 130, 60);
button2.frame = CGRectMake(177, 59, 130, 60);
button3.frame = CGRectMake(328, 59, 130, 60);
button4.frame = CGRectMake(20, 155, 130, 60);
button5.frame = CGRectMake(177, 155, 130, 60);
button6.frame = CGRectMake(328, 155, 130, 60);
label1.frame = CGRectMake(20, 127, 130, 21);
label2.frame = CGRectMake(177, 127, 130, 21);
label3.frame = CGRectMake(328, 127, 130, 21);
label4.frame = CGRectMake(20, 223, 130, 21);
label5.frame = CGRectMake(177, 223, 130, 21);
label6.frame = CGRectMake(328, 223, 130, 21);
}
}
Is the "place stuff, rotate it" approach the only way to build this kind of component? Is there any alternative?
You maybe want to code this yourself, but there's a fantastic open-source launcher here:
https://github.com/fieldforceapp/openspringboard
put the button and the label inside a view.
Then, on rotate you have to rearrange just the views.
Furthermore, you can use a for to rearrange them, so you can get that effect with a little code.
-(void)setScreenIconsToInterfaceRotation:(UIInterfaceOrientation)toInterfaceOrientation {
NSArray * viewsArray = [NSArray arrayWithObjects:view1,view2,view3,view4,view5,view6, nil];
int currentIndex = 0;
for (UIView * currentView in ViewsArray) {
int x;
int y;
int xseparation = 20;
int yseparation;
int height;
int width = 130;
if (toInterfaceOrientation==UIDeviceOrientationPortrait || toInterfaceOrientation==UIDeviceOrientationPortraitUpsideDown)
{
x = currentIndex %2;
y = currentIndex /2;
height = 101;
if (currentIndex < 2) {
yseparation = 59;
} else {
yseparation = 16;
}
} else {
x = currentIndex %3;
y = currentIndex /3;
height = 81;
if (currentIndex < 3) {
yseparation = 59;
} else {
yseparation = 15;
}
}
[currentView setFrame:CGRectMake(x*width+((x+1)*xseparation), y*height+((y+1)*yseparation), width, height)];
currentIndex++;
}
}
This is the code for your example
then for ios6
-(void)viewWillLayoutSubviews {
[self setScreenIconsToInterfaceRotation:[[UIApplication sharedApplication] statusBarOrientation]];
}
and ios5
-(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[self setScreenIconsToInterfaceRotation:toInterfaceOrientation];
}

Resources