How to go about dynamically resizing objects at a timed rate

Question

What is the best way to go about resizing an object when it is touched?

Basically, I want to have a box (ideally one that can have rounded corners). When the left half of the box is clicked, the box will slowly and smoothly increase in size on the y axis, pushing down the objects of similar type below it. When the right half of the box is clicked, the box will slowly and smoothly shrink in size.

I'm wondering what types of objects I should use for this. I'm thinking buttons, as they can have rounded corners (How to round the corners of a button). I will have one big button that will have a colored background and two smaller buttons inside that will each take up half the parent button.

I'll give all the buttons integer identifiers in ascending order from top to bottom. When button 3 is made larger, I will move all buttons 4 and up down correspondingly.

Basically, the buttons can only be fixed sizes (let's say only multiples of 10 for simplicity) but I want to animate them moving smoothly between these sizes. Additionally, when the user first taps the button, I want the animation to start and continue linearly until the user removes their finger, at which point I want it to animate to the next multiple of 10.. How should I go about this part?

I also need to make the view that contains the buttons scrollable, as I want people to be able to make boxes taller than the height of the screen. How can I go about this?

If you have any other suggestions they are welcome too.

You want to make your buttons scrollable? Probably better using a UIScrollView with a UITapGestureRecognizer. — jbat100, Nov 15 '13 at 09:29
Ya I want the buttons to be scrollable. Why would I need the gesture recognizer if I had the button tap event already? — Max Hudson, Nov 15 '13 at 09:30
Because UIButtons are really really not meant to be scrollable. So I was suggesting not using a UIButton at all. — jbat100, Nov 15 '13 at 09:33

score 2 · Accepted Answer · edited May 23 '17 at 10:31

There is no problem to round up the corners of other UI elements, you just have to include

#import <QuartzCore/QuartzCore.h>

//and create corner on layer of ui element
[_myView.layer setCornerRadius:8.0f];

To detect which part has been clicked, use the methods touchesBegan: or touchesEnded: like in this post. Every time you click on the screen you have to detect if the touch is on your ui element and if it is on the left or right part.

For animating your ui element I would recommend to create a category for UIView. For example this code would move your element to another position:

- (void)animateMyViewWithDuration:(float)duration 
            andRepeat:(int)repeat{

    [UIView animateWithDuration:duration animations:^{
        self.frame = CGRectMake(self.frame.origin.x,
                                  self.frame.origin.y + 20,
                                  self.frame.size.width,
                                  self.frame.size.height);
    } completion:^(BOOL finished) {

        if(repeat > 0){
           [self animateMyView:view 
                  withDuration:duration 
                     andRepeat:(repeat - 1)];
        }
    }];
}

Include it inside your new category, include the category inside your UIViewController:

#import "UIView+CategoryName.h"

and call it inside your touch methods if the touch fits your needs:

[_myView animateMyViewWithDuration:0.2f andRepeat:5];

you can write category methods to move your view like you want and if you do it abstract you could use the new category also in your next projects.

How to go about dynamically resizing objects at a timed rate

1 Answers1