How to Resize button animations programmatically - ios

I am new to Objective-C. I created an animation that move 3 buttons upwards. These buttons contain images. However, when this button animation occurs it resizes the button images and makes them HUGE. I tried to correct the code below to resize the button images, but I still get HUGE buttons. Can someone please help me? It should be Width:78 Height:76. I tried replacing width and height but it still doesn't work. Note: Just correct the code, I don't need a completely different answer.
-(IBAction)Search:(id)sender {
CGFloat screenWidth = self.view.bounds.size.width;
CGFloat screenHeight = self.view.bounds.size.height;
CGFloat normalizedX = (124 / 320); // You calculate these 'normalized' numbers, possibly from a designer's spec.
// it's the percent the amount should be over, as number from 0-1.
// This number is based on screen width of 320 having x 124 pt.
CGFloat startingX = normalizedX * screenWidth;
CGFloat startingY = (475 / 200) * screenHeight;
CGFloat width = (42 / 40) * screenWidth;
CGFloat height = (30 / 30) * screenHeight;
CGRect startingRect = CGRectMake(startingX, startingY, width, height);
self.button.frame = startingRect;
self.buttonTwo.frame = startingRect;
self.buttonThree.frame = startingRect;
// animate
[UIView animateWithDuration:0.75 animations:^{
CGFloat firstX = (13 / 770) * screenWidth;
CGFloat lowerY = (403 / 370) * screenHeight;
self.button.frame = CGRectMake(firstX, lowerY, width, height);
CGFloat secondX = (124 / 424) * screenWidth;
CGFloat upperY = (347 / 447) * screenHeight;
self.buttonTwo.frame = CGRectMake(secondX, upperY, width, height);
CGFloat thirdX = (232 / 680) * screenWidth;
self.buttonThree.frame = CGRectMake(thirdX, lowerY, width, height);
}];
}

Looks to me like your height and width math is wrong.
(42/40) * screenWidth will simplify to (1) * screenWidth, or the full width of the screen (The expression 42/40 will be done using integer math, resulting in 1.0. If it used floating point, you'd get 1.05 * screenWidth, which would make the images even bigger.)
You have a similar problem with your height calculation. You are setting the button to be the full height of the screen, and slightly wider.

Related

How to implement Auto Layout with Button Animations

I have an animation that moves three buttons upward on the screen programmatically. However, when I test it on the simulator for iPhone 6 or 4 the position of the buttons are all wrong (but are only right on the iPhone 5). How do I fix this. The buttons are built programmatically so I can't really use auto layout to position them on the view controller.
-(IBAction)Search:(id)sender {
self.button.frame = CGRectMake(124, 475, 78, 72);
self.buttonTwo.frame = CGRectMake(124, 475, 78, 76);
self.buttonThree.frame = CGRectMake(124, 475, 78, 76);
// animate
[UIView animateWithDuration:0.75 animations:^{
self.button.frame = CGRectMake(13, 403, 78, 72);
self.buttonTwo.frame = CGRectMake(124, 347, 78, 76);
self.buttonThree.frame = CGRectMake(232, 403, 78, 76);
You are using fixed values for frames, but the screens are different widths and/or heights.
If they are correct for iPhone 5-5s (Also known as iPhone 4") then one way to handle it is:
-(IBAction)Search:(id)sender {
CGFloat screenWidth = self.view.bounds.size.width;
CGFloat screenHeight = self.view.bounds.size.height;
CGFloat normalizedX = (124 / 320) // You calculate these 'normalized' numbers, possibly from a designer's spec.
// it's the percent the amount should be over, as number from 0-1.
// This number is based on screen width of 320 having x 124 pt.
CGFloat startingX = normalizedX * screenWidth;
CGFloat startingY = (475 / 588) * screenHeight;
CGFloat width = (78 / 320) * screenWidth;
CGFloat height = (72 / 588) * screenHeight;
CGRect startingRect = CGRectMake(startingX, startingY, width, height)
self.button.frame = startingRect;
self.buttonTwo.frame = startingRect;
self.buttonThree.frame = startingRect;
// animate
[UIView animateWithDuration:0.75 animations:^{
CGFloat firstX = (13 / 320) * screenWidth;
CGFloat lowerY = (403 / 588) * screenHeight;
self.button.frame = CGRectMake(firstX, lowerY, width, height);
CGFloat secondX = (124 / 320) * screenWidth;
CGFloat upperY = (347 / 588) * screenHeight;
self.buttonTwo.frame = CGRectMake(secondX, upperY, width, height);
CGFloat thirdX = (233 / 320) * ScreenWidth;
self.buttonThree.frame = CGRectMake(thirdX, lowerY, width, height);
}];
}
This will scale the size of everything up and keep the relative positions. Note UIButtons will have the same text size. You can play with these numbers until you get the effect you want. Hope this helps!

icarousel Vertical Scroll Effect on tableview with images

i am trying to apply iCarousel vertical type effect on tableview cell images.
But not set vertical scroll effect.
i also check this,
https://github.com/nicklockwood/iCarousel
but in this example only set horizontal scroll effect. and i want to set Vertical type effect.
so , suggest me some good demo link or with proper code solution.
this is some code for that ...
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform {
const CGFloat centerItemZoom = 1.6;
const CGFloat centerItemSpacing = 1.5;
CGFloat spacing = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.0f];
CGFloat absClampedOffset = MIN(1.0, fabs(offset));
CGFloat clampedOffset = MIN(1.0, MAX(-1.0, offset));
CGFloat scaleFactor = 1.0 + absClampedOffset * (1.0/centerItemZoom - 1.0);
offset = (scaleFactor * offset + scaleFactor * (centerItemSpacing - 1.0) * clampedOffset) * carousel.itemWidth * spacing;
if (carousel.vertical)
{
transform = CATransform3DTranslate(transform, 0.0f, offset, -absClampedOffset);
}
else
{
transform = CATransform3DTranslate(transform, offset, 0.0f, -absClampedOffset);
}
transform = CATransform3DScale(transform, scaleFactor, scaleFactor, 2.0f);
return transform;
}
but not work for my requirement.
Thank x in advance
if you want vertical scroll add this in your code
self.carousel.vertical = !self.carousel.vertical;

IOS Autolayout- Multiple images in one horizontal line of subview programmatically

I created a tableview header and added a subview to it.
I am trying to center multiple avatar images(fixed width and height) in a single line of this ui subview.
Max number of images=max(predefined).
Number of images that I would like to fit is n.
When 5 is max number of image,
n=1:
[......................image 1........................... ]
n=2:
[.................image 1.....image2...............]
n=3
[.........image 1.....image2....image3.........]
n=4
[...image 1....image2....image3......image4...]
n=5
[.imag 1....imag2....imag3....imag4....imag5.]
That is the placement should be centred with equal spacings.
How can I achieve this programatically?
I can do this by story board, by placing max images in a row, keeping equal leading and trailing spaces,
and when n=1, i will hide 1,2,4 and 5
while when n=2, i will hide 1,2,5
If you can target a Deployment Target of iOS 9 and up, use UIStackView. It's designed to handle this scenario.
If you can't do that yet, the following algorithm will work. It doesn't use constraints.
CGFloat tableWidth = ...; // This may change if you allow rotation.
CGFloat spacer = ...; // Amount of space between images goes here.
CGFloat imageWidth = images.count > 0 ? [[images[0] size] width] : 0.0;
CGFloat imageHeight = images.count > 0 ? [[images[0] size] height] : 0.0;
CGFloat totalWidth = images.count * imageWidth + (images.count - 1) * spacer;
CGFloat leftEdge = (tableWidth / 2.0) - (totalWidth / 2.0);
for (int i = 0; i < images.count; i++) {
UIImageView *iv = ...; // Create and configure with image[i].
CGRect frame = CGMakeRect(0, 0, imageWidth, imageHeight);
frame.origin.x = leftEdge + (i * imageWidth + i * spacer);
iv.frame = frame;
}

Dyamic frame calculation for UIImages in UITableViewCell

I am putting few icons on UITableViewCell. The number of icons can vary from 1 to 6. Icons should not have fixed X position and instead they should be dynamically placed considering the cell space. So if there are 3 icons they should look placed centric to the cell. Also, the icon spacing should also vary. For instance when it is 6 icons all of them will be placed with less margins in between and when there are 3 then margin will be more and so will be the X position.
Please suggest some quick way to calculate this frame. I am running the app both on iOS 6 and iOS 7.
This is what I have tried by far but this does not seems to work well with icon count variation. Also, in between space is not dynamic with this.
int maxIconTypes = 6;
CGFloat innerPadding = ([self isIOS7]) ? 15.0f : 9.0f;
CGRect adjustedBoundsIOS6 = [self bounds];
CGFloat adjustedWidth = ([self isIOS7]) ? self.bounds.size.width : adjustedBoundsIOS6.size.width;
CGFloat xOrigin = innerPadding;
CGFloat iconViewSize = 25.0f;
CGFloat ySpacer = (self.bounds.size.height - iconSize) / 2;
CGFloat xSpacer = ((adjustedWidth - (innerPadding * 2)) - (maxRequestTypes * iconViewSize)) / (maxIconTypes - 1);
for (NSString *icon in iconList) {
UIImageView *anIconView = [[UIImageView alloc] initWithImage:[UIImage icon]];
if (anIconView.image) {
anIconView.frame = CGRectMake(xOrigin + originPadding, ySpacer, anIconView.image.size.width, anIconView.image.size.height);
[self.contentView addSubview:anIconView];
xOrigin += anIconView.frame.size.width + xSpacer;
}
}
However many items you have, the number of spaces is the same if you want equal spacing with half spacing at the start and end:
half width full width half
half width full width full width half
So, you just need to know the full width available and the combined width of the items. A simple multiply (to get the combined width of the items) and subtract (from the full width available) gives you the remaining width for the 'spacers'. Divide by the number of items to get the xSpacer, set the initial xOrigin to xSpacer * 0.5
Here is an example of what Wain is explaining:
//Im doing this in a UIView rather than in a UITableViewCell but idea is the same
int cellWidth = CGRectGetWidth(self.view.bounds);
//num of icons
int iconCount = 6;
//size of icon
int iconSize = 25;
//The max padding we can have
float maxPadding = (cellWidth - (iconSize * iconCount)) / iconCount;
//Our offset
float xOrigin = maxPadding / 2;
//Loooop
for (int i = 0; i < iconCount; i++) {
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(xOrigin, self.view.center.y, iconSize, iconSize)];
xOrigin += (iconSize + maxPadding);
label.backgroundColor = [UIColor blueColor];
[self.view addSubview:label];
}

Get the distance between two CGPoints in a UIImageView nested in a UIScrollView

CGRect screenSize = [[UIScreen mainScreen]bounds];
CGFloat screenWidth = screenSize.size.width;
CGRect visibleRect;
visibleRect.origin = scrollView.contentOffset;
visibleRect.size = imageView.frame.size;
CGPoint midPoint = CGPointMake(visibleRect.origin.x + visibleRect.size.width / 2, visibleRect.origin.y + visibleRect.size.height / 2);
CGPoint place = CGPointMake(class.xValue, class.yValue);
xValue and yValue being 'int's declared in the class.
-(int)distanceFrom:(CGPoint)point1 to:(CGPoint)point2{
CGFloat xDist = ((point2.x) - (point1.x));
CGFloat yDist = ((point2.y) - (point1.y));
return (sqrt((xDist * xDist) + (yDist * yDist)));
}
The problem is that once I change the zoomScale by scrolling in the app and recall the method the numbers change drastically (~1000 pixels). How to I take into account for the zoomScale? Thanks in advance,
Alex
when you are zooming in, the result from distance method is multiplied by zoomScale of the scroll view. If you want get actual distance, try dividing the distance by zoomScale of the scroll view.

Resources